feat: Test utils API audit, additional feature coverage (RTL, grid nav, etc) in prep for RC/1.0 (#9998)

* add proper keyboard navigation to combobox

* mutiple select for combobox, api rename for consitency, table keyboard select all

* add tests for deselect

* get rid of timer warnings cuz user gives a default if not provided

* change getters into method calls for consistency

also gives us the option of adding args in the future

* update instances of old getters to new function calls

* update instances of old getters to new function calls

* switch to dom testing library

this is a lower level than using react testing library of which we wernt really using anything unique from that library. trade off is that we need to wrap act so it works for other react versions, still not 100% sure if we wanna do this

* support missing RTL for expand and keyboard nav

* standardize indexOrText option naming

* throw when attempting to interact with disabled rows and make error messages more descriptive

* update readmes and docs to reflect change to testing-library/dom

* more audit items

* add tests to cover error messages

* cleanup todos that we are punting on/not doing

* add grid navigation to listbox test util and fix browser tests

* add grid nav to gridlist too

* add browser tests for each pattern to make sure utils work with it

* adding midding dialog testing pages to RAC

* add rough skills for the test utils

* forgot to save

* improvements to skill guidence and utils from attempt to use skill to convert tests

* more improvements from second pass

* add getter for table footer

* formatting

* update getter naming

* update table util for rowgroups and table footer, update formatTargetNode, fix missing menu tests from bad merge

* formatting

* fix test from bad merge

* add missing aria labels to browser tests

* how did this not auto format

* get rid of extraneous typing

* review comments

* update tests from main to new api

Author: LFDanLu

packages/@adobe/react-spectrum/docs/combobox/ComboBox.mdx

@@ -1020,12 +1020,12 @@ it('ComboBox can select an option via keyboard', async function () {
   let comboboxTester = testUtilUser.createTester('ComboBox', {root: getByTestId('test-combobox'), interactionType: 'keyboard'});
 
   await comboboxTester.open();
-  expect(comboboxTester.listbox).toBeInTheDocument();
+  expect(comboboxTester.getListbox()).toBeInTheDocument();
 
-  let options = comboboxTester.options();
-  await comboboxTester.selectOption({option: options[0]});
-  expect(comboboxTester.combobox.value).toBe('One');
-  expect(comboboxTester.listbox).not.toBeInTheDocument();
+  let options = comboboxTester.getOptions();
+  await comboboxTester.toggleOptionSelection({option: options[0]});
+  expect(comboboxTester.getCombobox().value).toBe('One');
+  expect(comboboxTester.getListbox()).not.toBeInTheDocument();
 });
 ```
 

packages/@adobe/react-spectrum/docs/list/ListView.mdx

@@ -1218,17 +1218,17 @@ it('ListView can select a row via keyboard', async function () {
   );
   let gridListTester = testUtilUser.createTester('GridList', {root: getByTestId('test-gridlist'), interactionType: 'keyboard'});
 
-  let row = gridListTester.rows[0];
+  let row = gridListTester.getRows()[0];
   expect(within(row).getByRole('checkbox')).not.toBeChecked();
-  expect(gridListTester.selectedRows).toHaveLength(0);
+  expect(gridListTester.getSelectedRows()).toHaveLength(0);
 
   await gridListTester.toggleRowSelection({row: 0});
   expect(within(row).getByRole('checkbox')).toBeChecked();
-  expect(gridListTester.selectedRows).toHaveLength(1);
+  expect(gridListTester.getSelectedRows()).toHaveLength(1);
 
   await gridListTester.toggleRowSelection({row: 0});
   expect(within(row).getByRole('checkbox')).not.toBeChecked();
-  expect(gridListTester.selectedRows).toHaveLength(0);
+  expect(gridListTester.getSelectedRows()).toHaveLength(0);
 });
 ```
 

packages/@adobe/react-spectrum/docs/listbox/ListBox.mdx

@@ -437,7 +437,7 @@ it('ListBox can select an option via keyboard', async function () {
   let listboxTester = testUtilUser.createTester('ListBox', {root: getByTestId('test-listbox'), interactionType: 'keyboard'});
 
   await listboxTester.toggleOptionSelection({option: 4});
-  expect(listboxTester.options()[4]).toHaveAttribute('aria-selected', 'true');
+  expect(listboxTester.getOptions()[4]).toHaveAttribute('aria-selected', 'true');
 });
 ```
 

packages/@adobe/react-spectrum/docs/menu/MenuTrigger.mdx

@@ -285,16 +285,16 @@ it('Menu can open its submenu via keyboard', async function () {
   let menuTester = testUtilUser.createTester('Menu', {root: getByTestId('test-menutrigger'), interactionType: 'keyboard'});
 
   await menuTester.open();
-  expect(menuTester.menu).toBeInTheDocument();
-  let submenuTriggers = menuTester.submenuTriggers;
+  expect(menuTester.getMenu()).toBeInTheDocument();
+  let submenuTriggers = menuTester.getSubmenuTriggers();
   expect(submenuTriggers).toHaveLength(1);
 
   let submenuTester = await menuTester.openSubmenu({submenuTrigger: 'Share…'});
-  expect(submenuTester.menu).toBeInTheDocument();
+  expect(submenuTester.getMenu()).toBeInTheDocument();
 
-  await submenuTester.selectOption({option: submenuTester.options()[0]});
-  expect(submenuTester.menu).not.toBeInTheDocument();
-  expect(menuTester.menu).not.toBeInTheDocument();
+  await submenuTester.toggleOptionSelection({option: submenuTester.getOptions()[0]});
+  expect(submenuTester.getMenu()).not.toBeInTheDocument();
+  expect(menuTester.getMenu()).not.toBeInTheDocument();
 });
 ```
 

packages/@adobe/react-spectrum/docs/picker/Picker.mdx

@@ -600,10 +600,10 @@ it('Picker can select an option via keyboard', async function () {
     </Provider>
   );
   let selectTester = testUtilUser.createTester('Select', {root: getByTestId('test-select'), interactionType: 'keyboard'});
-  let trigger = selectTester.trigger;
+  let trigger = selectTester.getTrigger();
   expect(trigger).toHaveTextContent('Select…');
 
-  await selectTester.selectOption({option: 'Cat'});
+  await selectTester.toggleOptionSelection({option: 'Cat'});
   expect(trigger).toHaveTextContent('Cat');
 });
 ```

packages/@adobe/react-spectrum/docs/table/TableView.mdx

@@ -1986,22 +1986,22 @@ it('TableView can toggle row selection', async function () {
     </Provider>
   );
   let tableTester = testUtilUser.createTester('Table', {root: getByTestId('test-table')});
-  expect(tableTester.selectedRows).toHaveLength(0);
+  expect(tableTester.getSelectedRows()).toHaveLength(0);
 
   await tableTester.toggleSelectAll();
-  expect(tableTester.selectedRows).toHaveLength(10);
+  expect(tableTester.getSelectedRows()).toHaveLength(10);
 
   await tableTester.toggleRowSelection({row: 2});
-  expect(tableTester.selectedRows).toHaveLength(9);
-  let checkbox = within(tableTester.rows[2]).getByRole('checkbox');
+  expect(tableTester.getSelectedRows()).toHaveLength(9);
+  let checkbox = within(tableTester.getRows()[2]).getByRole('checkbox');
   expect(checkbox).not.toBeChecked();
 
   await tableTester.toggleSelectAll();
-  expect(tableTester.selectedRows).toHaveLength(10);
+  expect(tableTester.getSelectedRows()).toHaveLength(10);
   expect(checkbox).toBeChecked();
 
   await tableTester.toggleSelectAll();
-  expect(tableTester.selectedRows).toHaveLength(0);
+  expect(tableTester.getSelectedRows()).toHaveLength(0);
 });
 ```
 

