add examples to new docs

Author: LFDanLu

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

@@ -343,7 +343,7 @@ in your tests. Below is the full definition of the checkbox group tester and a s
 
 ```ts
 // CheckboxGroup.test.ts
-import {render, within} from '@testing-library/react';
+import {render} from '@testing-library/react';
 import {theme} from '@react-spectrum/theme-default';
 import {User} from '@react-spectrum/test-utils';
 

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

@@ -409,7 +409,7 @@ in your tests. Below is the full definition of the dialog tester and a sample of
 
 ```ts
 // Dialog.test.ts
-import {render, within} from '@testing-library/react';
+import {render} from '@testing-library/react';
 import {theme} from '@react-spectrum/theme-default';
 import {User} from '@react-spectrum/test-utils';
 

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

@@ -317,7 +317,7 @@ in your tests. Below is the full definition of the radio group tester and a samp
 
 ```ts
 // RadioGroup.test.ts
-import {render, within} from '@testing-library/react';
+import {render} from '@testing-library/react';
 import {theme} from '@react-spectrum/theme-default';
 import {User} from '@react-spectrum/test-utils';
 

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

@@ -230,7 +230,38 @@ See below for the full definition of the `User` object.
 
 ### Patterns
 
-<ExampleSwitcher type={null} examples={['ComboBox', 'GridList', 'ListBox', 'Menu', 'Select', 'Table', 'Tabs', 'Tree']}>
+<ExampleSwitcher type={null} examples={['CheckboxGroup', 'ComboBox', 'Dialog', 'GridList', 'ListBox', 'Menu', 'RadioGroup', 'Select', 'Table', 'Tabs', 'Tree']}>
+
+<>
+  ```ts isInSwitcher
+  // 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);
+  });
+  ```
+  <ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.CheckboxGroupTester} isInSwitcher />
+</>
 
 <>
   ```ts isInSwitcher
@@ -262,6 +293,39 @@ See below for the full definition of the `User` object.
   <ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.ComboBoxTester} isInSwitcher />
 </>
 
+<>
+  ```ts isInSwitcher
+  // Dialog.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('Dialog can be opened and closed', async function () {
+    // Render your test component/app and initialize the dialog tester
+    let {getByTestId, getByRole} = render(
+      <DialogTrigger>
+        <Button>Trigger</Button>
+        <Modal>
+          <Dialog role="alertdialog" data-testid="test-dialog">
+            ...
+          </Dialog>
+        </Modal>
+      </DialogTrigger>
+    );
+    let button = getByRole('button');
+    let dialogTester = testUtilUser.createTester('Dialog', {root: button, overlayType: 'modal'});
+    await dialogTester.open();
+    let dialog = dialogTester.dialog;
+    expect(dialog).toHaveAttribute('role', 'alertdialog');
+    await dialogTester.close();
+    expect(dialog).not.toBeInTheDocument();
+  });
+  ```
+  <ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.DialogTester} isInSwitcher />
+</>
+
 <>
   ```ts isInSwitcher
   // GridList.test.ts
@@ -356,6 +420,37 @@ See below for the full definition of the `User` object.
   <ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.MenuTester} isInSwitcher />
 </>
 
+<>
+  ```ts isInSwitcher
+  // RadioGroup.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('RadioGroup can switch the selected radio', async function () {
+    // Render your test component/app and initialize the radiogroup tester
+    let {getByRole} = render(
+      <RadioGroup>
+        ...
+      </RadioGroup>
+    );
+
+    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={testUtilDocs.links} class={testUtilDocs.exports.RadioGroupTester} isInSwitcher />
+</>
+
 <>
   ```ts isInSwitcher
   // Select.test.ts

packages/dev/s2-docs/pages/s2/testing.mdx

@@ -224,7 +224,38 @@ See below for the full definition of the `User` object.
 
 ### Patterns
 
-<ExampleSwitcher type={null} examples={['ComboBox', 'Menu', 'Picker', 'TableView', 'Tabs', 'TreeView']}>
+<ExampleSwitcher type={null} examples={['CheckboxGroup', 'ComboBox', 'Dialog', 'Menu', 'Picker', 'RadioGroup', 'TableView', 'Tabs', 'TreeView']}>
+
+<>
+  ```ts isInSwitcher
+  // CheckboxGroup.test.ts
+  import {render} from '@testing-library/react';
+  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(
+      <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);
+  });
+  ```
+  <ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.CheckboxGroupTester} isInSwitcher />
+</>
 
 <>
   ```ts isInSwitcher
@@ -256,6 +287,37 @@ See below for the full definition of the `User` object.
   <ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.ComboBoxTester} isInSwitcher />
 </>
 
+<>
+  ```ts isInSwitcher
+  // Dialog.test.ts
+  import {render} from '@testing-library/react';
+  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(
+      <DialogTrigger>
+        <ActionButton>Trigger</ActionButton>
+        <Dialog>
+          ...
+        </Dialog>
+      </DialogTrigger>
+    );
+    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={testUtilDocs.links} class={testUtilDocs.exports.DialogTester} isInSwitcher />
+</>
+
 <>
   ```ts isInSwitcher
   // Menu.test.ts
@@ -318,6 +380,37 @@ See below for the full definition of the `User` object.
   <ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.SelectTester} isInSwitcher />
 </>
 
+<>
+  ```ts isInSwitcher
+  // RadioGroup.test.ts
+  import {render} from '@testing-library/react';
+  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(
+      <RadioGroup>
+        ...
+      </RadioGroup>
+    );
+
+    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={testUtilDocs.links} class={testUtilDocs.exports.RadioGroupTester} isInSwitcher />
+</>
+
 <>
   ```ts isInSwitcher
   // Table.test.ts

packages/react-aria-components/docs/CheckboxGroup.mdx

@@ -620,7 +620,7 @@ in your tests. Below is the full definition of the checkbox group tester and a s
 
 ```ts
 // CheckboxGroup.test.ts
-import {render, within} from '@testing-library/react';
+import {render} from '@testing-library/react';
 import {User} from '@react-aria/test-utils';
 
 let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});

packages/react-aria-components/docs/Dialog.mdx

@@ -360,7 +360,7 @@ in your tests. Below is the full definition of the dialog tester and a sample of
 
 ```ts
 // Dialog.test.ts
-import {render, within} from '@testing-library/react';
+import {render} from '@testing-library/react';
 import {User} from '@react-aria/test-utils';
 
 let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});

packages/react-aria-components/docs/RadioGroup.mdx

@@ -641,7 +641,7 @@ in your tests. Below is the full definition of the radio group tester and a samp
 
 ```ts
 // RadioGroup.test.ts
-import {render, within} from '@testing-library/react';
+import {render} from '@testing-library/react';
 import {User} from '@react-aria/test-utils';
 
 let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});