clean up and add row index tests for GridList and Table

Author: LFDanLu

packages/@react-spectrum/picker/test/Picker.test.js

@@ -1025,9 +1025,6 @@ describe('Picker', function () {
       expect(document.activeElement).toBe(picker);
       expect(picker).toHaveTextContent('Empty');
 
-      // TODO: this test (along with others in this suite) fails because we seem to be detecting that the button is being focused after the
-      // dropdown is opened, resulting in the dropdown closing due to useOverlay interactOutside logic
-      // Seems to specifically happen if the Picker has a selected item and the user tries to open the Picker
       await selectTester.selectOption({option: 'Zero'});
       expect(onSelectionChange).toHaveBeenCalledTimes(2);
       expect(onSelectionChange).toHaveBeenLastCalledWith('0');

packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx

@@ -87,7 +87,8 @@ export const WithEmptyState = {
 export const WithInitialLoading = {
   ...EmptyCombobox,
   args: {
-    loadingState: 'loading'
+    loadingState: 'loading',
+    label: 'Initial loading'
   },
   play: async ({canvasElement}) => {
     await userEvent.tab();
@@ -101,7 +102,8 @@ export const WithInitialLoading = {
 export const WithLoadMore = {
   ...Example,
   args: {
-    loadingState: 'loadingMore'
+    loadingState: 'loadingMore',
+    label: 'Loading more'
   },
   play: async ({canvasElement}) => {
     await userEvent.tab();
@@ -114,6 +116,10 @@ export const WithLoadMore = {
 
 export const AsyncResults = {
   ...AsyncComboBoxStory,
+  args: {
+    ...AsyncComboBoxStory.args,
+    delay: 2000
+  },
   play: async ({canvasElement}) => {
     await userEvent.tab();
     await userEvent.keyboard('{ArrowDown}');
@@ -127,6 +133,10 @@ export const AsyncResults = {
 
 export const Filtering = {
   ...AsyncComboBoxStory,
+  args: {
+    ...AsyncComboBoxStory.args,
+    delay: 2000
+  },
   play: async ({canvasElement}) => {
     await userEvent.tab();
     await userEvent.keyboard('{ArrowDown}');

packages/@react-spectrum/s2/chromatic/Picker.stories.tsx

@@ -19,7 +19,8 @@ import {userEvent, waitFor, within} from '@storybook/testing-library';
 const meta: Meta<typeof Picker<any>> = {
   component: Picker,
   parameters: {
-    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true},
+    chromatic: {ignoreSelectors: ['[role="progressbar"]']}
   },
   tags: ['autodocs'],
   title: 'S2 Chromatic/Picker'
@@ -71,7 +72,7 @@ export const ContextualHelp = {
 
 export const EmptyAndLoading = {
   render: () => (
-    <Picker isLoading>
+    <Picker label="loading" isLoading>
       {[]}
     </Picker>
   ),
@@ -88,6 +89,10 @@ export const EmptyAndLoading = {
 
 export const AsyncResults = {
   ...AsyncPickerStory,
+  args: {
+    ...AsyncPickerStory.args,
+    delay: 2000
+  },
   play: async ({canvasElement}) => {
     let body = canvasElement.ownerDocument.body;
     await waitFor(() => {

packages/@react-spectrum/s2/package.json

@@ -137,7 +137,6 @@
     "@react-aria/interactions": "^3.25.0",
     "@react-aria/live-announcer": "^3.4.2",
     "@react-aria/overlays": "^3.27.0",
-    "@react-aria/separator": "^3.4.8",
     "@react-aria/utils": "^3.28.2",
     "@react-spectrum/utils": "^3.12.4",
     "@react-stately/layout": "^4.2.2",

packages/react-aria-components/src/GridList.tsx

@@ -217,7 +217,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
   if (isEmpty && props.renderEmptyState) {
     let content = props.renderEmptyState(renderValues);
     emptyState = (
-      <div role="row" style={{display: 'contents'}}>
+      <div role="row" aria-rowindex={1} style={{display: 'contents'}}>
         <div role="gridcell" style={{display: 'contents'}}>
           {content}
         </div>
@@ -532,7 +532,7 @@ export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', fu
 
   return (
     <>
-      {/* TODO: Alway render the sentinel. Might need to style it as visually hidden? */}
+      {/* TODO: Alway render the sentinel. Will need to figure out how best to position this in cases where the user is using flex + gap (this would introduce a gap even though it doesn't take room) */}
       {/* @ts-ignore - compatibility with React < 19 */}
       <div style={{position: 'relative', width: 0, height: 0}} inert={inertValue(true)} >
         <div data-testid="loadMoreSentinel" ref={sentinelRef} style={{position: 'absolute', height: 1, width: 1}} />

packages/react-aria-components/src/ListBox.tsx

@@ -230,8 +230,6 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
     );
   }
 
-  // TODO: Think about if completely empty state. Do we leave it up to the user to setup the two states for empty and empty + loading?
-  // Do we add a data attibute/prop/renderprop to ListBox for isLoading
   return (
     <FocusScope>
       <div
@@ -511,7 +509,7 @@ export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', fun
 
   return (
     <>
-      {/* TODO: Alway render the sentinel. Might need to style it as visually hidden? */}
+      {/* TODO: Alway render the sentinel. Will need to figure out how best to position this in cases where the user is using flex + gap (this would introduce a gap even though it doesn't take room) */}
       {/* @ts-ignore - compatibility with React < 19 */}
       <div style={{position: 'relative', width: 0, height: 0}} inert={inertValue(true)} >
         <div data-testid="loadMoreSentinel" ref={sentinelRef} style={{position: 'absolute', height: 1, width: 1}} />

packages/react-aria-components/src/Table.tsx

@@ -1398,6 +1398,7 @@ export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', funct
   return (
     <>
       {/* TODO weird structure? Renders a extra row but we hide via inert so maybe ok? */}
+      {/* TODO: Will need to figure out how best to position this in cases where the user is using flex + gap (this would introduce a gap even though it doesn't take room) */}
       {/* @ts-ignore - compatibility with React < 19 */}
       <TR style={{position: 'relative', width: 0, height: 0}} inert={inertValue(true)} >
         <TD data-testid="loadMoreSentinel" ref={sentinelRef} style={{position: 'absolute', height: 1, width: 1}} />

packages/react-aria-components/test/GridList.test.js

@@ -867,9 +867,9 @@ describe('GridList', () => {
       {name: 'Bar'},
       {name: 'Baz'}
     ];
-    let renderEmptyState = () => {
+    let renderEmptyState = (loadingState) => {
       return (
-        <div>empty state</div>
+        loadingState === 'loading' ? <div>loading</div> : <div>empty state</div>
       );
     };
     let AsyncGridList = (props) => {
@@ -979,7 +979,7 @@ describe('GridList', () => {
       });
 
       let VirtualizedAsyncGridList = (props) => {
-        let {items, isLoading, onLoadMore, ...listBoxProps} = props;
+        let {items, loadingState, onLoadMore, ...listBoxProps} = props;
         return (
           <Virtualizer
             layout={ListLayout}
@@ -990,13 +990,13 @@ describe('GridList', () => {
             <GridList
               {...listBoxProps}
               aria-label="async virtualized gridlist"
-              renderEmptyState={() => renderEmptyState()}>
+              renderEmptyState={() => renderEmptyState(loadingState)}>
               <Collection items={items}>
                 {(item) => (
                   <GridListItem id={item.name}>{item.name}</GridListItem>
                 )}
               </Collection>
-              <UNSTABLE_GridListLoadingSentinel isLoading={isLoading} onLoadMore={onLoadMore}>
+              <UNSTABLE_GridListLoadingSentinel isLoading={loadingState === 'loadingMore'} onLoadMore={onLoadMore}>
                 Loading...
               </UNSTABLE_GridListLoadingSentinel>
             </GridList>
@@ -1005,7 +1005,7 @@ describe('GridList', () => {
       };
 
       it('should always render the sentinel even when virtualized', async () => {
-        let tree = render(<VirtualizedAsyncGridList isLoading items={items} />);
+        let tree = render(<VirtualizedAsyncGridList loadingState="loadingMore" items={items} />);
 
         let gridListTester = testUtilUser.createTester('GridList', {root: tree.getByRole('grid')});
         let rows = gridListTester.rows;
@@ -1049,20 +1049,52 @@ describe('GridList', () => {
         expect(sentinelParentStyles.top).toBe('0px');
         expect(sentinelParentStyles.height).toBe('0px');
 
-        // Setting isLoading will render the loader even if the list is empty.
-        tree.rerender(<VirtualizedAsyncGridList items={[]} isLoading />);
+        tree.rerender(<VirtualizedAsyncGridList items={[]} loadingState="loading" />);
         rows = gridListTester.rows;
-        expect(rows).toHaveLength(2);
-        emptyStateRow = rows[1];
-        expect(emptyStateRow).toHaveTextContent('empty state');
-
-        let loadingRow = rows[0];
-        expect(loadingRow).toHaveTextContent('Loading...');
+        expect(rows).toHaveLength(1);
+        emptyStateRow = rows[0];
+        expect(emptyStateRow).toHaveTextContent('loading');
 
         sentinel = within(gridListTester.gridlist).getByTestId('loadMoreSentinel');
         sentinelParentStyles = sentinel.parentElement.parentElement.style;
         expect(sentinelParentStyles.top).toBe('0px');
-        expect(sentinelParentStyles.height).toBe('30px');
+        expect(sentinelParentStyles.height).toBe('0px');
+      });
+
+      it('should have the correct row indicies after loading more items', async () => {
+        let tree = render(<VirtualizedAsyncGridList items={[]} loadingState="loading" />);
+
+        let gridListTester = testUtilUser.createTester('GridList', {root: tree.getByRole('grid')});
+        let rows = gridListTester.rows;
+        expect(rows).toHaveLength(1);
+
+        let loaderRow = rows[0];
+        expect(loaderRow).toHaveAttribute('aria-rowindex', '1');
+        expect(loaderRow).toHaveTextContent('loading');
+        for (let [index, row] of rows.entries()) {
+          expect(row).toHaveAttribute('aria-rowindex', `${index + 1}`);
+        }
+
+        tree.rerender(<VirtualizedAsyncGridList items={items} />);
+        rows = gridListTester.rows;
+        expect(rows).toHaveLength(7);
+        expect(within(gridListTester.gridlist).queryByText('loading')).toBeFalsy();
+        for (let [index, row] of rows.entries()) {
+          expect(row).toHaveAttribute('aria-rowindex', `${index + 1}`);
+        }
+
+        tree.rerender(<VirtualizedAsyncGridList items={items} loadingState="loadingMore" />);
+        rows = gridListTester.rows;
+        expect(rows).toHaveLength(8);
+        loaderRow = rows[7];
+        expect(loaderRow).toHaveAttribute('aria-rowindex', '51');
+        for (let [index, row] of rows.entries()) {
+          if (index === 7) {
+            continue;
+          } else {
+            expect(row).toHaveAttribute('aria-rowindex', `${index + 1}`);
+          }
+        }
       });
     });
   });

packages/react-aria-components/test/Table.test.js

@@ -2042,7 +2042,7 @@ describe('Table', () => {
       });
 
       let VirtualizedTableLoad = (props) => {
-        let {items, isLoading, onLoadMore} = props;
+        let {items, loadingState, onLoadMore} = props;
 
         return (
           <Virtualizer layout={TableLayout} layoutOptions={{rowHeight: 25, loaderHeight: 30}}>
@@ -2051,7 +2051,7 @@ describe('Table', () => {
                 <Column isRowHeader>Foo</Column>
                 <Column>Bar</Column>
               </TableHeader>
-              <TableBody renderEmptyState={() => 'No results'}>
+              <TableBody renderEmptyState={() => loadingState === 'loading' ? 'loading' : 'No results'}>
                 <Collection items={items}>
                   {(item) => (
                     <Row>
@@ -2060,7 +2060,7 @@ describe('Table', () => {
                     </Row>
                   )}
                 </Collection>
-                <UNSTABLE_TableLoadingSentinel isLoading={isLoading} onLoadMore={onLoadMore}>
+                <UNSTABLE_TableLoadingSentinel isLoading={loadingState === 'loadingMore'} onLoadMore={onLoadMore}>
                   <div>spinner</div>
                 </UNSTABLE_TableLoadingSentinel>
               </TableBody>
@@ -2070,7 +2070,7 @@ describe('Table', () => {
       };
 
       it('should always render the sentinel even when virtualized', () => {
-        let tree = render(<VirtualizedTableLoad isLoading items={items} />);
+        let tree = render(<VirtualizedTableLoad loadingState="loadingMore" items={items} />);
         let tableTester = testUtilUser.createTester('Table', {root: tree.getByRole('grid')});
         let rows = tableTester.rows;
         expect(rows).toHaveLength(7);
@@ -2111,25 +2111,52 @@ describe('Table', () => {
         expect(sentinelParentStyles.top).toBe('0px');
         expect(sentinelParentStyles.height).toBe('0px');
 
-        // Setting isLoading will render the loader even if the table is empty.
-        tree.rerender(<VirtualizedTableLoad items={[]} isLoading />);
+        tree.rerender(<VirtualizedTableLoad items={[]} loadingState="loading" />);
         rows = tableTester.rows;
-        expect(rows).toHaveLength(2);
-        emptyStateRow = rows[1];
-        expect(emptyStateRow).toHaveTextContent('No results');
-
-        let loadingRow = rows[0];
-        expect(loadingRow).toHaveTextContent('spinner');
+        expect(rows).toHaveLength(1);
+        emptyStateRow = rows[0];
+        expect(emptyStateRow).toHaveTextContent('loading');
 
         sentinel = within(tableTester.table).getByTestId('loadMoreSentinel', {hidden: true});
         sentinelParentStyles = sentinel.parentElement.parentElement.style;
         expect(sentinelParentStyles.top).toBe('0px');
-        expect(sentinelParentStyles.height).toBe('30px');
+        expect(sentinelParentStyles.height).toBe('0px');
       });
 
       it('should have the correct row indicies after loading more items', async () => {
-        // TODO: first render without items and is loading
-        // then render with items and double check
+        let tree = render(<VirtualizedTableLoad items={[]} loadingState="loading" />);
+        let tableTester = testUtilUser.createTester('Table', {root: tree.getByRole('grid')});
+        let rows = tableTester.rows;
+        expect(rows).toHaveLength(1);
+
+        let loaderRow = rows[0];
+        expect(loaderRow).toHaveAttribute('aria-rowindex', '2');
+        expect(loaderRow).toHaveTextContent('loading');
+        for (let [index, row] of rows.entries()) {
+          // the header row is the first row but isn't included in "rows" so add +2
+          expect(row).toHaveAttribute('aria-rowindex', `${index + 2}`);
+        }
+
+        tree.rerender(<VirtualizedTableLoad items={items} />);
+        rows = tableTester.rows;
+        expect(rows).toHaveLength(6);
+        expect(within(tableTester.table).queryByText('spinner')).toBeFalsy();
+        for (let [index, row] of rows.entries()) {
+          expect(row).toHaveAttribute('aria-rowindex', `${index + 2}`);
+        }
+
+        tree.rerender(<VirtualizedTableLoad items={items} loadingState="loadingMore" />);
+        rows = tableTester.rows;
+        expect(rows).toHaveLength(7);
+        loaderRow = rows[6];
+        expect(loaderRow).toHaveAttribute('aria-rowindex', '52');
+        for (let [index, row] of rows.entries()) {
+          if (index === 6) {
+            continue;
+          } else {
+            expect(row).toHaveAttribute('aria-rowindex', `${index + 2}`);
+          }
+        }
       });
     });
   });

yarn.lock

@@ -7946,7 +7946,6 @@ __metadata:
     "@react-aria/interactions": "npm:^3.25.0"
     "@react-aria/live-announcer": "npm:^3.4.2"
     "@react-aria/overlays": "npm:^3.27.0"
-    "@react-aria/separator": "npm:^3.4.8"
     "@react-aria/test-utils": "npm:^1.0.0-alpha.6"
     "@react-aria/utils": "npm:^3.28.2"
     "@react-spectrum/utils": "npm:^3.12.4"