fix: update breadcrumb tests according to new breadcrumb structure

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();

ui/app/components/breadcrumbs/default.hbs

@@ -1,4 +1,4 @@
-<li>
+<li data-test-breadcrumb-default>
   <LinkTo @params={{@crumb.args}} data-test-breadcrumb={{@crumb.args.firstObject}}>
     {{@crumb.label}}
   </LinkTo>

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}}
         </LinkTo>
@@ -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}}
       </LinkTo>

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],
+    };
+  }
+}

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];
     });
   }

ui/app/templates/servers/server.hbs

@@ -1 +1 @@
-{{outlet}}<Breadcrumb bucket="navigation" crumb={{this.metadata.breadcrumb}} />
+<Breadcrumb @crumb={{this.breadcrumb}} />{{outlet}}

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();

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,

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`
-    <ul><AppBreadcrumbs /></ul>
-  `;
-
-  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`
+      <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]');
 
@@ -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/<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);
+
+    class MockComponent extends Component {}
+    this.owner.register(
+      'component:breadcrumbs/special',
+      setComponentTemplate(
+        hbs`
+        <div data-test-breadcrumb-special>Test</div>
+      `,
+        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`
+    <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');
   });
 });