add new test util docs to old website

Author: LFDanLu

packages/@react-aria/test-utils/src/index.ts

@@ -16,10 +16,13 @@ export {pointerMap} from './userEventMaps';
 export {User} from './user';
 // TODO: had to export these for the docs, but not sure why I didn't have to do
 // so for the v3 docs?
+export {CheckboxGroupTester} from './checkboxgroup';
 export {ComboBoxTester} from './combobox';
+export {DialogTester} from './dialog';
 export {GridListTester} from './gridlist';
 export {ListBoxTester} from './listbox';
 export {MenuTester} from './menu';
+export {RadioGroupTester} from './radiogroup';
 export {SelectTester} from './select';
 export {TableTester} from './table';
 export {TabsTester} from './tabs';

packages/@react-spectrum/checkbox/docs/CheckboxGroup.mdx

@@ -11,8 +11,9 @@ import {Layout} from '@react-spectrum/docs';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/checkbox';
+import checkboxgroupUtil from 'docs:@react-aria/test-utils/src/checkboxgroup.ts';
 import packageData from '@react-spectrum/checkbox/package.json';
-import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
+import {HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs';
 
 ```jsx import
  import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
@@ -332,3 +333,43 @@ See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/
   <Checkbox value="basketball">Basketball</Checkbox>
 </CheckboxGroup>
 ```
+
+## Testing
+
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+
+`@react-spectrum/test-utils` offers common checkbox group interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
+in your tests. Below is the full definition of the checkbox group tester and a sample of how you could use it in your test suite.
+
+```ts
+// CheckboxGroup.test.ts
+import {render, within} from '@testing-library/react';
+import {theme} from '@react-spectrum/theme-default';
+import {User} from '@react-spectrum/test-utils';
+
+let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});
+// ...
+
+it('CheckboxGroup can select multiple checkboxes', async function () {
+  // Render your test component/app and initialize the checkbox group tester
+  let {getByTestId} = render(
+    <Provider theme={defaultTheme}>
+      <CheckboxGroup data-testid="test-checkboxgroup">
+      ...
+      </CheckboxGroup>
+    </Provider>
+  );
+  let checkboxGroupTester = testUtilUser.createTester('CheckboxGroup', {root: getByTestId('test-checkboxgroup')});
+  expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(0);
+
+  await checkboxGroupTester.toggleCheckbox({checkbox: 0});
+  expect(checkboxGroupTester.checkboxes[0]).toBeChecked();
+  expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(1);
+
+  await checkboxGroupTester.toggleCheckbox({checkbox: 4});
+  expect(checkboxGroupTester.checkboxes[4]).toBeChecked();
+  expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(2);
+});
+```
+
+<ClassAPI links={checkboxgroupUtil.links} class={checkboxgroupUtil.exports.CheckboxGroupTester} />

packages/@react-spectrum/combobox/docs/ComboBox.mdx

@@ -996,7 +996,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common combobox interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common combobox interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the combobox tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/dialog/docs/Dialog.mdx

@@ -12,7 +12,8 @@ export default Layout;
 
 import DialogAnatomy from './images/DialogAnatomy.svg';
 import docs from 'docs:@react-spectrum/dialog';
-import {Image, HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
+import dialogUtil from 'docs:@react-aria/test-utils/src/dialog.ts';
+import {Image, HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs';
 import packageData from '@react-spectrum/dialog/package.json';
 import styles from '@react-spectrum/docs/src/docs.css';
 
@@ -398,3 +399,43 @@ respectively for container sizing considerations. Modal sizes on mobile devices
   )}
 </DialogTrigger>
 ```
+
+## Testing
+
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+
+`@react-spectrum/test-utils` offers common dialog interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
+in your tests. Below is the full definition of the dialog tester and a sample of how you could use it in your test suite.
+
+```ts
+// Dialog.test.ts
+import {render, within} from '@testing-library/react';
+import {theme} from '@react-spectrum/theme-default';
+import {User} from '@react-spectrum/test-utils';
+
+let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});
+// ...
+
+it('Dialog can be opened and closed', async function () {
+  // Render your test component/app and initialize the dialog tester
+  let {getByTestId, getByRole} = render(
+    <Provider theme={defaultTheme}>
+      <DialogTrigger>
+        <ActionButton>Trigger</ActionButton>
+        <Dialog>
+          ...
+        </Dialog>
+      </DialogTrigger>
+    </Provider>
+  );
+  let button = getByRole('button');
+  let dialogTester = testUtilUser.createTester('Dialog', {root: button, overlayType: 'modal'});
+  await dialogTester.open();
+  let dialog = dialogTester.dialog;
+  expect(dialog).toBeVisible();
+  await dialogTester.close();
+  expect(dialog).not.toBeInTheDocument();
+});
+```
+
+<ClassAPI links={dialogUtil.links} class={dialogUtil.exports.DialogTester} />

packages/@react-spectrum/list/docs/ListView.mdx

@@ -1195,7 +1195,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common gridlist interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common gridlist interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the gridlist tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/listbox/docs/ListBox.mdx

@@ -413,7 +413,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common listbox interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common listbox interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the listbox tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/menu/docs/MenuTrigger.mdx

@@ -260,7 +260,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common menu interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common menu interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the menu tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/picker/docs/Picker.mdx

@@ -592,7 +592,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common select interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common select interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the select tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/radio/docs/RadioGroup.mdx

@@ -11,8 +11,9 @@ import {Layout} from '@react-spectrum/docs';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/radio';
+import radiogroupUtil from 'docs:@react-aria/test-utils/src/radiogroup.ts';
 import packageData from '@react-spectrum/radio/package.json';
-import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
+import {HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs';
 
 ```jsx import
 import {Radio, RadioGroup} from '@react-spectrum/radio';
@@ -306,3 +307,43 @@ See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/
   <Radio value="dragon">Dragon</Radio>
 </RadioGroup>
 ```
+
+## Testing
+
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+
+`@react-spectrum/test-utils` offers common radio group interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
+in your tests. Below is the full definition of the radio group tester and a sample of how you could use it in your test suite.
+
+```ts
+// RadioGroup.test.ts
+import {render, within} from '@testing-library/react';
+import {theme} from '@react-spectrum/theme-default';
+import {User} from '@react-spectrum/test-utils';
+
+let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});
+// ...
+
+it('RadioGroup can switch the selected radio', async function () {
+  // Render your test component/app and initialize the radiogroup tester
+  let {getByRole} = render(
+    <Provider theme={defaultTheme}>
+      <RadioGroup>
+        ...
+      </RadioGroup>
+    </Provider>
+  );
+
+  let radioGroupTester = testUtilUser.createTester('RadioGroup', {root: getByRole('radiogroup')});
+  let radios = radioGroupTester.radios;
+  expect(radioGroupTester.selectedRadio).toBeFalsy();
+
+  await radioGroupTester.triggerRadio({radio: radios[0]});
+  expect(radioGroupTester.selectedRadio).toBe(radios[0]);
+
+  await radioGroupTester.triggerRadio({radio: radios[1]});
+  expect(radioGroupTester.selectedRadio).toBe(radios[1]);
+});
+```
+
+<ClassAPI links={radiogroupUtil.links} class={radiogroupUtil.exports.RadioGroupTester} />

packages/@react-spectrum/table/docs/TableView.mdx

@@ -1964,7 +1964,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common table interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common table interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the table tester and a sample of how you could use it in your test suite.
 
 ```ts