diff --git a/example/test/components/components.test.js b/example/test/components/components.test.js new file mode 100644 index 0000000..1ee23fe --- /dev/null +++ b/example/test/components/components.test.js @@ -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, + }); + }); + } +}); diff --git a/example/test/components/testdata/amp-accordion.js b/example/test/components/testdata/amp-accordion.js new file mode 100644 index 0000000..247ce25 --- /dev/null +++ b/example/test/components/testdata/amp-accordion.js @@ -0,0 +1,27 @@ +module.exports = { + name: 'amp-accordion', + clickSelector: '#click', + success: '#click[expanded]', + code: ` + + + + + + + + + +
+

Section 1

+

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.

+
+
+

Section 2

+
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.
+
+ + + +`, +}; diff --git a/example/test/components/testdata/amp-anim.js b/example/test/components/testdata/amp-anim.js new file mode 100644 index 0000000..be8b2e2 --- /dev/null +++ b/example/test/components/testdata/amp-anim.js @@ -0,0 +1,17 @@ +module.exports = { + name: 'amp-anim', + success: 'amp-anim > img', + code: ` + + + + + + + + + + + +` +} diff --git a/example/test/bind.test.js b/example/test/components/testdata/amp-bind.js similarity index 51% rename from example/test/bind.test.js rename to example/test/components/testdata/amp-bind.js index 8f2414b..6ba0a53 100644 --- a/example/test/bind.test.js +++ b/example/test/components/testdata/amp-bind.js @@ -1,6 +1,8 @@ -const { loadAMP } = require('./util/loader'); - -const AMP_BIND_CODE = ` +module.exports = { + name: 'amp-bind', + clickSelector: 'button', + success: '#output.clicked', + code: ` @@ -13,12 +15,5 @@ const AMP_BIND_CODE = `
-`; - -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'); -}); +` +} diff --git a/example/test/components/testdata/amp-carousel.js b/example/test/components/testdata/amp-carousel.js new file mode 100644 index 0000000..83b10f1 --- /dev/null +++ b/example/test/components/testdata/amp-carousel.js @@ -0,0 +1,23 @@ +module.exports = { + name: 'amp-carousel', + clickSelector: '.amp-carousel-button-next', + success: () => + document.querySelector('#second').getBoundingClientRect().x === 0, + code: ` + + + + + + + + + + + + + + + +`, +}; diff --git a/example/test/components/testdata/amp-fit-text.js b/example/test/components/testdata/amp-fit-text.js new file mode 100644 index 0000000..6c79e5f --- /dev/null +++ b/example/test/components/testdata/amp-fit-text.js @@ -0,0 +1,17 @@ +module.exports = { + name: 'amp-fit-text', + success: 'amp-fit-text > .i-amphtml-fit-text-content > div', + code: ` + + + + + + + + + Hello, world! + + +` +} diff --git a/example/test/components/testdata/amp-form.js b/example/test/components/testdata/amp-form.js new file mode 100644 index 0000000..b1bfc30 --- /dev/null +++ b/example/test/components/testdata/amp-form.js @@ -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: ` + + + + + + + + + +
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+ + +`, +}; diff --git a/example/test/components/testdata/amp-img.js b/example/test/components/testdata/amp-img.js new file mode 100644 index 0000000..9d8a3e2 --- /dev/null +++ b/example/test/components/testdata/amp-img.js @@ -0,0 +1,16 @@ +module.exports = { + name: 'amp-img', + success: 'amp-img > img', + code: ` + + + + + + + + + + +` +} diff --git a/example/test/components/testdata/amp-list.js b/example/test/components/testdata/amp-list.js new file mode 100644 index 0000000..bb25c81 --- /dev/null +++ b/example/test/components/testdata/amp-list.js @@ -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: ` + + + + + + + + + + + + + + + + + + + + + + + +`, +}; diff --git a/example/test/components/testdata/amp-timeago.js b/example/test/components/testdata/amp-timeago.js new file mode 100644 index 0000000..8c949d4 --- /dev/null +++ b/example/test/components/testdata/amp-timeago.js @@ -0,0 +1,17 @@ +module.exports = { + name: 'amp-timeago', + success: 'amp-timeago > time', + code: ` + + + + + + + + + placeholder + + +`, +}; diff --git a/example/test/components/testdata/index.js b/example/test/components/testdata/index.js new file mode 100644 index 0000000..3741629 --- /dev/null +++ b/example/test/components/testdata/index.js @@ -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'), +]; diff --git a/example/test/amp-load.test.js b/example/test/core/amp-load.test.js similarity index 91% rename from example/test/amp-load.test.js rename to example/test/core/amp-load.test.js index 9f9affa..abae4dc 100644 --- a/example/test/amp-load.test.js +++ b/example/test/core/amp-load.test.js @@ -1,4 +1,4 @@ -const { loadAMP } = require('./util/loader'); +const { loadAMP } = require('../util/loader'); describe('AMP loading', () => { test('runtime loads in iframe', async () => { diff --git a/example/test/csp.test.js b/example/test/core/csp.test.js similarity index 95% rename from example/test/csp.test.js rename to example/test/core/csp.test.js index 71f8d03..9fff6b5 100644 --- a/example/test/csp.test.js +++ b/example/test/core/csp.test.js @@ -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(); diff --git a/example/test/demo.test.js b/example/test/core/demo.test.js similarity index 100% rename from example/test/demo.test.js rename to example/test/core/demo.test.js diff --git a/example/test/image.test.js b/example/test/core/image.test.js similarity index 94% rename from example/test/image.test.js rename to example/test/core/image.test.js index 68ea94f..378d613 100644 --- a/example/test/image.test.js +++ b/example/test/core/image.test.js @@ -1,4 +1,4 @@ -const { loadAMP } = require('./util/loader'); +const { loadAMP } = require('../util/loader'); const AMP_IMG_CODE = ` diff --git a/example/test/link.test.js b/example/test/core/link.test.js similarity index 94% rename from example/test/link.test.js rename to example/test/core/link.test.js index c859310..bdc454a 100644 --- a/example/test/link.test.js +++ b/example/test/core/link.test.js @@ -1,4 +1,4 @@ -const { loadAMP } = require('./util/loader'); +const { loadAMP } = require('../util/loader'); const AMP_IMG_CODE = ` diff --git a/example/test/mustache.test.js b/example/test/core/mustache.test.js similarity index 90% rename from example/test/mustache.test.js rename to example/test/core/mustache.test.js index 56a2f30..6660927 100644 --- a/example/test/mustache.test.js +++ b/example/test/core/mustache.test.js @@ -1,4 +1,4 @@ -const { loadAMP } = require('./util/loader'); +const { loadAMP } = require('../util/loader'); const AMP_LIST_CODE = ` @@ -10,7 +10,7 @@ const AMP_LIST_CODE = ` - +