Skip to content

Commit d876f32

Browse files
krdwankrdwan
authored
✅ [bento][amp-accordion][fixit] Bento accordion e2e tests (#32958)
* Bento accordion e2e tests * Move single expand to own file
1 parent 768808e commit d876f32

4 files changed

Lines changed: 255 additions & 0 deletions

File tree

‎extensions/amp-accordion/1.0/test-e2e/test-amp-accordion.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/**
2+
* Copyright 2021 The AMP HTML Authors. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS-IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
describes.endtoend(
18+
'amp-accordion',
19+
{
20+
version: '1.0',
21+
fixture: 'amp-accordion/amp-accordion.html',
22+
experiments: ['bento-accordion'],
23+
environments: ['single', 'viewer-demo'],
24+
},
25+
async (env) => {
26+
let controller;
27+
28+
let header1;
29+
30+
let content1;
31+
let content2;
32+
let content3;
33+
34+
let button1;
35+
let button2;
36+
37+
beforeEach(async () => {
38+
controller = env.controller;
39+
40+
header1 = await controller.findElement('#header1');
41+
42+
content1 = await controller.findElement('#content1');
43+
content2 = await controller.findElement('#content2');
44+
content3 = await controller.findElement('#content3');
45+
46+
button1 = await controller.findElement('#button1');
47+
button2 = await controller.findElement('#button2');
48+
});
49+
50+
it('expands and collapses when a header section is clicked', async () => {
51+
// section 1 is not expanded
52+
await expect(
53+
controller.getElementProperty(content1, 'clientHeight')
54+
).to.equal(0);
55+
56+
await controller.click(header1);
57+
58+
// section 1 is expanded
59+
await expect(
60+
controller.getElementProperty(content1, 'clientHeight')
61+
).to.equal(25);
62+
63+
await controller.click(header1);
64+
65+
// section 1 is collapsed
66+
await expect(
67+
controller.getElementProperty(content1, 'clientHeight')
68+
).to.equal(25);
69+
});
70+
71+
it('renders section in expanded state when expanded attribute provided', async () => {
72+
// section 3 should start in expanded state since it has
73+
// "expanded" attribute
74+
await expect(
75+
controller.getElementProperty(content3, 'clientHeight')
76+
).to.equal(25);
77+
});
78+
79+
it('expands and collapses when buttons are clicked', async () => {
80+
// section 1 is not expanded
81+
await expect(
82+
controller.getElementProperty(content1, 'clientHeight')
83+
).to.equal(0);
84+
85+
// toggle section 1
86+
await controller.click(button1);
87+
88+
// section 1 is expanded
89+
await expect(
90+
controller.getElementProperty(content1, 'clientHeight')
91+
).to.equal(25);
92+
93+
// collapse all button
94+
await controller.click(button2);
95+
96+
// all sections collapsed
97+
await expect(
98+
controller.getElementProperty(content1, 'clientHeight')
99+
).to.equal(0);
100+
await expect(
101+
controller.getElementProperty(content2, 'clientHeight')
102+
).to.equal(0);
103+
await expect(
104+
controller.getElementProperty(content3, 'clientHeight')
105+
).to.equal(0);
106+
});
107+
}
108+
);

‎extensions/amp-accordion/1.0/test-e2e/test-single-expand.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/**
2+
* Copyright 2021 The AMP HTML Authors. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS-IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
describes.endtoend(
18+
'amp-accordion',
19+
{
20+
version: '1.0',
21+
fixture: 'amp-accordion/single-expand.html',
22+
experiments: ['bento-accordion'],
23+
environments: ['single', 'viewer-demo'],
24+
},
25+
async (env) => {
26+
let controller;
27+
28+
beforeEach(async () => {
29+
controller = env.controller;
30+
});
31+
32+
it('expands only one section at a time for "expand-single-section" accordion', async () => {
33+
const header1 = await controller.findElement('#header2-1');
34+
const header2 = await controller.findElement('#header2-2');
35+
const content1 = await controller.findElement('#content2-1');
36+
const content2 = await controller.findElement('#content2-2');
37+
38+
// section 1 is not expanded
39+
await expect(
40+
controller.getElementProperty(content1, 'clientHeight')
41+
).to.equal(0);
42+
43+
// expand section 1
44+
await controller.click(header1);
45+
46+
// section 1 is expanded
47+
await expect(
48+
controller.getElementProperty(content1, 'clientHeight')
49+
).to.equal(25);
50+
51+
// expand section 2
52+
await controller.click(header2);
53+
54+
// section 2 is expanded, section 1 is collapsed
55+
await expect(
56+
controller.getElementProperty(content1, 'clientHeight')
57+
).to.equal(0);
58+
await expect(
59+
controller.getElementProperty(content2, 'clientHeight')
60+
).to.equal(25);
61+
});
62+
}
63+
);

‎test/fixtures/e2e/amp-accordion/amp-accordion.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<html ⚡>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>amp-accordion</title>
6+
<link rel="canonical" href="//example.com" >
7+
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
8+
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
9+
<script async src="https://cdn.ampproject.org/v0.js"></script>
10+
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-latest.js"></script>
11+
<style amp-custom>
12+
section div {
13+
height: 25px;
14+
}
15+
</style>
16+
</head>
17+
18+
<body>
19+
<amp-accordion
20+
id="accordion"
21+
animate="true"
22+
>
23+
<section id="section1">
24+
<h2 id="header1">Section 1</h2>
25+
<div id="content1">Puppies are cute.</div>
26+
</section>
27+
<section id="section2">
28+
<h2 id="header2">Section 2</h2>
29+
<div id="content2">Kittens are furry.</div>
30+
</section>
31+
<section id="section3" expanded>
32+
<h2 id="header3">Section 3</h2>
33+
<div id="content3">Elephants have great memory.</div>
34+
</section>
35+
</amp-accordion>
36+
37+
<div class="buttons">
38+
<button id="button1" on="tap:accordion.toggle(section='section1')">
39+
toggle(section1)
40+
</button>
41+
<button id="button2" on="tap:accordion.collapse()">
42+
collapse all
43+
</button>
44+
</div>
45+
</body>
46+
</html>

‎test/fixtures/e2e/amp-accordion/single-expand.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<html ⚡>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>amp-accordion</title>
6+
<link rel="canonical" href="//example.com" >
7+
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
8+
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
9+
<script async src="https://cdn.ampproject.org/v0.js"></script>
10+
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-latest.js"></script>
11+
<style amp-custom>
12+
section div {
13+
height: 25px;
14+
}
15+
</style>
16+
</head>
17+
18+
<body>
19+
<amp-accordion
20+
id="accordion2"
21+
animate="true"
22+
expand-single-section="true"
23+
>
24+
<section id="section2-1">
25+
<h2 id="header2-1">Section 1</h2>
26+
<div id="content2-1">Puppies are cute.</div>
27+
</section>
28+
<section id="section2-2">
29+
<h2 id="header2-2">Section 2</h2>
30+
<div id="content2-2">Kittens are furry.</div>
31+
</section>
32+
<section id="section2-3" expanded>
33+
<h2 id="header2-3">Section 3</h2>
34+
<div id="content2-3">Elephants have great memory.</div>
35+
</section>
36+
</amp-accordion>
37+
</body>
38+
</html>

0 commit comments

Comments
 (0)