github.com/hernad/nomad@v1.6.112/ui/tests/integration/components/list-table-test.js (about)

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