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