@react-aria/test-utils 1.0.0-beta.1 → 1.0.0-beta.2

package/src/radiogroup.ts

@@ -0,0 +1,176 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {act, within} from '@testing-library/react';
+import {Direction, Orientation, RadioGroupTesterOpts, UserOpts} from './types';
+import {pressElement} from './events';
+
+interface TriggerRadioOptions {
+  /**
+   * What interaction type to use when triggering a radio. Defaults to the interaction type set on the tester.
+   */
+  interactionType?: UserOpts['interactionType'],
+  /**
+   * The index, text, or node of the radio to toggle selection for.
+   */
+  radio: number | string | HTMLElement
+}
+
+export class RadioGroupTester {
+  private user;
+  private _interactionType: UserOpts['interactionType'];
+  private _radiogroup: HTMLElement;
+  private _direction: Direction;
+
+  constructor(opts: RadioGroupTesterOpts) {
+    let {root, user, interactionType, direction} = opts;
+    this.user = user;
+    this._interactionType = interactionType || 'mouse';
+    this._direction = direction || 'ltr';
+
+    this._radiogroup = root;
+    let radiogroup = within(root).queryAllByRole('radiogroup');
+    if (radiogroup.length > 0) {
+      this._radiogroup = radiogroup[0];
+    }
+  }
+
+  /**
+   * Set the interaction type used by the radio tester.
+   */
+  setInteractionType(type: UserOpts['interactionType']): void {
+    this._interactionType = type;
+  }
+
+  /**
+   * Returns a radio matching the specified index or text content.
+   */
+  findRadio(opts: {radioIndexOrText: number | string}): HTMLElement {
+    let {
+      radioIndexOrText
+    } = opts;
+
+    let radio;
+    if (typeof radioIndexOrText === 'number') {
+      radio = this.radios[radioIndexOrText];
+    } else if (typeof radioIndexOrText === 'string') {
+      let label = within(this.radiogroup).getByText(radioIndexOrText);
+      // Label may wrap the radio, or the actual label may be a sibling span, or the radio div could have the label within it
+      if (label) {
+        radio = within(label).queryByRole('radio');
+        if (!radio) {
+          let labelWrapper = label.closest('label');
+          if (labelWrapper) {
+            radio = within(labelWrapper).queryByRole('radio');
+          } else {
+            radio = label.closest('[role=radio]');
+          }
+        }
+      }
+    }
+
+    return radio;
+  }
+
+  private async keyboardNavigateToRadio(opts: {radio: HTMLElement, orientation?: Orientation}) {
+    let {radio, orientation = 'vertical'} = opts;
+    let radios = this.radios;
+    radios = radios.filter(radio => !(radio.hasAttribute('disabled') || radio.getAttribute('aria-disabled') === 'true'));
+    if (radios.length === 0) {
+      throw new Error('Radio group doesnt have any non-disabled radios. Please double check your radio group.');
+    }
+
+    let targetIndex = radios.indexOf(radio);
+    if (targetIndex === -1) {
+      throw new Error('Radio provided is not in the radio group.');
+    }
+
+    if (!this.radiogroup.contains(document.activeElement)) {
+      let selectedRadio = this.selectedRadio;
+      if (selectedRadio != null) {
+        act(() => selectedRadio.focus());
+      } else {
+        act(() => radios[0]?.focus());
+      }
+    }
+
+    let currIndex = radios.indexOf(document.activeElement as HTMLElement);
+    if (currIndex === -1) {
+      throw new Error('Active element is not in the radio group.');
+    }
+
+    let arrowUp = 'ArrowUp';
+    let arrowDown = 'ArrowDown';
+    if (orientation === 'horizontal') {
+      if (this._direction === 'ltr') {
+        arrowUp = 'ArrowLeft';
+        arrowDown = 'ArrowRight';
+      } else {
+        arrowUp = 'ArrowRight';
+        arrowDown = 'ArrowLeft';
+      }
+    }
+
+    let movementDirection = targetIndex > currIndex ? 'down' : 'up';
+    for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {
+      await this.user.keyboard(`[${movementDirection === 'down' ? arrowDown : arrowUp}]`);
+    }
+  };
+
+  /**
+   * Triggers the specified radio. Defaults to using the interaction type set on the radio tester.
+   */
+  async triggerRadio(opts: TriggerRadioOptions): Promise<void> {
+    let {
+      radio,
+      interactionType = this._interactionType
+    } = opts;
+
+    if (typeof radio === 'string' || typeof radio === 'number') {
+      radio = this.findRadio({radioIndexOrText: radio});
+    }
+
+    if (!radio) {
+      throw new Error('Target radio not found in the radio group.');
+    } else if (radio.hasAttribute('disabled')) {
+      throw new Error('Target radio is disabled.');
+    }
+
+    if (interactionType === 'keyboard') {
+      let radioOrientation = this._radiogroup.getAttribute('aria-orientation') || 'horizontal';
+      await this.keyboardNavigateToRadio({radio, orientation: radioOrientation as Orientation});
+    } else {
+      await pressElement(this.user, radio, interactionType);
+    }
+  }
+
+  /**
+   * Returns the radiogroup.
+   */
+  get radiogroup(): HTMLElement {
+    return this._radiogroup;
+  }
+
+  /**
+   * Returns the radios.
+   */
+  get radios(): HTMLElement[] {
+    return within(this.radiogroup).queryAllByRole('radio');
+  }
+
+  /**
+   * Returns the currently selected radio in the radiogroup if any.
+   */
+  get selectedRadio(): HTMLElement | null {
+    return this.radios.find(radio => (radio as HTMLInputElement).checked) || null;
+  }
+}

