github.com/zoomfoo/nomad@v0.8.5-0.20180907175415-f28fd3a1a056/ui/tests/integration/app-breadcrumbs-test.js (about)

     1  import Service from '@ember/service';
     2  import { getOwner } from '@ember/application';
     3  import RSVP from 'rsvp';
     4  import { test, moduleForComponent } from 'ember-qunit';
     5  import { findAll } from 'ember-native-dom-helpers';
     6  import wait from 'ember-test-helpers/wait';
     7  import hbs from 'htmlbars-inline-precompile';
     8  import PromiseObject from 'nomad-ui/utils/classes/promise-object';
     9  
    10  moduleForComponent('app-breadcrumbs', 'Integration | Component | app breadcrumbs', {
    11    integration: true,
    12    beforeEach() {
    13      const mockBreadcrumbs = Service.extend({
    14        breadcrumbs: [],
    15      });
    16  
    17      this.register('service:breadcrumbs', mockBreadcrumbs);
    18      this.breadcrumbs = getOwner(this).lookup('service:breadcrumbs');
    19    },
    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', function(assert) {
    29    this.breadcrumbs.set('breadcrumbs', commonCrumbs);
    30  
    31    this.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', function(assert) {
    41    this.breadcrumbs.set('breadcrumbs', commonCrumbs);
    42  
    43    this.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', 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    this.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 wait().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  });