github.com/ferranbt/nomad@v0.9.3-0.20190607002617-85c449b7667c/ui/tests/integration/list-table-test.js (about)

     1  import { findAll, find } from 'ember-native-dom-helpers';
     2  import { module, skip, test } from 'qunit';
     3  import { setupRenderingTest } from 'ember-qunit';
     4  import { render } from '@ember/test-helpers';
     5  import { faker } from 'ember-cli-mirage';
     6  import hbs from 'htmlbars-inline-precompile';
     7  
     8  module('Integration | Component | list table', function(hooks) {
     9    setupRenderingTest(hooks);
    10  
    11    const commonTable = Array(10)
    12      .fill(null)
    13      .map(() => ({
    14        firstName: faker.name.firstName(),
    15        lastName: faker.name.lastName(),
    16        age: faker.random.number({ min: 18, max: 60 }),
    17      }));
    18  
    19    // thead
    20    test('component exposes a thead contextual component', async function(assert) {
    21      this.set('source', commonTable);
    22      await render(hbs`
    23        {{#list-table source=source sortProperty=sortProperty sortDescending=sortDescending as |t|}}
    24          {{#t.head class="head"}}
    25            <th>First Name</th>
    26            <th>Last Name</th>
    27            <th>Age</th>
    28          {{/t.head}}
    29        {{/list-table}}
    30      `);
    31  
    32      assert.ok(findAll('.head').length, 'Table head is rendered');
    33      assert.equal(find('.head').tagName.toLowerCase(), 'thead', 'Table head is a thead element');
    34    });
    35  
    36    // tbody
    37    test('component exposes a tbody contextual component', async function(assert) {
    38      this.setProperties({
    39        source: commonTable,
    40        sortProperty: 'firstName',
    41        sortDescending: false,
    42      });
    43      await render(hbs`
    44        {{#list-table source=source sortProperty=sortProperty sortDescending=sortDescending as |t|}}
    45          {{#t.body class="body" as |row|}}
    46            <tr class="item">
    47              <td>{{row.model.firstName}}</td>
    48              <td>{{row.model.lastName}}</td>
    49              <td>{{row.model.age}}</td>
    50            </tr>
    51          {{/t.body}}
    52        {{/list-table}}
    53      `);
    54  
    55      assert.ok(findAll('.body').length, 'Table body is rendered');
    56      assert.equal(find('.body').tagName.toLowerCase(), 'tbody', 'Table body is a tbody element');
    57  
    58      assert.equal(findAll('.item').length, this.get('source.length'), 'Each item gets its own row');
    59  
    60      // list-table is not responsible for sorting, only dispatching sort events. The table is still
    61      // rendered in index-order.
    62      this.get('source').forEach((item, index) => {
    63        const $item = this.$(`.item:eq(${index})`);
    64        assert.equal(
    65          $item
    66            .find('td:eq(0)')
    67            .text()
    68            .trim(),
    69          item.firstName,
    70          'First name'
    71        );
    72        assert.equal(
    73          $item
    74            .find('td:eq(1)')
    75            .text()
    76            .trim(),
    77          item.lastName,
    78          'Last name'
    79        );
    80        assert.equal(
    81          $item
    82            .find('td:eq(2)')
    83            .text()
    84            .trim(),
    85          item.age,
    86          'Age'
    87        );
    88      });
    89    });
    90  
    91    // Ember doesn't support query params (or controllers or routes) in integration tests,
    92    // so sorting links can only be tested in acceptance tests.
    93    // Leaving this test here for posterity.
    94    skip('sort-by creates links using the appropriate links given sort property and sort descending', function() {});
    95  });