github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/tests/integration/components/list-table-test.js (about)

     1  import { findAll, find, render } from '@ember/test-helpers';
     2  import { module, skip, test } from 'qunit';
     3  import { setupRenderingTest } from 'ember-qunit';
     4  import faker from 'nomad-ui/mirage/faker';
     5  import hbs from 'htmlbars-inline-precompile';
     6  import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
     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        <ListTable @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        </ListTable>
    30      `);
    31  
    32      assert.ok(findAll('.head').length, 'Table head is rendered');
    33      assert.equal(
    34        find('.head').tagName.toLowerCase(),
    35        'thead',
    36        'Table head is a thead element'
    37      );
    38    });
    39  
    40    // tbody
    41    test('component exposes a tbody contextual component', async function (assert) {
    42      assert.expect(44);
    43  
    44      this.setProperties({
    45        source: commonTable,
    46        sortProperty: 'firstName',
    47        sortDescending: false,
    48      });
    49      await render(hbs`
    50        <ListTable @source={{source}} @sortProperty={{sortProperty}} @sortDescending={{sortDescending}} as |t|>
    51          <t.body @class="body" as |row index|>
    52            <tr class="item">
    53              <td>{{row.model.firstName}}</td>
    54              <td>{{row.model.lastName}}</td>
    55              <td>{{row.model.age}}</td>
    56              <td>{{index}}</td>
    57            </tr>
    58          </t.body>
    59        </ListTable>
    60      `);
    61  
    62      assert.ok(findAll('.body').length, 'Table body is rendered');
    63      assert.equal(
    64        find('.body').tagName.toLowerCase(),
    65        'tbody',
    66        'Table body is a tbody element'
    67      );
    68  
    69      assert.equal(
    70        findAll('.item').length,
    71        this.get('source.length'),
    72        'Each item gets its own row'
    73      );
    74  
    75      // list-table is not responsible for sorting, only dispatching sort events. The table is still
    76      // rendered in index-order.
    77      this.source.forEach((item, index) => {
    78        const $item = this.element.querySelectorAll('.item')[index];
    79        assert.equal(
    80          $item.querySelectorAll('td')[0].innerHTML.trim(),
    81          item.firstName,
    82          'First name'
    83        );
    84        assert.equal(
    85          $item.querySelectorAll('td')[1].innerHTML.trim(),
    86          item.lastName,
    87          'Last name'
    88        );
    89        assert.equal(
    90          $item.querySelectorAll('td')[2].innerHTML.trim(),
    91          item.age,
    92          'Age'
    93        );
    94        assert.equal(
    95          $item.querySelectorAll('td')[3].innerHTML.trim(),
    96          index,
    97          'Index'
    98        );
    99      });
   100  
   101      await componentA11yAudit(this.element, assert);
   102    });
   103  
   104    // Ember doesn't support query params (or controllers or routes) in integration tests,
   105    // so sorting links can only be tested in acceptance tests.
   106    // Leaving this test here for posterity.
   107    skip('sort-by creates links using the appropriate links given sort property and sort descending', function () {});
   108  });