Skip to content

Commit 54ac91f

Browse files
1Copenut1Copenut
authored
[Tech debt] Fix Jest unit tests to run on React 16 (#7237)
1 parent ad2544e commit 54ac91f

File tree

10 files changed

+1136
-13
lines changed

10 files changed

+1136
-13
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@
183183
"dedent": "^0.7.0",
184184
"dts-generator": "^3.0.0",
185185
"enzyme": "^3.11.0",
186+
"enzyme-adapter-react-16": "^1.15.7",
186187
"enzyme-to-json": "^3.5.0",
187188
"eslint": "^8.41.0",
188189
"eslint-config-prettier": "^8.8.0",

‎scripts/jest/setup/enzyme.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ if (process.env.REACT_VERSION === '18') {
1111
// is not configured to support act()" errors for now
1212
// TODO: Remove when enzyme tests are replaced with RTL
1313
global.IS_REACT_ACT_ENVIRONMENT = true;
14-
} else {
14+
} else if (process.env.REACT_VERSION === '17') {
1515
Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
16+
} else {
17+
Adapter = require('enzyme-adapter-react-16');
1618
}
1719

1820
configure({ adapter: new Adapter() });

‎src/components/combo_box/combo_box.test.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -426,13 +426,7 @@ describe('behavior', () => {
426426
searchInput.simulate('focus');
427427
});
428428

429-
act(() => {
430-
const searchInputNode = searchInput.getDOMNode();
431-
// React doesn't support `focusout` so we have to manually trigger it
432-
searchInputNode.dispatchEvent(
433-
new FocusEvent('focusout', { bubbles: true })
434-
);
435-
});
429+
searchInput.simulate('blur');
436430

437431
expect(onCreateOptionHandler).toHaveBeenCalledTimes(1);
438432
expect(onCreateOptionHandler).toHaveBeenNthCalledWith(1, 'foo', options);

‎src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,300 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar button/popover allowing users to set column visibility and order 1`] = `
4+
<div
5+
class="euiPopover emotion-euiPopover"
6+
data-test-subj="dataGridColumnSelectorPopover"
7+
>
8+
<div
9+
class="euiPopover__anchor css-16vtueo-render"
10+
>
11+
<button
12+
class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
13+
data-test-subj="dataGridColumnSelectorButton"
14+
type="button"
15+
>
16+
<span
17+
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
18+
>
19+
<span
20+
color="inherit"
21+
data-euiicon-type="listAdd"
22+
/>
23+
<span
24+
class="eui-textTruncate euiButtonEmpty__text"
25+
>
26+
Columns
27+
</span>
28+
</span>
29+
</button>
30+
</div>
31+
</div>
32+
`;
33+
34+
exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar button/popover allowing users to set column visibility and order 2`] = `
35+
<div
36+
aria-describedby="generated-id"
37+
aria-live="off"
38+
aria-modal="true"
39+
class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-hasDragDrop-bottom"
40+
data-autofocus="true"
41+
data-popover-panel="true"
42+
role="dialog"
43+
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
44+
tabindex="0"
45+
>
46+
<div
47+
class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
48+
data-popover-arrow="bottom"
49+
style="left: 10px; top: 0px;"
50+
/>
51+
<p
52+
class="emotion-euiScreenReaderOnly"
53+
id="generated-id"
54+
>
55+
You are in a dialog. Press Escape, or tap/click outside the dialog to close.
56+
</p>
57+
<div>
58+
<div>
59+
<div
60+
class="euiPopoverTitle emotion-euiPopoverTitle-s-s"
61+
>
62+
<div
63+
class="euiFormControlLayout euiFormControlLayout--compressed"
64+
>
65+
<div
66+
class="euiFormControlLayout__childrenWrapper"
67+
>
68+
<input
69+
aria-label="Search columns"
70+
class="euiFieldText euiFieldText--compressed"
71+
data-test-subj="dataGridColumnSelectorSearch"
72+
placeholder="Search"
73+
type="text"
74+
value=""
75+
/>
76+
</div>
77+
</div>
78+
</div>
79+
<div
80+
class="euiDataGrid__controlScroll"
81+
>
82+
<div
83+
class="euiDroppable emotion-euiDroppable-noGrow"
84+
data-rfd-droppable-context-id="0"
85+
data-rfd-droppable-id="columnOrder"
86+
data-test-subj="droppable"
87+
>
88+
<div
89+
class="euiDraggable emotion-euiDraggable"
90+
data-rfd-draggable-context-id="0"
91+
data-rfd-draggable-id="columnA"
92+
data-test-subj="draggable"
93+
role="group"
94+
>
95+
<div
96+
class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
97+
data-test-subj="dataGridColumnSelectorColumnItem-columnA"
98+
>
99+
<div
100+
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
101+
>
102+
<div
103+
class="euiFlexItem emotion-euiFlexItem-growZero"
104+
>
105+
<div
106+
class="euiSwitch euiSwitch--compressed euiSwitch--mini emotion-euiSwitch"
107+
>
108+
<button
109+
aria-checked="true"
110+
aria-label="columnA"
111+
class="euiSwitch__button"
112+
data-test-subj="dataGridColumnSelectorToggleColumnVisibility-columnA"
113+
id="generated-id"
114+
name="columnA"
115+
role="switch"
116+
type="button"
117+
>
118+
<span
119+
class="euiSwitch__body"
120+
>
121+
<span
122+
class="euiSwitch__thumb"
123+
/>
124+
<span
125+
class="euiSwitch__track"
126+
/>
127+
</span>
128+
</button>
129+
</div>
130+
</div>
131+
<div
132+
aria-describedby="rfd-hidden-text-0-hidden-text-0"
133+
aria-hidden="true"
134+
class="euiFlexItem emotion-euiFlexItem-grow-1"
135+
data-rfd-drag-handle-context-id="0"
136+
data-rfd-drag-handle-draggable-id="columnA"
137+
draggable="false"
138+
role="button"
139+
tabindex="-1"
140+
>
141+
<span
142+
class="euiDataGridColumnSelector__itemLabel"
143+
>
144+
columnA
145+
</span>
146+
</div>
147+
<div
148+
aria-describedby="rfd-hidden-text-0-hidden-text-0"
149+
aria-label="Drag handle"
150+
class="euiFlexItem emotion-euiFlexItem-growZero"
151+
data-rfd-drag-handle-context-id="0"
152+
data-rfd-drag-handle-draggable-id="columnA"
153+
draggable="false"
154+
role="button"
155+
tabindex="0"
156+
>
157+
<span
158+
color="subdued"
159+
data-euiicon-type="grab"
160+
/>
161+
</div>
162+
</div>
163+
</div>
164+
</div>
165+
<div
166+
class="euiDraggable emotion-euiDraggable"
167+
data-rfd-draggable-context-id="0"
168+
data-rfd-draggable-id="columnB"
169+
data-test-subj="draggable"
170+
role="group"
171+
>
172+
<div
173+
class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
174+
data-test-subj="dataGridColumnSelectorColumnItem-columnB"
175+
>
176+
<div
177+
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
178+
>
179+
<div
180+
class="euiFlexItem emotion-euiFlexItem-growZero"
181+
>
182+
<div
183+
class="euiSwitch euiSwitch--compressed euiSwitch--mini emotion-euiSwitch"
184+
>
185+
<button
186+
aria-checked="true"
187+
aria-label="columnB"
188+
class="euiSwitch__button"
189+
data-test-subj="dataGridColumnSelectorToggleColumnVisibility-columnB"
190+
id="generated-id"
191+
name="columnB"
192+
role="switch"
193+
type="button"
194+
>
195+
<span
196+
class="euiSwitch__body"
197+
>
198+
<span
199+
class="euiSwitch__thumb"
200+
/>
201+
<span
202+
class="euiSwitch__track"
203+
/>
204+
</span>
205+
</button>
206+
</div>
207+
</div>
208+
<div
209+
aria-describedby="rfd-hidden-text-0-hidden-text-0"
210+
aria-hidden="true"
211+
class="euiFlexItem emotion-euiFlexItem-grow-1"
212+
data-rfd-drag-handle-context-id="0"
213+
data-rfd-drag-handle-draggable-id="columnB"
214+
draggable="false"
215+
role="button"
216+
tabindex="-1"
217+
>
218+
<span
219+
class="euiDataGridColumnSelector__itemLabel"
220+
>
221+
columnB
222+
</span>
223+
</div>
224+
<div
225+
aria-describedby="rfd-hidden-text-0-hidden-text-0"
226+
aria-label="Drag handle"
227+
class="euiFlexItem emotion-euiFlexItem-growZero"
228+
data-rfd-drag-handle-context-id="0"
229+
data-rfd-drag-handle-draggable-id="columnB"
230+
draggable="false"
231+
role="button"
232+
tabindex="0"
233+
>
234+
<span
235+
color="subdued"
236+
data-euiicon-type="grab"
237+
/>
238+
</div>
239+
</div>
240+
</div>
241+
</div>
242+
<div
243+
class="euiDroppable__placeholder"
244+
/>
245+
</div>
246+
</div>
247+
</div>
248+
<div
249+
class="euiPopoverFooter emotion-euiPopoverFooter-s-s"
250+
>
251+
<div
252+
class="euiFlexGroup emotion-euiFlexGroup-s-spaceBetween-stretch-row"
253+
>
254+
<div
255+
class="euiFlexItem emotion-euiFlexItem-growZero"
256+
>
257+
<button
258+
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-left"
259+
data-test-subj="dataGridColumnSelectorShowAllButton"
260+
type="button"
261+
>
262+
<span
263+
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
264+
>
265+
<span
266+
class="eui-textTruncate euiButtonEmpty__text"
267+
>
268+
Show all
269+
</span>
270+
</span>
271+
</button>
272+
</div>
273+
<div
274+
class="euiFlexItem emotion-euiFlexItem-growZero"
275+
>
276+
<button
277+
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-right"
278+
data-test-subj="dataGridColumnSelectorHideAllButton"
279+
type="button"
280+
>
281+
<span
282+
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
283+
>
284+
<span
285+
class="eui-textTruncate euiButtonEmpty__text"
286+
>
287+
Hide all
288+
</span>
289+
</span>
290+
</button>
291+
</div>
292+
</div>
293+
</div>
294+
</div>
295+
</div>
296+
`;
297+
3298
exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar button/popover allowing users to set column visibility and order 1`] = `
4299
<div
5300
class="euiPopover emotion-euiPopover"

0 commit comments

Comments
 (0)