Revert test util docs to fix build for now (#5890)

Author: LFDanLu

jest.ssr.config.js

@@ -36,8 +36,8 @@ module.exports = {
 
   testTimeout: 30000,
 
-  globalSetup: require.resolve('@react-spectrum/test-utils-internal/src/ssrSetup'),
-  globalTeardown: require.resolve('@react-spectrum/test-utils-internal/src/ssrTeardown'),
+  globalSetup: require.resolve('@react-spectrum/test-utils/src/ssrSetup'),
+  globalTeardown: require.resolve('@react-spectrum/test-utils/src/ssrTeardown'),
 
   // The test environment that will be used for testing
   testEnvironment: 'jsdom',

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

@@ -13,7 +13,7 @@
 import {ActionGroup, Item} from '../';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils-internal';
+import {render} from '@react-spectrum/test-utils';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium-unique.css';
 import themeLight from '@adobe/spectrum-css-temp/vars/spectrum-light-unique.css';
 

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

@@ -12,7 +12,7 @@
 
 import {createRef} from 'react';
 import {FocusableElement} from '@react-types/shared';
-import {renderHook} from '@react-spectrum/test-utils-internal';
+import {renderHook} from '@react-spectrum/test-utils';
 import {useActionGroup} from '../';
 import {useListState} from '@react-stately/list';
 

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

@@ -10,22 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, pointerMap, render, simulateMobile, waitFor} from '@react-spectrum/test-utils-internal';
+import {act, fireEvent, render, triggerPress, waitFor} from '@react-spectrum/test-utils';
 import {ActionButton, Button} from '@react-spectrum/button';
 import {Content} from '@react-spectrum/view';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Item, Menu, MenuTrigger, Section} from '@react-spectrum/menu';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