packages/@adobe/react-spectrum/docs/tabs/Tabs.mdx

@@ -662,11 +662,11 @@ it('Tabs can change selection via keyboard', async function () {
   );
   let tabsTester = testUtilUser.createTester('Tabs', {root: getByTestId('test-tabs'), interactionType: 'keyboard'});
 
-  let tabs = tabsTester.tabs;
-  expect(tabsTester.selectedTab).toBe(tabs[0]);
+  let tabs = tabsTester.getTabs();
+  expect(tabsTester.getSelectedTab()).toBe(tabs[0]);
 
   await tabsTester.triggerTab({tab: 1});
-  expect(tabsTester.selectedTab).toBe(tabs[1]);
+  expect(tabsTester.getSelectedTab()).toBe(tabs[1]);
 });
 ```
 

packages/@adobe/react-spectrum/docs/tree/TreeView.mdx

@@ -557,16 +557,16 @@ it('TreeView can select a row via keyboard', async function () {
   let treeTester = testUtilUser.createTester('Tree', {root: getByTestId('test-tree'), interactionType: 'keyboard'});
 
   await treeTester.toggleRowSelection({row: 0});
-  expect(treeTester.selectedRows).toHaveLength(1);
-  expect(within(treeTester.rows[0]).getByRole('checkbox')).toBeChecked();
+  expect(treeTester.getSelectedRows()).toHaveLength(1);
+  expect(within(treeTester.getRows()[0]).getByRole('checkbox')).toBeChecked();
 
   await treeTester.toggleRowSelection({row: 1});
-  expect(treeTester.selectedRows).toHaveLength(2);
-  expect(within(treeTester.rows[1]).getByRole('checkbox')).toBeChecked();
+  expect(treeTester.getSelectedRows()).toHaveLength(2);
+  expect(within(treeTester.getRows()[1]).getByRole('checkbox')).toBeChecked();
 
   await treeTester.toggleRowSelection({row: 0});
-  expect(treeTester.selectedRows).toHaveLength(1);
-  expect(within(treeTester.rows[0]).getByRole('checkbox')).not.toBeChecked();
+  expect(treeTester.getSelectedRows()).toHaveLength(1);
+  expect(within(treeTester.getRows()[0]).getByRole('checkbox')).not.toBeChecked();
 });
 ```
 

