github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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      assert.expect(4);
    22  
    23      const props = commonProperties();
    24      this.setProperties(props);
    25  
    26      await render(hbs`
    27        <GaugeChart
    28          @value={{value}}
    29          @total={{total}}
    30          @label={{label}} />
    31      `);
    32  
    33      assert.equal(GaugeChart.label, props.label);
    34      assert.equal(GaugeChart.percentage, '50%');
    35      assert.ok(GaugeChart.svgIsPresent);
    36  
    37      await componentA11yAudit(this.element, assert);
    38    });
    39  
    40    test('the width of the chart is determined based on the container and the height is a function of the width', async function (assert) {
    41      const props = commonProperties();
    42      this.setProperties(props);
    43  
    44      await render(hbs`
    45        <div style="width:100px">
    46          <GaugeChart
    47            @value={{value}}
    48            @total={{total}}
    49            @label={{label}} />
    50        </div>
    51      `);
    52  
    53      const svg = find('[data-test-gauge-svg]');
    54  
    55      assert.equal(window.getComputedStyle(svg).width, '100px');
    56      assert.equal(svg.getAttribute('height'), 50);
    57    });
    58  });