Skip to content

Commit bce308e

Browse files
LFDanLusnowystinger
LFDanLu
and
snowystinger
authored
Bring back test util docs (#5891)
* Revert "Revert test util docs to fix build for now (#5890)" This reverts commit 36db9c7. * fix build * remove extra todo --------- Co-authored-by: Robert Snow <[email protected]>
1 parent 888267c commit bce308e

File tree

312 files changed

+3305
-2987
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

312 files changed

+3305
-2987
lines changed

‎jest.ssr.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ module.exports = {
3636

3737
testTimeout: 30000,
3838

39-
globalSetup: require.resolve('@react-spectrum/test-utils/src/ssrSetup'),
40-
globalTeardown: require.resolve('@react-spectrum/test-utils/src/ssrTeardown'),
39+
globalSetup: require.resolve('@react-spectrum/test-utils-internal/src/ssrSetup'),
40+
globalTeardown: require.resolve('@react-spectrum/test-utils-internal/src/ssrTeardown'),
4141

4242
// The test environment that will be used for testing
4343
testEnvironment: 'jsdom',

‎packages/@adobe/react-spectrum/test/ActionGroup.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
import {ActionGroup, Item} from '../';
1414
import {Provider} from '@react-spectrum/provider';
1515
import React from 'react';
16-
import {render} from '@react-spectrum/test-utils';
16+
import {render} from '@react-spectrum/test-utils-internal';
1717
import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium-unique.css';
1818
import themeLight from '@adobe/spectrum-css-temp/vars/spectrum-light-unique.css';
1919

‎packages/@react-aria/actiongroup/test/useActionGroup.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
import {createRef} from 'react';
1414
import {FocusableElement} from '@react-types/shared';
15-
import {renderHook} from '@react-spectrum/test-utils';
15+
import {renderHook} from '@react-spectrum/test-utils-internal';
1616
import {useActionGroup} from '../';
1717
import {useListState} from '@react-stately/list';
1818

‎packages/@react-aria/aria-modal-polyfill/test/index.test.tsx

+17-27
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,22 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {act, fireEvent, render, triggerPress, waitFor} from '@react-spectrum/test-utils';
13+
import {act, pointerMap, render, simulateMobile, waitFor} from '@react-spectrum/test-utils-internal';
1414
import {ActionButton, Button} from '@react-spectrum/button';
1515
import {Content} from '@react-spectrum/view';
1616
import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
1717
import {Item, Menu, MenuTrigger, Section} from '@react-spectrum/menu';
1818
import {Provider} from '@react-spectrum/provider';
1919
import React from 'react';
2020
import {theme} from '@react-spectrum/theme-default';
21+
import userEvent from '@testing-library/user-event';
2122
import {watchModals} from '../';
2223

2324
describe('watchModals', () => {
25+
let user;
26+
2427
beforeAll(() => {
28+
user = userEvent.setup({delay: null, pointerMap});
2529
jest.useFakeTimers();
2630
});
2731

@@ -44,9 +48,7 @@ describe('watchModals', () => {
4448
expect(queryByRole('separator')).toBeNull();
4549

4650
expect(document.activeElement).toBe(modal);
47-
48-
fireEvent.keyDown(modal, {key: 'Escape'});
49-
fireEvent.keyUp(modal, {key: 'Escape'});
51+
await user.keyboard('{Escape}');
5052

5153
act(() => {
5254
jest.runAllTimers();
@@ -73,9 +75,7 @@ describe('watchModals', () => {
7375
</>
7476
);
7577
expect(getByRole('separator')).toBeVisible();
76-
act(() => {
77-
triggerPress(getByLabelText('Trigger'));
78-
});
78+
await user.click(getByLabelText('Trigger'));
7979
act(() => {
8080
jest.runAllTimers();
8181
});
@@ -106,9 +106,7 @@ describe('watchModals', () => {
106106
);
107107
// expect just the button labeled Trigger, and open the first dialog
108108
expect(getByRole('separator')).toBeVisible();
109-
act(() => {
110-
triggerPress(getByLabelText('Trigger'));
111-
});
109+
await user.click(getByLabelText('Trigger'));
112110
act(() => {
113111
jest.runAllTimers();
114112
});
@@ -123,9 +121,7 @@ describe('watchModals', () => {
123121
let buttons = getAllByRole('button');
124122
expect(buttons.length).toBe(1);
125123
expect(buttons[0]).toBe(getByLabelText('Nested Trigger'));
126-
act(() => {
127-
triggerPress(getByLabelText('Nested Trigger'));
128-
});
124+
await user.click(getByLabelText('Nested Trigger'));
129125
act(() => {
130126
jest.runAllTimers();
131127
});
@@ -139,8 +135,8 @@ describe('watchModals', () => {
139135
expect(queryByRole('separator')).toBeNull();
140136

141137
// start closing dialogs
142-
fireEvent.keyDown(innerDialog, {key: 'Escape'});
143-
fireEvent.keyUp(innerDialog, {key: 'Escape'});
138+
await user.keyboard('{Escape}');
139+
144140
act(() => {
145141
jest.runAllTimers();
146142
});
@@ -155,8 +151,7 @@ describe('watchModals', () => {
155151
expect(queryByRole('separator')).toBeNull();
156152

157153
// close the outer dialog
158-
fireEvent.keyDown(dialog, {key: 'Escape'});
159-
fireEvent.keyUp(dialog, {key: 'Escape'});
154+
await user.keyboard('{Escape}');
160155
act(() => {
161156
jest.runAllTimers();
162157
});
@@ -196,9 +191,8 @@ describe('watchModals', () => {
196191
</>
197192
);
198193
expect(getByRole('separator')).toBeVisible();
199-
act(() => {
200-
triggerPress(getByLabelText('Trigger'));
201-
});
194+
await user.click(getByLabelText('Trigger'));
195+
202196
act(() => {
203197
jest.runAllTimers();
204198
});
@@ -215,7 +209,7 @@ describe('watchModals', () => {
215209
]}
216210
];
217211
// menu should be a tray
218-
jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 700);
212+
simulateMobile();
219213
watchModals();
220214
let {getByLabelText, getByRole, queryByRole} = render(
221215
<>
@@ -235,9 +229,7 @@ describe('watchModals', () => {
235229
</>
236230
);
237231
expect(getByRole('separator')).toBeVisible();
238-
act(() => {
239-
triggerPress(getByLabelText('Trigger'));
240-
});
232+
await user.click(getByLabelText('Trigger'));
241233
act(() => {
242234
jest.runAllTimers();
243235
});
@@ -259,9 +251,7 @@ describe('watchModals', () => {
259251
</>
260252
);
261253
expect(getByRole('separator')).toBeVisible();
262-
act(() => {
263-
triggerPress(getByLabelText('Trigger'));
264-
});
254+
await user.click(getByLabelText('Trigger'));
265255
act(() => {
266256
jest.runAllTimers();
267257
});

‎packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
import {Item} from '@react-stately/collections';
1414
import {ListLayout} from '@react-stately/layout';
1515
import React from 'react';
16-
import {renderHook} from '@react-spectrum/test-utils';
16+
import {renderHook} from '@react-spectrum/test-utils-internal';
1717
import {useComboBoxState} from '@react-stately/combobox';
1818
import {useSearchAutocomplete} from '../';
1919

‎packages/@react-aria/breadcrumbs/test/useBreadcrumbItem.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import React from 'react';
14-
import {renderHook} from '@react-spectrum/test-utils';
14+
import {renderHook} from '@react-spectrum/test-utils-internal';
1515
import {useBreadcrumbItem} from '../';
1616

1717
describe('useBreadcrumbItem', function () {

‎packages/@react-aria/breadcrumbs/test/useBreadcrumbs.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import React from 'react';
14-
import {renderHook} from '@react-spectrum/test-utils';
14+
import {renderHook} from '@react-spectrum/test-utils-internal';
1515
import {useBreadcrumbs} from '../';
1616

1717
describe('useBreadcrumbs', function () {

‎packages/@react-aria/button/test/useButton.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import React from 'react';
14-
import {renderHook} from '@react-spectrum/test-utils';
14+
import {renderHook} from '@react-spectrum/test-utils-internal';
1515
import {useButton} from '../';
1616

1717
describe('useButton tests', function () {

‎packages/@react-aria/calendar/test/useCalendar.test.js

+29-21
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,17 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {act, fireEvent, render} from '@react-spectrum/test-utils';
13+
import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
1414
import {CalendarDate} from '@internationalized/date';
1515
import {Example} from '../stories/Example';
1616
import React from 'react';
17+
import userEvent from '@testing-library/user-event';
1718

1819
describe('useCalendar', () => {
20+
let user;
1921
beforeAll(() => {
2022
jest.useFakeTimers();
23+
user = userEvent.setup({delay: null, pointerMap});
2124
});
2225

2326
afterEach(() => {
@@ -36,8 +39,15 @@ describe('useCalendar', () => {
3639
expect(document.activeElement).toBe(cell);
3740

3841
for (let i = 0; i < count; i++) {
39-
fireEvent.keyDown(document.activeElement, {key, ...opts});
40-
fireEvent.keyUp(document.activeElement, {key, ...opts});
42+
if (opts?.shiftKey) {
43+
await user.keyboard('{Shift>}');
44+
}
45+
46+
await user.keyboard(`{${key}}`);
47+
48+
if (opts?.shiftKey) {
49+
await user.keyboard('{/Shift}');
50+
}
4151
}
4252

4353
cell = getByLabelText(value, {exact: false});
@@ -142,21 +152,19 @@ describe('useCalendar', () => {
142152
});
143153
});
144154

145-
function testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior) {
155+
async function testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior) {
146156
let {getByTestId, getByLabelText, unmount} = render(<Example defaultValue={defaultValue} autoFocus visibleDuration={visibleDuration} pageBehavior={pageBehavior} />);
147157
let grid = getByTestId('range');
148158
expect(grid).toHaveTextContent(rangeBefore);
149-
150159
let btn = getByLabelText(rel);
151160

152161
for (let i = 0; i < count; i++) {
153-
fireEvent.click(btn);
162+
await user.click(btn);
154163
}
155164

156165
expect(grid).toHaveTextContent(rangeAfter);
157-
158166
unmount();
159-
}
167+
}
160168

161169
describe('pagination', () => {
162170
it.each`
@@ -165,18 +173,18 @@ describe('useCalendar', () => {
165173
${'going forward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'May to June 2019'} | ${'Next'} | ${2} | ${{months: 2}}
166174
${'going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'November to December 2018'} | ${'Previous'} | ${1} | ${{months: 2}}
167175
${'going backward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'September to October 2018'} | ${'Previous'} | ${2} | ${{months: 2}}
168-
`('should use visible as default value $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration}) => {
169-
testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration);
176+
`('should use visible as default value $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration}) => {
177+
await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration);
170178
});
171-
179+
172180
it.each`
173181
Name | defaultValue | rangeBefore | rangeAfter | rel | count | visibleDuration | pageBehavior
174182
${'going forward one'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'February to March 2019'} | ${'Next'} | ${1} | ${{months: 2}} | ${'single'}
175183
${'going forward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'March to April 2019'} | ${'Next'} | ${2} | ${{months: 2}} | ${'single'}
176184
${'going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'December 2018 to January 2019'} | ${'Previous'} | ${1} | ${{months: 2}} | ${'single'}
177185
${'going backward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'November to December 2018'} | ${'Previous'} | ${2} | ${{months: 2}} | ${'single'}
178-
`('should use pageBehavior single $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
179-
testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
186+
`('should use pageBehavior single $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
187+
await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
180188
});
181189

182190
it.each`
@@ -185,8 +193,8 @@ describe('useCalendar', () => {
185193
${'week going forward two'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'February 3 to 23, 2019'} | ${'Next'} | ${2} | ${{weeks: 3}}
186194
${'week going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'December 2 to 22, 2018'} | ${'Previous'} | ${1} | ${{weeks: 3}}
187195
${'week going backward two'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'November 11 to December 1, 2018'} | ${'Previous'} | ${2} | ${{weeks: 3}}
188-
`('should use visible as default $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
189-
testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
196+
`('should use visible as default $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
197+
await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
190198
});
191199

192200
it.each`
@@ -195,8 +203,8 @@ describe('useCalendar', () => {
195203
${'week going forward four'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'January 20 to February 9, 2019'} | ${'Next'} | ${4} | ${{weeks: 3}} | ${'single'}
196204
${'week going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'December 16, 2018 to January 5, 2019'} | ${'Previous'} | ${1} | ${{weeks: 3}} | ${'single'}
197205
${'week going backward four'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'November 25 to December 15, 2018'} | ${'Previous'} | ${4} | ${{weeks: 3}} | ${'single'}
198-
`('should use pageBehavior single $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
199-
testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
206+
`('should use pageBehavior single $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
207+
await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
200208
});
201209

202210
it.each`
@@ -205,8 +213,8 @@ describe('useCalendar', () => {
205213
${'day going forward two'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'January 9 to 13, 2019'} | ${'Next'} | ${2} | ${{days: 5}}
206214
${'day going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'December 25 to 29, 2018'} | ${'Previous'} | ${1} | ${{days: 5}}
207215
${'day going backward two'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'December 20 to 24, 2018'} | ${'Previous'} | ${2} | ${{days: 5}}
208-
`('should use visible as default $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
209-
testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
216+
`('should use visible as default $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
217+
await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
210218
});
211219

212220
it.each`
@@ -215,8 +223,8 @@ describe('useCalendar', () => {
215223
${'day going forward five'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'January 3 to 7, 2019'} | ${'Next'} | ${4} | ${{days: 5}} | ${'single'}
216224
${'day going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'December 29, 2018 to January 2, 2019'} | ${'Previous'} | ${1} | ${{days: 5}} | ${'single'}
217225
${'day going backward five'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'December 26 to 30, 2018'} | ${'Previous'} | ${4} | ${{days: 5}} | ${'single'}
218-
`('should use pageBehavior single $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
219-
testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
226+
`('should use pageBehavior single $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
227+
await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
220228
});
221229
});
222230
});

‎packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
import {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps} from '@react-types/checkbox';
1414
import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/checkbox';
15-
import {pointerMap, render} from '@react-spectrum/test-utils';
15+
import {pointerMap, render} from '@react-spectrum/test-utils-internal';
1616
import React, {useRef} from 'react';
1717
import {useCheckboxGroup, useCheckboxGroupItem} from '../';
1818
import userEvent from '@testing-library/user-event';

‎packages/@react-aria/color/test/useColorField.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
import {parseColor, useColorFieldState} from '@react-stately/color';
1414
import React from 'react';
15-
import {renderHook} from '@react-spectrum/test-utils';
15+
import {renderHook} from '@react-spectrum/test-utils-internal';
1616
import {useColorField} from '../';
1717

1818
describe('useColorField', function () {

0 commit comments

Comments
 (0)