From 54ac91faeb6c4a8b52e09caf42c3b5f8be15be82 Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Mon, 2 Oct 2023 10:59:23 -0500
Subject: [PATCH] [Tech debt] Fix Jest unit tests to run on React 16 (#7237)
---
package.json | 1 +
scripts/jest/setup/enzyme.js | 4 +-
src/components/combo_box/combo_box.test.tsx | 8 +-
.../column_selector.test.tsx.snap | 295 +++++++++++++++++
.../column_sorting.test.tsx.snap | 290 ++++++++++++++++
.../column_sorting_draggable.test.tsx.snap | 159 +++++++++
.../__snapshots__/draggable.test.tsx.snap | 31 ++
.../__snapshots__/droppable.test.tsx.snap | 46 +++
src/components/form/range/dual_range.test.tsx | 4 +-
yarn.lock | 311 +++++++++++++++++-
10 files changed, 1136 insertions(+), 13 deletions(-)
diff --git a/package.json b/package.json
index 45f68696438..352e75655a7 100644
--- a/package.json
+++ b/package.json
@@ -183,6 +183,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/combo_box/combo_box.test.tsx b/src/components/combo_box/combo_box.test.tsx
index 9b1559bfe00..e2e0a6c1bae 100644
--- a/src/components/combo_box/combo_box.test.tsx
+++ b/src/components/combo_box/combo_box.test.tsx
@@ -426,13 +426,7 @@ describe('behavior', () => {
searchInput.simulate('focus');
});
- act(() => {
- const searchInputNode = searchInput.getDOMNode();
- // React doesn't support `focusout` so we have to manually trigger it
- searchInputNode.dispatchEvent(
- new FocusEvent('focusout', { bubbles: true })
- );
- });
+ searchInput.simulate('blur');
expect(onCreateOptionHandler).toHaveBeenCalledTimes(1);
expect(onCreateOptionHandler).toHaveBeenNthCalledWith(1, 'foo', options);
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..936e7231fc4 100644
--- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -1,5 +1,300 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar button/popover allowing users to set column visibility and order 1`] = `
+
+
+
+
+
+`;
+
+exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar button/popover allowing users to set column visibility and order 2`] = `
+
+
+
+ You are in a dialog. Press Escape, or tap/click outside the dialog to close.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ columnA
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ columnB
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar button/popover allowing users to set column visibility and order 1`] = `
+
+
+
+
+`;
+
+exports[`useDataGridColumnSorting columnSorting [React 16] renders a toolbar button/popover allowing users to set column sorting 2`] = `
+
+
+
+ You are in a dialog. Press Escape, or tap/click outside the dialog to close.
+
+
+
+
+
+
+
+ Column A is sorting this data grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Column A
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar button/popover allowing users to set column sorting 1`] = `
+
+
+ Column A is sorting this data grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Column A
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
exports[`EuiDataGridColumnSortingDraggable [React 17] renders an EuiDraggable component of a single column that is currently being sorted 1`] = `
+
+ Press space bar to start a drag.
+ When dragging you can use the arrow keys to move the item around and escape to cancel.
+ Some screen readers may require you to be in focus mode or to use your pass through key
+
+