@react-aria/test-utils 1.0.0-alpha.2 → 1.0.0-alpha.3

package/src/menu.ts

@@ -15,16 +15,18 @@ import {BaseTesterOpts, UserOpts} from './user';
 import {triggerLongPress} from './events';
 
 export interface MenuOptions extends UserOpts, BaseTesterOpts {
-  user: any
+  user?: any,
+  isSubmenu?: boolean
 }
 export class MenuTester {
   private user;
   private _interactionType: UserOpts['interactionType'];
   private _advanceTimer: UserOpts['advanceTimer'];
-  private _trigger: HTMLElement;
+  private _trigger: HTMLElement | undefined;
+  private _isSubmenu: boolean = false;
 
   constructor(opts: MenuOptions) {
-    let {root, user, interactionType, advanceTimer} = opts;
+    let {root, user, interactionType, advanceTimer, isSubmenu} = opts;
     this.user = user;
     this._interactionType = interactionType || 'mouse';
     this._advanceTimer = advanceTimer;
@@ -41,6 +43,8 @@ export class MenuTester {
         this._trigger = root;
       }
     }
+
+    this._isSubmenu = isSubmenu || false;
   }
 
   setInteractionType = (type: UserOpts['interactionType']) => {
@@ -49,12 +53,12 @@ export class MenuTester {
 
   // TODO: this has been common to select as well, maybe make select use it? Or make a generic method. Will need to make error messages generic
   // One difference will be that it supports long press as well
-  open = async (opts: {needsLongPress?: boolean, interactionType?: UserOpts['interactionType']} = {}) => {
+  open = async (opts: {needsLongPress?: boolean, interactionType?: UserOpts['interactionType'], direction?: 'up' | 'down'} = {}) => {
     let {
       needsLongPress,
-      interactionType = this._interactionType
+      interactionType = this._interactionType,
+      direction
     } = opts;
-
     let trigger = this.trigger;
     let isDisabled = trigger.hasAttribute('disabled');
     if (interactionType === 'mouse' || interactionType === 'touch') {
@@ -70,8 +74,16 @@ export class MenuTester {
         await this.user.pointer({target: trigger, keys: '[TouchA]'});
       }
     } else if (interactionType === 'keyboard' && !isDisabled) {
-      act(() => trigger.focus());
-      await this.user.keyboard('[Enter]');
+      if (direction === 'up') {
+        act(() => trigger.focus());
+        await this.user.keyboard('[ArrowUp]');
+      } else if (direction === 'down') {
+        act(() => trigger.focus());
+        await this.user.keyboard('[ArrowDown]');
+      } else {
+        act(() => trigger.focus());
+        await this.user.keyboard('[Enter]');
+      }
     }
 
     await waitFor(() => {
@@ -95,24 +107,37 @@ export class MenuTester {
 
   // TODO: also very similar to select, barring potential long press support
   // Close on select is also kinda specific?
-  selectOption = async (opts: {option?: HTMLElement, optionText?: string, menuSelectionMode?: 'single' | 'multiple', needsLongPress?: boolean, closesOnSelect?: boolean, interactionType?: UserOpts['interactionType']}) => {
+  selectOption = async (opts: {
+    option?: HTMLElement,
+    optionText?: string,
+    menuSelectionMode?: 'single' | 'multiple',
+    needsLongPress?: boolean,
+    closesOnSelect?: boolean,
+    interactionType?: UserOpts['interactionType'],
+    keyboardActivation?: 'Space' | 'Enter'
+  }) => {
     let {
       optionText,
       menuSelectionMode = 'single',
       needsLongPress,
       closesOnSelect = true,
       option,
-      interactionType = this._interactionType
+      interactionType = this._interactionType,
+      keyboardActivation = 'Enter'
     } = opts;
     let trigger = this.trigger;
-    if (!trigger.getAttribute('aria-controls')) {
+
+    if (!trigger.getAttribute('aria-controls') && !trigger.hasAttribute('aria-expanded')) {
       await this.open({needsLongPress});
     }
 
     let menu = this.menu;
     if (menu) {
       if (!option && optionText) {
-        option = within(menu).getByText(optionText);
+        option = (within(menu!).getByText(optionText).closest('[role=menuitem], [role=menuitemradio], [role=menuitemcheckbox]'))! as HTMLElement;
+      }
+      if (!option) {
+        throw new Error('No option found in the menu.');
       }
 
       if (interactionType === 'keyboard') {
@@ -120,8 +145,8 @@ export class MenuTester {
           act(() => menu.focus());
         }
 
-        await this.user.keyboard(optionText);
-        await this.user.keyboard('[Enter]');
+        await this.keyboardNavigateToOption({option});
+        await this.user.keyboard(`[${keyboardActivation}]`);
       } else {
         if (interactionType === 'mouse') {
           await this.user.click(option);
@@ -129,8 +154,9 @@ export class MenuTester {
           await this.user.pointer({target: option, keys: '[TouchA]'});
         }
       }
+      act(() => {jest.runAllTimers();});
 
-      if (option && option.getAttribute('href') == null && option.getAttribute('aria-haspopup') == null && menuSelectionMode === 'single' && closesOnSelect) {
+      if (option && option.getAttribute('href') == null && option.getAttribute('aria-haspopup') == null && menuSelectionMode === 'single' && closesOnSelect && keyboardActivation !== 'Space' && !this._isSubmenu) {
         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}`);
@@ -156,6 +182,7 @@ export class MenuTester {
       needsLongPress,
       interactionType = this._interactionType
     } = opts;
+
     let trigger = this.trigger;
     let isDisabled = trigger.hasAttribute('disabled');
     if (!trigger.getAttribute('aria-controls') && !isDisabled) {
@@ -171,8 +198,18 @@ export class MenuTester {
           submenu = within(menu).getByText(submenuTriggerText);
         }
 
-        let submenuTriggerTester = new MenuTester({user: this.user, interactionType: interactionType, root: submenu});
-        await submenuTriggerTester.open();
+        let submenuTriggerTester = new MenuTester({user: this.user, interactionType: this._interactionType, root: submenu, isSubmenu: true});
+        if (interactionType === 'mouse') {
+          await this.user.pointer({target: submenu});
+          act(() => {jest.runAllTimers();});
+        } else if (interactionType === 'keyboard') {
+          await this.keyboardNavigateToOption({option: submenu});
+          await this.user.keyboard('[ArrowRight]');
+          act(() => {jest.runAllTimers();});
+        } else {
+          await submenuTriggerTester.open();
+        }
+
 
         return submenuTriggerTester;
       }
@@ -181,6 +218,28 @@ export class MenuTester {
     return null;
   };
 
+  keyboardNavigateToOption = async (opts: {option: HTMLElement}) => {
+    let {option} = opts;
+    let options = this.options;
+    let targetIndex = options.indexOf(option);
+    if (targetIndex === -1) {
+      throw new Error('Option provided is not in the menu');
+    }
+    if (document.activeElement === this.menu) {
+      await this.user.keyboard('[ArrowDown]');
+    }
+    let currIndex = options.indexOf(document.activeElement as HTMLElement);
+    if (targetIndex === -1) {
+      throw new Error('ActiveElement is not in the menu');
+    }
+    let direction = targetIndex > currIndex ? 'down' : 'up';
+
+    for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {
+      await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
+    }
+  };
+
+
   close = async () => {
     let menu = this.menu;
     if (menu) {
@@ -202,6 +261,9 @@ export class MenuTester {
   };
 
   get trigger() {
+    if (!this._trigger) {
+      throw new Error('No trigger element found for menu.');
+    }
     return this._trigger;
   }
 
@@ -210,9 +272,9 @@ export class MenuTester {
     return menuId ? document.getElementById(menuId) : undefined;
   }
 
-  get options(): HTMLElement[] | never[] {
+  get options(): HTMLElement[] {
     let menu = this.menu;
-    let options = [];
+    let options: HTMLElement[] = [];
     if (menu) {
       options = within(menu).queryAllByRole('menuitem');
       if (options.length === 0) {

package/src/select.ts

@@ -15,7 +15,7 @@ import {BaseTesterOpts, UserOpts} from './user';
 
 export interface SelectOptions extends UserOpts, BaseTesterOpts {
   // TODO: I think the type grabbed from the testing library dist for UserEvent is breaking the build, will need to figure out a better place to grab from
-  user: any
+  user?: any
 }
 export class SelectTester {
   private user;

package/src/table.ts

@@ -14,7 +14,7 @@ import {act, fireEvent, waitFor, within} from '@testing-library/react';
 import {BaseTesterOpts, UserOpts} from './user';
 import {pressElement, triggerLongPress} from './events';
 export interface TableOptions extends UserOpts, BaseTesterOpts {
-  user: any,
+  user?: any,
   advanceTimer: UserOpts['advanceTimer']
 }
 
@@ -68,15 +68,6 @@ export class TableTester {
         await pressElement(this.user, cell, interactionType);
       }
     }
-
-    // Handle cases where the table may transition in response to the row selection/deselection
-    await act(async () => {
-      if (this._advanceTimer == null) {
-        throw new Error('No advanceTimers provided for table transition.');
-      }
-
-      await this._advanceTimer(200);
-    });
   };
 
   toggleSort = async (opts: {index?: number, text?: string, interactionType?: UserOpts['interactionType']} = {}) => {
@@ -145,12 +136,12 @@ export class TableTester {
       }
 
       // Handle cases where the table may transition in response to the row selection/deselection
-      await act(async () => {
-        if (this._advanceTimer == null) {
-          throw new Error('No advanceTimers provided for table transition.');
-        }
+      if (!this._advanceTimer) {
+        throw new Error('No advanceTimers provided for table transition.');
+      }
 
-        await this._advanceTimer(200);
+      await act(async () => {
+        await this._advanceTimer?.(200);
       });
 
       await waitFor(() => {

package/src/testSetup.ts

@@ -14,9 +14,8 @@
  * Enables reading pageX/pageY from fireEvent.mouse*(..., {pageX: ..., pageY: ...}).
  */
 export function installMouseEvent() {
+  let oldMouseEvent = MouseEvent;
   beforeAll(() => {
-    let oldMouseEvent = MouseEvent;
-    // @ts-ignore
     global.MouseEvent = class FakeMouseEvent extends MouseEvent {
       _init: {pageX: number, pageY: number};
       constructor(name, init) {
@@ -30,12 +29,9 @@ export function installMouseEvent() {
         return this._init.pageY;
       }
     };
-    // @ts-ignore
-    global.MouseEvent.oldMouseEvent = oldMouseEvent;
   });
   afterAll(() => {
-    // @ts-ignore
-    global.MouseEvent = global.MouseEvent.oldMouseEvent;
+    global.MouseEvent = oldMouseEvent;
   });
 }
 

package/src/user.ts

@@ -68,6 +68,6 @@ export class User {
   }
 
   createTester<T extends PatternNames>(patternName: T, opts: ObjectOptionsTypes<T>): ObjectType<T> {
-    return new (keyToUtil)[patternName]({...opts, user: this.user, interactionType: this.interactionType, advanceTimer: this.advanceTimer}) as ObjectType<T>;
+    return new (keyToUtil)[patternName]({user: this.user, interactionType: this.interactionType, advanceTimer: this.advanceTimer, ...opts}) as ObjectType<T>;
   }
 }