chore(tests): fix failing core e2e and angular test app (#21986)

- version updates, add package-lock to the angular test-app - add protractor ci config - install headless chrome dependencies per https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-on-circleci
2026-03-13 10:22:08 +08:00 · 2020-08-27 14:14:05 -04:00
parent 36e4bf7dd7
commit bd4e931fbc
12 changed files with 14870 additions and 94 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,4 +1,4 @@
-version: 2
+version: 2.1

 aliases:
  - &restore-cache
@@ -31,10 +31,29 @@ aliases:

 defaults: &defaults
  docker:
-    - image: circleci/node:10-browsers
+    - image: circleci/node:latest-browsers
  working_directory: /tmp/workspace
+  environment:
+    NODE_ENV: development

 jobs:
+  puppeteer-dependencies:
+    <<: *defaults
+    steps:
+    - run:
+        name: Install headless Chrome dependencies
+        command: |
+          sudo apt-get install -yq \
+          gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
+          libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
+          libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 \
+          libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates \
+          fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
+    - run:
+        name: Install Puppeteer with Chromium
+        command: |
+          npm i puppeteer
+
  build:
    <<: *defaults
    steps:
@@ -311,13 +330,14 @@ jobs:
          command: npm install
          working_directory: /tmp/workspace/angular/test/test-app
      - run:
-          command: npm test
+          command: npm run test -- --protractor-config=e2e/protractor-ci.conf.js
          working_directory: /tmp/workspace/angular/test/test-app

 workflows:
  version: 2
  build:
    jobs:
+      - puppeteer-dependencies
      - build
      - build-core:
          requires: [build]
@@ -326,7 +346,7 @@ workflows:
      - test-core-lint:
          requires: [build-core]
      - test-core-e2e:
-          requires: [build-core]
+          requires: [puppeteer-dependencies, build-core]
      - test-core-spec:
          requires: [build-core]
      - test-core-treeshake:
--- a/angular/test/test-app/.npmrc
+++ b/angular/test/test-app/.npmrc
@@ -1 +0,0 @@
-package-lock=false
--- a/angular/test/test-app/e2e/protractor-ci.conf.js
+++ b/angular/test/test-app/e2e/protractor-ci.conf.js
@@ -0,0 +1,14 @@
+
+// Protractor CI configuration file, see link for more information
+// https://angular.io/guide/testing#configure-cli-for-ci-testing-in-chrome
+
+const config = require('./protractor.conf').config;
+
+config.capabilities = {
+  browserName: 'chrome',
+  chromeOptions: {
+    args: ['--headless', '--no-sandbox', '--window-size=1920,1080']
+  }
+};
+
+exports.config = config;
--- a/angular/test/test-app/e2e/protractor.conf.js
+++ b/angular/test/test-app/e2e/protractor.conf.js
@@ -1,4 +1,4 @@
-  // @ts-check
+// @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts

--- a/angular/test/test-app/e2e/src/form.e2e-spec.ts
+++ b/angular/test/test-app/e2e/src/form.e2e-spec.ts
@@ -31,13 +31,13 @@ describe('form', () => {
      await testStatus('INVALID');
      expect(await getText('#submit')).toEqual('false');
      await testData({
-        'datetime': '2010-08-20',
-        'select': null,
-        'toggle': false,
-        'input': '',
-        'input2': 'Default Value',
-        'checkbox': false,
-        'range': 5
+        datetime: '2010-08-20',
+        select: null,
+        toggle: false,
+        input: '',
+        input2: 'Default Value',
+        checkbox: false,
+        range: 5
      });
    });

@@ -49,39 +49,39 @@ describe('form', () => {
      await setProperty('ion-range', 'value', 40);
      await testStatus('VALID');
      await testData({
-        'datetime': '2010-08-20',
-        'select': 'nes',
-        'toggle': false,
-        'input': 'Some value',
-        'input2': 'Default Value',
-        'checkbox': false,
-        'range': 40
+        datetime: '2010-08-20',
+        select: 'nes',
+        toggle: false,
+        input: 'Some value',
+        input2: 'Default Value',
+        checkbox: false,
+        range: 40
      });
    });

    it('ion-toggle should change', async () => {
      await element(by.css('form ion-toggle')).click();
      await testData({
-        'datetime': '2010-08-20',
-        'select': null,
-        'toggle': true,
-        'input': '',
-        'input2': 'Default Value',
-        'checkbox': false,
-        'range': 5
+        datetime: '2010-08-20',
+        select: null,
+        toggle: true,
+        input: '',
+        input2: 'Default Value',
+        checkbox: false,
+        range: 5
      });
    });

    it('ion-checkbox should change', async () => {
      await element(by.css('ion-checkbox')).click();
      await testData({
-        'datetime': '2010-08-20',
-        'select': null,
-        'toggle': false,
-        'input': '',
-        'input2': 'Default Value',
-        'checkbox': true,
-        'range': 5
+        datetime: '2010-08-20',
+        select: null,
+        toggle: false,
+        input: '',
+        input2: 'Default Value',
+        checkbox: true,
+        range: 5
      });
    });

@@ -102,23 +102,23 @@ describe('form', () => {
    it('ion-toggle should change only after blur', async () => {
      await element(by.css('form ion-toggle')).click();
      await testData({
-        'datetime': '2010-08-20',
-        'select': null,
-        'toggle': false,
-        'input': '',
-        'input2': 'Default Value',
-        'checkbox': false,
-        'range': 5
+        datetime: '2010-08-20',
+        select: null,
+        toggle: false,
+        input: '',
+        input2: 'Default Value',
+        checkbox: false,
+        range: 5
      });
      await element(by.css('ion-checkbox')).click();
      await testData({
-        'datetime': '2010-08-20',
-        'select': null,
-        'toggle': true,
-        'input': '',
-        'input2': 'Default Value',
-        'checkbox': false,
-        'range': 5
+        datetime: '2010-08-20',
+        select: null,
+        toggle: true,
+        input: '',
+        input2: 'Default Value',
+        checkbox: false,
+        range: 5
      });
    });
  });
--- a/angular/test/test-app/e2e/src/tabs.e2e-spec.ts
+++ b/angular/test/test-app/e2e/src/tabs.e2e-spec.ts
@@ -149,7 +149,7 @@ describe('tabs', () => {

    it('should set root when clicking on an active tab to navigate to the root', async () => {
      const expectNestedTabUrlToContain = 'search=hello#fragment';
-      let tab = await getSelectedTab() as ElementFinder;
+      const tab = await getSelectedTab() as ElementFinder;
      const initialUrl = await browser.getCurrentUrl();
      await tab.$('#goto-nested-page1-with-query-params').click();
      await testTabTitle('Tab 1 - Page 2 (1)');
@@ -176,7 +176,7 @@ describe('tabs', () => {
    it('should preserve root url navigation extras when clicking on an active tab to navigate to the root', async () => {
      await browser.get(rootUrl);

-      let tab = await getSelectedTab() as ElementFinder;
+      const tab = await getSelectedTab() as ElementFinder;
      await tab.$('#goto-nested-page1-with-query-params').click();
      await testTabTitle('Tab 1 - Page 2 (1)');
      await testUrlContains(expectNestedTabUrlToContain);
--- a/angular/test/test-app/e2e/src/utils.ts
+++ b/angular/test/test-app/e2e/src/utils.ts
@@ -37,7 +37,7 @@ export interface LifeCycleCount {
 }

 export function handleErrorMessages() {
-  return browser.manage().logs().get('browser').then(function (browserLog) {
+  return browser.manage().logs().get('browser').then(browserLog => {
    for (let i = 0; i <= browserLog.length - 1; i++) {
      if (browserLog[i].level.name_ === 'SEVERE') {
        fail(browserLog[i].message);
--- a/angular/test/test-app/karma.conf.js
+++ b/angular/test/test-app/karma.conf.js
@@ -26,6 +26,12 @@ module.exports = function (config) {
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
    singleRun: false,
    restartOnFileChange: true
  });
--- a/angular/test/test-app/package-lock.json
+++ b/angular/test/test-app/package-lock.json
--- a/angular/test/test-app/package.json
+++ b/angular/test/test-app/package.json
@@ -18,46 +18,49 @@
    "prerender": "ng run test-app:prerender"
  },
  "dependencies": {
-    "@angular/animations": "^9.0.0-rc.2",
-    "@angular/common": "^9.0.0-rc.2",
-    "@angular/compiler": "^9.0.0-rc.2",
-    "@angular/core": "^9.0.0-rc.2",
-    "@angular/forms": "^9.0.0-rc.2",
-    "@angular/platform-browser": "^9.0.0-rc.2",
-    "@angular/platform-browser-dynamic": "^9.0.0-rc.2",
-    "@angular/platform-server": "^9.0.0-rc.2",
-    "@angular/router": "^9.0.0-rc.2",
-    "@ionic/angular": "^4.7.0",
-    "@ionic/angular-server": "^0.0.2",
+    "@angular/animations": "^9.1.12",
+    "@angular/common": "^9.1.12",
+    "@angular/compiler": "^9.1.12",
+    "@angular/core": "^9.1.12",
+    "@angular/forms": "^9.1.12",
+    "@angular/platform-browser": "^9.1.12",
+    "@angular/platform-browser-dynamic": "^9.1.12",
+    "@angular/platform-server": "^9.1.12",
+    "@angular/router": "^9.1.12",
+    "@ionic/angular": "^5.3.1",
+    "@ionic/angular-server": "^5.3.1",
    "@nguniversal/express-engine": "9.0.0-next.9",
-    "core-js": "^2.6.2",
+    "angular-in-memory-web-api": "^0.11.0",
+    "core-js": "^2.6.11",
    "express": "^4.15.2",
-    "rxjs": "^6.5.3",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "jasmine-marbles": "^0.6.0",
+    "rxjs": "^6.5.5",
+    "tslib": "^1.13.0",
+    "zone.js": "^0.10.3"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.0-rc.2",
-    "@angular/cli": "^9.0.0-rc.2",
-    "@angular/compiler-cli": "^9.0.0-rc.2",
-    "@angular/language-service": "^9.0.0-rc.2",
+    "@angular-devkit/build-angular": "^0.901.12",
+    "@angular/cli": "^9.1.12",
+    "@angular/compiler-cli": "^9.1.12",
+    "@angular/language-service": "^9.1.12",
    "@nguniversal/builders": "9.0.0-next.9",
-    "@types/express": "^4.17.0",
-    "@types/jasmine": "3.4.1",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.2",
-    "ts-loader": "^6.1.2",
-    "ts-node": "8.4.1",
-    "tslint": "~5.18.0",
-    "typescript": "~3.6.4",
-    "webpack-cli": "^3.3.9"
+    "@types/express": "^4.17.7",
+    "@types/jasmine": "^3.5.13",
+    "@types/jasminewd2": "^2.0.8",
+    "@types/node": "^12.12.54",
+    "codelyzer": "^5.2.2",
+    "jasmine-core": "^3.5.0",
+    "jasmine-spec-reporter": "^4.2.1",
+    "karma": "^4.4.1",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-coverage-istanbul-reporter": "^2.1.1",
+    "karma-jasmine": "^3.0.3",
+    "karma-jasmine-html-reporter": "^1.5.4",
+    "protractor": "^5.4.4",
+    "ts-loader": "^6.2.2",
+    "ts-node": "^8.3.0",
+    "tslint": "^6.1.3",
+    "typescript": "^3.8.3",
+    "webpack-cli": "^3.3.12"
  }
 }
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -2169,9 +2169,9 @@
      "dev": true
    },
    "bl": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz",
-      "integrity": "sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.3.tgz",
+      "integrity": "sha512-fs4G6/Hu4/EE+F75J8DuN/0IpQqNjAdC7aEQv7Qt8MHGUH7Ckv2MwTEEeN9QehD0pfIDkMI1bkHYkKy7xHyKIg==",
      "dev": true,
      "requires": {
        "buffer": "^5.5.0",
@@ -3711,9 +3711,9 @@
          }
        },
        "get-stream": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
-          "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
          "dev": true,
          "requires": {
            "pump": "^3.0.0"
--- a/core/package.json
+++ b/core/package.json
@@ -50,7 +50,7 @@
    "jest-cli": "^26.4.1",
    "np": "^6.4.0",
    "pixelmatch": "4.0.2",
-    "puppeteer": "5.2.1",
+    "puppeteer": "^5.2.1",
    "rollup": "^2.26.4",
    "sass": "^1.26.10",
    "stylelint": "^13.6.1",