| const expect = require('chai').expect; |
| const express = require('express'); |
| const path = require('path'); |
| const addEventListenersToPuppeteerPage = require('./util').addEventListenersToPuppeteerPage; |
| const launchBrowser = require('./util').launchBrowser; |
| const startDemoPageServer = require('./util').startDemoPageServer; |
| |
| describe('utility functions for Puppeteer tests', async () => { |
| let browser; |
| before(async () => { browser = await launchBrowser(); }); |
| after(async () => { await browser.close(); }); |
| |
| let page; |
| beforeEach(async () => { page = await browser.newPage(); }); |
| afterEach(async () => { await page.close(); }); |
| |
| describe('addEventListenersToPuppeteerPage', () => { |
| let server; |
| let testPageUrl; |
| |
| beforeEach(async () => { |
| // Start an HTTP server on a random, unused port. |
| const app = express(); |
| await new Promise((resolve) => { server = app.listen(0, resolve); }); |
| testPageUrl = `http://localhost:${server.address().port}/`; |
| |
| // Serve a test page that triggers various custom events. |
| app.get('/', (req, res) => res.send(` |
| <html> |
| <head> |
| <script> |
| async function triggerEvent(name, detail) { |
| document.dispatchEvent( |
| new CustomEvent(name, {detail: detail, bubbles: true})); |
| await new Promise((resolve) => setTimeout(resolve, 10)); |
| } |
| |
| // This is necessary as await is not allowed outside a function. |
| async function main() { |
| await triggerEvent('alpha-event', |
| {msg: 'Only occurrence of alpha-event'}); |
| |
| await triggerEvent('beta-event', |
| {msg: '1st occurrence of beta-event'}); |
| await triggerEvent('beta-event', |
| {msg: '2nd occurrence of beta-event'}); |
| await triggerEvent('beta-event', |
| {msg: '3rd occurrence of beta-event'}); |
| |
| // No test case should create a promise for this event. The goal |
| // is to test that no promise accidentally resolves to this guy. |
| await triggerEvent('ignored-event', |
| {msg: 'No test case should catch me'}); |
| |
| await triggerEvent('gamma-event', |
| {msg: '1st occurrence of gamma-event'}); |
| await triggerEvent('gamma-event', |
| {msg: '2nd occurrence of gamma-event'}); |
| await triggerEvent('gamma-event', |
| {msg: '3rd occurrence of gamma-event'}); |
| } |
| main(); |
| </script> |
| </head> |
| <body> |
| <h1>Hello, world!</h1> |
| <p>I am just a test page.</p> |
| </body> |
| </html> |
| `)); |
| }); |
| |
| afterEach((done) => server.close(done)); |
| |
| it('renders test page correctly', async () => { |
| await page.goto(testPageUrl); |
| expect(await page.$eval('h1', (el) => el.innerText)) |
| .to.equal('Hello, world!'); |
| expect(await page.$eval('p', (el) => el.innerText)) |
| .to.equal('I am just a test page.'); |
| }); |
| |
| it('catches events in the right order', async () => { |
| // Add event listeners. |
| const eventNames = [ |
| 'alpha-event', |
| 'beta-event', |
| 'gamma-event', |
| // We purposefully add a listener for ignored-event, but we won't try |
| // to catch any such events. This is to test that uncaught events do |
| // not interfere with the events we're trying to catch. |
| 'ignored-event', |
| ]; |
| const eventPromise = await addEventListenersToPuppeteerPage(page, eventNames); |
| |
| // We will collect the Event object details in the order they are caught. |
| const eventsInOrder = []; |
| const trackCaughtOrder = async (anEventPromise) => { |
| const detail = await anEventPromise; |
| eventsInOrder.push(detail); |
| return detail; |
| }; |
| |
| // We create event promises in an arbitrary order to test that this has no |
| // effect in the order that events are caught. |
| const allEventsPromise = Promise.all([ |
| trackCaughtOrder(eventPromise('gamma-event')), |
| trackCaughtOrder(eventPromise('alpha-event')), |
| trackCaughtOrder(eventPromise('gamma-event')), |
| trackCaughtOrder(eventPromise('beta-event')), |
| trackCaughtOrder(eventPromise('gamma-event')), |
| trackCaughtOrder(eventPromise('beta-event')), |
| trackCaughtOrder(eventPromise('beta-event')), |
| ]); |
| |
| await page.goto(testPageUrl); |
| |
| // Assert that each promise returned the expected event detail. |
| const allEvents = await allEventsPromise; |
| expect(allEvents).to.have.length(7); |
| expect(allEvents[0].msg).to.equal('1st occurrence of gamma-event'); |
| expect(allEvents[1].msg).to.equal('Only occurrence of alpha-event'); |
| expect(allEvents[2].msg).to.equal('2nd occurrence of gamma-event'); |
| expect(allEvents[3].msg).to.equal('1st occurrence of beta-event'); |
| expect(allEvents[4].msg).to.equal('3rd occurrence of gamma-event'); |
| expect(allEvents[5].msg).to.equal('2nd occurrence of beta-event'); |
| expect(allEvents[6].msg).to.equal('3rd occurrence of beta-event'); |
| |
| // Assert that promises were resolved in the expected order. |
| expect(eventsInOrder).to.have.length(7); |
| expect(eventsInOrder[0].msg).to.equal('Only occurrence of alpha-event'); |
| expect(eventsInOrder[1].msg).to.equal('1st occurrence of beta-event'); |
| expect(eventsInOrder[2].msg).to.equal('2nd occurrence of beta-event'); |
| expect(eventsInOrder[3].msg).to.equal('3rd occurrence of beta-event'); |
| expect(eventsInOrder[4].msg).to.equal('1st occurrence of gamma-event'); |
| expect(eventsInOrder[5].msg).to.equal('2nd occurrence of gamma-event'); |
| expect(eventsInOrder[6].msg).to.equal('3rd occurrence of gamma-event'); |
| }); |
| |
| it('fails if event promise function is called with unknown event', |
| async () => { |
| const eventPromise = await addEventListenersToPuppeteerPage(page, ['foo-event']); |
| expect(() => eventPromise('invalid-event')) |
| .to.throw('no event listener for "invalid-event"'); |
| }); |
| }); |
| |
| describe('startDemoPageServer', () => { |
| let baseUrl; |
| let stopDemoPageServer; |
| |
| before(async () => { |
| // Start a demo page server using Gold's webpack.config.js file. |
| const pathToGoldWebpackConfigJs = path.join(__dirname, '..', 'golden', 'webpack.config.js'); |
| ({ baseUrl, stopDemoPageServer } = await startDemoPageServer(pathToGoldWebpackConfigJs)); |
| }); |
| |
| after(async () => { await stopDemoPageServer(); }); |
| |
| it('should serve a demo page', async () => { |
| // Load changelists-page-sk-demo.html and perform a basic smoke test on a known page. |
| await page.goto(`${baseUrl}/dist/changelists-page-sk.html`); |
| expect(await page.$$('changelists-page-sk')).to.have.length(1); |
| }); |
| }); |
| }); |