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