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( - + ... );