mirror of
https://github.com/kemko/nomad.git
synced 2026-01-03 17:05:43 +03:00
5eddb14a33
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.
106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
import { module, test } from 'qunit';
|
||
import { setupRenderingTest } from 'ember-qunit';
|
||
import { render, settled } from '@ember/test-helpers';
|
||
import hbs from 'htmlbars-inline-precompile';
|
||
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
|
||
import { create } from 'ember-cli-page-object';
|
||
import LifecycleChart from 'nomad-ui/tests/pages/components/lifecycle-chart';
|
||
|
||
const Chart = create(LifecycleChart);
|
||
|
||
const tasks = [
|
||
{
|
||
lifecycleName: 'main',
|
||
name: 'main two',
|
||
},
|
||
{
|
||
lifecycleName: 'main',
|
||
name: 'main one',
|
||
},
|
||
{
|
||
lifecycleName: 'prestart',
|
||
name: 'prestart',
|
||
},
|
||
{
|
||
lifecycleName: 'sidecar',
|
||
name: 'sidecar',
|
||
},
|
||
];
|
||
|
||
module('Integration | Component | lifecycle-chart', function(hooks) {
|
||
setupRenderingTest(hooks);
|
||
|
||
test('it renders stateless phases and lifecycle- and name-sorted tasks', async function(assert) {
|
||
this.set('tasks', tasks);
|
||
|
||
await render(hbs`<LifecycleChart @tasks={{tasks}} />`);
|
||
assert.ok(Chart.isPresent);
|
||
|
||
assert.equal(Chart.phases[0].name, 'Prestart');
|
||
assert.equal(Chart.phases[1].name, 'Main');
|
||
|
||
Chart.phases.forEach(phase => assert.notOk(phase.isActive));
|
||
|
||
assert.deepEqual(Chart.tasks.mapBy('name'), ['prestart', 'sidecar', 'main one', 'main two']);
|
||
assert.deepEqual(Chart.tasks.mapBy('lifecycle'), [
|
||
'Prestart Task',
|
||
'Sidecar Task',
|
||
'Main Task',
|
||
'Main Task',
|
||
]);
|
||
|
||
assert.ok(Chart.tasks[0].isPrestart);
|
||
assert.ok(Chart.tasks[1].isSidecar);
|
||
assert.ok(Chart.tasks[2].isMain);
|
||
|
||
Chart.tasks.forEach(task => {
|
||
assert.notOk(task.isActive);
|
||
assert.notOk(task.isFinished);
|
||
});
|
||
|
||
await componentA11yAudit(this.element, assert);
|
||
});
|
||
|
||
test('it doesn’t render when there’s only one phase', async function(assert) {
|
||
this.set('tasks', [
|
||
{
|
||
lifecycleName: 'main',
|
||
},
|
||
]);
|
||
|
||
await render(hbs`<LifecycleChart @tasks={{tasks}} />`);
|
||
assert.notOk(Chart.isPresent);
|
||
});
|
||
|
||
test('it reflects phase and task states when states are passed in', async function(assert) {
|
||
this.set(
|
||
'taskStates',
|
||
tasks.map(task => {
|
||
return { task };
|
||
})
|
||
);
|
||
|
||
await render(hbs`<LifecycleChart @taskStates={{taskStates}} />`);
|
||
assert.ok(Chart.isPresent);
|
||
|
||
Chart.phases.forEach(phase => assert.notOk(phase.isActive));
|
||
|
||
Chart.tasks.forEach(task => {
|
||
assert.notOk(task.isActive);
|
||
assert.notOk(task.isFinished);
|
||
});
|
||
|
||
this.set('taskStates.firstObject.state', 'running');
|
||
await settled();
|
||
|
||
assert.ok(Chart.phases[1].isActive);
|
||
assert.ok(Chart.tasks[3].isActive);
|
||
await componentA11yAudit(this.element, assert);
|
||
|
||
this.set('taskStates.firstObject.finishedAt', new Date());
|
||
await settled();
|
||
|
||
assert.ok(Chart.tasks[3].isFinished);
|
||
});
|
||
});
|