open-nomad/ui/tests/integration/components/job-page/parts/latest-deployment-test.js
Buck Doyle 29de8f4f76
Add component accessibility auditing and fixes (#8679)
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.
2020-08-25 10:56:02 -05:00

183 lines
6.3 KiB
JavaScript

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { click, find, render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import moment from 'moment';
import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
module('Integration | Component | job-page/parts/latest-deployment', function(hooks) {
setupRenderingTest(hooks);
hooks.beforeEach(function() {
fragmentSerializerInitializer(this.owner);
window.localStorage.clear();
this.store = this.owner.lookup('service:store');
this.server = startMirage();
this.server.create('namespace');
});
hooks.afterEach(function() {
this.server.shutdown();
window.localStorage.clear();
});
test('there is no latest deployment section when the job has no deployments', async function(assert) {
this.server.create('job', {
type: 'service',
noDeployments: true,
createAllocations: false,
});
await this.store.findAll('job');
this.set('job', this.store.peekAll('job').get('firstObject'));
await render(hbs`
<JobPage::Parts::LatestDeployment @job={{job}} />)
`);
assert.notOk(find('[data-test-active-deployment]'), 'No active deployment');
});
test('the latest deployment section shows up for the currently running deployment', async function(assert) {
this.server.create('job', {
type: 'service',
createAllocations: false,
activeDeployment: true,
});
await this.store.findAll('job');
this.set('job', this.store.peekAll('job').get('firstObject'));
await render(hbs`
<JobPage::Parts::LatestDeployment @job={{job}} />
`);
const deployment = await this.get('job.latestDeployment');
const version = await deployment.get('version');
assert.ok(find('[data-test-active-deployment]'), 'Active deployment');
assert.ok(
find('[data-test-active-deployment]').classList.contains('is-info'),
'Running deployment gets the is-info class'
);
assert.equal(
find('[data-test-active-deployment-stat="id"]').textContent.trim(),
deployment.get('shortId'),
'The active deployment is the most recent running deployment'
);
assert.equal(
find('[data-test-active-deployment-stat="submit-time"]').textContent.trim(),
moment(version.get('submitTime')).fromNow(),
'Time since the job was submitted is in the active deployment header'
);
assert.equal(
find('[data-test-deployment-metric="canaries"]').textContent.trim(),
`${deployment.get('placedCanaries')} / ${deployment.get('desiredCanaries')}`,
'Canaries, both places and desired, are in the metrics'
);
assert.equal(
find('[data-test-deployment-metric="placed"]').textContent.trim(),
deployment.get('placedAllocs'),
'Placed allocs aggregates across task groups'
);
assert.equal(
find('[data-test-deployment-metric="desired"]').textContent.trim(),
deployment.get('desiredTotal'),
'Desired allocs aggregates across task groups'
);
assert.equal(
find('[data-test-deployment-metric="healthy"]').textContent.trim(),
deployment.get('healthyAllocs'),
'Healthy allocs aggregates across task groups'
);
assert.equal(
find('[data-test-deployment-metric="unhealthy"]').textContent.trim(),
deployment.get('unhealthyAllocs'),
'Unhealthy allocs aggregates across task groups'
);
assert.equal(
find('[data-test-deployment-notification]').textContent.trim(),
deployment.get('statusDescription'),
'Status description is in the metrics block'
);
await componentA11yAudit(this.element, assert);
});
test('when there is no running deployment, the latest deployment section shows up for the last deployment', async function(assert) {
this.server.create('job', {
type: 'service',
createAllocations: false,
noActiveDeployment: true,
});
await this.store.findAll('job');
this.set('job', this.store.peekAll('job').get('firstObject'));
await render(hbs`
<JobPage::Parts::LatestDeployment @job={{job}} />
`);
assert.ok(find('[data-test-active-deployment]'), 'Active deployment');
assert.notOk(
find('[data-test-active-deployment]').classList.contains('is-info'),
'Non-running deployment does not get the is-info class'
);
});
test('the latest deployment section can be expanded to show task groups and allocations', async function(assert) {
this.server.create('node');
this.server.create('job', { type: 'service', activeDeployment: true });
await this.store.findAll('job');
this.set('job', this.store.peekAll('job').get('firstObject'));
await render(hbs`
<JobPage::Parts::LatestDeployment @job={{job}} />
`);
assert.notOk(find('[data-test-deployment-task-groups]'), 'Task groups not found');
assert.notOk(find('[data-test-deployment-allocations]'), 'Allocations not found');
await click('[data-test-deployment-toggle-details]');
assert.ok(find('[data-test-deployment-task-groups]'), 'Task groups found');
assert.ok(find('[data-test-deployment-allocations]'), 'Allocations found');
await componentA11yAudit(this.element, assert);
});
test('each task group in the expanded task group section shows task group details', async function(assert) {
this.server.create('node');
this.server.create('job', { type: 'service', activeDeployment: true });
await this.store.findAll('job');
const job = this.store.peekAll('job').get('firstObject');
this.set('job', job);
await render(hbs`
<JobPage::Parts::LatestDeployment @job={{job}} />
`);
await click('[data-test-deployment-toggle-details]');
const task = job.get('runningDeployment.taskGroupSummaries.firstObject');
const findForTaskGroup = selector => find(`[data-test-deployment-task-group-${selector}]`);
assert.equal(findForTaskGroup('name').textContent.trim(), task.get('name'));
assert.equal(
findForTaskGroup('progress-deadline').textContent.trim(),
moment(task.get('requireProgressBy')).format("MMM DD, 'YY HH:mm:ss ZZ")
);
});
});