Merge branch 'main' of github.com:adobe/react-spectrum

Author: devongovett

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');
     }

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
 }

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(
     <Provider theme={defaultTheme}>
-      <ListView data-testid="test-gridlist">
+      <ListView data-testid="test-gridlist" selectionMode="single">
         ...
       </ListView>
     </Provider>
   );
-  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);
 });

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(
     <Provider theme={defaultTheme}>
-      <ListBox data-testid="test-listbox">
+      <ListBox selectionMode="single" data-testid="test-listbox">
         ...
       </ListBox>
     </Provider>
@@ -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);
 });
 ```
 

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(
     <Provider theme={defaultTheme}>
-      <MenuTrigger data-testid="test-menutrigger">
+      <MenuTrigger>
+        <Button data-testid="test-menutrigger">Menu trigger</Button>
         ...
       </MenuTrigger>
     </Provider>
@@ -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();
 });
 ```
 

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');

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(
     <Provider theme={defaultTheme}>
-      <TableView data-testid="test-table">
+      <TableView data-testid="test-table" selectionMode="multiple">
       ...
       </TableView>
     </Provider>

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]);
 });
 ```

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(
     <Provider theme={defaultTheme}>
-      <TreeView data-testid="test-tree">
+      <TreeView data-testid="test-tree" selectionMode="multiple">
         ...
       </TreeView>
     </Provider>

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(
-    <GridList data-testid="test-gridlist">
+    <GridList data-testid="test-gridlist" selectionMode="single">
       ...
     </GridList>
   );
-  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);
 });