fix(testing): close browser context and better error reporting

Author: manucorporat

src/testing/jest/jest-environment.ts

@@ -1,5 +1,5 @@
 import * as d from '../../declarations';
-import { closePages, connectBrowser, disconnectBrowser, newBrowserPage } from '../puppeteer/puppeteer-browser';
+import { connectBrowser, disconnectBrowser, newBrowserPage } from '../puppeteer/puppeteer-browser';
 import NodeEnvironment from 'jest-environment-node';
 
 
@@ -8,11 +8,9 @@ export function createJestPuppeteerEnvironment() {
   const JestEnvironment = class extends NodeEnvironment {
 
     global: d.JestEnvironmentGlobal;
-    browser: any = null;
     browserContext: any = null;
     pages: any[] = [];
 
-
     constructor(config: any) {
       super(config);
     }
@@ -25,34 +23,36 @@ export function createJestPuppeteerEnvironment() {
     }
 
     async newPuppeteerPage() {
-      if (!this.browser) {
+      if (!this.browserContext) {
         // load the browser and page on demand
-        this.browser = await connectBrowser();
-        this.browserContext = await this.browser.createIncognitoBrowserContext();
+        const browser = await connectBrowser();
+        this.browserContext = await browser.createIncognitoBrowserContext();
       }
 
-      if (!this.browser) {
+      if (!this.browserContext) {
         return null;
       }
 
       const page = await newBrowserPage(this.browserContext);
+      this.pages.push(page);
       const env: d.E2EProcessEnv = process.env;
       if (typeof env.__STENCIL_DEFAULT_TIMEOUT__ === 'string') {
         page.setDefaultTimeout(parseInt(env.__STENCIL_DEFAULT_TIMEOUT__, 10));
       }
-      this.pages.push(page);
       return page;
     }
 
-    closeOpenPages() {
-      return closePages(this.pages);
+    async closeOpenPages() {
+      await Promise.all(
+        this.pages.map(page => page.close())
+      );
+      this.pages.length = 0;
     }
 
     async teardown() {
       await super.teardown();
-      await disconnectBrowser(this.browser, this.pages);
-      this.pages.length = 0;
-      this.browser = null;
+      await this.closeOpenPages();
+      await disconnectBrowser(this.browserContext);
       this.browserContext = null;
     }
   };

src/testing/puppeteer/puppeteer-browser.ts

@@ -1,5 +1,4 @@
 import * as d from '../../declarations';
-import * as pd from './puppeteer-declarations';
 import * as puppeteer from 'puppeteer';
 
 
@@ -89,54 +88,18 @@ export async function connectBrowser() {
 }
 
 
-export async function disconnectBrowser(browser: puppeteer.Browser, pages: puppeteer.Page[]) {
-  await closePages(pages);
-  if (browser) {
+export async function disconnectBrowser(browserContext: puppeteer.BrowserContext) {
+  if (browserContext) {
+    const browser = browserContext.browser();
+    try {
+      await browserContext.close();
+    } catch (e) {}
     try {
       browser.disconnect();
     } catch (e) {}
   }
 }
 
-export async function closePages(pages: puppeteer.Page[]) {
-  if (Array.isArray(pages)) {
-    await Promise.all(pages.map(closePage));
-    pages.length = 0;
-  }
-}
-
-
 export function newBrowserPage(browserContext: puppeteer.BrowserContext) {
   return browserContext.newPage();
 }
-
-
-export async function closePage(page: any) {
-  try {
-    if (Array.isArray((page as pd.E2EPageInternal)._e2eElements)) {
-      const disposes = (page as pd.E2EPageInternal)._e2eElements.map(async elmHande => {
-        if (typeof elmHande.e2eDispose === 'function') {
-          await elmHande.e2eDispose();
-        }
-      });
-      await Promise.all(disposes);
-    }
-  } catch (e) {}
-
-  (page as pd.E2EPageInternal)._e2eElements = null;
-  (page as pd.E2EPageInternal)._e2eEvents = null;
-  (page as pd.E2EPageInternal)._e2eGoto = null;
-  (page as pd.E2EPageInternal).find = null;
-  (page as pd.E2EPageInternal).findAll = null;
-  (page as pd.E2EPageInternal).compareScreenshot = null;
-  (page as pd.E2EPageInternal).setContent = null;
-  (page as pd.E2EPageInternal).spyOnEvent = null;
-  (page as pd.E2EPageInternal).waitForChanges = null;
-  (page as pd.E2EPageInternal).waitForEvent = null;
-
-  try {
-    if (!(page as puppeteer.Page).isClosed()) {
-      await (page as puppeteer.Page).close();
-    }
-  } catch (e) {}
-}

src/testing/puppeteer/puppeteer-declarations.ts

@@ -10,7 +10,7 @@ export interface NewE2EPageOptions extends puppeteer.NavigationOptions {
 
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 type PuppeteerPage = Omit<puppeteer.Page,
-'bringToFront' | 'browser' | 'screenshot' | 'close' | 'emulate' | 'emulateMedia' | 'frames' | 'goBack' | 'goForward' | 'isClosed' | 'mainFrame' | 'pdf' | 'reload' | 'target' | 'title' | 'viewport' | 'waitForNavigation' | 'screenshot' | 'workers' | 'addListener' | 'prependListener' | 'prependOnceListener' | 'removeListener' | 'removeAllListeners' | 'setMaxListeners' | 'getMaxListeners' | 'listeners' | 'rawListeners' | 'emit' | 'eventNames' | 'listenerCount' | '$x' | 'waitForXPath'
+'bringToFront' | 'browser' | 'screenshot' | 'emulate' | 'emulateMedia' | 'frames' | 'goBack' | 'goForward' | 'isClosed' | 'mainFrame' | 'pdf' | 'reload' | 'target' | 'title' | 'viewport' | 'waitForNavigation' | 'screenshot' | 'workers' | 'addListener' | 'prependListener' | 'prependOnceListener' | 'removeListener' | 'removeAllListeners' | 'setMaxListeners' | 'getMaxListeners' | 'listeners' | 'rawListeners' | 'emit' | 'eventNames' | 'listenerCount' | '$x' | 'waitForXPath'
 >;
 
 
@@ -117,7 +117,7 @@ export interface E2EPage extends PuppeteerPage {
    * Waits for the event to be received on `window`. The optional second argument
    * allows the listener to be set to `document` if needed.
    */
-  waitForEvent(eventName: string, selector?: 'window' | 'document'): Promise<CustomEvent>;
+  waitForEvent(eventName: string): Promise<Event>;
 }
 
 
@@ -127,6 +127,7 @@ export interface E2EPageInternal extends E2EPage {
   _e2eEvents: WaitForEvent[];
   _e2eEventIds: number;
   _e2eGoto(url: string, options?: Partial<puppeteer.NavigationOptions>): Promise<puppeteer.Response | null>;
+  _e2eClose(options?: puppeteer.PageCloseOptions): Promise<void>;
   screenshot(options?: puppeteer.ScreenshotOptions): Promise<Buffer>;
 }
 
@@ -387,6 +388,11 @@ export interface E2EElement {
    * is no longer connected to the document.
    */
   waitForNotVisible(): Promise<void>;
+
+  /**
+   * Waits until the given event is listened in the element.
+   */
+  waitForEvent(eventName: string): Promise<any>;
 }
 
 

src/testing/puppeteer/puppeteer-element.ts

@@ -1,7 +1,7 @@
 import * as d from '../../declarations';
 import * as pd from './puppeteer-declarations';
 import * as puppeteer from 'puppeteer';
-import { EventSpy, addE2EListener } from './puppeteer-events';
+import { EventSpy, addE2EListener, waitForEvent } from './puppeteer-events';
 import { find, findAll } from './puppeteer-find';
 import { MockHTMLElement, cloneAttributes, parseHtmlToFragment } from '@mock-doc';
 
@@ -108,6 +108,10 @@ export class E2EElement extends MockHTMLElement implements pd.E2EElementInternal
     return isVisible;
   }
 
+  waitForEvent(eventName: string) {
+    return waitForEvent(this._page, eventName, this._elmHandle);
+  }
+
   waitForVisible() {
     return new Promise<void>((resolve, reject) => {
       let resolveTmr: any;

src/testing/puppeteer/puppeteer-events.ts

@@ -15,8 +15,6 @@ export async function initPageEvents(page: pd.E2EPageInternal) {
   await page.evaluateOnNewDocument(browserContextEvents);
 
   page.spyOnEvent = pageSpyOnEvent.bind(page, page);
-
-  page.waitForEvent = pageWaitForEvent.bind(page, page);
 }
 
 
@@ -36,32 +34,22 @@ async function pageSpyOnEvent(page: pd.E2EPageInternal, eventName: string, selec
   return eventSpy;
 }
 
-
-async function pageWaitForEvent(page: pd.E2EPageInternal, eventName: string, selector: 'window' | 'document') {
-  if (selector !== 'document') {
-    selector = 'window';
-  }
-
-  const ev = await page.evaluate((selector: string, eventName: string) => {
-
-    return new Promise((resolve, reject) => {
+export async function waitForEvent(page: pd.E2EPageInternal, eventName: string, elementHandle: puppeteer.ElementHandle) {
+  const ev = await page.evaluate((element: Element, eventName: string) => {
+    return new Promise<any>((resolve, reject) => {
       const tmr = setTimeout(() => {
-        reject(`page.waitForEvent() timeout, eventName: ${eventName}, selector: ${selector}`);
+        reject(`waitForEvent() timeout, eventName: ${eventName}`);
       }, 10000);
 
-      function listener(ev: any) {
+      element.addEventListener(eventName, () => {
         clearTimeout(tmr);
-        (window as any)[selector].removeEventListener(eventName, listener);
-        resolve((window as pd.BrowserWindow).stencilSerializeEvent(ev));
-      }
+        resolve((window as pd.BrowserWindow).stencilSerializeEvent(ev as any));
+      }, {once: true});
 
-      (window as any)[selector].addEventListener(eventName, listener);
     });
-
-  }, selector, eventName);
+  }, elementHandle, eventName);
 
   await page.waitForChanges();
-
   return ev;
 }