fix(): fix timeout for screenshot

Author: manucorporat

.circleci/config.yml

@@ -51,14 +51,14 @@ jobs:
     steps:
       - attach_workspace:
           at: ~/stencil
-      - run: npm run test.end-to-end -- --ci --debug --max-workers=4
+      - run: npm run test.end-to-end -- --ci
 
   test_jest:
     <<: *defaults
     steps:
       - attach_workspace:
           at: ~/stencil
-      - run: npm run test.jest -- --max-workers=4
+      - run: npm run test.jest -- --maxWorkers=1
 
   test_sys_node:
     <<: *defaults

src/runtime/test/globals.spec.tsx

@@ -49,10 +49,10 @@ describe('globals', () => {
       html: `<cmp-el></cmp-el>`
     });
 
-    expect(page.rootInstance.proto).toBe(Element.prototype);
-    expect(page.rootInstance.proto).toBe((page.win as any).Element.prototype);
-    expect(page.rootInstance.proto).toBe((window as any).Element.prototype);
-    expect(page.rootInstance.proto).toBe((global as any).Element.prototype);
+    expect(page.rootInstance.proto).toEqual(Element.prototype);
+    expect(page.rootInstance.proto).toEqual((page.win as any).Element.prototype);
+    expect(page.rootInstance.proto).toEqual((window as any).Element.prototype);
+    expect(page.rootInstance.proto).toEqual((global as any).Element.prototype);
     expect(page.rootInstance.proto).toBeTruthy();
   });
 });

src/screenshot/connector-base.ts

