github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/app-breadcrumbs-test.js (about) 1 import Service from '@ember/service'; 2 import RSVP from 'rsvp'; 3 import { module, test } from 'qunit'; 4 import { setupRenderingTest } from 'ember-qunit'; 5 import { findAll, render, settled } from '@ember/test-helpers'; 6 import hbs from 'htmlbars-inline-precompile'; 7 import PromiseObject from 'nomad-ui/utils/classes/promise-object'; 8 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; 9 10 module('Integration | Component | app breadcrumbs', function(hooks) { 11 setupRenderingTest(hooks); 12 13 hooks.beforeEach(function() { 14 const mockBreadcrumbs = Service.extend({ 15 init() { 16 this._super(...arguments); 17 this.breadcrumbs = []; 18 }, 19 }); 20 21 this.owner.register('service:breadcrumbs', mockBreadcrumbs); 22 this.breadcrumbs = this.owner.lookup('service:breadcrumbs'); 23 }); 24 25 const commonCrumbs = [{ label: 'One', args: ['one'] }, { label: 'Two', args: ['two'] }]; 26 27 const template = hbs` 28 <ul><AppBreadcrumbs /></ul> 29 `; 30 31 test('breadcrumbs comes from the breadcrumbs service', async function(assert) { 32 this.breadcrumbs.set('breadcrumbs', commonCrumbs); 33 34 await render(template); 35 36 assert.equal( 37 findAll('[data-test-breadcrumb]').length, 38 commonCrumbs.length, 39 'The number of crumbs matches the crumbs from the service' 40 ); 41 }); 42 43 test('every breadcrumb is rendered correctly', async function(assert) { 44 this.breadcrumbs.set('breadcrumbs', commonCrumbs); 45 46 await render(template); 47 48 const renderedCrumbs = findAll('[data-test-breadcrumb]'); 49 50 renderedCrumbs.forEach((crumb, index) => { 51 assert.equal( 52 crumb.textContent.trim(), 53 commonCrumbs[index].label, 54 `Crumb ${index} is ${commonCrumbs[index].label}` 55 ); 56 }); 57 }); 58 59 test('when breadcrumbs are pending promises, an ellipsis is rendered', async function(assert) { 60 let resolvePromise; 61 const promise = new RSVP.Promise(resolve => { 62 resolvePromise = resolve; 63 }); 64 65 this.breadcrumbs.set('breadcrumbs', [ 66 { label: 'One', args: ['one'] }, 67 PromiseObject.create({ promise }), 68 { label: 'Three', args: ['three'] }, 69 ]); 70 71 await render(template); 72 73 assert.equal( 74 findAll('[data-test-breadcrumb]')[1].textContent.trim(), 75 '…', 76 'Promise breadcrumb is in a loading state' 77 ); 78 79 await componentA11yAudit(this.element, assert); 80 81 resolvePromise({ label: 'Two', args: ['two'] }); 82 83 return settled().then(() => { 84 assert.equal( 85 findAll('[data-test-breadcrumb]')[1].textContent.trim(), 86 'Two', 87 'Promise breadcrumb has resolved and now renders Two' 88 ); 89 }); 90 }); 91 });