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

package/src/tree.ts

@@ -12,7 +12,7 @@
 
 import {act, within} from '@testing-library/react';
 import {BaseGridRowInteractionOpts, GridRowActionOpts, ToggleGridRowOpts, TreeTesterOpts, UserOpts} from './types';
-import {pressElement, triggerLongPress} from './events';
+import {getAltKey, getMetaKey, pressElement, triggerLongPress} from './events';
 
 interface TreeToggleExpansionOpts extends BaseGridRowInteractionOpts {}
 interface TreeToggleRowOpts extends ToggleGridRowOpts {}
@@ -64,20 +64,21 @@ export class TreeTester {
   }
 
   // TODO: RTL
-  private async keyboardNavigateToRow(opts: {row: HTMLElement}) {
-    let {row} = opts;
+  private async keyboardNavigateToRow(opts: {row: HTMLElement, selectionOnNav?: 'default' | 'none'}) {
+    let {row, selectionOnNav = 'default'} = opts;
+    let altKey = getAltKey();
     let rows = this.rows;
     let targetIndex = rows.indexOf(row);
     if (targetIndex === -1) {
       throw new Error('Option provided is not in the tree');
     }
 
-    if (document.activeElement !== this._tree || !this._tree.contains(document.activeElement)) {
+    if (document.activeElement !== this._tree && !this._tree.contains(document.activeElement)) {
       act(() => this._tree.focus());
     }
 
     if (document.activeElement === this.tree) {
-      await this.user.keyboard('[ArrowDown]');
+      await this.user.keyboard(`${selectionOnNav === 'none' ? `[${altKey}>]` : ''}[ArrowDown]${selectionOnNav === 'none' ? `[/${altKey}]` : ''}`);
     } else if (this._tree.contains(document.activeElement) && document.activeElement!.getAttribute('role') !== 'row') {
       do {
         await this.user.keyboard('[ArrowLeft]');
@@ -89,22 +90,33 @@ export class TreeTester {
     }
     let direction = targetIndex > currIndex ? 'down' : 'up';
 
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[${altKey}>]`);
+    }
     for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {
       await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
     }
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[/${altKey}]`);
+    }
   };
 
   /**
    * Toggles the selection for the specified tree row. Defaults to using the interaction type set on the tree tester.
+   * Note that this will endevor to always add/remove JUST the provided row to the set of selected rows.
    */
   async toggleRowSelection(opts: TreeToggleRowOpts): Promise<void> {
     let {
       row,
       needsLongPress,
       checkboxSelection = true,
-      interactionType = this._interactionType
+      interactionType = this._interactionType,
+      selectionBehavior = 'toggle'
     } = opts;
 
+    let altKey = getAltKey();
+    let metaKey = getMetaKey();
+
     if (typeof row === 'string' || typeof row === 'number') {
       row = this.findRow({rowIndexOrText: row});
     }
@@ -123,9 +135,15 @@ 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) {
-      await this.keyboardNavigateToRow({row});
-      await this.user.keyboard('{Space}');
+    if (interactionType === 'keyboard' && (!checkboxSelection || !rowCheckbox)) {
+      await this.keyboardNavigateToRow({row, selectionOnNav: selectionBehavior === 'replace' ? 'none' : 'default'});
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[${altKey}>]`);
+      }
+      await this.user.keyboard('[Space]');
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[/${altKey}]`);
+      }
       return;
     }
     if (rowCheckbox && checkboxSelection) {
@@ -140,7 +158,14 @@ export class TreeTester {
         // Note that long press interactions with rows is strictly touch only for grid rows
         await triggerLongPress({element: cell, advanceTimer: this._advanceTimer, pointerOpts: {pointerType: 'touch'}});
       } else {
-        await pressElement(this.user, cell, interactionType);
+        // TODO add modifiers here? Maybe move into pressElement if we get more cases for different types of modifier keys
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[${metaKey}>]`);
+        }
+        await pressElement(this.user, row, interactionType);
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[/${metaKey}]`);
+        }
       }
     }
   };
@@ -177,6 +202,9 @@ export class TreeTester {
         return;
       }
 
+      // TODO: We always Use Option/Ctrl when keyboard navigating so selection isn't changed
+      // in selectionmode="replace"/highlight selection when navigating to the row that the user wants
+      // to expand. Discuss if this is useful or not
       await this.keyboardNavigateToRow({row});
       if (row.getAttribute('aria-expanded') === 'true') {
         await this.user.keyboard('[ArrowLeft]');
@@ -211,6 +239,8 @@ export class TreeTester {
         return;
       }
 
+      // TODO: same as above, uses the modifier key to make sure we don't modify selection state on row focus
+      // as we keyboard navigate to the row we want activate
       await this.keyboardNavigateToRow({row});
       await this.user.keyboard('[Enter]');
     } else {

package/src/types.ts

@@ -126,7 +126,17 @@ export interface ToggleGridRowOpts extends BaseGridRowInteractionOpts {
    * Whether the checkbox should be used to select the row. If false, will attempt to select the row via press.
    * @default 'true'
    */
-  checkboxSelection?: boolean
+  checkboxSelection?: boolean,
+  // TODO: this api feels a bit confusing tbh...
+  /**
+   * Whether the grid has a selectionBehavior of "toggle" or "replace" (aka highlight selection). This affects the user operations
+   * required to toggle row selection by adding modifier keys during user actions, useful when performing multi-row selection in a "selectionBehavior: 'replace'" grid.
+   * If you would like to still simulate user actions (aka press) without these modifiers keys for a "selectionBehavior: replace" grid, simply omit this option.
+   * See the "Selection Behavior" section of the appropriate React Aria Component docs for more information (e.g. https://react-spectrum.adobe.com/react-aria/Tree.html#selection-behavior).
+   *
+   * @default 'toggle'
+   */
+  selectionBehavior?: 'toggle' | 'replace'
 }
 
 export interface GridRowActionOpts extends BaseGridRowInteractionOpts {

package/src/user.ts

@@ -32,7 +32,16 @@ import {TabsTester} from './tabs';
 import {TreeTester} from './tree';
 import userEvent from '@testing-library/user-event';
 
-let keyToUtil = {
+let keyToUtil: {
+  'Select': typeof SelectTester,
+  'Table': typeof TableTester,
+  'Menu': typeof MenuTester,
+  'ComboBox': typeof ComboBoxTester,
+  'GridList': typeof GridListTester,
+  'ListBox': typeof ListBoxTester,
+  'Tabs': typeof TabsTester,
+  'Tree': typeof TreeTester
+} = {
   'Select': SelectTester,
   'Table': TableTester,
   'Menu': MenuTester,

package/src/userEventMaps.ts

@@ -1,4 +1,4 @@
-import {pointerKey} from '@testing-library/user-event/system/pointer/shared';
+import {pointerKey} from '@testing-library/user-event';
 
 export let pointerMap: pointerKey[] = [
   {name: 'MouseLeft', pointerType: 'mouse', button: 'primary', height: 1, width: 1, pressure: 0.5},