package/src/tabs.ts

@@ -79,6 +79,11 @@ export class TabsTester {
   private async keyboardNavigateToTab(opts: {tab: HTMLElement, orientation?: Orientation}) {
     let {tab, orientation = 'vertical'} = opts;
     let tabs = this.tabs;
+    tabs = tabs.filter(tab => !(tab.hasAttribute('disabled') || tab.getAttribute('aria-disabled') === 'true'));
+    if (tabs.length === 0) {
+      throw new Error('Tablist doesnt have any non-disabled tabs. Please double check your tabs implementation.');
+    }
+
     let targetIndex = tabs.indexOf(tab);
     if (targetIndex === -1) {
       throw new Error('Tab provided is not in the tablist');
@@ -89,11 +94,11 @@ export class TabsTester {
       if (selectedTab != null) {
         act(() => selectedTab.focus());
       } else {
-        act(() => tabs.find(tab => !(tab.hasAttribute('disabled') || tab.getAttribute('aria-disabled') === 'true'))?.focus());
+        act(() => tabs[0]?.focus());
       }
     }
 
-    let currIndex = this.tabs.indexOf(document.activeElement as HTMLElement);
+    let currIndex = tabs.indexOf(document.activeElement as HTMLElement);
     if (currIndex === -1) {
       throw new Error('ActiveElement is not in the tablist');
     }

package/src/testSetup.ts

@@ -35,35 +35,37 @@ export function installMouseEvent(): void {
   });
 }
 
+export function definePointerEvent(): void {
+  // @ts-ignore
+  global.PointerEvent = class FakePointerEvent extends MouseEvent {
+    _init: {pageX: number, pageY: number, pointerType: string, pointerId: number, width: number, height: number};
+    constructor(name, init) {
+      super(name, init);
+      this._init = init;
+    }
+    get pointerType() {
+      return this._init.pointerType ?? 'mouse';
+    }
+    get pointerId() {
+      return this._init.pointerId;
+    }
+    get pageX() {
+      return this._init.pageX;
+    }
+    get pageY() {
+      return this._init.pageY;
+    }
+    get width() {
+      return this._init.width;
+    }
+    get height() {
+      return this._init.height;
+    }
+  };
+}
+
 export function installPointerEvent(): void {
-  beforeAll(() => {
-    // @ts-ignore
-    global.PointerEvent = class FakePointerEvent extends MouseEvent {
-      _init: {pageX: number, pageY: number, pointerType: string, pointerId: number, width: number, height: number};
-      constructor(name, init) {
-        super(name, init);
-        this._init = init;
-      }
-      get pointerType() {
-        return this._init.pointerType ?? 'mouse';
-      }
-      get pointerId() {
-        return this._init.pointerId;
-      }
-      get pageX() {
-        return this._init.pageX;
-      }
-      get pageY() {
-        return this._init.pageY;
-      }
-      get width() {
-        return this._init.width;
-      }
-      get height() {
-        return this._init.height;
-      }
-    };
-  });
+  beforeAll(definePointerEvent);
   afterAll(() => {
     // @ts-ignore
     delete global.PointerEvent;

package/src/types.ts

@@ -39,6 +39,8 @@ export interface BaseTesterOpts extends UserOpts {
   root: HTMLElement
 }
 
+export interface CheckboxGroupTesterOpts extends BaseTesterOpts {}
+
 export interface ComboBoxTesterOpts extends BaseTesterOpts {
   /**
    * The base element for the combobox. If provided the wrapping element around the target combobox (as is the the case with a ref provided to RSP ComboBox),
@@ -52,6 +54,17 @@ export interface ComboBoxTesterOpts extends BaseTesterOpts {
   trigger?: HTMLElement
 }
 
+export interface DialogTesterOpts extends BaseTesterOpts {
+  /**
+   * The trigger element for the dialog.
+   */
+  root: HTMLElement,
+  /**
+   * The overlay type of the dialog. Used to inform the tester how to find the dialog.
+   */
+  overlayType?: 'modal' | 'popover'
+}
+
 export interface GridListTesterOpts extends BaseTesterOpts {}
 
 export interface ListBoxTesterOpts extends BaseTesterOpts {
@@ -76,6 +89,14 @@ export interface MenuTesterOpts extends BaseTesterOpts {
   rootMenu?: HTMLElement
 }
 
+export interface RadioGroupTesterOpts extends BaseTesterOpts {
+  /**
+   * The horizontal layout direction, typically affected by locale.
+   * @default 'ltr'
+   */
+  direction?: Direction
+}
+
 export interface SelectTesterOpts extends BaseTesterOpts {
   /**
    * The trigger element for the select. If provided the wrapping element around the target select (as is the case with a ref provided to RSP Select),

package/src/user.ts

@@ -10,22 +10,28 @@
  * governing permissions and limitations under the License.
  */
 
-import {ComboBoxTester} from './combobox';
+import {CheckboxGroupTester} from './checkboxgroup';
 import {
+  CheckboxGroupTesterOpts,
   ComboBoxTesterOpts,
+  DialogTesterOpts,
   GridListTesterOpts,
   ListBoxTesterOpts,
   MenuTesterOpts,
+  RadioGroupTesterOpts,
   SelectTesterOpts,
   TableTesterOpts,
   TabsTesterOpts,
   TreeTesterOpts,
   UserOpts
 } from './types';
+import {ComboBoxTester} from './combobox';
+import {DialogTester} from './dialog';
 import {GridListTester} from './gridlist';
 import {ListBoxTester} from './listbox';
 import {MenuTester} from './menu';
 import {pointerMap} from './';
+import {RadioGroupTester} from './radiogroup';
 import {SelectTester} from './select';
 import {TableTester} from './table';
 import {TabsTester} from './tabs';
@@ -33,21 +39,27 @@ import {TreeTester} from './tree';
 import userEvent from '@testing-library/user-event';
 
 let keyToUtil: {
-  'Select': typeof SelectTester,
-  'Table': typeof TableTester,
-  'Menu': typeof MenuTester,
+  'CheckboxGroup': typeof CheckboxGroupTester,
   'ComboBox': typeof ComboBoxTester,
+  'Dialog': typeof DialogTester,
   'GridList': typeof GridListTester,
   'ListBox': typeof ListBoxTester,
+  'Menu': typeof MenuTester,
+  'RadioGroup': typeof RadioGroupTester,
+  'Select': typeof SelectTester,
+  'Table': typeof TableTester,
   'Tabs': typeof TabsTester,
   'Tree': typeof TreeTester
 } = {
-  'Select': SelectTester,
-  'Table': TableTester,
-  'Menu': MenuTester,
+  'CheckboxGroup': CheckboxGroupTester,
   'ComboBox': ComboBoxTester,
+  'Dialog': DialogTester,
   'GridList': GridListTester,
   'ListBox': ListBoxTester,
+  'Menu': MenuTester,
+  'RadioGroup': RadioGroupTester,
+  'Select': SelectTester,
+  'Table': TableTester,
   'Tabs': TabsTester,
   'Tree': TreeTester
 } as const;
@@ -55,10 +67,13 @@ export type PatternNames = keyof typeof keyToUtil;
 
 // Conditional type: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html
 type Tester<T> =
+  T extends 'CheckboxGroup' ? CheckboxGroupTester :
   T extends 'ComboBox' ? ComboBoxTester :
+  T extends 'Dialog' ? DialogTester :
   T extends 'GridList' ? GridListTester :
   T extends 'ListBox' ? ListBoxTester :
   T extends 'Menu' ? MenuTester :
+  T extends 'RadioGroup' ? RadioGroupTester :
   T extends 'Select' ? SelectTester :
   T extends 'Table' ? TableTester :
   T extends 'Tabs' ? TabsTester :
@@ -66,10 +81,13 @@ type Tester<T> =
   never;
 
 type TesterOpts<T> =
+  T extends 'CheckboxGroup' ? CheckboxGroupTesterOpts :
   T extends 'ComboBox' ? ComboBoxTesterOpts :
+  T extends 'Dialog' ? DialogTesterOpts :
   T extends 'GridList' ? GridListTesterOpts :
   T extends 'ListBox' ? ListBoxTesterOpts :
   T extends 'Menu' ? MenuTesterOpts :
+  T extends 'RadioGroup' ? RadioGroupTesterOpts :
   T extends 'Select' ? SelectTesterOpts :
   T extends 'Table' ? TableTesterOpts :
   T extends 'Tabs' ? TabsTesterOpts :