Skip to content

Commit c9dfbc4

Browse files
swarajpureswarajpure
committed
adds tests for checking content visiblity after animation
1 parent 6842c54 commit c9dfbc4

File tree

5 files changed

+1279
-1271
lines changed

5 files changed

+1279
-1271
lines changed

‎.eslintrc.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ module.exports = {
2020
browser: true,
2121
},
2222
rules: {
23-
'ember/no-jquery': 'off',
2423
'no-console': 'off',
2524
'ember/no-new-mixins': 'off',
2625
'ember/no-mixins': 'off',

‎app/templates/components/table-of-contents.hbs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<ol class="toc-level-0">
22
<li class="toc-level-0">
3-
<a {{action 'toggle' 'modules'}} href="#">Packages</a>
3+
<a {{action 'toggle' 'modules'}} href="#" data-test-toc-title="packages">Packages</a>
44
<ol class="toc-level-1 modules selected">
55
{{#each moduleIDs as |moduleID|}}
66

@@ -16,7 +16,7 @@
1616

1717
{{#if isShowingNamespaces}}
1818
<li class="toc-level-0">
19-
<a {{action 'toggle' 'namespaces'}} href="#">Namespaces</a>
19+
<a {{action 'toggle' 'namespaces'}} href="#" data-test-toc-title="namespaces">Namespaces</a>
2020
<ol class="toc-level-1 namespaces selected">
2121
{{#each namespaceIDs as |namespaceID|}}
2222
<li class="toc-level-1" data-test-namespace={{namespaceID}}>
@@ -28,7 +28,7 @@
2828
{{/if}}
2929

3030
<li class="toc-level-0">
31-
<a {{action 'toggle' 'classes'}} href="#">Classes</a>
31+
<a {{action 'toggle' 'classes'}} href="#" data-test-toc-title="classes">Classes</a>
3232
<ol class="toc-level-1 classes selected">
3333
{{#each classesIDs as |classID|}}
3434
<li class="toc-level-1" data-test-class={{classID}}>

‎config/optional-features.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"application-template-wrapper": false,
33
"default-async-observers": true,
4-
"jquery-integration": true,
54
"template-only-glimmer-components": true
65
}

‎tests/integration/components/table-of-contents-test.js

Lines changed: 117 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -3,102 +3,151 @@ import { setupRenderingTest } from 'ember-qunit';
33
import { render, findAll, click } from '@ember/test-helpers';
44
import hbs from 'htmlbars-inline-precompile';
55

6-
module('Integration | Component | table of contents', function (hooks) {
6+
const TIMEOUT_FOR_ANIMATION = 600;
7+
8+
module.only('Integration | Component | table of contents', function (hooks) {
79
setupRenderingTest(hooks);
810

911
test('it renders', async function (assert) {
1012
// Set any properties with this.set('myProperty', 'value');
13+
const classes = ['Descriptor', 'Ember'];
1114
this.set('projectId', 'Ember');
1215
this.set('emberVersion', '2.4.3');
13-
14-
this.set('classesIDs', ['Descriptor', 'Ember']);
15-
16-
await render(hbs`{{table-of-contents showPrivateClasses=true
17-
projectid=projectId
18-
version=emberVersion
19-
classesIDs=classesIDs
20-
isShowingNamespaces=true
21-
}}`);
22-
23-
assert.dom(findAll('.toc-level-0 > a')[2]).hasText('Classes');
24-
assert
25-
.dom('.toc-level-1 li')
26-
.exists({ count: 2 }, 'We have two items to display');
27-
assert.dom(findAll('.toc-level-1 li')[0]).hasText('Descriptor');
28-
assert.dom(findAll('.toc-level-1 li')[1]).hasText('Ember');
16+
this.set('classesIDs', classes);
17+
18+
await render(hbs`
19+
{{
20+
table-of-contents showPrivateClasses=true
21+
projectid=projectId
22+
version=emberVersion
23+
classesIDs=classesIDs
24+
isShowingNamespaces=true
25+
}}
26+
`);
27+
28+
const contentTitle = document.querySelector(
29+
'[data-test-toc-title="classes"]'
30+
);
31+
const contentReference = '.toc-level-1';
32+
const content = document.querySelector(contentReference);
33+
34+
assert.dom(contentTitle).hasText('Classes');
35+
assert.dom(content).exists({ count: 2 }, 'We have two items to display');
36+
assert.dom(findAll(`${contentReference} li`)[0]).hasText(classes[0]);
37+
assert.dom(findAll(`${contentReference} li`)[1]).hasText(classes[1]);
2938
});
3039

3140
test('Starts with underlying content visible', async function (assert) {
3241
// Set any properties with this.set('myProperty', 'value');
42+
const modules = ['@ember/application', '@ember/array'];
3343
this.set('projectId', 'Ember');
3444
this.set('emberVersion', '2.4.3');
35-
36-
this.set('moduleIDs', ['@ember/application', '@ember/array']);
37-
38-
await render(hbs`{{table-of-contents showPrivateClasses=true
39-
projectid=projectId
40-
version=emberVersion
41-
moduleIDs=moduleIDs
42-
isShowingNamespaces=true
43-
}}`);
44-
45-
assert.dom(findAll('.toc-level-0 > a')[0]).hasText('Packages');
46-
assert
47-
.dom('.toc-level-1 li')
48-
.exists({ count: 2 }, 'We have two items to display');
49-
assert.dom('ol.toc-level-1').isVisible;
50-
assert.dom('.toc-level-1').hasClass('selected');
51-
assert.dom(findAll('.toc-level-1 li')[0]).hasText('@ember/application');
52-
assert.dom(findAll('.toc-level-1 li')[1]).hasText('@ember/array');
45+
this.set('moduleIDs', modules);
46+
47+
await render(hbs`
48+
{{
49+
table-of-contents showPrivateClasses=true
50+
projectid=projectId
51+
version=emberVersion
52+
moduleIDs=moduleIDs
53+
isShowingNamespaces=true
54+
}}
55+
`);
56+
57+
const contentReference = '.toc-level-1';
58+
const content = document.querySelector(contentReference);
59+
60+
assert.dom('[data-test-toc-title="packages"]').hasText('Packages');
61+
assert.dom(content).hasClass('selected');
62+
assert.dom(content).exists({ count: 2 }, 'We have two items to display');
63+
assert.dom(content).isVisible();
64+
assert.dom(findAll(`${contentReference} li`)[0]).hasText(modules[0]);
65+
assert.dom(findAll(`${contentReference} li`)[1]).hasText(modules[1]);
5366
});
5467

5568
test('Underlying content hides once clicked', async function (assert) {
5669
// Set any properties with this.set('myProperty', 'value');
70+
const modules = ['@ember/application', '@ember/array'];
5771
this.set('projectId', 'Ember');
5872
this.set('emberVersion', '2.4.3');
59-
60-
this.set('moduleIDs', ['@ember/application', '@ember/array']);
61-
62-
await render(hbs`{{table-of-contents showPrivateClasses=true
63-
projectid=projectId
64-
version=emberVersion
65-
moduleIDs=moduleIDs
66-
isShowingNamespaces=true
67-
}}`);
68-
69-
assert.dom(findAll('.toc-level-0 > a')[0]).hasText('Packages');
70-
assert.dom('ol.toc-level-1').isVisible;
71-
assert.dom('.toc-level-1').hasClass('selected');
72-
73-
await click(document.querySelector('.toc-level-0 > a'));
74-
assert.dom('ol.toc-level-1').isNotVisible;
75-
assert.dom('.toc-level-1').doesNotHaveClass('selected');
73+
this.set('moduleIDs', modules);
74+
75+
await render(hbs`
76+
{{
77+
table-of-contents showPrivateClasses=true
78+
projectid=projectId
79+
version=emberVersion
80+
moduleIDs=moduleIDs
81+
isShowingNamespaces=true
82+
}}
83+
`);
84+
85+
const listTitle = document.querySelector(
86+
'[data-test-toc-title="packages"]'
87+
);
88+
const contentReference = '.toc-level-1';
89+
const content = document.querySelector(contentReference);
90+
91+
assert.dom(listTitle).hasText('Packages');
92+
assert.dom(content).hasClass('selected');
93+
assert.dom(content).isVisible();
94+
95+
await click(listTitle);
96+
97+
const done = assert.async();
98+
setTimeout(() => {
99+
assert.dom(content).isNotVisible();
100+
assert.dom(content).doesNotHaveClass('selected');
101+
done();
102+
}, TIMEOUT_FOR_ANIMATION);
76103
});
77104

78105
test('Underlying content should be visible after 2 clicks', async function (assert) {
79106
// Set any properties with this.set('myProperty', 'value');
107+
const modules = ['@ember/application', '@ember/array'];
80108
this.set('projectId', 'Ember');
81109
this.set('emberVersion', '2.4.3');
110+
this.set('moduleIDs', modules);
111+
112+
await render(hbs`
113+
{{
114+
table-of-contents showPrivateClasses=true
115+
projectid=projectId
116+
version=emberVersion
117+
moduleIDs=moduleIDs
118+
isShowingNamespaces=true
119+
}}
120+
`);
121+
122+
const titleButton = document.querySelector(
123+
'[data-test-toc-title="packages"]'
124+
);
125+
const contentReference = '.toc-level-1';
126+
const content = document.querySelector(contentReference);
127+
128+
assert.dom(titleButton).hasText('Packages');
129+
assert.dom(titleButton).hasClass('selected');
130+
assert.dom(content).isVisible();
131+
132+
await click(titleButton);
133+
134+
const done1 = assert.async();
82135

83-
this.set('moduleIDs', ['@ember/application', '@ember/array']);
136+
setTimeout(async () => {
137+
assert.dom(content).isNotVisible();
138+
assert.dom(content).doesNotHaveClass('selected');
84139

85-
await render(hbs`{{table-of-contents showPrivateClasses=true
86-
projectid=projectId
87-
version=emberVersion
88-
moduleIDs=moduleIDs
89-
isShowingNamespaces=true
90-
}}`);
140+
await click(titleButton);
91141

92-
assert.dom(findAll('.toc-level-0 > a')[0]).hasText('Packages');
93-
assert.dom('ol.toc-level-1').isVisible;
94-
assert.dom('.toc-level-1').hasClass('selected');
142+
const done2 = assert.async();
95143

96-
await click(document.querySelector('.toc-level-0 > a'));
97-
assert.dom('ol.toc-level-1').isNotVisible;
98-
assert.dom('.toc-level-1').doesNotHaveClass('selected');
144+
setTimeout(() => {
145+
assert.dom(content).isVisible();
146+
assert.dom(content).hasClass('selected');
147+
done2();
148+
}, TIMEOUT_FOR_ANIMATION);
99149

100-
await click(document.querySelector('.toc-level-0 > a'));
101-
assert.dom('ol.toc-level-1').isVisible;
102-
assert.dom('.toc-level-1').hasClass('selected');
150+
done1();
151+
}, TIMEOUT_FOR_ANIMATION);
103152
});
104153
});

0 commit comments

Comments
 (0)