-import userEvent from '@testing-library/user-event';
 import {watchModals} from '../';
 
 describe('watchModals', () => {
-  let user;
-
   beforeAll(() => {
-    user = userEvent.setup({delay: null, pointerMap});
     jest.useFakeTimers();
   });
 
@@ -48,7 +44,9 @@ describe('watchModals', () => {
     expect(queryByRole('separator')).toBeNull();
 
     expect(document.activeElement).toBe(modal);
-    await user.keyboard('{Escape}');
+
+    fireEvent.keyDown(modal, {key: 'Escape'});
+    fireEvent.keyUp(modal, {key: 'Escape'});
 
     act(() => {
       jest.runAllTimers();
@@ -75,7 +73,9 @@ describe('watchModals', () => {
       </>
     );
     expect(getByRole('separator')).toBeVisible();
-    await user.click(getByLabelText('Trigger'));
+    act(() => {
+      triggerPress(getByLabelText('Trigger'));
+    });
     act(() => {
       jest.runAllTimers();
     });
@@ -106,7 +106,9 @@ describe('watchModals', () => {
     );
     // expect just the button labeled Trigger, and open the first dialog
     expect(getByRole('separator')).toBeVisible();
-    await user.click(getByLabelText('Trigger'));
+    act(() => {
+      triggerPress(getByLabelText('Trigger'));
+    });
     act(() => {
       jest.runAllTimers();
     });
@@ -121,7 +123,9 @@ describe('watchModals', () => {
     let buttons = getAllByRole('button');
     expect(buttons.length).toBe(1);
     expect(buttons[0]).toBe(getByLabelText('Nested Trigger'));
-    await user.click(getByLabelText('Nested Trigger'));
+    act(() => {
+      triggerPress(getByLabelText('Nested Trigger'));
+    });
     act(() => {
       jest.runAllTimers();
     });
@@ -135,8 +139,8 @@ describe('watchModals', () => {
     expect(queryByRole('separator')).toBeNull();
 
     // start closing dialogs
-    await user.keyboard('{Escape}');
-
+    fireEvent.keyDown(innerDialog, {key: 'Escape'});
+    fireEvent.keyUp(innerDialog, {key: 'Escape'});
     act(() => {
       jest.runAllTimers();
     });
@@ -151,7 +155,8 @@ describe('watchModals', () => {
     expect(queryByRole('separator')).toBeNull();
 
     // close the outer dialog
-    await user.keyboard('{Escape}');
+    fireEvent.keyDown(dialog, {key: 'Escape'});
+    fireEvent.keyUp(dialog, {key: 'Escape'});
     act(() => {
       jest.runAllTimers();
     });
@@ -191,8 +196,9 @@ describe('watchModals', () => {
       </>
     );
     expect(getByRole('separator')).toBeVisible();
-    await user.click(getByLabelText('Trigger'));
-
+    act(() => {
+      triggerPress(getByLabelText('Trigger'));
+    });
     act(() => {
       jest.runAllTimers();
     });
@@ -209,7 +215,7 @@ describe('watchModals', () => {
       ]}
     ];
     // menu should be a tray
-    simulateMobile();
+    jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 700);
     watchModals();
     let {getByLabelText, getByRole, queryByRole} = render(
       <>
@@ -229,7 +235,9 @@ describe('watchModals', () => {
       </>
     );
     expect(getByRole('separator')).toBeVisible();
-    await user.click(getByLabelText('Trigger'));
+    act(() => {
+      triggerPress(getByLabelText('Trigger'));
+    });
     act(() => {
       jest.runAllTimers();
     });
@@ -251,7 +259,9 @@ describe('watchModals', () => {
       </>
     );
     expect(getByRole('separator')).toBeVisible();
-    await user.click(getByLabelText('Trigger'));
+    act(() => {
+      triggerPress(getByLabelText('Trigger'));
+    });
     act(() => {
       jest.runAllTimers();
     });

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

@@ -13,7 +13,7 @@
 import {Item} from '@react-stately/collections';
 import {ListLayout} from '@react-stately/layout';
 import React from 'react';
-import {renderHook} from '@react-spectrum/test-utils-internal';
+import {renderHook} from '@react-spectrum/test-utils';
 import {useComboBoxState} from '@react-stately/combobox';
 import {useSearchAutocomplete} from '../';
 

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

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@react-spectrum/test-utils-internal';
+import {renderHook} from '@react-spectrum/test-utils';
 import {useBreadcrumbItem} from '../';
 
 describe('useBreadcrumbItem', function () {

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

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@react-spectrum/test-utils-internal';
+import {renderHook} from '@react-spectrum/test-utils';
 import {useBreadcrumbs} from '../';
 
 describe('useBreadcrumbs', function () {

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

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@react-spectrum/test-utils-internal';
+import {renderHook} from '@react-spectrum/test-utils';
 import {useButton} from '../';
 
 describe('useButton tests', function () {

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

@@ -10,17 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {act, fireEvent, render} from '@react-spectrum/test-utils';
 import {CalendarDate} from '@internationalized/date';
 import {Example} from '../stories/Example';
 import React from 'react';
-import userEvent from '@testing-library/user-event';
 
 describe('useCalendar', () => {
-  let user;
   beforeAll(() => {
     jest.useFakeTimers();
-    user = userEvent.setup({delay: null, pointerMap});
   });
 
   afterEach(() => {
@@ -39,15 +36,8 @@ describe('useCalendar', () => {
     expect(document.activeElement).toBe(cell);
 
     for (let i = 0; i < count; i++) {
-      if (opts?.shiftKey) {
-        await user.keyboard('{Shift>}');
-      }
-
-      await user.keyboard(`{${key}}`);
-
-      if (opts?.shiftKey) {
-        await user.keyboard('{/Shift}');
-      }
+      fireEvent.keyDown(document.activeElement, {key, ...opts});
+      fireEvent.keyUp(document.activeElement, {key, ...opts});
     }
 
     cell = getByLabelText(value, {exact: false});
@@ -152,19 +142,21 @@ describe('useCalendar', () => {
     });
   });
 
-  async function testPagination(defaultValue, rangeBefore, rangeAfter, rel, count,  visibleDuration, pageBehavior) {
+  function testPagination(defaultValue, rangeBefore, rangeAfter, rel, count,  visibleDuration, pageBehavior) {
     let {getByTestId, getByLabelText, unmount} = render(<Example defaultValue={defaultValue} autoFocus visibleDuration={visibleDuration} pageBehavior={pageBehavior} />);
     let grid = getByTestId('range');
     expect(grid).toHaveTextContent(rangeBefore);
+
     let btn = getByLabelText(rel);
 
     for (let i = 0; i < count; i++) {
-      await user.click(btn);
+      fireEvent.click(btn);
     }
 
     expect(grid).toHaveTextContent(rangeAfter);
+  
     unmount();
-  }
+  }  
 
   describe('pagination', () => {
     it.each`
@@ -173,18 +165,18 @@ describe('useCalendar', () => {
       ${'going forward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'May to June 2019'} | ${'Next'} | ${2} | ${{months: 2}}
       ${'going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'November to December 2018'} | ${'Previous'} | ${1} | ${{months: 2}}
       ${'going backward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'September to October 2018'} | ${'Previous'} | ${2} | ${{months: 2}}
-      `('should use visible as default value $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration}) => {
-        await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration);
+      `('should use visible as default value $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration}) => {
+        testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration);
       });
-
+      
     it.each`
       Name | defaultValue | rangeBefore | rangeAfter | rel | count | visibleDuration | pageBehavior
       ${'going forward one'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'February to March 2019'} | ${'Next'} | ${1} | ${{months: 2}} | ${'single'}
       ${'going forward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'March to April 2019'} | ${'Next'} | ${2} | ${{months: 2}} | ${'single'}
       ${'going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'December 2018 to January 2019'} | ${'Previous'} | ${1} | ${{months: 2}} | ${'single'}
       ${'going backward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'November to December 2018'} | ${'Previous'} | ${2} | ${{months: 2}} | ${'single'}
-      `('should use pageBehavior single $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
-        await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
+      `('should use pageBehavior single $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
+        testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
       });
 
     it.each`
@@ -193,8 +185,8 @@ describe('useCalendar', () => {
     ${'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}}
     ${'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}}
     ${'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}}
-    `('should use visible as default $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
-      await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
+    `('should use visible as default $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
+      testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
     });
 
     it.each`
@@ -203,8 +195,8 @@ describe('useCalendar', () => {
     ${'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'}
     ${'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'}
     ${'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'}
-    `('should use pageBehavior single $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
-      await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
+    `('should use pageBehavior single $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
+      testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
     });
 
     it.each`
@@ -213,8 +205,8 @@ describe('useCalendar', () => {
     ${'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}}
     ${'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}}
     ${'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}}
-    `('should use visible as default $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
-      await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
+    `('should use visible as default $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
+      testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
     });
 
     it.each`
@@ -223,8 +215,8 @@ describe('useCalendar', () => {
     ${'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'}
     ${'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'}
     ${'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'}
-    `('should use pageBehavior single $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
-      await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
+    `('should use pageBehavior single $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
+      testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
     });
   });
 });

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

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