Skip to content

Commit

Permalink
Major version dependency upgrades, pt. III; Docker bonus (elastic#4062)
Browse files Browse the repository at this point in the history
* version updates

* remove visual regression test setup

* core-js changes

* yarn.lock

* clean up

* use eui/puppeteer image on elastic registry; docs

* use the correct name; update docs

* clean up

* pin docker image to node 10.22.1

* update CL
  • Loading branch information
kshitij86 committed Nov 29, 2020
1 parent da850e4 commit 89be634
Show file tree
Hide file tree
Showing 27 changed files with 1,106 additions and 1,991 deletions.
2 changes: 1 addition & 1 deletion .babelrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }],
Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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**

Expand Down
21 changes: 3 additions & 18 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
42 changes: 42 additions & 0 deletions scripts/docker-puppeteer/Dockerfile
Original file line number Diff line number Diff line change
@@ -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"]
74 changes: 74 additions & 0 deletions scripts/docker-puppeteer/README.md
Original file line number Diff line number Diff line change
@@ -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.
3 changes: 0 additions & 3 deletions scripts/jenkins_run_visual_regression_tests.sh

This file was deleted.

4 changes: 2 additions & 2 deletions scripts/jest/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
],
Expand Down
24 changes: 24 additions & 0 deletions scripts/jest/setup/mocks.js
Original file line number Diff line number Diff line change
@@ -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 }
});
44 changes: 0 additions & 44 deletions scripts/run-visual-tests.js

This file was deleted.

4 changes: 2 additions & 2 deletions scripts/test-docker.js
Original file line number Diff line number Diff line change
@@ -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 \
Expand Down
4 changes: 0 additions & 4 deletions src-docs/src/index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions src/components/empty_prompt/empty_prompt.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 &
Expand Down
2 changes: 1 addition & 1 deletion src/components/form/field_number/field_number.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion src/components/form/field_text/field_text.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion src/components/icon/icon.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down
Loading

0 comments on commit 89be634

Please sign in to comment.