open-nomad/ui/tests/integration/components/app-breadcrumbs-test.js
2022-01-20 10:39:02 -05:00

79 lines
2.4 KiB
JavaScript

/* eslint-disable ember-a11y-testing/a11y-audit-called */
import { setComponentTemplate } from '@ember/component';
import templateOnlyComponent from '@ember/component/template-only';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { findAll, render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | app breadcrumbs', function (hooks) {
setupRenderingTest(hooks);
const commonCrumbs = [
{ label: 'Jobs', args: ['jobs.index'] },
{ label: 'Job', args: ['jobs.job.index'] },
];
test('every breadcrumb is rendered correctly', async function (assert) {
assert.expect(3);
this.set('commonCrumbs', commonCrumbs);
await render(hbs`
<AppBreadcrumbs />
{{#each this.commonCrumbs as |crumb|}}
<Breadcrumb @crumb={{hash label=crumb.label args=crumb.args }} />
{{/each}}
`);
assert
.dom('[data-test-breadcrumb-default]')
.exists(
'We register the default breadcrumb component if no type is specified on the crumb'
);
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 we register a crumb with a type property, a dedicated breadcrumb/<type> component renders', async function (assert) {
const crumbs = [
{ label: 'Jobs', args: ['jobs.index'] },
{ type: 'special', label: 'Job', args: ['jobs.job.index'] },
];
this.set('crumbs', crumbs);
this.owner.register(
'component:breadcrumbs/special',
setComponentTemplate(
hbs`
<div data-test-breadcrumb-special>Test</div>
`,
templateOnlyComponent()
)
);
await render(hbs`
<AppBreadcrumbs />
{{#each this.crumbs as |crumb|}}
<Breadcrumb @crumb={{hash type=crumb.type label=crumb.label args=crumb.args }} />
{{/each}}
`);
assert
.dom('[data-test-breadcrumb-special]')
.exists(
'We can create a new type of breadcrumb component and AppBreadcrumbs will handle rendering by type'
);
assert
.dom('[data-test-breadcrumb-default]')
.exists('Default breadcrumb registers if no type is specified');
});
});