86 lines
2.5 KiB
JavaScript
86 lines
2.5 KiB
JavaScript
/* eslint-disable ember-a11y-testing/a11y-audit-called */
|
|
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import { click, findAll, render } from '@ember/test-helpers';
|
|
import { hbs } from 'ember-cli-htmlbars';
|
|
|
|
module('Integration | Component | breadcrumbs', function (hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
test('it declaratively renders a list of registered crumbs', async function (assert) {
|
|
this.set('isRegistered', false);
|
|
this.set('toggleCrumb', () => this.set('isRegistered', !this.isRegistered));
|
|
await render(hbs`
|
|
<Breadcrumbs as |bb|>
|
|
<ul>
|
|
{{#each bb as |crumb|}}
|
|
<li data-test-crumb={{crumb.args.crumb}}>{{crumb.args.crumb}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
</Breadcrumbs>
|
|
<button data-test-button type="button" {{on "click" toggleCrumb}}>Toggle</button>
|
|
<Breadcrumb @crumb={{'Zoey'}} />
|
|
{{#if this.isRegistered}}
|
|
<Breadcrumb @crumb={{'Tomster'}} />
|
|
{{/if}}
|
|
`);
|
|
|
|
assert
|
|
.dom('[data-test-crumb]')
|
|
.exists({ count: 1 }, 'We register one crumb');
|
|
assert
|
|
.dom('[data-test-crumb]')
|
|
.hasText('Zoey', 'The first registered crumb is Zoey');
|
|
|
|
await click('[data-test-button]');
|
|
const crumbs = await findAll('[data-test-crumb]');
|
|
|
|
assert
|
|
.dom('[data-test-crumb]')
|
|
.exists({ count: 2 }, 'The second crumb registered successfully');
|
|
assert
|
|
.dom(crumbs[0])
|
|
.hasText(
|
|
'Zoey',
|
|
'Breadcrumbs maintain the order in which they are declared'
|
|
);
|
|
assert
|
|
.dom(crumbs[1])
|
|
.hasText(
|
|
'Tomster',
|
|
'Breadcrumbs maintain the order in which they are declared'
|
|
);
|
|
|
|
await click('[data-test-button]');
|
|
assert
|
|
.dom('[data-test-crumb]')
|
|
.exists({ count: 1 }, 'We deregister one crumb');
|
|
assert
|
|
.dom('[data-test-crumb]')
|
|
.hasText(
|
|
'Zoey',
|
|
'Zoey remains in the template after Tomster deregisters'
|
|
);
|
|
});
|
|
|
|
test('it can register complex crumb objects', async function (assert) {
|
|
await render(hbs`
|
|
<Breadcrumbs as |bb|>
|
|
<ul>
|
|
{{#each bb as |crumb|}}
|
|
<li data-test-crumb>{{crumb.args.crumb.name}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
</Breadcrumbs>
|
|
<Breadcrumb @crumb={{hash name='Tomster'}} />
|
|
`);
|
|
|
|
assert
|
|
.dom('[data-test-crumb]')
|
|
.hasText(
|
|
'Tomster',
|
|
'We can access the registered breadcrumbs in the template'
|
|
);
|
|
});
|
|
});
|