github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/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(find('.head').tagName.toLowerCase(), 'thead', 'Table head is a thead element'); 34 }); 35 36 // tbody 37 test('component exposes a tbody contextual component', async function(assert) { 38 this.setProperties({ 39 source: commonTable, 40 sortProperty: 'firstName', 41 sortDescending: false, 42 }); 43 await render(hbs` 44 <ListTable @source={{source}} @sortProperty={{sortProperty}} @sortDescending={{sortDescending}} as |t|> 45 <t.body @class="body" as |row index|> 46 <tr class="item"> 47 <td>{{row.model.firstName}}</td> 48 <td>{{row.model.lastName}}</td> 49 <td>{{row.model.age}}</td> 50 <td>{{index}}</td> 51 </tr> 52 </t.body> 53 </ListTable> 54 `); 55 56 assert.ok(findAll('.body').length, 'Table body is rendered'); 57 assert.equal(find('.body').tagName.toLowerCase(), 'tbody', 'Table body is a tbody element'); 58 59 assert.equal(findAll('.item').length, this.get('source.length'), 'Each item gets its own row'); 60 61 // list-table is not responsible for sorting, only dispatching sort events. The table is still 62 // rendered in index-order. 63 this.source.forEach((item, index) => { 64 const $item = this.element.querySelectorAll('.item')[index]; 65 assert.equal($item.querySelectorAll('td')[0].innerHTML.trim(), item.firstName, 'First name'); 66 assert.equal($item.querySelectorAll('td')[1].innerHTML.trim(), item.lastName, 'Last name'); 67 assert.equal($item.querySelectorAll('td')[2].innerHTML.trim(), item.age, 'Age'); 68 assert.equal($item.querySelectorAll('td')[3].innerHTML.trim(), index, 'Index'); 69 }); 70 71 await componentA11yAudit(this.element, assert); 72 }); 73 74 // Ember doesn't support query params (or controllers or routes) in integration tests, 75 // so sorting links can only be tested in acceptance tests. 76 // Leaving this test here for posterity. 77 skip('sort-by creates links using the appropriate links given sort property and sort descending', function() {}); 78 });