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