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