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