[INFRA] Parallelize Buildkite test job, take 2

.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"

.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[@]}"

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",

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() });

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`] = `
 <body
-  class="euiBody--hasFlyout"
+  class=""
   style="padding-left: 0px;"
 >
   <div>
@@ -147,9 +147,9 @@ exports[`EuiCollapsibleNavBeta responsive behavior makes the overlay flyout full
     >
       <button
         aria-controls="generated-id_euiCollapsibleNav"
-        aria-expanded="true"
-        aria-label="Toggle navigation closed"
-        aria-pressed="true"
+        aria-expanded="false"
+        aria-label="Toggle navigation open"
+        aria-pressed="false"
         class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
         data-test-subj="euiCollapsibleNavButton"
         type="button"
@@ -158,49 +158,10 @@ exports[`EuiCollapsibleNavBeta responsive behavior makes the overlay flyout full
           aria-hidden="true"
           class="euiButtonIcon__icon"
           color="inherit"
-          data-euiicon-type="cross"
+          data-euiicon-type="menu"
         />
       </button>
     </div>
   </div>
-  <div
-    class="euiOverlayMask emotion-euiOverlayMask-belowHeader"
-    data-euiportal="true"
-    data-relative-to-header="below"
-  >
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-    <div
-      data-focus-lock-disabled="false"
-    >
-      <nav
-        aria-describedby="generated-id"
-        aria-label="Site menu"
-        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNavBeta-left-isOverlayFullWidth"
-        data-autofocus="true"
-        id="generated-id_euiCollapsibleNav"
-        role="dialog"
-        style="inline-size: 100%;"
-        tabindex="0"
-      >
-        <p
-          class="emotion-euiScreenReaderOnly"
-          id="generated-id"
-        >
-          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
-
-        </p>
-        Nav content
-      </nav>
-    </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-  </div>
 </body>
 `;

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(
-        <EuiCollapsibleNavBeta>Nav content</EuiCollapsibleNavBeta>
-      );
-      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(
+          <EuiCollapsibleNavBeta>Nav content</EuiCollapsibleNavBeta>
+        );
+        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(
+          <EuiCollapsibleNavBeta>Nav content</EuiCollapsibleNavBeta>
+        );
+        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(
         <EuiCollapsibleNavBeta>Nav content</EuiCollapsibleNavBeta>
       );
+      expect(getByLabelText('Toggle navigation open')).toBeInTheDocument();
       fireEvent.click(getByTestSubject('euiCollapsibleNavButton'));
-      expect(baseElement).toMatchSnapshot();
+      expect(getByLabelText('Toggle navigation closed')).toBeInTheDocument();
 
       // onClose testing
       expect(

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);