86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
|
import Service from '@ember/service';
|
||
|
|
import { getOwner } from '@ember/application';
|
||
|
|
import RSVP from 'rsvp';
|
||
|
|
import { test, moduleForComponent } from 'ember-qunit';
|
||
|
|
import { findAll } from 'ember-native-dom-helpers';
|
||
|
|
import wait from 'ember-test-helpers/wait';
|
||
|
|
import hbs from 'htmlbars-inline-precompile';
|
||
|
|
import PromiseObject from 'nomad-ui/utils/classes/promise-object';
|
||
|
|
|
||
|
|
moduleForComponent('app-breadcrumbs', 'Integration | Component | app breadcrumbs', {
|
||
|
|
integration: true,
|
||
|
|
beforeEach() {
|
||
|
|
const mockBreadcrumbs = Service.extend({
|
||
|
|
breadcrumbs: [],
|
||
|
|
});
|
||
|
|
|
||
|
|
this.register('service:breadcrumbs', mockBreadcrumbs);
|
||
|
|
this.breadcrumbs = getOwner(this).lookup('service:breadcrumbs');
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const commonCrumbs = [{ label: 'One', args: ['one'] }, { label: 'Two', args: ['two'] }];
|
||
|
|
|
||
|
|
const template = hbs`
|
||
|
|
{{app-breadcrumbs}}
|
||
|
|
`;
|
||
|
|
|
||
|
|
test('breadcrumbs comes from the breadcrumbs service', function(assert) {
|
||
|
|
this.breadcrumbs.set('breadcrumbs', commonCrumbs);
|
||
|
|
|
||
|
|
this.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', function(assert) {
|
||
|
|
this.breadcrumbs.set('breadcrumbs', commonCrumbs);
|
||
|
|
|
||
|
|
this.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', 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'] },
|
||
|
|
]);
|
||
|
|
|
||
|
|
this.render(template);
|
||
|
|
|
||
|
|
assert.equal(
|
||
|
|
findAll('[data-test-breadcrumb]')[1].textContent.trim(),
|
||
|
|
'…',
|
||
|
|
'Promise breadcrumb is in a loading state'
|
||
|
|
);
|
||
|
|
|
||
|
|
resolvePromise({ label: 'Two', args: ['two'] });
|
||
|
|
|
||
|
|
return wait().then(() => {
|
||
|
|
assert.equal(
|
||
|
|
findAll('[data-test-breadcrumb]')[1].textContent.trim(),
|
||
|
|
'Two',
|
||
|
|
'Promise breadcrumb has resolved and now renders Two'
|
||
|
|
);
|
||
|
|
});
|
||
|
|
});
|