@react-aria/test-utils 1.0.0-alpha.5 → 1.0.0-alpha.7

package/src/menu.ts

@@ -64,9 +64,10 @@ export class MenuTester {
   private _advanceTimer: UserOpts['advanceTimer'];
   private _trigger: HTMLElement | undefined;
   private _isSubmenu: boolean = false;
+  private _rootMenu: HTMLElement | undefined;
 
   constructor(opts: MenuTesterOpts) {
-    let {root, user, interactionType, advanceTimer, isSubmenu} = opts;
+    let {root, user, interactionType, advanceTimer, isSubmenu, rootMenu} = opts;
     this.user = user;
     this._interactionType = interactionType || 'mouse';
     this._advanceTimer = advanceTimer;
@@ -85,12 +86,13 @@ export class MenuTester {
     }
 
     this._isSubmenu = isSubmenu || false;
+    this._rootMenu = rootMenu;
   }
 
   /**
    * Set the interaction type used by the menu tester.
    */
-  setInteractionType(type: UserOpts['interactionType']) {
+  setInteractionType(type: UserOpts['interactionType']): void {
     this._interactionType = type;
   }
 
@@ -99,7 +101,7 @@ export class MenuTester {
   /**
    * Opens the menu. Defaults to using the interaction type set on the menu tester.
    */
-  async open(opts: MenuOpenOpts = {}) {
+  async open(opts: MenuOpenOpts = {}): Promise<void> {
     let {
       needsLongPress,
       interactionType = this._interactionType,
@@ -178,7 +180,7 @@ export class MenuTester {
    * Selects the desired menu option. Defaults to using the interaction type set on the menu tester. If necessary, will open the menu dropdown beforehand.
    * The desired option can be targeted via the option's node, the option's text, or the option's index.
    */
-  async selectOption(opts: MenuSelectOpts) {
+  async selectOption(opts: MenuSelectOpts): Promise<void> {
     let {
       menuSelectionMode = 'single',
       needsLongPress,
@@ -226,20 +228,56 @@ export class MenuTester {
           await this.user.pointer({target: option, keys: '[TouchA]'});
         }
       }
-      act(() => {jest.runAllTimers();});
 
-      if (option.getAttribute('href') == null && option.getAttribute('aria-haspopup') == null && menuSelectionMode === 'single' && closesOnSelect && keyboardActivation !== 'Space' && !this._isSubmenu) {
+      // This chain of waitFors is needed in place of running all timers since we don't know how long transitions may take, or what action
+      // the menu option select may trigger.
+      if (
+        !(menuSelectionMode === 'single' && !closesOnSelect) &&
+        !(menuSelectionMode === 'multiple' && (keyboardActivation === 'Space' || interactionType === 'mouse'))
+      ) {
+        // For RSP, clicking on a submenu option seems to briefly lose focus to the body before moving to the clicked option in the test so we need to wait
+        // for focus to be coerced to somewhere else in place of running all timers.
+        if (this._isSubmenu) {
+          await waitFor(() => {
+            if (document.activeElement === document.body) {
+              throw new Error('Expected focus to move to somewhere other than the body after selecting a submenu option.');
+            } else {
+              return true;
+            }
+          });
+        }
+
+        // If user isn't trying to select multiple menu options or closeOnSelect is true then we can assume that
+        // the menu will close or some action is triggered. In cases like that focus should move somewhere after the menu closes
+        // but we can't really know where so just make sure it doesn't get lost to the body.
         await waitFor(() => {
-          if (document.activeElement !== trigger) {
-            throw new Error(`Expected the document.activeElement after selecting an option to be the menu trigger but got ${document.activeElement}`);
+          if (document.activeElement === option) {
+            throw new Error('Expected focus after selecting an option to move away from the option.');
           } else {
             return true;
           }
         });
 
-        if (document.contains(menu)) {
-          throw new Error('Expected menu element to not be in the document after selecting an option');
+        // We'll also want to wait for focus to move away from the original submenu trigger since the entire submenu tree should
+        // close. In React 16, focus actually makes it all the way to the root menu's submenu trigger so we need check the root menu
+        if (this._isSubmenu) {
+          await waitFor(() => {
+            if (document.activeElement === this.trigger || this._rootMenu?.contains(document.activeElement)) {
+              throw new Error('Expected focus after selecting an submenu option to move away from the original submenu trigger.');
+            } else {
+              return true;
+            }
+          });
         }
+
+        // Finally wait for focus to be coerced somewhere final when the menu tree is removed from the DOM
+        await waitFor(() => {
+          if (document.activeElement === document.body) {
+            throw new Error('Expected focus to move to somewhere other than the body after selecting a menu option.');
+          } else {
+            return true;
+          }
+        });
       }
     } else {
       throw new Error("Attempted to select a option in the menu, but menu wasn't found.");
@@ -269,18 +307,30 @@ export class MenuTester {
           submenuTrigger = (within(menu!).getByText(submenuTrigger).closest('[role=menuitem]'))! as HTMLElement;
         }
 
-        let submenuTriggerTester = new MenuTester({user: this.user, interactionType: this._interactionType, root: submenuTrigger, isSubmenu: true});
+        let submenuTriggerTester = new MenuTester({
+          user: this.user,
+          interactionType: this._interactionType,
+          root: submenuTrigger,
+          isSubmenu: true,
+          advanceTimer: this._advanceTimer,
+          rootMenu: (this._isSubmenu ? this._rootMenu : this.menu) || undefined
+        });
         if (interactionType === 'mouse') {
           await this.user.pointer({target: submenuTrigger});
-          act(() => {jest.runAllTimers();});
         } else if (interactionType === 'keyboard') {
           await this.keyboardNavigateToOption({option: submenuTrigger});
           await this.user.keyboard('[ArrowRight]');
-          act(() => {jest.runAllTimers();});
         } else {
           await submenuTriggerTester.open();
         }
 
+        await waitFor(() => {
+          if (submenuTriggerTester._trigger?.getAttribute('aria-expanded') !== 'true') {
+            throw new Error('aria-expanded for the submenu trigger wasn\'t changed to "true", unable to confirm the existance of the submenu');
+          } else {
+            return true;
+          }
+        });
 
         return submenuTriggerTester;
       }
@@ -314,7 +364,7 @@ export class MenuTester {
   /**
    * Closes the menu.
    */
-  async close() {
+  async close(): Promise<void> {
     let menu = this.menu;
     if (menu) {
       act(() => menu.focus());

package/src/select.ts

@@ -46,14 +46,14 @@ export class SelectTester {
   /**
    * Set the interaction type used by the select tester.
    */
-  setInteractionType(type: UserOpts['interactionType']) {
+  setInteractionType(type: UserOpts['interactionType']): void {
     this._interactionType = type;
   }
 
   /**
    * Opens the select. Defaults to using the interaction type set on the select tester.
    */
-  async open(opts: SelectOpenOpts = {}) {
+  async open(opts: SelectOpenOpts = {}): Promise<void> {
     let {
       interactionType = this._interactionType
     } = opts;
@@ -89,7 +89,7 @@ export class SelectTester {
   /**
    * Closes the select.
    */
-  async close() {
+  async close(): Promise<void> {
     let listbox = this.listbox;
     if (listbox) {
       act(() => listbox.focus());
@@ -155,7 +155,7 @@ export class SelectTester {
    * Selects the desired select option. Defaults to using the interaction type set on the select tester. If necessary, will open the select dropdown beforehand.
    * The desired option can be targeted via the option's node, the option's text, or the option's index.
    */
-  async selectOption(opts: SelectTriggerOptionOpts) {
+  async selectOption(opts: SelectTriggerOptionOpts): Promise<void> {
     let {
       option,
       interactionType = this._interactionType

package/src/table.ts

@@ -25,6 +25,12 @@ interface TableToggleSortOpts {
    */
   interactionType?: UserOpts['interactionType']
 }
+interface TableColumnHeaderActionOpts extends TableToggleSortOpts {
+  /**
+   * The index of the column header action to trigger.
+   */
+  action: number
+}
 interface TableRowActionOpts extends GridRowActionOpts {}
 
 export class TableTester {
@@ -44,14 +50,14 @@ export class TableTester {
   /**
    * Set the interaction type used by the table tester.
    */
-  setInteractionType(type: UserOpts['interactionType']) {
+  setInteractionType(type: UserOpts['interactionType']): void {
     this._interactionType = type;
   }
 
   /**
    * Toggles the selection for the specified table row. Defaults to using the interaction type set on the table tester.
    */
-  async toggleRowSelection(opts: TableToggleRowOpts) {
+  async toggleRowSelection(opts: TableToggleRowOpts): Promise<void> {
     let {
       row,
       needsLongPress,
@@ -97,7 +103,7 @@ export class TableTester {
   /**
    * Toggles the sort order for the specified table column. Defaults to using the interaction type set on the table tester.
    */
-  async toggleSort(opts: TableToggleSortOpts) {
+  async toggleSort(opts: TableToggleSortOpts): Promise<void> {
     let {
       column,
       interactionType = this._interactionType
@@ -184,10 +190,96 @@ export class TableTester {
     }
   }
 
+  /**
+   * Triggers an action for the specified table column menu. Defaults to using the interaction type set on the table tester.
+   */
+  async triggerColumnHeaderAction(opts: TableColumnHeaderActionOpts): Promise<void> {
+    let {
+      column,
+      interactionType = this._interactionType,
+      action
+    } = opts;
+
+    let columnheader;
+    if (typeof column === 'number') {
+      columnheader = this.columns[column];
+    } else if (typeof column === 'string') {
+      columnheader = within(this.rowGroups[0]).getByText(column);
+      while (columnheader && !/columnheader/.test(columnheader.getAttribute('role'))) {
+        columnheader = columnheader.parentElement;
+      }
+    } else {
+      columnheader = column;
+    }
+
+    let menuButton = within(columnheader).queryByRole('button');
+    if (menuButton) {
+      // TODO: Focus management is all kinda of messed up if I just use .focus and Space to open the sort menu. Seems like
+      // the focused key doesn't get properly set to the desired column header. Have to do this strange flow where I focus the
+      // column header except if the active element is already the menu button within the column header
+      if (interactionType === 'keyboard' && document.activeElement !== menuButton) {
+        await pressElement(this.user, columnheader, interactionType);
+      } else {
+        await pressElement(this.user, menuButton, interactionType);
+      }
+
+      await waitFor(() => {
+        if (menuButton.getAttribute('aria-controls') == null) {
+          throw new Error('No aria-controls found on table column dropdown menu trigger element.');
+        } else {
+          return true;
+        }
+      });
+
+      let menuId = menuButton.getAttribute('aria-controls');
+      await waitFor(() => {
+        if (!menuId || document.getElementById(menuId) == null) {
+          throw new Error(`Table column header menu with id of ${menuId} not found in document.`);
+        } else {
+          return true;
+        }
+      });
+
+      if (menuId) {
+        let menu = document.getElementById(menuId);
+        if (menu) {
+          await pressElement(this.user, within(menu).getAllByRole('menuitem')[action], interactionType);
+
+          await waitFor(() => {
+            if (document.contains(menu)) {
+              throw new Error('Expected table column menu listbox to not be in the document after selecting an option');
+            } else {
+              return true;
+            }
+          });
+        }
+      }
+
+      // Handle cases where the table may transition in response to the row selection/deselection
+      if (!this._advanceTimer) {
+        throw new Error('No advanceTimers provided for table transition.');
+      }
+
+      await act(async () => {
+        await this._advanceTimer?.(200);
+      });
+
+      await waitFor(() => {
+        if (document.activeElement !== menuButton) {
+          throw new Error(`Expected the document.activeElement to be the table column menu button but got ${document.activeElement}`);
+        } else {
+          return true;
+        }
+      });
+    } else {
+      throw new Error('No menu button found on table column header.');
+    }
+  }
+
   /**
    * Triggers the action for the specified table row. Defaults to using the interaction type set on the table tester.
    */
-  async triggerRowAction(opts: TableRowActionOpts) {
+  async triggerRowAction(opts: TableRowActionOpts): Promise<void> {
     let {
       row,
       needsDoubleClick,
@@ -221,7 +313,7 @@ export class TableTester {
   /**
    * Toggle selection for all rows in the table. Defaults to using the interaction type set on the table tester.
    */
-  async toggleSelectAll(opts: {interactionType?: UserOpts['interactionType']} = {}) {
+  async toggleSelectAll(opts: {interactionType?: UserOpts['interactionType']} = {}): Promise<void> {
     let {
       interactionType = this._interactionType
     } = opts;
@@ -260,7 +352,7 @@ export class TableTester {
   /**
    * Returns a cell matching the specified text content.
    */
-  findCell(opts: {text: string}) {
+  findCell(opts: {text: string}): HTMLElement {
     let {
       text
     } = opts;

package/src/tabs.ts

@@ -51,7 +51,7 @@ export class TabsTester {
   /**
    * Set the interaction type used by the tabs tester.
    */
-  setInteractionType(type: UserOpts['interactionType']) {
+  setInteractionType(type: UserOpts['interactionType']): void {
     this._interactionType = type;
   }
 
@@ -119,7 +119,7 @@ export class TabsTester {
   /**
    * Triggers the specified tab. Defaults to using the interaction type set on the tabs tester.
    */
-  async triggerTab(opts: TriggerTabOptions) {
+  async triggerTab(opts: TriggerTabOptions): Promise<void> {
     let {
       tab,
       interactionType = this._interactionType,

package/src/testSetup.ts

@@ -13,7 +13,7 @@
 /**
  * Enables reading pageX/pageY from fireEvent.mouse*(..., {pageX: ..., pageY: ...}).
  */
-export function installMouseEvent() {
+export function installMouseEvent(): void {
   let oldMouseEvent = MouseEvent;
   beforeAll(() => {
     global.MouseEvent = class FakeMouseEvent extends MouseEvent {
@@ -35,7 +35,7 @@ export function installMouseEvent() {
   });
 }
 
-export function installPointerEvent() {
+export function installPointerEvent(): void {
   beforeAll(() => {
     // @ts-ignore
     global.PointerEvent = class FakePointerEvent extends MouseEvent {

package/src/tree.ts

@@ -41,7 +41,7 @@ export class TreeTester {
   /**
    * Set the interaction type used by the tree tester.
    */
-  setInteractionType(type: UserOpts['interactionType']) {
+  setInteractionType(type: UserOpts['interactionType']): void {
     this._interactionType = type;
   };
 
@@ -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') {
@@ -92,7 +97,7 @@ export class TreeTester {
   /**
    * Toggles the selection for the specified tree row. Defaults to using the interaction type set on the tree tester.
    */
-  async toggleRowSelection(opts: TreeToggleRowOpts) {
+  async toggleRowSelection(opts: TreeToggleRowOpts): Promise<void> {
     let {
       row,
       needsLongPress,
@@ -143,7 +148,7 @@ export class TreeTester {
   /**
    * Toggles the expansion for the specified tree row. Defaults to using the interaction type set on the tree tester.
    */
-  async toggleRowExpansion(opts: TreeToggleExpansionOpts) {
+  async toggleRowExpansion(opts: TreeToggleExpansionOpts): Promise<void> {
     let {
       row,
       interactionType = this._interactionType
@@ -184,7 +189,7 @@ export class TreeTester {
   /**
    * Triggers the action for the specified tree row. Defaults to using the interaction type set on the tree tester.
    */
-  async triggerRowAction(opts: TreeRowActionOpts) {
+  async triggerRowAction(opts: TreeRowActionOpts): Promise<void> {
     let {
       row,
       needsDoubleClick,
@@ -206,10 +211,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 {

package/src/types.ts

@@ -22,14 +22,14 @@ export interface UserOpts {
    * @default mouse
    */
   interactionType?: 'mouse' | 'touch' | 'keyboard',
-  // If using fake timers user should provide something like (time) => jest.advanceTimersByTime(time))}
-  // A real timer user would pass async () => await new Promise((resolve) => setTimeout(resolve, waitTime))
+  // If using fake timers user should provide something like (time) => jest.advanceTimersByTime(time))}.
+  // A real timer user would pass (waitTime) => new Promise((resolve) => setTimeout(resolve, waitTime))
   // Time is in ms.
   /**
    * A function used by the test utils to advance timers during interactions. Required for certain aria patterns (e.g. table). This can be overridden
    * at the aria pattern tester level if needed.
    */
-  advanceTimer?: (time?: number) => void | Promise<unknown>
+  advanceTimer?: (time: number) => unknown | Promise<unknown>
 }
 
 export interface BaseTesterOpts extends UserOpts {
@@ -69,7 +69,11 @@ export interface MenuTesterOpts extends BaseTesterOpts {
   /**
    * Whether the current menu is a submenu.
    */
-  isSubmenu?: boolean
+  isSubmenu?: boolean,
+  /**
+   * The root menu of the menu tree. Only available if the menu is a submenu.
+   */
+  rootMenu?: HTMLElement
 }
 
 export interface SelectTesterOpts extends BaseTesterOpts {

package/src/user.ts

@@ -67,7 +67,7 @@ type TesterOpts<T> =
   T extends 'Tree' ? TreeTesterOpts :
   never;
 
-let defaultAdvanceTimer = async (waitTime: number | undefined) => await new Promise((resolve) => setTimeout(resolve, waitTime));
+let defaultAdvanceTimer = (waitTime: number | undefined) => new Promise((resolve) => setTimeout(resolve, waitTime));
 
 export class User {
   private user;