diff --git a/.buildkite/pipelines/pipeline_pull_request_test.yml b/.buildkite/pipelines/pipeline_pull_request_test.yml index af25c625a9f..08118c5a138 100644 --- a/.buildkite/pipelines/pipeline_pull_request_test.yml +++ b/.buildkite/pipelines/pipeline_pull_request_test.yml @@ -1,9 +1,72 @@ # 🏠/.buildkite/pipelines/pipeline_pull_request_test.yml steps: - - agents: + - command: .buildkite/scripts/pipeline_test.sh + label: ":typescript: Linting" + agents: provider: "gcp" - command: .buildkite/scripts/pipeline_test.sh - if: build.branch != "main" # We're skipping testing commits in main for now to maintain parity with previous Jenkins setup + env: + TEST_TYPE: 'lint' + if: build.branch != "main" # This job is triggered by the combined test and deploy docs for every PR + + - command: .buildkite/scripts/pipeline_test.sh + label: ":jest: TS unit tests" + agents: + provider: "gcp" + env: + TEST_TYPE: 'unit:ts' + if: build.branch != "main" + + - command: .buildkite/scripts/pipeline_test.sh + label: ":jest: TSX unit tests on React 16" + agents: + provider: "gcp" + env: + TEST_TYPE: 'unit:tsx:16' + if: build.branch != "main" + + - command: .buildkite/scripts/pipeline_test.sh + label: ":jest: TSX unit tests on React 17" + agents: + provider: "gcp" + env: + TEST_TYPE: 'unit:tsx:17' + if: build.branch != "main" + + - command: .buildkite/scripts/pipeline_test.sh + label: ":jest: TSX unit tests on React 18" + agents: + provider: "gcp" + env: + TEST_TYPE: 'unit:tsx' + if: build.branch != "main" + + - command: .buildkite/scripts/pipeline_test.sh + label: ":cypress: Cypress tests on React 16" + agents: + provider: "gcp" + env: + TEST_TYPE: 'cypress:16' + if: build.branch != "main" + artifact_paths: + - "cypress/screenshots/**/*.png" + + - command: .buildkite/scripts/pipeline_test.sh + label: ":cypress: Cypress tests on React 17" + agents: + provider: "gcp" + env: + TEST_TYPE: 'cypress:17' + if: build.branch != "main" + artifact_paths: + - "cypress/screenshots/**/*.png" + + - command: .buildkite/scripts/pipeline_test.sh + label: ":cypress: Cypress tests on React 18" + agents: + provider: "gcp" + env: + TEST_TYPE: 'cypress:18' + if: build.branch != "main" artifact_paths: - "cypress/screenshots/**/*.png" diff --git a/.buildkite/scripts/pipeline_test.sh b/.buildkite/scripts/pipeline_test.sh index 7fef13e2c04..01d607a2e7c 100644 --- a/.buildkite/scripts/pipeline_test.sh +++ b/.buildkite/scripts/pipeline_test.sh @@ -2,15 +2,63 @@ set -euo pipefail -docker run \ - -i --rm \ - --env GIT_COMMITTER_NAME=test \ - --env GIT_COMMITTER_EMAIL=test \ - --env HOME=/tmp \ - --user="$(id -u):$(id -g)" \ - --volume="$(pwd):/app" \ - --workdir=/app \ - docker.elastic.co/eui/ci:5.3 \ - bash -c "/opt/yarn*/bin/yarn \ - && yarn cypress install \ - && NODE_OPTIONS=\"--max-old-space-size=2048\" npm run test-ci" +DOCKER_OPTIONS=( + -i --rm + --env GIT_COMMITTER_NAME=test + --env GIT_COMMITTER_EMAIL=test + --env HOME=/tmp + --user="$(id -u):$(id -g)" + --volume="$(pwd):/app" + --workdir=/app + docker.elastic.co/eui/ci:5.3 +) + +case $TEST_TYPE in + lint) + echo "[TASK]: Running linters" + DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && NODE_OPTIONS=\"--max-old-space-size=2048\" npm run lint") + ;; + + unit:ts) + echo "[TASK]: Running .ts unit tests" + DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && NODE_OPTIONS=\"--max-old-space-size=2048\" npm run test-unit:ts") + ;; + + unit:tsx:16) + echo "[TASK]: Running .tsx unit tests" + DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && NODE_OPTIONS=\"--max-old-space-size=2048\" npm run test-unit:tsx:16") + ;; + + unit:tsx:17) + echo "[TASK]: Running .tsx unit tests" + DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && NODE_OPTIONS=\"--max-old-space-size=2048\" npm run test-unit:tsx:17") + ;; + + unit:tsx) + echo "[TASK]: Running .tsx unit tests" + DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && NODE_OPTIONS=\"--max-old-space-size=2048\" npm run test-unit:tsx") + ;; + + cypress:16) + echo "[TASK]: Running Cypress tests against React 16" + DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && NODE_OPTIONS=\"--max-old-space-size=2048\" npm run test-cypress:16") + ;; + + cypress:17) + echo "[TASK]: Running Cypress tests against React 17" + DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && NODE_OPTIONS=\"--max-old-space-size=2048\" npm run test-cypress:17") + ;; + + cypress:18) + echo "[TASK]: Running Cypress tests against React 18" + DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && NODE_OPTIONS=\"--max-old-space-size=2048\" npm run test-cypress") + ;; + + *) + echo "[ERROR]: Unknown task" + echo "Exit code: 1" + exit 1 + ;; +esac + +docker run "${DOCKER_OPTIONS[@]}" diff --git a/package.json b/package.json index e3b0b38e2ee..3bbe423a3bb 100644 --- a/package.json +++ b/package.json @@ -32,9 +32,15 @@ "test": "yarn lint && yarn test-unit", "test-ci": "yarn test && yarn test-cypress", "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.js", + "test-unit:ts": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.js --testMatch **/*.test.ts **/*.test.js", + "test-unit:tsx": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.js --testMatch **/*.test.tsx", + "test-unit:tsx:17": "cross-env NODE_ENV=test REACT_VERSION=17 jest --config ./scripts/jest/config.js --testMatch **/*.test.tsx", + "test-unit:tsx:16": "cross-env NODE_ENV=test REACT_VERSION=16 jest --config ./scripts/jest/config.js --testMatch **/*.test.tsx", "test-a11y": "node ./scripts/a11y-testing", "test-staged": "yarn lint && node scripts/test-staged.js", "test-cypress": "node ./scripts/cypress", + "test-cypress:17": "node ./scripts/cypress --react-version 17", + "test-cypress:16": "node ./scripts/cypress --react-version 16", "test-cypress-dev": "node ./scripts/cypress --dev", "test-cypress-a11y": "node ./scripts/cypress --a11y", "combine-test-coverage": "sh ./scripts/combine-coverage.sh", @@ -186,6 +192,7 @@ "dedent": "^0.7.0", "dts-generator": "^3.0.0", "enzyme": "^3.11.0", + "enzyme-adapter-react-16": "^1.15.7", "enzyme-to-json": "^3.5.0", "eslint": "^8.41.0", "eslint-config-prettier": "^8.8.0", diff --git a/scripts/jest/setup/enzyme.js b/scripts/jest/setup/enzyme.js index 334d2c91e74..f60cfdf31ea 100644 --- a/scripts/jest/setup/enzyme.js +++ b/scripts/jest/setup/enzyme.js @@ -11,8 +11,10 @@ if (process.env.REACT_VERSION === '18') { // is not configured to support act()" errors for now // TODO: Remove when enzyme tests are replaced with RTL global.IS_REACT_ACT_ENVIRONMENT = true; -} else { +} else if (process.env.REACT_VERSION === '17') { Adapter = require('@wojtekmaj/enzyme-adapter-react-17'); +} else { + Adapter = require('enzyme-adapter-react-16'); } configure({ adapter: new Adapter() }); diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap index ca97480a43d..8c6e714d5e0 100644 --- a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap +++ b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap @@ -138,7 +138,7 @@ exports[`EuiCollapsibleNavBeta responsive behavior collapses from a push flyout exports[`EuiCollapsibleNavBeta responsive behavior makes the overlay flyout full width once the screen is smaller than 1.5x the flyout width 1`] = `
@@ -147,9 +147,9 @@ exports[`EuiCollapsibleNavBeta responsive behavior makes the overlay flyout full >
-
-
-
- -
-
-
`; diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.test.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.test.tsx index 4d594b35871..15c8bce3460 100644 --- a/src/components/collapsible_nav_beta/collapsible_nav_beta.test.tsx +++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.test.tsx @@ -9,7 +9,10 @@ import React from 'react'; import { fireEvent } from '@testing-library/react'; import { render } from '../../test/rtl'; -import { shouldRenderCustomStyles } from '../../test/internal'; +import { + shouldRenderCustomStyles, + testOnReactVersion, +} from '../../test/internal'; import { requiredProps } from '../../test'; import { EuiCollapsibleNavBeta } from './collapsible_nav_beta'; @@ -70,21 +73,36 @@ describe('EuiCollapsibleNavBeta', () => { window.dispatchEvent(new Event('resize')); }; - it('collapses from a push flyout to an overlay flyout once the screen is smaller than 3x the flyout width', () => { - mockWindowResize(600); - const { baseElement } = render( - Nav content - ); - expect(baseElement).toMatchSnapshot(); - }); + testOnReactVersion(['18'])( + 'collapses from a push flyout to an overlay flyout once the screen is smaller than 3x the flyout width', + () => { + mockWindowResize(600); + const { baseElement } = render( + Nav content + ); + expect(baseElement).toMatchSnapshot(); + } + ); + + testOnReactVersion(['18'])( + 'makes the overlay flyout full width once the screen is smaller than 1.5x the flyout width', + () => { + mockWindowResize(320); + const { baseElement } = render( + Nav content + ); + expect(baseElement).toMatchSnapshot(); + } + ); - it('makes the overlay flyout full width once the screen is smaller than 1.5x the flyout width', () => { + it('updates the overlay controls once the screen is smaller than 1.5x the flyout width', () => { mockWindowResize(320); - const { baseElement, getByTestSubject } = render( + const { baseElement, getByLabelText, getByTestSubject } = render( Nav content ); + expect(getByLabelText('Toggle navigation open')).toBeInTheDocument(); fireEvent.click(getByTestSubject('euiCollapsibleNavButton')); - expect(baseElement).toMatchSnapshot(); + expect(getByLabelText('Toggle navigation closed')).toBeInTheDocument(); // onClose testing expect( diff --git a/src/components/combo_box/combo_box.test.tsx b/src/components/combo_box/combo_box.test.tsx index 9b1559bfe00..32b08f3a0b8 100644 --- a/src/components/combo_box/combo_box.test.tsx +++ b/src/components/combo_box/combo_box.test.tsx @@ -427,11 +427,9 @@ describe('behavior', () => { }); act(() => { - const searchInputNode = searchInput.getDOMNode(); - // React doesn't support `focusout` so we have to manually trigger it - searchInputNode.dispatchEvent( - new FocusEvent('focusout', { bubbles: true }) - ); + // React 16 failed on the previous `searchInputNode.dispatchEvent` + // call that mocked a FocusEvent 'focusout' + searchInput.simulate('blur'); }); expect(onCreateOptionHandler).toHaveBeenCalledTimes(1); diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index e1e8d65ead3..877a06126f9 100644 --- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar button/popover allowing users to set column visibility and order 1`] = ` +exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popover allowing users to set column visibility and order 1`] = `
`; -exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar button/popover allowing users to set column visibility and order 2`] = ` -