github.com/blixtra/nomad@v0.7.2-0.20171221000451-da9a1d7bb050/ui/tests/integration/list-table-test.js (about)

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