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 });