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