Skip to content

Commit

Permalink
[Tech debt] Fix Jest unit tests to run on React 16 (#7237)
Browse files Browse the repository at this point in the history
  • Loading branch information
@1Copenut
1Copenut authored Oct 2, 2023
1 parent ad2544e commit 54ac91f
Show file tree
Hide file tree
Showing 10 changed files with 1,136 additions and 13 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 3 additions & 1 deletion scripts/jest/setup/enzyme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() });
8 changes: 1 addition & 7 deletions src/components/combo_box/combo_box.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
295 changes: 295 additions & 0 deletions src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -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`] = `
<div
class="euiPopover emotion-euiPopover"
data-test-subj="dataGridColumnSelectorPopover"
>
<div
class="euiPopover__anchor css-16vtueo-render"
>
<button
class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
data-test-subj="dataGridColumnSelectorButton"
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
>
<span
color="inherit"
data-euiicon-type="listAdd"
/>
<span
class="eui-textTruncate euiButtonEmpty__text"
>
Columns
</span>
</span>
</button>
</div>
</div>
`;

exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar button/popover allowing users to set column visibility and order 2`] = `
<div
aria-describedby="generated-id"
aria-live="off"
aria-modal="true"
class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-hasDragDrop-bottom"
data-autofocus="true"
data-popover-panel="true"
role="dialog"
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
tabindex="0"
>
<div
class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
data-popover-arrow="bottom"
style="left: 10px; top: 0px;"
/>
<p
class="emotion-euiScreenReaderOnly"
id="generated-id"
>
You are in a dialog. Press Escape, or tap/click outside the dialog to close.
</p>
<div>
<div>
<div
class="euiPopoverTitle emotion-euiPopoverTitle-s-s"
>
<div
class="euiFormControlLayout euiFormControlLayout--compressed"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<input
aria-label="Search columns"
class="euiFieldText euiFieldText--compressed"
data-test-subj="dataGridColumnSelectorSearch"
placeholder="Search"
type="text"
value=""
/>
</div>
</div>
</div>
<div
class="euiDataGrid__controlScroll"
>
<div
class="euiDroppable emotion-euiDroppable-noGrow"
data-rfd-droppable-context-id="0"
data-rfd-droppable-id="columnOrder"
data-test-subj="droppable"
>
<div
class="euiDraggable emotion-euiDraggable"
data-rfd-draggable-context-id="0"
data-rfd-draggable-id="columnA"
data-test-subj="draggable"
role="group"
>
<div
class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
data-test-subj="dataGridColumnSelectorColumnItem-columnA"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiSwitch euiSwitch--compressed euiSwitch--mini emotion-euiSwitch"
>
<button
aria-checked="true"
aria-label="columnA"
class="euiSwitch__button"
data-test-subj="dataGridColumnSelectorToggleColumnVisibility-columnA"
id="generated-id"
name="columnA"
role="switch"
type="button"
>
<span
class="euiSwitch__body"
>
<span
class="euiSwitch__thumb"
/>
<span
class="euiSwitch__track"
/>
</span>
</button>
</div>
</div>
<div
aria-describedby="rfd-hidden-text-0-hidden-text-0"
aria-hidden="true"
class="euiFlexItem emotion-euiFlexItem-grow-1"
data-rfd-drag-handle-context-id="0"
data-rfd-drag-handle-draggable-id="columnA"
draggable="false"
role="button"
tabindex="-1"
>
<span
class="euiDataGridColumnSelector__itemLabel"
>
columnA
</span>
</div>
<div
aria-describedby="rfd-hidden-text-0-hidden-text-0"
aria-label="Drag handle"
class="euiFlexItem emotion-euiFlexItem-growZero"
data-rfd-drag-handle-context-id="0"
data-rfd-drag-handle-draggable-id="columnA"
draggable="false"
role="button"
tabindex="0"
>
<span
color="subdued"
data-euiicon-type="grab"
/>
</div>
</div>
</div>
</div>
<div
class="euiDraggable emotion-euiDraggable"
data-rfd-draggable-context-id="0"
data-rfd-draggable-id="columnB"
data-test-subj="draggable"
role="group"
>
<div
class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
data-test-subj="dataGridColumnSelectorColumnItem-columnB"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiSwitch euiSwitch--compressed euiSwitch--mini emotion-euiSwitch"
>
<button
aria-checked="true"
aria-label="columnB"
class="euiSwitch__button"
data-test-subj="dataGridColumnSelectorToggleColumnVisibility-columnB"
id="generated-id"
name="columnB"
role="switch"
type="button"
>
<span
class="euiSwitch__body"
>
<span
class="euiSwitch__thumb"
/>
<span
class="euiSwitch__track"
/>
</span>
</button>
</div>
</div>
<div
aria-describedby="rfd-hidden-text-0-hidden-text-0"
aria-hidden="true"
class="euiFlexItem emotion-euiFlexItem-grow-1"
data-rfd-drag-handle-context-id="0"
data-rfd-drag-handle-draggable-id="columnB"
draggable="false"
role="button"
tabindex="-1"
>
<span
class="euiDataGridColumnSelector__itemLabel"
>
columnB
</span>
</div>
<div
aria-describedby="rfd-hidden-text-0-hidden-text-0"
aria-label="Drag handle"
class="euiFlexItem emotion-euiFlexItem-growZero"
data-rfd-drag-handle-context-id="0"
data-rfd-drag-handle-draggable-id="columnB"
draggable="false"
role="button"
tabindex="0"
>
<span
color="subdued"
data-euiicon-type="grab"
/>
</div>
</div>
</div>
</div>
<div
class="euiDroppable__placeholder"
/>
</div>
</div>
</div>
<div
class="euiPopoverFooter emotion-euiPopoverFooter-s-s"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-spaceBetween-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<button
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-left"
data-test-subj="dataGridColumnSelectorShowAllButton"
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
>
Show all
</span>
</span>
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<button
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-right"
data-test-subj="dataGridColumnSelectorHideAllButton"
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
>
Hide all
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
`;

exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar button/popover allowing users to set column visibility and order 1`] = `
<div
class="euiPopover emotion-euiPopover"
Expand Down
Loading

0 comments on commit 54ac91f

Please sign in to comment.