Skip to content

Commit 2ee7e30

Browse files
WindvisWindvis
committed
Add the data-table tests
This copies over the data table tests that aren't empty and does the bare minimum to make them pass with our custom templates.
1 parent 7f8df5e commit 2ee7e30

8 files changed

+354
-18
lines changed

‎.template-lintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = {
1212
files: ['tests/integration/**'],
1313
rules: {
1414
'require-input-label': 'off',
15+
'no-curly-component-invocation': 'off', // Disabled until we refactor the table tests
1516
},
1617
},
1718
],

‎addon/components/au-data-table/default-data-table-content-body.js

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { oneWay } from '@ember/object/computed';
55
import Component from '@ember/component';
66

77
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/default-data-table-content-body.js
8-
98
export default Component.extend({
109
tagName: '',
1110
allFields: oneWay('data-table.parsedFields'),

‎tests/integration/components/au-data-table-test.gjs

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import AuDataTable from '@appuniversum/ember-appuniversum/components/au-data-table';
2+
import { render } from '@ember/test-helpers';
3+
import { setupRenderingTest } from 'ember-qunit';
4+
import { module, test } from 'qunit';
5+
6+
module('Integration | Component | au-data-table', function (hooks) {
7+
setupRenderingTest(hooks);
8+
9+
test('it renders', async function (assert) {
10+
// Set any properties with this.set('myProperty', 'value');
11+
// Handle any actions with this.on('myAction', function(val) { ... });
12+
13+
const content = [];
14+
content.meta = {
15+
pagination: {
16+
first: { number: 1 },
17+
last: { number: 10 },
18+
},
19+
};
20+
21+
await render(
22+
<template>
23+
<AuDataTable @content={{content}} @enableSizes="false" />
24+
</template>,
25+
);
26+
27+
assert.dom('.au-c-data-table').exists({ count: 1 });
28+
});
29+
});

‎tests/integration/components/au-data-table-test.js

-17
This file was deleted.

‎tests/integration/components/au-data-table/au-data-table-content-body-test.js

+181
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { click, render } from '@ember/test-helpers';
4+
import hbs from 'htmlbars-inline-precompile';
5+
6+
module(
7+
'Integration | Component | au-data-table-content-body',
8+
function (hooks) {
9+
setupRenderingTest(hooks);
10+
11+
test('it renders', async function (assert) {
12+
// Set any properties with this.set('myProperty', 'value');
13+
// Handle any actions with this.on('myAction', function(val) { ... });
14+
await render(hbs`<AuDataTableContentBody />`);
15+
assert.dom('tbody').exists({ count: 1 });
16+
});
17+
18+
test('display rows', async function (assert) {
19+
this.set('content', [
20+
{ firstName: 'John', lastName: 'Doe', age: 20 },
21+
{ firstName: 'Jane', lastName: 'Doe', age: 21 },
22+
]);
23+
this.set('dataTable', {});
24+
this.set('dataTable.parsedFields', ['firstName', 'lastName', 'age']);
25+
this.set('dataTable.selection', []);
26+
27+
await render(
28+
hbs`{{au-data-table-content-body content=this.content data-table=this.dataTable}}`,
29+
);
30+
31+
assert.dom('tr').exists({ count: 2 }, 'displays 2 rows');
32+
assert
33+
.dom('tr:first-child td')
34+
.exists({ count: 3 }, 'displays 3 columns');
35+
assert
36+
.dom('tr:first-child td:first-child')
37+
.hasText('John', 'displays firstName in first column');
38+
assert
39+
.dom('tr:first-child td:nth-child(2)')
40+
.hasText('Doe', 'displays lastName in second column');
41+
assert
42+
.dom('tr:first-child td:nth-child(3)')
43+
.hasText('20', 'displays age in third column');
44+
});
45+
46+
test('add checkboxes for selection if enabled', async function (assert) {
47+
const john = { firstName: 'John', lastName: 'Doe', age: 20 };
48+
const jane = { firstName: 'Jane', lastName: 'Doe', age: 21 };
49+
const jeff = { firstName: 'Jeff', lastName: 'Doe', age: 22 };
50+
this.set('content', [john, jane, jeff]);
51+
this.set('data-table', {});
52+
this.set('data-table.parsedFields', ['firstName', 'lastName', 'age']);
53+
this.set('data-table.selection', [jane]);
54+
55+
await render(
56+
hbs`{{au-data-table-content-body content=this.content data-table=this.data-table enableSelection=true}}`,
57+
);
58+
59+
assert
60+
.dom('tr:first-child td')
61+
.exists({ count: 4 }, 'displays 4 columns');
62+
assert.dom('tr.selected').exists({ count: 1 }, 'displays 1 selected row');
63+
assert
64+
.dom('tr input[type="checkbox"]')
65+
.exists({ count: 3 }, 'displays a checkbox on each row');
66+
assert
67+
.dom('tr input[type="checkbox"]:checked')
68+
.isChecked('displays 1 checked checkbox');
69+
});
70+
71+
test('toggles selection if checkbox is clicked', async function (assert) {
72+
const john = { firstName: 'John', lastName: 'Doe', age: 20 };
73+
const jane = { firstName: 'Jane', lastName: 'Doe', age: 21 };
74+
const jeff = { firstName: 'Jeff', lastName: 'Doe', age: 22 };
75+
this.set('content', [john, jane, jeff]);
76+
this.set('data-table', {});
77+
this.set('data-table.parsedFields', ['firstName', 'lastName', 'age']);
78+
this.set('data-table.selection', [jane]);
79+
this.set('data-table.addItemToSelection', () =>
80+
this.set('data-table.selection', [john, jane]),
81+
); // mock function
82+
this.set('data-table.removeItemFromSelection', function () {}); // mock function
83+
84+
await render(
85+
hbs`{{au-data-table-content-body content=this.content data-table=this.data-table enableSelection=true}}`,
86+
);
87+
88+
assert
89+
.dom('tr input[type="checkbox"]:checked')
90+
.isChecked('displays 1 checked checkbox before selecting a row');
91+
92+
await click('tr:first-child input[type="checkbox"]');
93+
94+
assert
95+
.dom('tr input[type="checkbox"]:checked')
96+
.isChecked('displays 2 checked checkboxes after selecting a row');
97+
});
98+
99+
test('add line numbers if enabled', async function (assert) {
100+
const john = { firstName: 'John', lastName: 'Doe', age: 20 };
101+
const jane = { firstName: 'Jane', lastName: 'Doe', age: 21 };
102+
const jeff = { firstName: 'Jeff', lastName: 'Doe', age: 22 };
103+
this.set('content', [john, jane, jeff]);
104+
this.set('data-table', {});
105+
this.set('data-table.parsedFields', ['firstName', 'lastName', 'age']);
106+
this.set('data-table.selection', []);
107+
108+
await render(
109+
hbs`{{au-data-table-content-body content=this.content data-table=this.data-table enableLineNumbers=true}}`,
110+
);
111+
112+
assert
113+
.dom('tr:first-child td')
114+
.exists({ count: 4 }, 'displays 4 columns');
115+
assert
116+
.dom('tr:first-child td:first-child')
117+
.hasText('1', 'displays offset 1 on the first row');
118+
assert
119+
.dom('tr:nth-child(2) td:first-child')
120+
.hasText('2', 'displays offset 2 on the second row');
121+
assert
122+
.dom('tr:nth-child(3) td:first-child')
123+
.hasText('3', 'displays offset 3 on the third row');
124+
125+
this.set('data-table.page', 2);
126+
this.set('data-table.size', 5);
127+
await render(
128+
hbs`{{au-data-table-content-body content=this.content data-table=this.data-table enableLineNumbers=true}}`,
129+
);
130+
131+
assert
132+
.dom('tr:first-child td')
133+
.exists({ count: 4 }, 'displays 4 columns on page 3');
134+
assert
135+
.dom('tr:first-child td:first-child')
136+
.hasText('11', 'displays offset 11 on the first row on page 3');
137+
assert
138+
.dom('tr:nth-child(2) td:first-child')
139+
.hasText('12', 'displays offset 12 on the second row on page 3');
140+
assert
141+
.dom('tr:nth-child(3) td:first-child')
142+
.hasText('13', 'displays offset 13 on the third row of page 3');
143+
});
144+
145+
test('displays no data message if there is no data', async function (assert) {
146+
// Set any properties with this.set('myProperty', 'value');
147+
// Handle any actions with this.on('myAction', function(val) { ... });
148+
this.set('noDataMessage', 'No data');
149+
this.set('data-table', {});
150+
this.set('data-table.parsedFields', ['firstName', 'lastName', 'age']);
151+
this.set('data-table.selection', []);
152+
153+
await render(
154+
hbs`{{au-data-table-content-body noDataMessage=this.noDataMessage data-table=this.data-table}}`,
155+
);
156+
assert
157+
.dom('td.au-c-data-table__message')
158+
.exists({ count: 1 }, 'displays a no data message if no content')
159+
.hasText('No data', 'displays message "No data" if no content');
160+
161+
this.set('content', []);
162+
await render(
163+
hbs`{{au-data-table-content-body content=this.content noDataMessage=this.noDataMessage data-table=this.data-table}}`,
164+
);
165+
assert
166+
.dom('td.au-c-data-table__message')
167+
.exists({ count: 1 }, 'displays a no data message if empty content');
168+
assert
169+
.dom('td.au-c-data-table__message')
170+
.hasText('No data', 'displays message "No data" if empty content');
171+
172+
this.set('content', ['foo', 'bar']);
173+
await render(
174+
hbs`{{au-data-table-content-body content=this.content noDataMessage=this.noDataMessage data-table=this.data-table}}`,
175+
);
176+
assert
177+
.dom('td.au-c-data-table__message')
178+
.doesNotExist('displays no message when there is content');
179+
});
180+
},
181+
);

‎tests/integration/components/au-data-table/au-data-table-content-header-test.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { render } from '@ember/test-helpers';
4+
import hbs from 'htmlbars-inline-precompile';
5+
6+
module(
7+
'Integration | Component | au-data-table-content-header',
8+
function (hooks) {
9+
setupRenderingTest(hooks);
10+
11+
test('it renders', async function (assert) {
12+
await render(hbs`<AuDataTableContentHeader />`);
13+
assert.dom('thead').exists({ count: 1 });
14+
15+
assert.dom('*').hasText('');
16+
17+
// Template block usage:
18+
await render(hbs`
19+
{{#au-data-table-content-header}}
20+
template block text
21+
{{/au-data-table-content-header}}
22+
`);
23+
24+
assert.dom('*').hasText('template block text');
25+
});
26+
27+
test('display column headers', async function (assert) {
28+
this.set('data-table', {});
29+
this.set('data-table.parsedFields', ['firstName', 'lastName', 'age']);
30+
31+
await render(
32+
hbs`{{au-data-table-content-header data-table=this.data-table}}`,
33+
);
34+
assert.dom('tr').exists({ count: 1 }, 'displays 1 header row');
35+
assert
36+
.dom('tr:first-child th')
37+
.exists({ count: 3 }, 'displays 3 column headers');
38+
assert
39+
.dom('tr:first-child th:first-child')
40+
.hasText('firstName Sorteren', 'displays firstName as first header');
41+
assert
42+
.dom('tr:first-child th:nth-child(2)')
43+
.hasText(
44+
'lastName Sorteren',
45+
'displays lastName as second column header',
46+
);
47+
assert
48+
.dom('tr:first-child th:nth-child(3)')
49+
.hasText('age Sorteren', 'displays age as third column header');
50+
});
51+
52+
test('add selection column header if enabled', async function (assert) {
53+
this.set('data-table', {});
54+
this.set('data-table.parsedFields', ['firstName', 'lastName', 'age']);
55+
56+
await render(
57+
hbs`{{au-data-table-content-header data-table=this.data-table enableSelection=true}}`,
58+
);
59+
60+
assert.dom('tr').exists({ count: 1 }, 'displays 1 header row');
61+
assert
62+
.dom('tr:first-child th')
63+
.exists({ count: 4 }, 'displays 4 column headers');
64+
assert
65+
.dom('tr:first-child th:first-child')
66+
.hasText('', 'displays selection as first header');
67+
});
68+
69+
test('add line number column header if enabled', async function (assert) {
70+
this.set('data-table', {});
71+
this.set('data-table.parsedFields', ['firstName', 'lastName', 'age']);
72+
73+
await render(
74+
hbs`{{au-data-table-content-header data-table=this.data-table enableLineNumbers=true}}`,
75+
);
76+
77+
assert.dom('tr').exists({ count: 1 }, 'displays 1 header row');
78+
assert
79+
.dom('tr:first-child th')
80+
.exists({ count: 4 }, 'displays 4 column headers');
81+
assert
82+
.dom('tr:first-child th:first-child')
83+
.hasText('', 'displays line number as first header');
84+
});
85+
},
86+
);

‎tests/integration/components/au-data-table/au-data-table-menu-general-test.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { render } from '@ember/test-helpers';
4+
import hbs from 'htmlbars-inline-precompile';
5+
6+
module(
7+
'Integration | Component | au-data-table-menu-general',
8+
function (hooks) {
9+
setupRenderingTest(hooks);
10+
11+
test('it renders block only if data table selection is empty', async function (assert) {
12+
// Set any properties with this.set('myProperty', 'value');
13+
// Handle any actions with this.on('myAction', function(val) { ... });
14+
15+
this.set('data-table', { selectionIsEmpty: true });
16+
// Template block usage:
17+
await render(hbs`
18+
{{#au-data-table-menu-general data-table=this.data-table}}
19+
template block text
20+
{{/au-data-table-menu-general}}
21+
`);
22+
assert.dom('*').hasText('template block text');
23+
24+
this.set('data-table', { selectionIsEmpty: false });
25+
// Template block usage:
26+
await render(hbs`
27+
{{#au-data-table-menu-general data-table=this.data-table}}
28+
template block text
29+
{{/au-data-table-menu-general}}
30+
`);
31+
32+
assert.dom('*').hasText('');
33+
});
34+
},
35+
);

‎tests/integration/components/au-data-table/au-data-table-menu-selected-test.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { render } from '@ember/test-helpers';
4+
import hbs from 'htmlbars-inline-precompile';
5+
6+
module(
7+
'Integration | Component | au-data-table-menu-selected',
8+
function (hooks) {
9+
setupRenderingTest(hooks);
10+
11+
test('it renders block only if data table selection is not empty', async function (assert) {
12+
this.set('data-table', { selectionIsEmpty: true });
13+
// Template block usage:
14+
await render(hbs`
15+
{{#au-data-table-menu-selected data-table=this.data-table}}
16+
template block text
17+
{{/au-data-table-menu-selected}}
18+
`);
19+
assert.dom('*').hasText('');
20+
});
21+
},
22+
);

0 commit comments

Comments
 (0)