From 6f9c316782585a4e550bc46186e69465778057cf Mon Sep 17 00:00:00 2001 From: Jai Bhagat Date: Wed, 15 Dec 2021 11:56:26 -0500 Subject: [PATCH] fix: update breadcrumb tests according to new breadcrumb structure --- ui/app/components/breadcrumb.js | 14 ++- ui/app/components/breadcrumbs/default.hbs | 2 +- ui/app/components/breadcrumbs/job.hbs | 5 +- ui/app/controllers/servers/server.js | 14 +++ ui/app/services/breadcrumbs.js | 1 - ui/app/templates/servers/server.hbs | 2 +- ui/tests/acceptance/server-monitor-test.js | 7 +- ui/tests/acceptance/task-detail-test.js | 5 +- .../components/app-breadcrumbs-test.js | 114 ++++++++---------- 9 files changed, 84 insertions(+), 80 deletions(-) create mode 100644 ui/app/controllers/servers/server.js diff --git a/ui/app/components/breadcrumb.js b/ui/app/components/breadcrumb.js index 4a449a88e84..813aeccef2c 100644 --- a/ui/app/components/breadcrumb.js +++ b/ui/app/components/breadcrumb.js @@ -1,10 +1,17 @@ -import Component from '@glimmer/component'; +import { assert } from '@ember/debug'; import { action } from '@ember/object'; import { inject as service } from '@ember/service'; +import Component from '@glimmer/component'; export default class Breadcrumb extends Component { @service breadcrumbs; + constructor() { + super(...arguments); + assert('Provide a valid breadcrumb argument', this.args.crumb); + this.register(); + } + @action register() { this.breadcrumbs.registerBreadcrumb(this); } @@ -13,11 +20,6 @@ export default class Breadcrumb extends Component { this.breadcrumbs.deregisterBreadcrumb(this); } - constructor() { - super(...arguments); - this.register(); - } - willDestroy() { super.willDestroy(); this.deregister(); diff --git a/ui/app/components/breadcrumbs/default.hbs b/ui/app/components/breadcrumbs/default.hbs index 8b5108a7da6..161adee03c2 100644 --- a/ui/app/components/breadcrumbs/default.hbs +++ b/ui/app/components/breadcrumbs/default.hbs @@ -1,4 +1,4 @@ -
  • +
  • {{@crumb.label}} diff --git a/ui/app/components/breadcrumbs/job.hbs b/ui/app/components/breadcrumbs/job.hbs index 09ae5d420f1..d6578baf697 100644 --- a/ui/app/components/breadcrumbs/job.hbs +++ b/ui/app/components/breadcrumbs/job.hbs @@ -14,7 +14,7 @@ @route="jobs.job.index" @model={{trigger.data.result.plainId}} @query={{hash namespace=(or trigger.data.result.namespace.name "default")}} - data-test-breadcrumb={{@crumb.args.firstObject}} + data-test-breadcrumb={{"jobs.job.index"}} > {{trigger.data.result.trimmedName}} @@ -25,7 +25,8 @@ @route="jobs.job.index" @model={{this.job.plainId}} @query={{hash namespace=(or this.job.namespace.name "default")}} - data-test-breadcrumb={{@crumb.args.firstObject}} + data-test-breadcrumb={{"jobs.job.index"}} + data-test-job-breadcrumb > {{this.job.trimmedName}} diff --git a/ui/app/controllers/servers/server.js b/ui/app/controllers/servers/server.js new file mode 100644 index 00000000000..0f99b8985c1 --- /dev/null +++ b/ui/app/controllers/servers/server.js @@ -0,0 +1,14 @@ +import Controller from '@ember/controller'; + +export default class ServersServerController extends Controller { + get server() { + return this.model; + } + + get breadcrumb() { + return { + label: this.server.name, + args: ['servers.server', this.server.id], + }; + } +} diff --git a/ui/app/services/breadcrumbs.js b/ui/app/services/breadcrumbs.js index 0a268708f14..eacf9f95544 100644 --- a/ui/app/services/breadcrumbs.js +++ b/ui/app/services/breadcrumbs.js @@ -8,7 +8,6 @@ export default class BucketService extends Service { @action registerBreadcrumb(crumb) { schedule('actions', this, () => { - console.log('register crumb: ', crumb); this.crumbs = [...this.crumbs, crumb]; }); } diff --git a/ui/app/templates/servers/server.hbs b/ui/app/templates/servers/server.hbs index 2fd45556a2b..2cb65188614 100644 --- a/ui/app/templates/servers/server.hbs +++ b/ui/app/templates/servers/server.hbs @@ -1 +1 @@ -{{outlet}} \ No newline at end of file +{{outlet}} \ No newline at end of file diff --git a/ui/tests/acceptance/server-monitor-test.js b/ui/tests/acceptance/server-monitor-test.js index 41cf3fc9afe..00bcc6b0953 100644 --- a/ui/tests/acceptance/server-monitor-test.js +++ b/ui/tests/acceptance/server-monitor-test.js @@ -33,8 +33,11 @@ module('Acceptance | server monitor', function(hooks) { test('/servers/:id/monitor should have a breadcrumb trail linking back to servers', async function(assert) { await ServerMonitor.visit({ name: agent.name }); - - assert.equal(Layout.breadcrumbFor('servers.index').text, 'Servers'); + assert.equal( + Layout.breadcrumbFor('servers.index').text, + 'Servers', + 'The page should read the breadcrumb Servers' + ); assert.equal(Layout.breadcrumbFor('servers.server').text, agent.name); await Layout.breadcrumbFor('servers.index').visit(); diff --git a/ui/tests/acceptance/task-detail-test.js b/ui/tests/acceptance/task-detail-test.js index e15f47b6274..fa74af8030e 100644 --- a/ui/tests/acceptance/task-detail-test.js +++ b/ui/tests/acceptance/task-detail-test.js @@ -1,4 +1,4 @@ -import { currentURL } from '@ember/test-helpers'; +import { currentURL, waitFor } from '@ember/test-helpers'; import { module, test } from 'qunit'; import { setupApplicationTest } from 'ember-qunit'; import { setupMirage } from 'ember-cli-mirage/test-support'; @@ -57,8 +57,9 @@ module('Acceptance | task detail', function(hooks) { const job = server.db.jobs.find(jobId); const shortId = allocation.id.split('-')[0]; - assert.equal(Layout.breadcrumbFor('jobs.index').text, 'Jobs', 'Jobs is the first breadcrumb'); + + await waitFor('[data-test-job-breadcrumb]'); assert.equal( Layout.breadcrumbFor('jobs.job.index').text, job.name, diff --git a/ui/tests/integration/components/app-breadcrumbs-test.js b/ui/tests/integration/components/app-breadcrumbs-test.js index 60ca4b1a053..b1d6d425a3a 100644 --- a/ui/tests/integration/components/app-breadcrumbs-test.js +++ b/ui/tests/integration/components/app-breadcrumbs-test.js @@ -1,49 +1,30 @@ -import Service from '@ember/service'; -import RSVP from 'rsvp'; +import { setComponentTemplate } from '@ember/component'; +import Component from '@glimmer/component'; import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { findAll, render, settled } from '@ember/test-helpers'; +import { findAll, render } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; -import PromiseObject from 'nomad-ui/utils/classes/promise-object'; -import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; module('Integration | Component | app breadcrumbs', function(hooks) { setupRenderingTest(hooks); - hooks.beforeEach(function() { - const mockBreadcrumbs = Service.extend({ - init() { - this._super(...arguments); - this.breadcrumbs = []; - }, - }); - - this.owner.register('service:breadcrumbs', mockBreadcrumbs); - this.breadcrumbs = this.owner.lookup('service:breadcrumbs'); - }); - - const commonCrumbs = [{ label: 'One', args: ['one'] }, { label: 'Two', args: ['two'] }]; - - const template = hbs` -
    - `; - - test('breadcrumbs comes from the breadcrumbs service', async function(assert) { - this.breadcrumbs.set('breadcrumbs', commonCrumbs); - - await render(template); - - assert.equal( - findAll('[data-test-breadcrumb]').length, - commonCrumbs.length, - 'The number of crumbs matches the crumbs from the service' - ); - }); + const commonCrumbs = [ + { label: 'Jobs', args: ['jobs.index'] }, + { label: 'Job', args: ['jobs.job.index'] }, + ]; test('every breadcrumb is rendered correctly', async function(assert) { - this.breadcrumbs.set('breadcrumbs', commonCrumbs); - - await render(template); + this.set('commonCrumbs', commonCrumbs); + await render(hbs` + + {{#each this.commonCrumbs as |crumb|}} + + {{/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]'); @@ -56,36 +37,39 @@ module('Integration | Component | app breadcrumbs', function(hooks) { }); }); - test('when breadcrumbs are pending promises, an ellipsis is rendered', async 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'] }, - ]); - - await render(template); - - assert.equal( - findAll('[data-test-breadcrumb]')[1].textContent.trim(), - '…', - 'Promise breadcrumb is in a loading state' + test('when we register a crumb with a type property, a dedicated breadcrumb/ component renders', async function(assert) { + const crumbs = [ + { label: 'Jobs', args: ['jobs.index'] }, + { type: 'special', label: 'Job', args: ['jobs.job.index'] }, + ]; + this.set('crumbs', crumbs); + + class MockComponent extends Component {} + this.owner.register( + 'component:breadcrumbs/special', + setComponentTemplate( + hbs` +
    Test
    + `, + MockComponent + ) ); - await componentA11yAudit(this.element, assert); - - resolvePromise({ label: 'Two', args: ['two'] }); - - return settled().then(() => { - assert.equal( - findAll('[data-test-breadcrumb]')[1].textContent.trim(), - 'Two', - 'Promise breadcrumb has resolved and now renders Two' + await render(hbs` + + {{#each this.crumbs as |crumb|}} + + {{/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'); }); });