diff --git a/packages/@react-aria/test-utils/src/menu.ts b/packages/@react-aria/test-utils/src/menu.ts
index d63b6aca6eb..f8cf4a346cf 100644
--- a/packages/@react-aria/test-utils/src/menu.ts
+++ b/packages/@react-aria/test-utils/src/menu.ts
@@ -266,7 +266,7 @@ export class MenuTester {
let menu = this.menu;
if (menu) {
if (typeof submenuTrigger === 'string') {
- submenuTrigger = within(menu).getByText(submenuTrigger);
+ submenuTrigger = (within(menu!).getByText(submenuTrigger).closest('[role=menuitem]'))! as HTMLElement;
}
let submenuTriggerTester = new MenuTester({user: this.user, interactionType: this._interactionType, root: submenuTrigger, isSubmenu: true});
@@ -292,7 +292,8 @@ export class MenuTester {
private async keyboardNavigateToOption(opts: {option: HTMLElement}) {
let {option} = opts;
let options = this.options();
- let targetIndex = options.indexOf(option);
+ let targetIndex = options.findIndex(opt => (opt === option) || opt.contains(option));
+
if (targetIndex === -1) {
throw new Error('Option provided is not in the menu');
}
diff --git a/packages/@react-aria/test-utils/src/types.ts b/packages/@react-aria/test-utils/src/types.ts
index d9c7f89bbda..3c58dbc61f3 100644
--- a/packages/@react-aria/test-utils/src/types.ts
+++ b/packages/@react-aria/test-utils/src/types.ts
@@ -34,7 +34,7 @@ export interface UserOpts {
export interface BaseTesterOpts extends UserOpts {
/** @private */
- user: any,
+ user?: any,
/** The base element for the given tester (e.g. the table, menu trigger button, etc). */
root: HTMLElement
}
diff --git a/packages/@react-spectrum/list/docs/ListView.mdx b/packages/@react-spectrum/list/docs/ListView.mdx
index e00157a6b88..73c326ebae5 100644
--- a/packages/@react-spectrum/list/docs/ListView.mdx
+++ b/packages/@react-spectrum/list/docs/ListView.mdx
@@ -1211,25 +1211,22 @@ it('ListView can select a row via keyboard', async function () {
// Render your test component/app and initialize the gridlist tester
let {getByTestId} = render(
-
+
...
);
- let gridlistTester = testUtilUser.createTester('GridList', {root: getByTestId('test-gridlist'), interactionType: 'keyboard'});
+ let gridListTester = testUtilUser.createTester('GridList', {root: getByTestId('test-gridlist'), interactionType: 'keyboard'});
let row = gridListTester.rows[0];
- expect(row).not.toHaveClass('selected');
expect(within(row).getByRole('checkbox')).not.toBeChecked();
expect(gridListTester.selectedRows).toHaveLength(0);
await gridListTester.toggleRowSelection({row: 0});
- expect(row).toHaveClass('selected');
expect(within(row).getByRole('checkbox')).toBeChecked();
expect(gridListTester.selectedRows).toHaveLength(1);
await gridListTester.toggleRowSelection({row: 0});
- expect(row).not.toHaveClass('selected');
expect(within(row).getByRole('checkbox')).not.toBeChecked();
expect(gridListTester.selectedRows).toHaveLength(0);
});
diff --git a/packages/@react-spectrum/listbox/docs/ListBox.mdx b/packages/@react-spectrum/listbox/docs/ListBox.mdx
index d0d9cc9ca84..56de8d1e1e1 100644
--- a/packages/@react-spectrum/listbox/docs/ListBox.mdx
+++ b/packages/@react-spectrum/listbox/docs/ListBox.mdx
@@ -429,7 +429,7 @@ it('ListBox can select an option via keyboard', async function () {
// Render your test component/app and initialize the listbox tester
let {getByTestId} = render(
-
+
...
@@ -438,7 +438,6 @@ it('ListBox can select an option via keyboard', async function () {
await listboxTester.toggleOptionSelection({option: 4});
expect(listboxTester.options()[4]).toHaveAttribute('aria-selected', 'true');
- expect(onSelectionChange).toBeCalledTimes(1);
});
```
diff --git a/packages/@react-spectrum/menu/docs/MenuTrigger.mdx b/packages/@react-spectrum/menu/docs/MenuTrigger.mdx
index 20561f8a320..4641da4f53e 100644
--- a/packages/@react-spectrum/menu/docs/MenuTrigger.mdx
+++ b/packages/@react-spectrum/menu/docs/MenuTrigger.mdx
@@ -276,7 +276,8 @@ it('Menu can open its submenu via keyboard', async function () {
// Render your test component/app and initialize the menu tester
let {getByTestId} = render(
-
+
+
...
@@ -291,9 +292,9 @@ it('Menu can open its submenu via keyboard', async function () {
let submenuTester = await menuTester.openSubmenu({submenuTrigger: 'Share…'});
expect(submenuTester.menu).toBeInTheDocument();
- await submenuTester.selectOption({option: submenuUtil.options()[0]});
- expect(submenuTester.menu).toBeInTheDocument();
- expect(menuTester.menu).toBeInTheDocument();
+ await submenuTester.selectOption({option: submenuTester.options()[0]});
+ expect(submenuTester.menu).not.toBeInTheDocument();
+ expect(menuTester.menu).not.toBeInTheDocument();
});
```
diff --git a/packages/@react-spectrum/picker/docs/Picker.mdx b/packages/@react-spectrum/picker/docs/Picker.mdx
index def4ca92a77..323384fcc5f 100644
--- a/packages/@react-spectrum/picker/docs/Picker.mdx
+++ b/packages/@react-spectrum/picker/docs/Picker.mdx
@@ -615,8 +615,7 @@ it('Picker can select an option via keyboard', async function () {
);
let selectTester = testUtilUser.createTester('Select', {root: getByTestId('test-select'), interactionType: 'keyboard'});
let trigger = selectTester.trigger;
- expect(trigger).toHaveTextContent('Select an item');
- expect(trigger).not.toHaveAttribute('data-pressed');
+ expect(trigger).toHaveTextContent('Select…');
await selectTester.selectOption({option: 'Cat'});
expect(trigger).toHaveTextContent('Cat');
diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index 00d055a0b4a..facd9856abd 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -1977,7 +1977,7 @@ it('TableView can toggle row selection', async function () {
// Render your test component/app and initialize the table tester
let {getByTestId} = render(
-
+
...
diff --git a/packages/@react-spectrum/tabs/docs/Tabs.mdx b/packages/@react-spectrum/tabs/docs/Tabs.mdx
index fac61e4b15b..85fa97d208c 100644
--- a/packages/@react-spectrum/tabs/docs/Tabs.mdx
+++ b/packages/@react-spectrum/tabs/docs/Tabs.mdx
@@ -666,7 +666,6 @@ it('Tabs can change selection via keyboard', async function () {
expect(tabsTester.selectedTab).toBe(tabs[0]);
await tabsTester.triggerTab({tab: 1});
- expect(onSelectionChange).toBeCalledTimes(1);
expect(tabsTester.selectedTab).toBe(tabs[1]);
});
```
diff --git a/packages/@react-spectrum/tree/docs/TreeView.mdx b/packages/@react-spectrum/tree/docs/TreeView.mdx
index c160dfac825..9e1fd3a0d75 100644
--- a/packages/@react-spectrum/tree/docs/TreeView.mdx
+++ b/packages/@react-spectrum/tree/docs/TreeView.mdx
@@ -476,7 +476,7 @@ it('TreeView can select a row via keyboard', async function () {
// Render your test component/app and initialize the Tree tester
let {getByTestId} = render(
-
+
...
diff --git a/packages/react-aria-components/docs/GridList.mdx b/packages/react-aria-components/docs/GridList.mdx
index 603033c6de9..42901a978ab 100644
--- a/packages/react-aria-components/docs/GridList.mdx
+++ b/packages/react-aria-components/docs/GridList.mdx
@@ -1885,24 +1885,21 @@ let testUtilUser = new User({interactionType: 'mouse'});
it('GridList can select a row via keyboard', async function () {
// Render your test component/app and initialize the gridlist tester
let {getByTestId} = render(
-
+
...
);
- let gridlistTester = testUtilUser.createTester('GridList', {root: getByTestId('test-gridlist'), interactionType: 'keyboard'});
+ let gridListTester = testUtilUser.createTester('GridList', {root: getByTestId('test-gridlist'), interactionType: 'keyboard'});
let row = gridListTester.rows[0];
- expect(row).not.toHaveClass('selected');
expect(within(row).getByRole('checkbox')).not.toBeChecked();
expect(gridListTester.selectedRows).toHaveLength(0);
await gridListTester.toggleRowSelection({row: 0});
- expect(row).toHaveClass('selected');
expect(within(row).getByRole('checkbox')).toBeChecked();
expect(gridListTester.selectedRows).toHaveLength(1);
await gridListTester.toggleRowSelection({row: 0});
- expect(row).not.toHaveClass('selected');
expect(within(row).getByRole('checkbox')).not.toBeChecked();
expect(gridListTester.selectedRows).toHaveLength(0);
});
diff --git a/packages/react-aria-components/docs/ListBox.mdx b/packages/react-aria-components/docs/ListBox.mdx
index a8167d502e4..785af0b6b64 100644
--- a/packages/react-aria-components/docs/ListBox.mdx
+++ b/packages/react-aria-components/docs/ListBox.mdx
@@ -2109,7 +2109,7 @@ let testUtilUser = new User({interactionType: 'mouse'});
it('ListBox can select an option via keyboard', async function () {
// Render your test component/app and initialize the listbox tester
let {getByTestId} = render(
-
+
...
);
@@ -2117,7 +2117,6 @@ it('ListBox can select an option via keyboard', async function () {
await listboxTester.toggleOptionSelection({option: 4});
expect(listboxTester.options()[4]).toHaveAttribute('aria-selected', 'true');
- expect(onSelectionChange).toBeCalledTimes(1);
});
```
diff --git a/packages/react-aria-components/docs/Menu.mdx b/packages/react-aria-components/docs/Menu.mdx
index 7c7c4d9f87f..0d30abf004c 100644
--- a/packages/react-aria-components/docs/Menu.mdx
+++ b/packages/react-aria-components/docs/Menu.mdx
@@ -1159,7 +1159,8 @@ let testUtilUser = new User({interactionType: 'mouse'});
it('Menu can open its submenu via keyboard', async function () {
// Render your test component/app and initialize the menu tester
let {getByTestId} = render(
-
+
+
...
);
@@ -1173,9 +1174,9 @@ it('Menu can open its submenu via keyboard', async function () {
let submenuTester = await menuTester.openSubmenu({submenuTrigger: 'Share…'});
expect(submenuTester.menu).toBeInTheDocument();
- await submenuTester.selectOption({option: submenuUtil.options()[0]});
- expect(submenuTester.menu).toBeInTheDocument();
- expect(menuTester.menu).toBeInTheDocument();
+ await submenuTester.selectOption({option: submenuTester.options()[0]});
+ expect(submenuTester.menu).not.toBeInTheDocument();
+ expect(menuTester.menu).not.toBeInTheDocument();
});
```
diff --git a/packages/react-aria-components/docs/Table.mdx b/packages/react-aria-components/docs/Table.mdx
index 5a26ee4b19d..97fac09bf77 100644
--- a/packages/react-aria-components/docs/Table.mdx
+++ b/packages/react-aria-components/docs/Table.mdx
@@ -2495,7 +2495,7 @@ let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanc
it('Table can toggle row selection', async function () {
// Render your test component/app and initialize the table tester
let {getByTestId} = render(
-
+
...
);
diff --git a/packages/react-aria-components/docs/Tabs.mdx b/packages/react-aria-components/docs/Tabs.mdx
index 80b62f3d3e6..d82a0c3483b 100644
--- a/packages/react-aria-components/docs/Tabs.mdx
+++ b/packages/react-aria-components/docs/Tabs.mdx
@@ -781,7 +781,6 @@ it('Tabs can change selection via keyboard', async function () {
expect(tabsTester.selectedTab).toBe(tabs[0]);
await tabsTester.triggerTab({tab: 1});
- expect(onSelectionChange).toBeCalledTimes(1);
expect(tabsTester.selectedTab).toBe(tabs[1]);
});
```
diff --git a/packages/react-aria-components/docs/Tree.mdx b/packages/react-aria-components/docs/Tree.mdx
index 09cb00c83b1..2b9a2de801d 100644
--- a/packages/react-aria-components/docs/Tree.mdx
+++ b/packages/react-aria-components/docs/Tree.mdx
@@ -340,7 +340,7 @@ let testUtilUser = new User({interactionType: 'mouse'});
it('Tree can select a row via keyboard', async function () {
// Render your test component/app and initialize the Tree tester
let {getByTestId} = render(
-
+
...
);