docs: (DNM) Testing docs

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

@@ -14,5 +14,16 @@ export {triggerLongPress} from './events';
 export {installMouseEvent, installPointerEvent} from './testSetup';
 export {pointerMap} from './userEventMaps';
 export {User} from './user';
+export type {CheckboxGroupTester} from './checkboxgroup';
+export type {ComboBoxTester} from './combobox';
+export type {DialogTester} from './dialog';
+export type {GridListTester} from './gridlist';
+export type {ListBoxTester} from './listbox';
+export type {MenuTester} from './menu';
+export type {RadioGroupTester} from './radiogroup';
+export type {SelectTester} from './select';
+export type {TableTester} from './table';
+export type {TabsTester} from './tabs';
+export type {TreeTester} from './tree';
 
 export type {UserOpts} from './types';

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} 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} 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} 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/s2/style/index.ts

@@ -77,7 +77,7 @@ const iconSizes = {
 
 export function iconStyle(this: MacroContext | void, options: IconStyle): StyleString<Exclude<keyof IconStyle, 'color' | 'size'>> {
   let {size = 'M', color, ...styles} = options;
-  
+
   if (color) {
     styles['--iconPrimary'] = {
       type: 'fill',

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

packages/@react-spectrum/tabs/docs/Tabs.mdx

@@ -639,7 +639,7 @@ Tabs features automatic tab collapse behavior and may need specific mocks to tes
 [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/326f48154e301edab425c8198c5c3af72422462b/packages/%40react-spectrum/tabs/test/Tabs.test.js#L58-L62) if you
 run into any issues with your tests.
 
-`@react-spectrum/test-utils` offers common tabs 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 tabs 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 tabs tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/tree/docs/TreeView.mdx

@@ -533,7 +533,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 tree 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 tree 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 tree tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/dev/docs/pages/react-aria/testing.mdx

@@ -201,14 +201,20 @@ See below for the full definition of the `User` object.
 Below is a list of the ARIA patterns testers currently supported by `createTester`. See the accompanying component testing docs pages for a sample of how to use
 the testers in your test suite.
 
+-  [CheckboxGroup](CheckboxGroup.html#test-utils)
+
 -  [ComboBox](ComboBox.html#test-utils)
 
+-  [Dialog](Dialog.html#test-utils)
+
 -  [GridList](GridList.html#test-utils)
 
 -  [ListBox](ListBox.html#test-utils)
 
 -  [Menu](Menu.html#test-utils)
 
+-  [RadioGroup](RadioGroup.html#test-utils)
+
 -  [Select](Select.html#test-utils)
 
 -  [Table](Table.html#test-utils)

packages/dev/docs/pages/react-spectrum/testing.mdx

@@ -395,14 +395,20 @@ See below for the full definition of the `User` object.
 Below is a list of the ARIA patterns testers currently supported by `createTester`. See the accompanying component testing docs pages for a sample of how to use
 the testers in your test suite.
 
+-  [CheckboxGroup](CheckboxGroup.html#test-utils)
+
 -  [ComboBox](ComboBox.html#test-utils)
 
+-  [Dialog](Dialog.html#test-utils)
+
 -  [ListView](ListView.html#test-utils)
 
 -  [ListBox](ListBox.html#test-utils)
 
 -  [MenuTrigger](MenuTrigger.html#test-utils)
 
+-  [RadioGroup](RadioGroup.html#test-utils)
+
 -  [Picker](Picker.html#test-utils)
 
 -  [TableView](TableView.html#test-utils)

packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx

@@ -5,8 +5,12 @@ import docs from 'docs:react-aria-components';
 import vanillaDocs from 'docs:vanilla-starter/CheckboxGroup';
 import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/checkbox/docs/checkboxgroup-anatomy.svg';
+import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['input'];
+export const relatedPages = [
+  {title: 'Testing', url: './CheckboxGroup/testing.html'}
+];
 
 # CheckboxGroup
 

packages/dev/s2-docs/pages/react-aria/CheckboxGroup/testing.mdx

@@ -0,0 +1,66 @@
+import {Layout} from '../../../src/Layout';
+export default Layout;
+
+import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
+import testUtilDocs from 'docs:@react-aria/test-utils';
+import {InstallCommand} from '../../../src/InstallCommand';
+import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ';
+
+export const isSubpage = true;
+export const tags = ['testing', 'checkboxgroup', 'test-utils'];
+export const description = 'Testing CheckboxGroup with React Aria test utils';
+
+# Testing CheckboxGroup
+
+## Test utils
+
+`@react-aria/test-utils` offers common checkbox group interaction utilities which you may find helpful when writing tests. To install, simply
+add it to your dev dependencies via your preferred package manager.
+
+<InstallCommand pkg="@react-aria/test-utils" flags="--dev" />
+
+<InlineAlert variant="notice">
+  <Heading>Requirements</Heading>
+  <Content>Please note that this library uses [@testing-library/react@16](https://www.npmjs.com/package/@testing-library/react) and [@testing-library/user-event@14](https://www.npmjs.com/package/@testing-library/user-event). This means that you need to be on React 18+ in order for these utilities to work.</Content>
+</InlineAlert>
+
+Once installed, you can access the `User` that `@react-aria/test-utils` provides in your test file as shown below. This user only needs to be initialized once and then can be used to generate
+the `CheckboxGroup` tester in your test cases. This gives you access to `CheckboxGroup` specific utilities that you can then call within your test to query for specific subcomponents or simulate common interactions.
+The example test case below shows how you might go about setting up the `CheckboxGroup` tester, use it to simulate checkbox selection, and verify the checkbox group's state after each interaction.
+
+```ts
+// CheckboxGroup.test.ts
+import {render} from '@testing-library/react';
+import {User} from '@react-aria/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(
+    <CheckboxGroup data-testid="test-checkboxgroup">
+    ...
+    </CheckboxGroup>
+  );
+  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);
+});
+```
+
+See below for the full definition of the `User` and the `CheckboxGroup` tester.
+
+<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.User} />
+<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.CheckboxGroupTester} />
+
+## Testing FAQ
+
+<PatternTestingFAQ patternName="checkbox group" />

packages/dev/s2-docs/pages/react-aria/ComboBox.mdx

@@ -6,8 +6,12 @@ import {ComboBox as VanillaComboBox, ComboBoxItem} from 'vanilla-starter/ComboBo
 import vanillaDocs from 'docs:vanilla-starter/ComboBox';
 import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/ComboBoxAnatomy.svg';
+import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['autocomplete', 'search', 'typeahead', 'input'];
+export const relatedPages = [
+  {title: 'Testing', url: './ComboBox/testing.html'}
+];
 
 # ComboBox