github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/das/recommendation-chart-test.js (about) 1 import { module, test } from 'qunit'; 2 import { setupRenderingTest } from 'ember-qunit'; 3 import { render, triggerEvent } from '@ember/test-helpers'; 4 import { hbs } from 'ember-cli-htmlbars'; 5 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; 6 7 module('Integration | Component | das/recommendation-chart', function(hooks) { 8 setupRenderingTest(hooks); 9 10 test('it renders a chart for a recommended CPU increase', async function(assert) { 11 this.set('resource', 'CPU'); 12 this.set('current', 1312); 13 this.set('recommended', 1919); 14 this.set('stats', {}); 15 16 await render( 17 hbs`<Das::RecommendationChart 18 @resource={{resource}} 19 @currentValue={{current}} 20 @recommendedValue={{recommended}} 21 @stats={{stats}} 22 />` 23 ); 24 25 assert.dom('.recommendation-chart.increase').exists(); 26 assert.dom('.recommendation-chart .resource').hasText('CPU'); 27 assert.dom('.recommendation-chart .icon-is-arrow-up').exists(); 28 assert.dom('text.percent').hasText('+46%'); 29 await componentA11yAudit(this.element, assert); 30 }); 31 32 test('it renders a chart for a recommended memory decrease', async function(assert) { 33 this.set('resource', 'MemoryMB'); 34 this.set('current', 1919); 35 this.set('recommended', 1312); 36 this.set('stats', {}); 37 38 await render( 39 hbs`<Das::RecommendationChart 40 @resource={{resource}} 41 @currentValue={{current}} 42 @recommendedValue={{recommended}} 43 @stats={{stats}} 44 />` 45 ); 46 47 assert.dom('.recommendation-chart.decrease').exists(); 48 assert.dom('.recommendation-chart .resource').hasText('Mem'); 49 assert.dom('.recommendation-chart .icon-is-arrow-down').exists(); 50 assert.dom('text.percent').hasText('-32%'); 51 await componentA11yAudit(this.element, assert); 52 }); 53 54 test('it handles the maximum being far beyond the recommended', async function(assert) { 55 this.set('resource', 'CPU'); 56 this.set('current', 1312); 57 this.set('recommended', 1919); 58 this.set('stats', { 59 max: 3000, 60 }); 61 62 await render( 63 hbs`<Das::RecommendationChart 64 @resource={{resource}} 65 @currentValue={{current}} 66 @recommendedValue={{recommended}} 67 @stats={{stats}} 68 />` 69 ); 70 71 const chartSvg = this.element.querySelector('.recommendation-chart svg'); 72 const maxLine = chartSvg.querySelector('line.stat.max'); 73 74 assert.ok(maxLine.getAttribute('x1') < chartSvg.clientWidth); 75 }); 76 77 test('it can be disabled and will show no delta', async function(assert) { 78 this.set('resource', 'CPU'); 79 this.set('current', 1312); 80 this.set('recommended', 1919); 81 this.set('stats', {}); 82 83 await render( 84 hbs`<Das::RecommendationChart 85 @resource={{resource}} 86 @currentValue={{current}} 87 @recommendedValue={{recommended}} 88 @stats={{stats}} 89 @disabled={{true}} 90 />` 91 ); 92 93 assert.dom('.recommendation-chart.disabled'); 94 assert.dom('.recommendation-chart.increase').doesNotExist(); 95 assert.dom('.recommendation-chart rect.delta').doesNotExist(); 96 assert.dom('.recommendation-chart .changes').doesNotExist(); 97 assert.dom('.recommendation-chart .resource').hasText('CPU'); 98 assert.dom('.recommendation-chart .icon-is-arrow-up').exists(); 99 await componentA11yAudit(this.element, assert); 100 }); 101 102 test('the stats labels shift aligment and disappear to account for space', async function(assert) { 103 this.set('resource', 'CPU'); 104 this.set('current', 50); 105 this.set('recommended', 100); 106 107 this.set('stats', { 108 mean: 5, 109 p99: 99, 110 max: 100, 111 }); 112 113 await render( 114 hbs`<Das::RecommendationChart 115 @resource={{resource}} 116 @currentValue={{current}} 117 @recommendedValue={{recommended}} 118 @stats={{stats}} 119 />` 120 ); 121 122 assert.dom('[data-test-label=max]').hasClass('right'); 123 124 this.set('stats', { 125 mean: 5, 126 p99: 6, 127 max: 100, 128 }); 129 130 assert.dom('[data-test-label=max]').hasNoClass('right'); 131 assert.dom('[data-test-label=p99]').hasClass('right'); 132 133 this.set('stats', { 134 mean: 5, 135 p99: 6, 136 max: 7, 137 }); 138 139 assert.dom('[data-test-label=max]').hasClass('right'); 140 assert.dom('[data-test-label=p99]').hasClass('hidden'); 141 }); 142 143 test('a legend tooltip shows the sorted stats values on hover', async function(assert) { 144 this.set('resource', 'CPU'); 145 this.set('current', 50); 146 this.set('recommended', 101); 147 148 this.set('stats', { 149 mean: 5, 150 p99: 99, 151 max: 100, 152 min: 1, 153 median: 55, 154 }); 155 156 await render( 157 hbs`<Das::RecommendationChart 158 @resource={{resource}} 159 @currentValue={{current}} 160 @recommendedValue={{recommended}} 161 @stats={{stats}} 162 />` 163 ); 164 165 assert.dom('.chart-tooltip').isNotVisible(); 166 167 await triggerEvent('.recommendation-chart', 'mousemove'); 168 169 assert.dom('.chart-tooltip').isVisible(); 170 171 assert.dom('.chart-tooltip li:nth-child(1)').hasText('Min 1'); 172 assert.dom('.chart-tooltip li:nth-child(2)').hasText('Mean 5'); 173 assert.dom('.chart-tooltip li:nth-child(3)').hasText('Current 50'); 174 assert.dom('.chart-tooltip li:nth-child(4)').hasText('Median 55'); 175 assert.dom('.chart-tooltip li:nth-child(5)').hasText('99th 99'); 176 assert.dom('.chart-tooltip li:nth-child(6)').hasText('Max 100'); 177 assert.dom('.chart-tooltip li:nth-child(7)').hasText('New 101'); 178 179 assert.dom('.chart-tooltip li.active').doesNotExist(); 180 181 await triggerEvent('.recommendation-chart text.changes.new', 'mouseenter'); 182 assert.dom('.chart-tooltip li:nth-child(7).active').exists(); 183 184 await triggerEvent('.recommendation-chart line.stat.max', 'mouseenter'); 185 assert.dom('.chart-tooltip li:nth-child(6).active').exists(); 186 187 await triggerEvent('.recommendation-chart rect.stat.p99', 'mouseenter'); 188 assert.dom('.chart-tooltip li:nth-child(5).active').exists(); 189 190 await triggerEvent('.recommendation-chart', 'mouseleave'); 191 192 assert.dom('.chart-tooltip').isNotVisible(); 193 }); 194 });