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.
104 lines
2.9 KiB
JavaScript
104 lines
2.9 KiB
JavaScript
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import { click, find, findAll, render } from '@ember/test-helpers';
|
|
import hbs from 'htmlbars-inline-precompile';
|
|
import moment from 'moment';
|
|
import setupCodeMirror from 'nomad-ui/tests/helpers/codemirror';
|
|
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
|
|
|
|
module('Integration | Component | scale-events-chart', function(hooks) {
|
|
setupRenderingTest(hooks);
|
|
setupCodeMirror(hooks);
|
|
|
|
const events = [
|
|
{
|
|
time: new Date('2020-08-05T04:06:00'),
|
|
count: 2,
|
|
hasCount: true,
|
|
meta: {},
|
|
message: '',
|
|
error: false,
|
|
},
|
|
{
|
|
time: new Date('2020-08-06T04:06:00'),
|
|
count: 3,
|
|
hasCount: true,
|
|
meta: {},
|
|
message: '',
|
|
error: false,
|
|
},
|
|
{
|
|
time: new Date('2020-08-07T04:06:00'),
|
|
count: 4,
|
|
hasCount: true,
|
|
meta: {},
|
|
message: '',
|
|
error: false,
|
|
},
|
|
{
|
|
time: new Date('2020-08-06T04:06:00'),
|
|
hasCount: false,
|
|
meta: { prop: { deep: true }, five: 5 },
|
|
message: 'Something went wrong',
|
|
error: true,
|
|
},
|
|
{
|
|
time: new Date('2020-08-05T04:06:00'),
|
|
hasCount: false,
|
|
meta: {},
|
|
message: 'Something insightful',
|
|
error: false,
|
|
},
|
|
];
|
|
|
|
test('each event is rendered as an annotation', async function(assert) {
|
|
this.set('events', events);
|
|
await render(hbs`<ScaleEventsChart @events={{this.events}} />`);
|
|
|
|
assert.equal(
|
|
findAll('[data-test-annotation]').length,
|
|
events.filter(ev => ev.count == null).length
|
|
);
|
|
await componentA11yAudit(this.element, assert);
|
|
});
|
|
|
|
test('clicking an annotation presents details for the event', async function(assert) {
|
|
const annotation = events
|
|
.rejectBy('hasCount')
|
|
.sortBy('time')
|
|
.reverse()[0];
|
|
|
|
this.set('events', events);
|
|
await render(hbs`<ScaleEventsChart @events={{this.events}} />`);
|
|
|
|
assert.notOk(find('[data-test-event-details]'));
|
|
await click('[data-test-annotation] button');
|
|
|
|
assert.ok(find('[data-test-event-details]'));
|
|
assert.equal(
|
|
find('[data-test-timestamp]').textContent,
|
|
moment(annotation.time).format('MMM DD HH:mm:ss ZZ')
|
|
);
|
|
assert.equal(find('[data-test-message]').textContent, annotation.message);
|
|
assert.equal(
|
|
getCodeMirrorInstance('[data-test-json-viewer]').getValue(),
|
|
JSON.stringify(annotation.meta, null, 2)
|
|
);
|
|
|
|
await componentA11yAudit(this.element, assert);
|
|
});
|
|
|
|
test('clicking an active annotation closes event details', async function(assert) {
|
|
this.set('events', events);
|
|
|
|
await render(hbs`<ScaleEventsChart @events={{this.events}} />`);
|
|
assert.notOk(find('[data-test-event-details]'));
|
|
|
|
await click('[data-test-annotation] button');
|
|
assert.ok(find('[data-test-event-details]'));
|
|
|
|
await click('[data-test-annotation] button');
|
|
assert.notOk(find('[data-test-event-details]'));
|
|
});
|
|
});
|