Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Tech debt] Fix Jest unit tests to run on React 16 #7237

Merged
merged 5 commits into from
Oct 2, 2023
Merged

[Tech debt] Fix Jest unit tests to run on React 16 #7237

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f57e2f
Adding React 16 enzyme adapter to pass majority of tests.
1Copenut Sep 29, 2023
f527a54
Swapped focusout for blur event in combo_box unit test.
1Copenut Sep 29, 2023
ec8e5a2
Swapped focusIn for focus event in dual range test.
1Copenut Sep 29, 2023
3a3de1f
Writing snapshot tests for React 16.
1Copenut Sep 29, 2023
7f3e06c
Removing an act wrapper on feedback from Cee.
1Copenut Oct 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
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
Open in desktop
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: 3 additions & 5 deletions src/components/combo_box/combo_box.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
cee-chen marked this conversation as resolved.
Show resolved Hide resolved

expect(onCreateOptionHandler).toHaveBeenCalledTimes(1);
Expand Down
295 changes: 295 additions & 0 deletions src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
View file
Open in desktop
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
Loading