@@ -47,7 +47,7 @@ export class ScreenshotConnector implements d.ScreenshotConnector {
     this.packageDir = opts.packageDir;
     this.rootDir = opts.rootDir;
     this.appNamespace = opts.appNamespace;
-    this.timeoutBeforeScreenshot = typeof opts.timeoutBeforeScreenshot === 'number' ? opts.timeoutBeforeScreenshot : 4;
+    this.timeoutBeforeScreenshot = typeof opts.timeoutBeforeScreenshot === 'number' ? opts.timeoutBeforeScreenshot : 0;
     this.pixelmatchModulePath = opts.pixelmatchModulePath;
 
     if (!opts.logger) {

src/testing/jest/jest-config.ts

@@ -9,19 +9,17 @@ export function buildJestArgv(config: d.Config) {
     ...config.flags.knownArgs.slice()
   ];
 
-  if (config.flags.e2e && config.flags.ci && !args.some(a => a.startsWith('--max-workers') || a.startsWith('--maxWorkers'))) {
-    args.push('--maxWorkers=4');
-  }
-  if (config.flags.devtools) {
-    args.push('--maxWorkers=1');
+  if (config.flags.e2e && (config.flags.ci || config.flags.devtools)) {
+    if (!args.some(a => a.startsWith('--max-workers') || a.startsWith('--maxWorkers'))) {
+      args.push('--max-workers=1');
+    }
     args.push('--runInBand');
   }
 
   config.logger.debug(`jest args: ${args.join(' ')}`);
 
   const { options } = require('jest-cli/build/cli/args');
   const jestArgv = yargs(args).options(options).argv as d.JestArgv;
-
   jestArgv.config = buildJestConfig(config);
 
   return jestArgv;

src/testing/jest/jest-screenshot.ts

@@ -9,8 +9,7 @@ export async function runJestScreenshot(config: d.Config, env: d.E2EProcessEnv)
   const connector: d.ScreenshotConnector = new ScreenshotConnector();
 
   // for CI, let's wait a little longer than locally before taking the screenshot
-  const timeoutBeforeScreenshot = config.flags.ci ? 30 : 10;
-
+  const timeoutBeforeScreenshot = 0;
   const pixelmatchModulePath = config.sys.path.join(config.sys.compiler.packageDir, 'screenshot', 'pixel-match.js');
   config.logger.debug(`pixelmatch module: ${pixelmatchModulePath}`);
 

src/testing/jest/test/jest-config.spec.ts

@@ -25,13 +25,13 @@ describe('jest-config', () => {
 
   it('pass --maxWorkers=2 arg when e2e test and --ci', () => {
     const process: any = {
-      argv: ['node', 'stencil', 'test', '--ci', '--e2e', '--maxWorkers=2']
+      argv: ['node', 'stencil', 'test', '--ci', '--e2e', '--max-workers=2']
     };
     const config = mockConfig();
     config.flags = parseFlags(process);
     config.testing = {};
 
-    expect(config.flags.args).toEqual(['--ci', '--e2e', '--maxWorkers=2']);
+    expect(config.flags.args).toEqual(['--ci', '--e2e', '--max-workers=2']);
     expect(config.flags.unknownArgs).toEqual([]);
 
     const jestArgv = buildJestArgv(config);
@@ -52,7 +52,7 @@ describe('jest-config', () => {
 
     const jestArgv = buildJestArgv(config);
     expect(jestArgv.ci).toBe(true);
-    expect(jestArgv.maxWorkers).toBe(4);
+    expect(jestArgv.maxWorkers).toBe(1);
   });
 
   it('pass --maxWorkers=2 arg to jest', () => {

src/testing/puppeteer/puppeteer-screenshot.ts

@@ -84,24 +84,20 @@ export async function pageCompareScreenshot(page: pd.E2EPageInternal, env: d.E2E
   const emulateConfig = JSON.parse(env.__STENCIL_EMULATE__) as d.EmulateConfig;
   const screenshotBuildData = JSON.parse(env.__STENCIL_SCREENSHOT_BUILD__) as d.ScreenshotBuildData;
 
-  await (page as any).waitForNavigation({
-    timeout: screenshotBuildData.timeoutBeforeScreenshot,
-    waitUntil: 'networkidle0'
-  });
-
+  await wait(screenshotBuildData.timeoutBeforeScreenshot);
   await page.evaluate(() => {
     return new Promise(resolve => {
-      window.requestAnimationFrame(() => {
-        resolve();
-      });
+      (window as any).requestIdleCallback(() => {
+        window.requestAnimationFrame(() => {
+          resolve();
+        });
+      }, { timeout: 100 });
     });
   });
 
   const screenshotOpts = createPuppeteerScreenshopOptions(opts);
   const screenshotBuf = await page.screenshot(screenshotOpts);
-
   const pixelmatchThreshold = (typeof opts.pixelmatchThreshold === 'number' ? opts.pixelmatchThreshold : screenshotBuildData.pixelmatchThreshold);
-
   const results = await compareScreenshot(emulateConfig, screenshotBuildData, screenshotBuf, desc, testPath, pixelmatchThreshold);
 
   return results;
@@ -127,3 +123,7 @@ function createPuppeteerScreenshopOptions(opts: d.ScreenshotOptions) {
 
   return puppeteerOpts;
 }
+
+function wait(ms: number) {
+  return new Promise<void>(resolve => setTimeout(resolve, ms));
+}

test/karma/karma.config.js

@@ -30,7 +30,7 @@ var browserStackLaunchers = {
     base: 'BrowserStack',
     browser: 'safari',
     os: 'OS X',
-    os_version: 'High Sierra'
+    os_version: 'Mojave'
   }
 };
 

test/karma/test-app/attribute-complex/index.html

@@ -6,8 +6,10 @@
 <attribute-complex></attribute-complex>
 
 <script>
-  customElements.whenDefined('attribute-complex').then(function() {
-    var el = document.querySelector('attribute-complex');
-    el.getInstance();
-  });
+  if (window.customElements) {
+    customElements.whenDefined('attribute-complex').then(function() {
+      var el = document.querySelector('attribute-complex');
+      el.getInstance();
+    });
+  }
 </script>

test/karma/test-app/esm-import/karma.spec.ts

@@ -65,7 +65,7 @@ if (typeof (window as any).CustomEvent !== 'function') {
 }
 
 function buttonClick(button: HTMLButtonElement) {
-  // const event = new (window as any).CustomEvent('click', { 'bubbles': true, composed: true } as any);
-  // button.dispatchEvent(event);
-  button.click();
+  const event = new (window as any).CustomEvent('click', { 'bubbles': true, composed: true } as any);
+  button.dispatchEvent(event);
+  // button.click();
 }