update test utils to make sure grid/tree/etc is focused before doing keyboard selection

Author: LFDanLu

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

@@ -64,6 +64,11 @@ export class GridListTester {
     if (targetIndex === -1) {
       throw new Error('Option provided is not in the gridlist');
     }
+
+    if (document.activeElement !== this._gridlist || !this._gridlist.contains(document.activeElement)) {
+      act(() => this._gridlist.focus());
+    }
+
     if (document.activeElement === this._gridlist) {
       await this.user.keyboard('[ArrowDown]');
     } else if (this._gridlist.contains(document.activeElement) && document.activeElement!.getAttribute('role') !== 'row') {
@@ -161,10 +166,6 @@ export class GridListTester {
         return;
       }
 
-      if (document.activeElement !== this._gridlist || !this._gridlist.contains(document.activeElement)) {
-        act(() => this._gridlist.focus());
-      }
-
       await this.keyboardNavigateToRow({row});
       await this.user.keyboard('[Enter]');
     } else {

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

@@ -93,6 +93,10 @@ export class ListBoxTester {
       throw new Error('Option provided is not in the listbox');
     }
 
+    if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {
+      act(() => this._listbox.focus());
+    }
+
     if (document.activeElement === this._listbox) {
       await this.user.keyboard('[ArrowDown]');
     }
@@ -135,10 +139,6 @@ export class ListBoxTester {
         return;
       }
 
-      if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {
-        act(() => this._listbox.focus());
-      }
-
       await this.keyboardNavigateToOption({option});
       await this.user.keyboard(`[${keyboardActivation}]`);
     } else {
@@ -179,10 +179,6 @@ export class ListBoxTester {
         return;
       }
 
-      if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {
-        act(() => this._listbox.focus());
-      }
-
       await this.keyboardNavigateToOption({option});
       await this.user.keyboard('[Enter]');
     } else {

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

@@ -84,6 +84,10 @@ export class TabsTester {
       throw new Error('Tab provided is not in the tablist');
     }
 
+    if (document.activeElement !== this._tablist || !this._tablist.contains(document.activeElement)) {
+      act(() => this._tablist.focus());
+    }
+
     if (!this._tablist.contains(document.activeElement)) {
       let selectedTab = this.selectedTab;
       if (selectedTab != null) {
@@ -137,10 +141,6 @@ export class TabsTester {
     }
 
     if (interactionType === 'keyboard') {
-      if (document.activeElement !== this._tablist || !this._tablist.contains(document.activeElement)) {
-        act(() => this._tablist.focus());
-      }
-
       let tabsOrientation = this._tablist.getAttribute('aria-orientation') || 'horizontal';
       await this.keyboardNavigateToTab({tab, orientation: tabsOrientation as Orientation});
       if (manualActivation) {

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

@@ -71,6 +71,11 @@ export class TreeTester {
     if (targetIndex === -1) {
       throw new Error('Option provided is not in the tree');
     }
+
+    if (document.activeElement !== this._tree || !this._tree.contains(document.activeElement)) {
+      act(() => this._tree.focus());
+    }
+
     if (document.activeElement === this.tree) {
       await this.user.keyboard('[ArrowDown]');
     } else if (this._tree.contains(document.activeElement) && document.activeElement!.getAttribute('role') !== 'row') {
@@ -79,7 +84,6 @@ export class TreeTester {
       } while (document.activeElement!.getAttribute('role') !== 'row');
     }
     let currIndex = rows.indexOf(document.activeElement as HTMLElement);
-    console.log('document', document.activeElement?.outerHTML)
     if (currIndex === -1) {
       throw new Error('ActiveElement is not in the tree');
     }
@@ -90,6 +94,8 @@ export class TreeTester {
     }
   };
 
+  // TODO: we'll need to support selectionBehavior="replace", where clicks/keyboard will need to go through different flows
+  // for both single selection and multiple selection due to the nature of the selection replacement on focus
   /**
    * Toggles the selection for the specified tree row. Defaults to using the interaction type set on the tree tester.
    */
@@ -120,11 +126,6 @@ export class TreeTester {
     // this would be better than the check to do nothing in events.ts
     // also, it'd be good to be able to trigger selection on the row instead of having to go to the checkbox directly
     if (interactionType === 'keyboard' && !checkboxSelection) {
-      // TODO: probable should just call this in keyboardNavigateToRow everytime, adjust this for all the utils
-      if (document.activeElement !== this._tree || !this._tree.contains(document.activeElement)) {
-        act(() => this._tree.focus());
-      }
-
       await this.keyboardNavigateToRow({row});
       await this.user.keyboard('{Space}');
       return;
@@ -212,10 +213,6 @@ export class TreeTester {
         return;
       }
 
-      if (document.activeElement !== this._tree || !this._tree.contains(document.activeElement)) {
-        act(() => this._tree.focus());
-      }
-
       await this.keyboardNavigateToRow({row});
       await this.user.keyboard('[Enter]');
     } else {

packages/@react-spectrum/tree/test/TreeView.test.tsx

@@ -524,10 +524,10 @@ describe('Tree', () => {
     expect(rows[0]).toHaveAttribute('aria-selected', 'true');
   });
 
+  // TODO: replace the test above this one with a similar set up as the below
   it('should perform selection for highlight mode with single selection', async () => {
     let {getByRole} = render(<StaticTree treeProps={{selectionMode: 'single', selectionStyle: 'highlight'}} />);
     let treeTester = testUtilUser.createTester('Tree', {user, root: getByRole('treegrid')});
-    expect(treeTester.tree).toHaveAttribute('aria-multiselectable', 'true');
     let rows = treeTester.rows;
 
     for (let row of treeTester.rows) {