29de8f4f76
This continues #8455 by adding accessibility audits to component integration tests and fixing associated errors. It adds audits to existing tests rather than adding separate ones to facilitate auditing the various permutations a component’s rendering can go through. It also adds linting to ensure audits happen in component tests. This necessitated consolidating test files that were scattered.
57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
import { find, render } from '@ember/test-helpers';
|
|
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import hbs from 'htmlbars-inline-precompile';
|
|
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
|
|
import { create } from 'ember-cli-page-object';
|
|
import gaugeChart from 'nomad-ui/tests/pages/components/gauge-chart';
|
|
|
|
const GaugeChart = create(gaugeChart());
|
|
|
|
module('Integration | Component | gauge chart', function(hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
const commonProperties = () => ({
|
|
value: 5,
|
|
total: 10,
|
|
label: 'Gauge',
|
|
});
|
|
|
|
test('presents as an svg, a formatted percentage, and a label', async function(assert) {
|
|
const props = commonProperties();
|
|
this.setProperties(props);
|
|
|
|
await render(hbs`
|
|
<GaugeChart
|
|
@value={{value}}
|
|
@total={{total}}
|
|
@label={{label}} />
|
|
`);
|
|
|
|
assert.equal(GaugeChart.label, props.label);
|
|
assert.equal(GaugeChart.percentage, '50%');
|
|
assert.ok(GaugeChart.svgIsPresent);
|
|
|
|
await componentA11yAudit(this.element, assert);
|
|
});
|
|
|
|
test('the width of the chart is determined based on the container and the height is a function of the width', async function(assert) {
|
|
const props = commonProperties();
|
|
this.setProperties(props);
|
|
|
|
await render(hbs`
|
|
<div style="width:100px">
|
|
<GaugeChart
|
|
@value={{value}}
|
|
@total={{total}}
|
|
@label={{label}} />
|
|
</div>
|
|
`);
|
|
|
|
const svg = find('[data-test-gauge-svg]');
|
|
|
|
assert.equal(window.getComputedStyle(svg).width, '100px');
|
|
assert.equal(svg.getAttribute('height'), 50);
|
|
});
|
|
});
|