Major version dependency upgrades, pt. III; Docker bonus

.babelrc.js

@@ -8,7 +8,7 @@ module.exports = {
     ["@babel/env", {
       // `targets` property set via `.browserslistrc`
       "useBuiltIns": process.env.NO_COREJS_POLYFILL ? false : "usage",
-      "corejs": "2",
+      "corejs": 3,
       "modules": process.env.BABEL_MODULES ? process.env.BABEL_MODULES === 'false' ? false : process.env.BABEL_MODULES : "commonjs" // babel's default is commonjs
     }],
     ["@babel/typescript", { isTSX: true, allExtensions: true }],

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added `max-width: 100%` to `EuiKeyPadMenu` to allow it to shrink when its container is smaller than its fixed width ([ #4092](https://github.com/elastic/eui/pull/4092))
 - Changed `EuiIcon` test mock to render as `span` instead of `div` ([#4099](https://github.com/elastic/eui/pull/4099))
+- Added `scripts/docker-puppeteer` as the new home for test-related Docker images ([#4062](https://github.com/elastic/eui/pull/4062))
 
 **Bug fixes**
 

package.json

@@ -30,11 +30,8 @@
     "test-a11y": "node ./scripts/a11y-testing",
     "test-staged": "yarn lint && node scripts/test-staged.js",
     "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
-    "test-visual": "wdio test/wdio.conf.js",
     "yo-component": "yo ./generator-eui/app/component.js",
-    "test-visual-tests": "node ./scripts/run-visual-tests.js",
     "update-token-changelog": "node ./scripts/update-token-changelog.js",
-    "start-test-server-and-visual-test": "start-server-and-test start-test-server http-get://localhost:9999 test-visual",
     "start-test-server-and-a11y-test": "start-server-and-test start-test-server http-get://localhost:9999 test-a11y",
     "yo-doc": "yo ./generator-eui/app/documentation.js",
     "release": "node ./scripts/release.js",
@@ -128,14 +125,11 @@
     "babel-plugin-pegjs-inline-precompile": "^0.1.1",
     "babel-template": "^6.26.0",
     "cache-loader": "^4.1.0",
-    "chai": "^4.2.0",
-    "chai-webdriverio": "^0.4.3",
     "chalk": "^4.1.0",
     "chokidar": "^3.4.2",
-    "chromedriver": "^77.0.0",
     "circular-dependency-plugin": "^5.2.0",
     "codesandbox": "^2.1.16",
-    "core-js": "^2.5.1",
+    "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.2",
     "cssnano": "^4.1.10",
@@ -162,15 +156,13 @@
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
     "fork-ts-checker-webpack-plugin": "^5.1.0",
-    "geckodriver": "^1.20.0",
     "get-port": "^5.1.1",
     "glob": "^7.1.6",
     "html": "^1.0.0",
     "html-format": "^1.0.1",
     "html-webpack-plugin": "^4.4.1",
     "jest": "^24.1.0",
     "jest-cli": "^24.1.0",
-    "mocha": "^5.0.4",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
     "node-sass": "^4.14.1",
@@ -184,7 +176,7 @@
     "prettier-stylelint": "^0.4.2",
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
-    "puppeteer": "^2.0.0",
+    "puppeteer": "^5.3.0",
     "raw-loader": "^4.0.1",
     "react": "^16.12.0",
     "react-docgen-typescript": "^1.20.3",
@@ -193,7 +185,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-router-redux": "^4.0.8",
-    "react-test-renderer": "^16.13.1",
+    "react-test-renderer": "^16.12.0",
     "react-view": "^2.3.2",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
@@ -211,13 +203,6 @@
     "typescript": "3.7.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^4.1.0",
-    "wdio-chromedriver-service": "^0.1.2",
-    "wdio-mocha-framework": "^0.5.13",
-    "wdio-sauce-service": "^0.4.8",
-    "wdio-selenium-standalone-service": "^0.0.10",
-    "wdio-spec-reporter": "^0.1.5",
-    "wdio-visual-regression-service": "silne30/wdio-visual-regression-service#Add_Filename_To_Result",
-    "webdriverio": "^4.12.0",
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",

scripts/docker-puppeteer/Dockerfile

@@ -0,0 +1,42 @@
+# Derived from the zenato/puppeteer Docker image
+# https://github.com/zenato/docker-puppeteer/blob/master/Dockerfile
+
+# >=10.18 required
+FROM node:10.22.1
+
+# See https://crbug.com/795759
+RUN apt-get update && apt-get install -yq libgconf-2-4
+
+ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE=1
+
+# Install latest chrome package.
+# Note: this installs the necessary libs to make the bundled version of Chromium that Pupppeteer
+# installs, work.
+RUN apt-get update && apt-get install -y wget --no-install-recommends \
+    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
+    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && apt-get update \
+    && apt-get install -y google-chrome-stable \
+    --no-install-recommends \
+    && rm -rf /var/lib/apt/lists/* \
+    && apt-get purge --auto-remove -y curl \
+    && rm -rf /src/*.deb
+
+# Uncomment to skip the chromium download when installing puppeteer. If you do,
+# you'll need to launch puppeteer with:
+#     browser.launch({executablePath: 'google-chrome-unstable'})
+# ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
+
+# Install puppeteer so it's available in the container.
+RUN yarn add puppeteer
+
+# Add puppeteer user (pptruser).
+RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
+    && mkdir -p /home/pptruser/Downloads \
+    && chown -R pptruser:pptruser /home/pptruser \
+    && chown -R pptruser:pptruser /node_modules
+
+# Run user as non privileged.
+USER pptruser
+
+CMD ["google-chrome-stable"]

scripts/docker-puppeteer/README.md

@@ -0,0 +1,74 @@
+# eui/puppeteer
+
+Base Docker environment image for Puppeteer (Headless Chromium Node API)
+Built containers can be published to the [Elastic Docker Registry](https://container-library.elastic.co) for use locally or in CI environments.
+
+## Getting started
+
+### `test-docker` script
+The [`test-docker`](../test-docker.js) script is the primary user of this container. Specifically, the [`a11y-testing](../a11y-testing.js) script therein uses the headless Chromium environment to run EUI's automated axe accessibility testing suite.
+
+### Generic node application
+Run the container by passing `node -e "<yourscript.js content as a string>"` as the command:
+
+```bash
+docker run -i --rm --cap-add=SYS_ADMIN \
+    --name puppeteer-chrome eui/puppeteer \
+    node -e "`cat yourscript.js`"
+```
+
+## Using with the Elastic Container Library
+
+To start, you'll need to setup a local Docker environment. See [Docker's "Get started" guide](https://docs-stage.docker.com/get-started/) for instructions.
+
+[View the current image state](https://container-library.elastic.co/r/eui) in the registry.
+
+[View general information on Accessing the Docker registry](https://github.com/elastic/infra/blob/master/docs/container-registry/accessing-the-docker-registry.md)
+
+### Build a new image
+
+From this directory:
+
+```bash
+docker build [--no-cache] [--tag your_tag] .
+```
+
+* Use the `--no-cache` option if attempting the upgrade environment installations, like `node.js`, for instance.
+* Use the `--tag` option to give the image a reference name. Helpful if you plan on running the image locally (see next step).
+
+### Test a new image locally
+
+To run the [`test-docker`](../test-docker.js) script with the new image locally, you'll need to replace the image name line in the `docker run ...` command (`docker.elastic.co/eui/puppeteer:latest`) with the new image ID or tag name (if set during the build with `--tag`).
+
+### Publish a built image
+
+Authentication and membership of the `eui-design` team on GitHub is required:
+
+* You can login at [https://docker-auth.elastic.co](https://docker-auth.elastic.co) using GitHub OAuth to sign in.
+* This will give you a login command that you can run locally to connect to the registry, like:
+
+```bash
+docker login -u thompsongl -p supersecret docker.elastic.co
+```
+
+Then tag the built image as `latest`, first grabbing the image ID using `docker images`:
+
+```bash
+docker tag IMAGE_ID docker.elastic.co/eui/puppeteer:latest
+```
+
+```bash
+docker push docker.elastic.co/eui/puppeteer
+```
+
+### Use a published image
+
+Note that authentication is not required.
+
+```bash
+docker pull docker.elastic.co/eui/puppeteer:latest
+
+docker run [...]
+```
+
+See the [`test-docker`](../test-docker.js) script as an example.

scripts/jest/config.json

@@ -15,14 +15,14 @@
   ],
   "moduleNameMapper": {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/scripts/jest/mocks/file_mock.js",
-    "\\.(css|less|scss)$": "<rootDir>/scripts/jest/mocks/style_mock.js",
-    "/icon$": "<rootDir>/scripts/jest/mocks/icon_mock.js"
+    "\\.(css|less|scss)$": "<rootDir>/scripts/jest/mocks/style_mock.js"
   },
   "setupFiles": [
     "<rootDir>/scripts/jest/setup/enzyme.js",
     "<rootDir>/scripts/jest/setup/throw_on_console_error.js"
   ],
   "setupFilesAfterEnv": [
+    "<rootDir>/scripts/jest/setup/mocks.js",
     "<rootDir>/scripts/jest/setup/polyfills.js",
     "<rootDir>/scripts/jest/setup/unmount_enzyme.js"
   ],

scripts/jest/setup/mocks.js

@@ -0,0 +1,24 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+
+jest.mock('./../../../src/components/icon', () => {
+  const { EuiIcon } = require('./../../../src/components/icon/icon.testenv');
+  return { EuiIcon }
+});

scripts/test-docker.js

@@ -1,14 +1,14 @@
 const { execSync } = require('child_process');
 
-execSync('docker pull zenato/puppeteer', {
+execSync('docker pull docker.elastic.co/eui/puppeteer:latest', {
   stdio: 'inherit',
 });
 /* eslint-disable-next-line no-multi-str */
 execSync("docker run \
   -i --rm --cap-add=SYS_ADMIN --volume=$(pwd):/app --workdir=/app \
   -e GIT_COMMITTER_NAME=test -e GIT_COMMITTER_EMAIL=test -e HOME=/tmp \
   --user=$(id -u):$(id -g) \
-  zenato/puppeteer \
+  docker.elastic.co/eui/puppeteer:latest \
   bash -c 'npm config set spin false \
     && /opt/yarn*/bin/yarn \
     && npm run test \

src-docs/src/index.js

@@ -1,7 +1,3 @@
-// specifically polyfill Object.entries for IE11 support (used by @elastic/charts)
-import 'core-js/modules/es7.object.entries';
-import 'core-js/modules/es6.number.is-finite';
-
 import React, { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';

src/components/combo_box/__snapshots__/combo_box.test.tsx.snap

@@ -317,7 +317,7 @@ exports[`props options list is rendered 1`] = `
       class="euiComboBoxOptionsList__rowWrap"
     >
       <div
-        style="position: relative; height: 200px; width: 0px; overflow: auto; direction: ltr;"
+        style="position: relative; height: 200px; width: 0px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           id="htmlid_listbox"

src/components/empty_prompt/empty_prompt.tsx

@@ -27,10 +27,10 @@ import React, {
 import classNames from 'classnames';
 
 import { CommonProps } from '../common';
-import { EuiTitle, EuiTitleSize } from '../title/title';
+import { EuiTitle, EuiTitleSize } from '../title';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiSpacer } from '../spacer';
-import { EuiIcon, IconColor, IconType } from '../icon/icon';
+import { EuiIcon, IconColor, IconType } from '../icon';
 import { EuiText, EuiTextColor } from '../text';
 
 export type EuiEmptyPromptProps = CommonProps &

src/components/form/field_number/field_number.test.tsx

@@ -24,7 +24,7 @@ import { requiredProps } from '../../../test/required_props';
 import { EuiFieldNumber } from './field_number';
 
 jest.mock('../form_control_layout', () => {
-  const formControlLayout = require.requireActual('../form_control_layout');
+  const formControlLayout = jest.requireActual('../form_control_layout');
   return {
     ...formControlLayout,
     EuiFormControlLayout: 'eui-form-control-layout',

src/components/form/field_text/field_text.test.tsx

@@ -24,7 +24,7 @@ import { requiredProps } from '../../../test/required_props';
 import { EuiFieldText } from './field_text';
 
 jest.mock('../form_control_layout', () => {
-  const formControlLayout = require.requireActual('../form_control_layout');
+  const formControlLayout = jest.requireActual('../form_control_layout');
   return {
     ...formControlLayout,
     EuiFormControlLayout: 'eui-form-control-layout',

src/components/icon/icon.test.tsx

@@ -35,7 +35,7 @@ import { PropsOf } from '../common';
 import { icon as EuiIconVideoPlayer } from './assets/videoPlayer.js';
 
 jest.mock('./icon', () => {
-  return require.requireActual('./icon');
+  return jest.requireActual('./icon');
 });
 
 beforeEach(() => clearIconComponentCache());