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.
92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
import Service from '@ember/service';
|
|
import RSVP from 'rsvp';
|
|
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import { findAll, render, settled } from '@ember/test-helpers';
|
|
import hbs from 'htmlbars-inline-precompile';
|
|
import PromiseObject from 'nomad-ui/utils/classes/promise-object';
|
|
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
|
|
|
|
module('Integration | Component | app breadcrumbs', function(hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
hooks.beforeEach(function() {
|
|
const mockBreadcrumbs = Service.extend({
|
|
init() {
|
|
this._super(...arguments);
|
|
this.breadcrumbs = [];
|
|
},
|
|
});
|
|
|
|
this.owner.register('service:breadcrumbs', mockBreadcrumbs);
|
|
this.breadcrumbs = this.owner.lookup('service:breadcrumbs');
|
|
});
|
|
|
|
const commonCrumbs = [{ label: 'One', args: ['one'] }, { label: 'Two', args: ['two'] }];
|
|
|
|
const template = hbs`
|
|
<ul><AppBreadcrumbs /></ul>
|
|
`;
|
|
|
|
test('breadcrumbs comes from the breadcrumbs service', async function(assert) {
|
|
this.breadcrumbs.set('breadcrumbs', commonCrumbs);
|
|
|
|
await render(template);
|
|
|
|
assert.equal(
|
|
findAll('[data-test-breadcrumb]').length,
|
|
commonCrumbs.length,
|
|
'The number of crumbs matches the crumbs from the service'
|
|
);
|
|
});
|
|
|
|
test('every breadcrumb is rendered correctly', async function(assert) {
|
|
this.breadcrumbs.set('breadcrumbs', commonCrumbs);
|
|
|
|
await render(template);
|
|
|
|
const renderedCrumbs = findAll('[data-test-breadcrumb]');
|
|
|
|
renderedCrumbs.forEach((crumb, index) => {
|
|
assert.equal(
|
|
crumb.textContent.trim(),
|
|
commonCrumbs[index].label,
|
|
`Crumb ${index} is ${commonCrumbs[index].label}`
|
|
);
|
|
});
|
|
});
|
|
|
|
test('when breadcrumbs are pending promises, an ellipsis is rendered', async function(assert) {
|
|
let resolvePromise;
|
|
const promise = new RSVP.Promise(resolve => {
|
|
resolvePromise = resolve;
|
|
});
|
|
|
|
this.breadcrumbs.set('breadcrumbs', [
|
|
{ label: 'One', args: ['one'] },
|
|
PromiseObject.create({ promise }),
|
|
{ label: 'Three', args: ['three'] },
|
|
]);
|
|
|
|
await render(template);
|
|
|
|
assert.equal(
|
|
findAll('[data-test-breadcrumb]')[1].textContent.trim(),
|
|
'…',
|
|
'Promise breadcrumb is in a loading state'
|
|
);
|
|
|
|
await componentA11yAudit(this.element, assert);
|
|
|
|
resolvePromise({ label: 'Two', args: ['two'] });
|
|
|
|
return settled().then(() => {
|
|
assert.equal(
|
|
findAll('[data-test-breadcrumb]')[1].textContent.trim(),
|
|
'Two',
|
|
'Promise breadcrumb has resolved and now renders Two'
|
|
);
|
|
});
|
|
});
|
|
});
|