github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/gauge-chart-test.js (about) 1 import { find, render } from '@ember/test-helpers'; 2 import { module, test } from 'qunit'; 3 import { setupRenderingTest } from 'ember-qunit'; 4 import hbs from 'htmlbars-inline-precompile'; 5 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; 6 import { create } from 'ember-cli-page-object'; 7 import gaugeChart from 'nomad-ui/tests/pages/components/gauge-chart'; 8 9 const GaugeChart = create(gaugeChart()); 10 11 module('Integration | Component | gauge chart', function(hooks) { 12 setupRenderingTest(hooks); 13 14 const commonProperties = () => ({ 15 value: 5, 16 total: 10, 17 label: 'Gauge', 18 }); 19 20 test('presents as an svg, a formatted percentage, and a label', async function(assert) { 21 const props = commonProperties(); 22 this.setProperties(props); 23 24 await render(hbs` 25 <GaugeChart 26 @value={{value}} 27 @total={{total}} 28 @label={{label}} /> 29 `); 30 31 assert.equal(GaugeChart.label, props.label); 32 assert.equal(GaugeChart.percentage, '50%'); 33 assert.ok(GaugeChart.svgIsPresent); 34 35 await componentA11yAudit(this.element, assert); 36 }); 37 38 test('the width of the chart is determined based on the container and the height is a function of the width', async function(assert) { 39 const props = commonProperties(); 40 this.setProperties(props); 41 42 await render(hbs` 43 <div style="width:100px"> 44 <GaugeChart 45 @value={{value}} 46 @total={{total}} 47 @label={{label}} /> 48 </div> 49 `); 50 51 const svg = find('[data-test-gauge-svg]'); 52 53 assert.equal(window.getComputedStyle(svg).width, '100px'); 54 assert.equal(svg.getAttribute('height'), 50); 55 }); 56 });