Skip to content

Commit

Permalink
Add component tests (#52)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fstanis
fstanis authored Apr 14, 2020
1 parent 7460192 commit 1213bbc
Show file tree
Hide file tree
Showing 18 changed files with 283 additions and 20 deletions.
24 changes: 24 additions & 0 deletions example/test/components/components.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
const { loadAMP } = require('../util/loader');
const testdata = require('./testdata');

describe('component tests', () => {
for (const component of testdata) {
test(component.name, async () => {
const { page, iframe } = await loadAMP(component.code);
if (component.loadSelector) {
await iframe.waitForSelector(component.loadSelector);
}
await page.waitFor(1000);
if (component.clickSelector) {
const clickers = await iframe.$$(component.clickSelector);
for (const clicker of clickers) {
await clicker.click();
}
}
await iframe.waitFor(component.success, {
polling: 'mutation',
visible: true,
});
});
}
});
27 changes: 27 additions & 0 deletions example/test/components/testdata/amp-accordion.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
module.exports = {
name: 'amp-accordion',
clickSelector: '#click',
success: '#click[expanded]',
code: `<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<amp-accordion>
<section id="click">
<h4>Section 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section>
<h4>Section 2</h4>
<div>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer placerat dapibus sem. Duis rutrum tristique quam, et pulvinar urna. Praesent eget quam dui. Vivamus egestas posuere lorem, ut tempus magna aliquam et. Nulla eu sagittis mauris. Aliquam tincidunt id turpis sit amet consectetur. Phasellus sit amet dignissim felis. Quisque lobortis, eros scelerisque aliquet tincidunt, quam tellus pulvinar lorem, vitae porta nulla velit at turpis. Aliquam erat volutpat.</div>
</section>
</amp-accordion>
</body>
</html>
`,
};
17 changes: 17 additions & 0 deletions example/test/components/testdata/amp-anim.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
module.exports = {
name: 'amp-anim',
success: 'amp-anim > img',
code: `<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<amp-anim height="100" src="https://amp.dev/static/samples/img/gopher.gif"></amp-anim>
</body>
</html>
`
}
19 changes: 7 additions & 12 deletions example/test/bind.test.js → example/test/components/testdata/amp-bind.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
const { loadAMP } = require('./util/loader');

const AMP_BIND_CODE = `<!DOCTYPE html>
module.exports = {
name: 'amp-bind',
clickSelector: 'button',
success: '#output.clicked',
code: `<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
Expand All @@ -13,12 +15,5 @@ const AMP_BIND_CODE = `<!DOCTYPE html>
<div id="output" [class]="state || ''"></div>
</body>
</html>
`;

test('amp-bind works correctly', async () => {
const { page, iframe } = await loadAMP(AMP_BIND_CODE);
const button = await iframe.$('button');
expect(await iframe.$eval('#output', (output) => output.className)).toBe('');
await button.click();
await iframe.waitForSelector('#output.clicked');
});
`
}
23 changes: 23 additions & 0 deletions example/test/components/testdata/amp-carousel.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
module.exports = {
name: 'amp-carousel',
clickSelector: '.amp-carousel-button-next',
success: () =>
document.querySelector('#second').getBoundingClientRect().x === 0,
code: `<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<amp-carousel height="100" type="slides">
<amp-img src="https://amp.dev/static/samples/img/image1.jpg" height="100"></amp-img>
<amp-img id="second" src="https://amp.dev/static/samples/img/image2.jpg" height="100"></amp-img>
<amp-img src="https://amp.dev/static/samples/img/image3.jpg" height="100"></amp-img>
</amp-carousel>
</body>
</html>
`,
};
17 changes: 17 additions & 0 deletions example/test/components/testdata/amp-fit-text.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
module.exports = {
name: 'amp-fit-text',
success: 'amp-fit-text > .i-amphtml-fit-text-content > div',
code: `<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<amp-fit-text height="100">Hello, world!</amp-fit-text>
</body>
</html>
`
}
57 changes: 57 additions & 0 deletions example/test/components/testdata/amp-form.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
module.exports = {
name: 'amp-form',
clickSelector: 'input[type=submit]',
loadSelector: 'form.i-amphtml-form',
success: () =>
document.querySelectorAll('input[value="Hello, foo!"]').length === 3 &&
document.querySelectorAll('input[value="Invalid input"]').length === 1,
code: `<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<form method="post" action-xhr="https://amp.dev/documentation/examples/api/hello">
<input type="hidden" name="name" value="foo">
<input type="submit">
<div submit-success>
<template type="amp-mustache">
<input class="output1" type="text" value="{{message}}">
</template>
</div>
</form>
<form method="post" action-xhr="https://amp.dev/documentation/examples/api/hello">
<input type="hidden" name="name" value="foo">
<input type="submit">
<div submit-success>
<script type="text/plain" template="amp-mustache">
<input class="output2" type="text" value="{{message}}">
</script>
</div>
</form>
<form method="get" action-xhr="https://amp.dev/documentation/examples/api/hello">
<input type="hidden" name="name" value="foo">
<input type="submit">
<div submit-success>
<template type="amp-mustache">
<input class="output3" type="text" value="{{message}}">
</template>
</div>
</form>
<form method="post" action-xhr="https://amp.dev/documentation/examples/api/hello">
<input type="hidden" name="name" value="">
<input type="submit">
<div submit-error>
<template type="amp-mustache">
<input class="output4" type="text" value="{{error}}">
</template>
</div>
</form>
</body>
</html>
`,
};
16 changes: 16 additions & 0 deletions example/test/components/testdata/amp-img.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
module.exports = {
name: 'amp-img',
success: 'amp-img > img',
code: `<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<amp-img src="https://amp.dev/static/samples/img/amp.jpg" width="800" height="600" layout="responsive"></amp-img>
</body>
</html>
`
}
58 changes: 58 additions & 0 deletions example/test/components/testdata/amp-list.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
module.exports = {
name: 'amp-list',
success: () =>
!!document.querySelector('p.output1') &&
document.querySelectorAll('p.output2').length === 2 &&
!!document.querySelector('p.output3') &&
!!document.querySelector('.output4') &&
document
.querySelector('.output4 > amp-img')
.getAttribute('src')
.startsWith('http://localhost:3000/modules/image-proxy?') &&
document
.querySelector('.output4 > div')
.style.backgroundImage.startsWith(
'url("http://localhost:3000/modules/image-proxy?'
) &&
document
.querySelector('.output4 > a')
.getAttribute('href')
.startsWith('http://localhost:3000/modules/link-redirect?'),
code: `<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<amp-list height="100" src="https://amp.dev/static/samples/json/cart.json">
<template type="amp-mustache">
<p class="output1">{{fullname}}</p>
</template>
</amp-list>
<amp-list height="100" src="https://amp.dev/documentation/examples/api/photo-stream" max-items="2">
<template type="amp-mustache">
<p class="output2">{{title}}</p>
</template>
</amp-list>
<amp-list height="100" src="https://amp.dev/static/samples/json/cart.json">
<script type="text/plain" template="amp-mustache">
<p class="output3">{{fullname}}</p>
</script>
</amp-list>
<amp-list height="100" src="https://amp.dev/documentation/examples/api/photo-stream" max-items="1">
<template type="amp-mustache">
<div class="output4">
<amp-img src="{{imageUrl}}" height="100"></amp-img>
<div style="background-image:url('{{imageUrl}}')"></div>
<a href="{{imageUrl}}">amp.dev</a>
</div>
</template>
</amp-list>
</body>
</html>
`,
};
17 changes: 17 additions & 0 deletions example/test/components/testdata/amp-timeago.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
module.exports = {
name: 'amp-timeago',
success: 'amp-timeago > time',
code: `<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<amp-timeago height="100" datetime="2017-12-18T00:37:33.809Z">placeholder</amp-timeago>
</body>
</html>
`,
};
11 changes: 11 additions & 0 deletions example/test/components/testdata/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
module.exports = [
require('./amp-accordion'),
require('./amp-anim'),
require('./amp-bind'),
require('./amp-carousel'),
require('./amp-fit-text'),
require('./amp-form'),
require('./amp-img'),
require('./amp-list'),
require('./amp-timeago'),
];
2 changes: 1 addition & 1 deletion example/test/amp-load.test.js → example/test/core/amp-load.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { loadAMP } = require('./util/loader');
const { loadAMP } = require('../util/loader');

describe('AMP loading', () => {
test('runtime loads in iframe', async () => {
Expand Down
2 changes: 1 addition & 1 deletion example/test/csp.test.js → example/test/core/csp.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { loadAMP } = require('./util/loader');
const { loadAMP } = require('../util/loader');

test('AMP iframe uses CSP', async () => {
const { page, iframe, requests } = await loadAMP();
Expand Down
0 example/test/demo.test.js → example/test/core/demo.test.js
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion example/test/image.test.js → example/test/core/image.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { loadAMP } = require('./util/loader');
const { loadAMP } = require('../util/loader');

const AMP_IMG_CODE = `<!DOCTYPE html>
<html ⚡4email>
Expand Down
2 changes: 1 addition & 1 deletion example/test/link.test.js → example/test/core/link.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { loadAMP } = require('./util/loader');
const { loadAMP } = require('../util/loader');

const AMP_IMG_CODE = `<!DOCTYPE html>
<html ⚡4email>
Expand Down
4 changes: 2 additions & 2 deletions example/test/mustache.test.js → example/test/core/mustache.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { loadAMP } = require('./util/loader');
const { loadAMP } = require('../util/loader');

const AMP_LIST_CODE = `<!DOCTYPE html>
<html ⚡4email>
Expand All @@ -10,7 +10,7 @@ const AMP_LIST_CODE = `<!DOCTYPE html>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<amp-list layout="fixed-height" height="100" src="https://amp.dev/static/samples/json/cart.json">
<amp-list height="100" src="https://amp.dev/static/samples/json/cart.json">
<template type="amp-mustache">
<div>
{{#cart_items}}
Expand Down
5 changes: 3 additions & 2 deletions example/test/xhr.test.js → example/test/core/xhr.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { loadAMP } = require('./util/loader');
const { loadAMP } = require('../util/loader');

const AMP_LIST_CODE = `<!DOCTYPE html>
<html ⚡4email>
Expand All @@ -10,7 +10,7 @@ const AMP_LIST_CODE = `<!DOCTYPE html>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<amp-list layout="fixed-height" height="100" src="https://amp.dev/static/samples/json/cart.json">
<amp-list height="100" src="https://amp.dev/static/samples/json/cart.json">
<template type="amp-mustache"></template>
</amp-list>
</body>
Expand All @@ -20,6 +20,7 @@ const AMP_LIST_CODE = `<!DOCTYPE html>
test('XHR interception is used', async () => {
const { iframe, requests } = await loadAMP(AMP_LIST_CODE, {
templateProxyURL: null,
transformTemplateProxyOutput: false,
});
await iframe.waitForSelector('amp-list>div[role=list]>div[role=listitem]');
const req = requests.find(
Expand Down

0 comments on commit 1213bbc

Please sign in to comment.