e9e52e0dfe
This doesn’t include Ember Data, as we are still back on 3.12. Most changes are deprecation updates, linting fixes, and dependencies. It can be read commit-by-commit, though many of them are mechanical and skimmable. For the new linting exclusions, I’ve added them to the Tech Debt list. The decrease in test count is because linting is no longer included in ember test. There’s a new deprecation warning in the logs that can be fixed by updating Ember Power Select but when I tried that it caused it to render incorrectly, so I decided to ignore it for now and address it separately.
79 lines
3 KiB
JavaScript
79 lines
3 KiB
JavaScript
import { findAll, find, render } from '@ember/test-helpers';
|
|
import { module, skip, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import faker from 'nomad-ui/mirage/faker';
|
|
import hbs from 'htmlbars-inline-precompile';
|
|
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
|
|
|
|
module('Integration | Component | list table', function(hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
const commonTable = Array(10)
|
|
.fill(null)
|
|
.map(() => ({
|
|
firstName: faker.name.firstName(),
|
|
lastName: faker.name.lastName(),
|
|
age: faker.random.number({ min: 18, max: 60 }),
|
|
}));
|
|
|
|
// thead
|
|
test('component exposes a thead contextual component', async function(assert) {
|
|
this.set('source', commonTable);
|
|
await render(hbs`
|
|
<ListTable @source={{source}} @sortProperty={{sortProperty}} @sortDescending={{sortDescending}} as |t|>
|
|
<t.head @class="head">
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Age</th>
|
|
</t.head>
|
|
</ListTable>
|
|
`);
|
|
|
|
assert.ok(findAll('.head').length, 'Table head is rendered');
|
|
assert.equal(find('.head').tagName.toLowerCase(), 'thead', 'Table head is a thead element');
|
|
});
|
|
|
|
// tbody
|
|
test('component exposes a tbody contextual component', async function(assert) {
|
|
this.setProperties({
|
|
source: commonTable,
|
|
sortProperty: 'firstName',
|
|
sortDescending: false,
|
|
});
|
|
await render(hbs`
|
|
<ListTable @source={{source}} @sortProperty={{sortProperty}} @sortDescending={{sortDescending}} as |t|>
|
|
<t.body @class="body" as |row index|>
|
|
<tr class="item">
|
|
<td>{{row.model.firstName}}</td>
|
|
<td>{{row.model.lastName}}</td>
|
|
<td>{{row.model.age}}</td>
|
|
<td>{{index}}</td>
|
|
</tr>
|
|
</t.body>
|
|
</ListTable>
|
|
`);
|
|
|
|
assert.ok(findAll('.body').length, 'Table body is rendered');
|
|
assert.equal(find('.body').tagName.toLowerCase(), 'tbody', 'Table body is a tbody element');
|
|
|
|
assert.equal(findAll('.item').length, this.get('source.length'), 'Each item gets its own row');
|
|
|
|
// list-table is not responsible for sorting, only dispatching sort events. The table is still
|
|
// rendered in index-order.
|
|
this.source.forEach((item, index) => {
|
|
const $item = this.element.querySelectorAll('.item')[index];
|
|
assert.equal($item.querySelectorAll('td')[0].innerHTML.trim(), item.firstName, 'First name');
|
|
assert.equal($item.querySelectorAll('td')[1].innerHTML.trim(), item.lastName, 'Last name');
|
|
assert.equal($item.querySelectorAll('td')[2].innerHTML.trim(), item.age, 'Age');
|
|
assert.equal($item.querySelectorAll('td')[3].innerHTML.trim(), index, 'Index');
|
|
});
|
|
|
|
await componentA11yAudit(this.element, assert);
|
|
});
|
|
|
|
// Ember doesn't support query params (or controllers or routes) in integration tests,
|
|
// so sorting links can only be tested in acceptance tests.
|
|
// Leaving this test here for posterity.
|
|
skip('sort-by creates links using the appropriate links given sort property and sort descending', function() {});
|
|
});
|