packages/@adobe/react-spectrum/test/checkbox/CheckboxGroup.test.js

@@ -889,32 +889,32 @@ describe('CheckboxGroup', () => {
         let checkboxGroupTester = testUtilUser.createTester('CheckboxGroup', {
           root: getByRole('group')
         });
-        expect(checkboxGroupTester.checkboxgroup).toHaveAttribute('role');
-        let checkboxes = checkboxGroupTester.checkboxes;
+        expect(checkboxGroupTester.getCheckboxGroup()).toHaveAttribute('role');
+        let checkboxes = checkboxGroupTester.getCheckboxes();
         await checkboxGroupTester.toggleCheckbox({checkbox: checkboxes[0]});
         expect(checkboxes[0]).toBeChecked();
-        expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(1);
+        expect(checkboxGroupTester.getSelectedCheckboxes()).toHaveLength(1);
 
         await checkboxGroupTester.toggleCheckbox({checkbox: 4, interactionType: 'keyboard'});
         expect(checkboxes[4]).toBeChecked();
-        expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(2);
+        expect(checkboxGroupTester.getSelectedCheckboxes()).toHaveLength(2);
 
-        let checkbox4 = checkboxGroupTester.findCheckbox({checkboxIndexOrText: 3});
+        let checkbox4 = checkboxGroupTester.findCheckbox({indexOrText: 3});
         await checkboxGroupTester.toggleCheckbox({
           checkbox: checkbox4,
           interactionType: 'keyboard'
         });
         expect(checkboxes[3]).toBeChecked();
-        expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(3);
+        expect(checkboxGroupTester.getSelectedCheckboxes()).toHaveLength(3);
 
         await checkboxGroupTester.toggleCheckbox({checkbox: 'Soccer', interactionType: 'keyboard'});
         expect(checkboxes[0]).not.toBeChecked();
-        expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(2);
+        expect(checkboxGroupTester.getSelectedCheckboxes()).toHaveLength(2);
 
-        let checkbox5 = checkboxGroupTester.findCheckbox({checkboxIndexOrText: 'Rugby'});
+        let checkbox5 = checkboxGroupTester.findCheckbox({indexOrText: 'Rugby'});
         await checkboxGroupTester.toggleCheckbox({checkbox: checkbox5, interactionType: 'mouse'});
         expect(checkboxes[4]).not.toBeChecked();
-        expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(1);
+        expect(checkboxGroupTester.getSelectedCheckboxes()).toHaveLength(1);
       }
     );
   });