puppeteer-tests/util_nodejs_test.ts - buildbot - Git at Google

 import * as http from 'http';
 import * as net from 'net';
 import express from 'express';
 import puppeteer from 'puppeteer';
 import { expect } from 'chai';
 import {
   EventName,
   addEventListenersToPuppeteerPage,
   launchBrowser,
 } from './util';

 describe('utility functions for Puppeteer tests', async () => {
   let browser: puppeteer.Browser;
   before(async () => {
     browser = await launchBrowser();
   });
   after(async () => {
     await browser.close();
   });

   let page: puppeteer.Page;
   beforeEach(async () => {
     page = await browser.newPage();
   });
   afterEach(async () => {
     await page.close();
   });

   describe('addEventListenersToPuppeteerPage', () => {
     let server: http.Server;
     let testPageUrl: string;

     // Type for the custom event details used in this test.
     interface TestEventDetail {
       msg: string;
     }

     beforeEach(async () => {
       // Start an HTTP server on a random, unused port.
       const app = express();
       await new Promise((resolve) => {
         server = app.listen(0, () => resolve(undefined));
       });
       testPageUrl = `http://localhost:${
         (server!.address() as net.AddressInfo).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 as HTMLElement).innerText)
       ).to.equal('Hello, world!');
       expect(
         await page.$eval('p', (el) => (el as HTMLElement).innerText)
       ).to.equal('I am just a test page.');
     });

     it('catches events in the right order', async () => {
       // Add event listeners.
       const eventNames: EventName[] = [
         '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 eventDetailsInOrder: TestEventDetail[] = [];
       const trackCaughtOrder = async (
         anEventPromise: Promise<TestEventDetail>
       ) => {
         const detail = await anEventPromise;
         eventDetailsInOrder.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 allEventDetailsPromise = Promise.all([
         trackCaughtOrder(eventPromise<TestEventDetail>('gamma-event')),
         trackCaughtOrder(eventPromise<TestEventDetail>('alpha-event')),
         trackCaughtOrder(eventPromise<TestEventDetail>('gamma-event')),
         trackCaughtOrder(eventPromise<TestEventDetail>('beta-event')),
         trackCaughtOrder(eventPromise<TestEventDetail>('gamma-event')),
         trackCaughtOrder(eventPromise<TestEventDetail>('beta-event')),
         trackCaughtOrder(eventPromise<TestEventDetail>('beta-event')),
       ]);

       await page.goto(testPageUrl);

       // Assert that each promise returned the expected event detail.
       const allEventDetails = await allEventDetailsPromise;
       expect(allEventDetails).to.have.length(7);
       expect(allEventDetails[0].msg).to.equal('1st occurrence of gamma-event');
       expect(allEventDetails[1].msg).to.equal('Only occurrence of alpha-event');
       expect(allEventDetails[2].msg).to.equal('2nd occurrence of gamma-event');
       expect(allEventDetails[3].msg).to.equal('1st occurrence of beta-event');
       expect(allEventDetails[4].msg).to.equal('3rd occurrence of gamma-event');
       expect(allEventDetails[5].msg).to.equal('2nd occurrence of beta-event');
       expect(allEventDetails[6].msg).to.equal('3rd occurrence of beta-event');

       // Assert that promises were resolved in the expected order.
       expect(eventDetailsInOrder).to.have.length(7);
       expect(eventDetailsInOrder[0].msg).to.equal(
         'Only occurrence of alpha-event'
       );
       expect(eventDetailsInOrder[1].msg).to.equal(
         '1st occurrence of beta-event'
       );
       expect(eventDetailsInOrder[2].msg).to.equal(
         '2nd occurrence of beta-event'
       );
       expect(eventDetailsInOrder[3].msg).to.equal(
         '3rd occurrence of beta-event'
       );
       expect(eventDetailsInOrder[4].msg).to.equal(
         '1st occurrence of gamma-event'
       );
       expect(eventDetailsInOrder[5].msg).to.equal(
         '2nd occurrence of gamma-event'
       );
       expect(eventDetailsInOrder[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"'
       );
     });
   });
 });
	import * as http from 'http';
	import * as net from 'net';
	import express from 'express';
	import puppeteer from 'puppeteer';
	import { expect } from 'chai';
	import {
	EventName,
	addEventListenersToPuppeteerPage,
	launchBrowser,
	} from './util';

	describe('utility functions for Puppeteer tests', async () => {
	let browser: puppeteer.Browser;
	before(async () => {
	browser = await launchBrowser();
	});
	after(async () => {
	await browser.close();
	});

	let page: puppeteer.Page;
	beforeEach(async () => {
	page = await browser.newPage();
	});
	afterEach(async () => {
	await page.close();
	});

	describe('addEventListenersToPuppeteerPage', () => {
	let server: http.Server;
	let testPageUrl: string;

	// Type for the custom event details used in this test.
	interface TestEventDetail {
	msg: string;
	}

	beforeEach(async () => {
	// Start an HTTP server on a random, unused port.
	const app = express();
	await new Promise((resolve) => {
	server = app.listen(0, () => resolve(undefined));
	});
	testPageUrl = `http://localhost:${
	(server!.address() as net.AddressInfo).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 as HTMLElement).innerText)
	).to.equal('Hello, world!');
	expect(
	await page.$eval('p', (el) => (el as HTMLElement).innerText)
	).to.equal('I am just a test page.');
	});

	it('catches events in the right order', async () => {
	// Add event listeners.
	const eventNames: EventName[] = [
	'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 eventDetailsInOrder: TestEventDetail[] = [];
	const trackCaughtOrder = async (
	anEventPromise: Promise<TestEventDetail>
	) => {
	const detail = await anEventPromise;
	eventDetailsInOrder.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 allEventDetailsPromise = Promise.all([
	trackCaughtOrder(eventPromise<TestEventDetail>('gamma-event')),
	trackCaughtOrder(eventPromise<TestEventDetail>('alpha-event')),
	trackCaughtOrder(eventPromise<TestEventDetail>('gamma-event')),
	trackCaughtOrder(eventPromise<TestEventDetail>('beta-event')),
	trackCaughtOrder(eventPromise<TestEventDetail>('gamma-event')),
	trackCaughtOrder(eventPromise<TestEventDetail>('beta-event')),
	trackCaughtOrder(eventPromise<TestEventDetail>('beta-event')),
	]);

	await page.goto(testPageUrl);

	// Assert that each promise returned the expected event detail.
	const allEventDetails = await allEventDetailsPromise;
	expect(allEventDetails).to.have.length(7);
	expect(allEventDetails[0].msg).to.equal('1st occurrence of gamma-event');
	expect(allEventDetails[1].msg).to.equal('Only occurrence of alpha-event');
	expect(allEventDetails[2].msg).to.equal('2nd occurrence of gamma-event');
	expect(allEventDetails[3].msg).to.equal('1st occurrence of beta-event');
	expect(allEventDetails[4].msg).to.equal('3rd occurrence of gamma-event');
	expect(allEventDetails[5].msg).to.equal('2nd occurrence of beta-event');
	expect(allEventDetails[6].msg).to.equal('3rd occurrence of beta-event');

	// Assert that promises were resolved in the expected order.
	expect(eventDetailsInOrder).to.have.length(7);
	expect(eventDetailsInOrder[0].msg).to.equal(
	'Only occurrence of alpha-event'
	);
	expect(eventDetailsInOrder[1].msg).to.equal(
	'1st occurrence of beta-event'
	);
	expect(eventDetailsInOrder[2].msg).to.equal(
	'2nd occurrence of beta-event'
	);
	expect(eventDetailsInOrder[3].msg).to.equal(
	'3rd occurrence of beta-event'
	);
	expect(eventDetailsInOrder[4].msg).to.equal(
	'1st occurrence of gamma-event'
	);
	expect(eventDetailsInOrder[5].msg).to.equal(
	'2nd occurrence of gamma-event'
	);
	expect(eventDetailsInOrder[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"'
	);
	});
	});
	});