Skip to content

Commit 1375c28

Browse files
swarajpureswarajpure
committed
tests refactor
1 parent 6842c54 commit 1375c28

File tree

5 files changed

+1279
-1266
lines changed

5 files changed

+1279
-1266
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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"application-template-wrapper": false,
33
"default-async-observers": true,
4-
"jquery-integration": true,
4+
"jquery-integration": false,
55
"template-only-glimmer-components": true
66
}

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

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

6+
const TIMEOUT_FOR_ANIMATION = 600;
7+
const CLASSES = ['Descriptor', 'Ember'];
8+
const MODULES = ['@ember/application', '@ember/array'];
9+
610
module('Integration | Component | table of contents', function (hooks) {
711
setupRenderingTest(hooks);
812

913
test('it renders', async function (assert) {
1014
// Set any properties with this.set('myProperty', 'value');
1115
this.set('projectId', 'Ember');
1216
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');
17+
this.set('classesIDs', CLASSES);
18+
19+
await render(hbs`
20+
{{
21+
table-of-contents showPrivateClasses=true
22+
projectid=projectId
23+
version=emberVersion
24+
classesIDs=classesIDs
25+
isShowingNamespaces=true
26+
}}
27+
`);
28+
29+
const contentTitle = document.querySelector(
30+
'[data-test-toc-title="classes"]'
31+
);
32+
const contentReference = '.toc-level-1';
33+
34+
assert.dom(contentTitle).hasText('Classes');
2435
assert
25-
.dom('.toc-level-1 li')
36+
.dom(`${contentReference} li`)
2637
.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');
38+
assert.dom(findAll(`${contentReference} li`)[0]).hasText(CLASSES[0]);
39+
assert.dom(findAll(`${contentReference} li`)[1]).hasText(CLASSES[1]);
2940
});
3041

3142
test('Starts with underlying content visible', async function (assert) {
3243
// Set any properties with this.set('myProperty', 'value');
3344
this.set('projectId', 'Ember');
3445
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+
this.set('moduleIDs', MODULES);
47+
48+
await render(hbs`
49+
{{
50+
table-of-contents showPrivateClasses=true
51+
projectid=projectId
52+
version=emberVersion
53+
moduleIDs=moduleIDs
54+
isShowingNamespaces=true
55+
}}
56+
`);
57+
58+
const contentReference = '.toc-level-1';
59+
const content = document.querySelector(contentReference);
60+
const contentTitle = document.querySelector(
61+
'[data-test-toc-title="classes"]'
62+
);
63+
64+
assert.dom(contentTitle).hasText('Classes');
65+
assert.dom(content).hasClass('selected');
4666
assert
47-
.dom('.toc-level-1 li')
67+
.dom(`${contentReference} li`)
4868
.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');
69+
assert.dom(content).isVisible();
70+
assert.dom(findAll(`${contentReference} li`)[0]).hasText(MODULES[0]);
71+
assert.dom(findAll(`${contentReference} li`)[1]).hasText(MODULES[1]);
5372
});
5473

5574
test('Underlying content hides once clicked', async function (assert) {
5675
// Set any properties with this.set('myProperty', 'value');
5776
this.set('projectId', 'Ember');
5877
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');
78+
this.set('moduleIDs', MODULES);
79+
80+
await render(hbs`
81+
{{
82+
table-of-contents showPrivateClasses=true
83+
projectid=projectId
84+
version=emberVersion
85+
moduleIDs=moduleIDs
86+
isShowingNamespaces=true
87+
}}
88+
`);
89+
90+
const contentTitle = document.querySelector(
91+
'[data-test-toc-title="packages"]'
92+
);
93+
const contentReference = '.toc-level-1';
94+
const content = document.querySelector(contentReference);
95+
96+
assert.dom(contentTitle).hasText('Packages');
97+
assert.dom(content).hasClass('selected');
98+
assert.dom(content).isVisible();
99+
100+
await click(contentTitle);
101+
102+
const done = assert.async();
103+
setTimeout(() => {
104+
assert.dom(content).isNotVisible();
105+
assert.dom(content).doesNotHaveClass('selected');
106+
done();
107+
}, TIMEOUT_FOR_ANIMATION);
76108
});
77109

78110
test('Underlying content should be visible after 2 clicks', async function (assert) {
79111
// Set any properties with this.set('myProperty', 'value');
80112
this.set('projectId', 'Ember');
81113
this.set('emberVersion', '2.4.3');
114+
this.set('moduleIDs', MODULES);
115+
116+
await render(hbs`
117+
{{
118+
table-of-contents showPrivateClasses=true
119+
projectid=projectId
120+
version=emberVersion
121+
moduleIDs=moduleIDs
122+
isShowingNamespaces=true
123+
}}
124+
`);
125+
126+
const titleButton = document.querySelector(
127+
'[data-test-toc-title="packages"]'
128+
);
129+
const contentReference = '.toc-level-1';
130+
const content = document.querySelector(contentReference);
131+
132+
assert.dom(titleButton).hasText('Packages');
133+
assert.dom(content).hasClass('selected');
134+
assert.dom(content).isVisible();
135+
136+
await click(titleButton);
137+
138+
const done1 = assert.async();
82139

83-
this.set('moduleIDs', ['@ember/application', '@ember/array']);
140+
setTimeout(async () => {
141+
assert.dom(content).isNotVisible();
142+
assert.dom(content).doesNotHaveClass('selected');
84143

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

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');
146+
const done2 = assert.async();
95147

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');
148+
setTimeout(() => {
149+
assert.dom(content).isVisible();
150+
assert.dom(content).hasClass('selected');
151+
done2();
152+
}, TIMEOUT_FOR_ANIMATION);
99153

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');
154+
done1();
155+
}, TIMEOUT_FOR_ANIMATION);
103156
});
104157
});

0 commit comments

Comments
 (0)