Skip to content

Commit

Permalink
✅ [bento][amp-sidebar][fixit] Port sidebar e2e tests to from 0.1 to 1…
Browse files Browse the repository at this point in the history
….0 (#32837)

* Port sidebar e2e tests to from 0.1 to 1.0

* Update 0.1 version of test to specify version
  • Loading branch information
krdwan committed Feb 26, 2021
1 parent 02e2b83 commit 55b6a98
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 1 deletion.
1 change: 1 addition & 0 deletions extensions/amp-sidebar/0.1/test-e2e/test-amp-sidebar.js
Expand Up @@ -19,6 +19,7 @@ import {Key} from '../../../../build-system/tasks/e2e/functional-test-controller
describes.endtoend(
'amp-sidebar',
{
version: '0.1',
fixture: 'amp-sidebar/amp-sidebar.html',
environments: ['single', 'viewer-demo'],
},
Expand Down
131 changes: 131 additions & 0 deletions extensions/amp-sidebar/1.0/test-e2e/test-amp-sidebar.js
@@ -0,0 +1,131 @@
/**
* Copyright 2021 The AMP HTML Authors. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS-IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
//
import {Key} from '../../../../build-system/tasks/e2e/functional-test-controller';

describes.endtoend(
'amp-sidebar',
{
version: '1.0',
fixture: 'amp-sidebar/amp-sidebar.html',
experiments: ['bento-sidebar'],
environments: ['single', 'viewer-demo'],
},
async (env) => {
let controller;

beforeEach(() => {
controller = env.controller;
});

it('should render correctly', async () => {
const sidebar = await controller.findElement('#sidebar');

await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;
const image = await controller.findElement('#image');
await expect(
controller.getElementProperty(image, 'clientWidth')
).to.equal(0);
});

it('should open the sidebar', async () => {
const open = await controller.findElement('#open');
await controller.click(open);

const sidebar = await controller.findElement('#sidebar');
await expect(controller.getElementProperty(sidebar, 'hidden')).to.be
.false;

// Wait for the button to become visible
await controller.switchToShadowRoot(sidebar);
const backdrop = await controller.findElement('[part=backdrop]');

// After open animation completed backdrop's
// inline opacity style is cleared
await expect(
controller.getElementProperty(backdrop, 'style')
).to.have.length(0);

await expect(controller.getElementRect(sidebar)).to.include({
width: 300,
left: 0,
});

await controller.switchToLight();
const checkWidth = await controller.findElement('#checkWidth');
await expect(
controller.getElementProperty(checkWidth, 'clientWidth')
).to.equal(300);
});

it('should close the sidebar on button click', async () => {
const open = await controller.findElement('#open');
await controller.click(open);

const sidebar = await controller.findElement('#sidebar');
await expect(controller.getElementProperty(sidebar, 'hidden')).to.be
.false;

// Wait for the button to become visible
await controller.switchToShadowRoot(sidebar);
const backdrop = await controller.findElement('[part=backdrop]');

// After open animation completed backdrop's
// inline opacity style is cleared
await expect(
controller.getElementProperty(backdrop, 'style')
).to.have.length(0);

await expect(controller.getElementRect(sidebar)).to.include({
width: 300,
right: 300,
});

await controller.switchToLight();
const close = await controller.findElement('#close');
await controller.click(close);
await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;
});

it('should close the sidebar on esc', async () => {
const open = await controller.findElement('#open');
await controller.click(open);

const sidebar = await controller.findElement('#sidebar');
await expect(controller.getElementProperty(sidebar, 'hidden')).to.be
.false;

await controller.type(null, Key.Escape);

await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;
});

it('should close the sidebar on click outside', async () => {
const open = await controller.findElement('#open');
await controller.click(open);

const sidebar = await controller.findElement('#sidebar');
await expect(controller.getElementProperty(sidebar, 'hidden')).to.be
.false;

await controller.switchToShadowRoot(sidebar);
const backdrop = await controller.findElement('[part=backdrop]');
await controller.click(backdrop);

await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;
});
}
);
3 changes: 2 additions & 1 deletion test/fixtures/e2e/amp-sidebar/amp-sidebar.html
Expand Up @@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-latest.js"></script>
<style amp-custom>
amp-sidebar {
width: 300px;
Expand All @@ -27,6 +27,7 @@
layout="responsive"
width="13" height="10"
></amp-img>
<div id='checkWidth'></div>
<button id="close" on="tap: sidebar.close">Close sidebar</button>
</amp-sidebar>

Expand Down

0 comments on commit 55b6a98

Please sign in to comment.