add test

Author: LFDanLu

packages/@react-spectrum/s2/stories/TableView.stories.tsx

@@ -13,7 +13,6 @@
 import {action} from '@storybook/addon-actions';
 import {
   ActionButton,
-  ActionButtonGroup,
   Cell,
   Column,
   Content,
@@ -33,7 +32,7 @@ import {categorizeArgTypes} from './utils';
 import Filter from '../s2wf-icons/S2_Icon_Filter_20_N.svg';
 import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
 import type {Meta, StoryObj} from '@storybook/react';
-import {ReactElement, useEffect, useState} from 'react';
+import {ReactElement, useState} from 'react';
 import {SortDescriptor} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useAsyncList} from '@react-stately/data';
@@ -1389,62 +1388,3 @@ const ResizableTable = () => {
     }
   }
 };
-
-
-export const Test = {
-  render: () => {
-    return <SWTable />;
-  }
-};
-
-function SWTable() {
-  const [film, setFilm] = useState(undefined);
-
-  interface Item {
-    id: string,
-    title: string
-  }
-
-  let list = useAsyncList<Item>({
-    async load({signal, cursor}) {
-      if (cursor) {
-        cursor = cursor.replace(/^http:\/\//i, 'https://');
-      }
-      let items = [];
-      await new Promise(resolve => setTimeout(resolve, 1500));
-      let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search&film=${film}`, {signal});
-      let json = await res.json();
-      items = json.results.map((element) => ({title: element.name}));
-
-      return {
-        items: items,
-        cursor: json.next
-      };
-    }
-  });
-
-  useEffect(() => {
-    list.reload();
-  }, [film]);
-
-  return (
-    <div>
-      <ActionButtonGroup aria-label="group">
-        <ActionButton onPress={() => setFilm(undefined)}>All</ActionButton>
-        <ActionButton onPress={() => setFilm('https://swapi.py4e.com/api/films/1/')}>A New Hope</ActionButton>
-      </ActionButtonGroup>
-      <TableView aria-label="Characters" loadingState={list.loadingState} onLoadMore={list.loadMore} styles={style({height: 200, width: 400})}>
-        <TableHeader>
-          <Column isRowHeader>Name</Column>
-        </TableHeader>
-        <TableBody items={list.items}>
-          {
-            item => (<Row id={item.title}>
-              <Cell>{item.title}</Cell>
-            </Row>)
-          }
-        </TableBody>
-      </TableView>
-    </div>
-  );
-}

packages/@react-spectrum/table/stories/Table.stories.tsx

@@ -33,7 +33,7 @@ import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';
 import {Picker} from '@react-spectrum/picker';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React, {JSX, useCallback, useEffect, useState} from 'react';
+import React, {JSX, useCallback, useState} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
@@ -2262,61 +2262,3 @@ export const AsyncLoadOverflowWrapReproStory: TableStory = {
 };
 
 export {Performance} from './Performance';
-
-
-export const Test = {
-  render: () => {
-    return <SWTable />;
-  }
-};
-
-function SWTable() {
-  const [film, setFilm] = useState(undefined);
-
-  interface Item {
-    id: string,
-    title: string
-  }
-
-  let list = useAsyncList<Item>({
-    async load({signal, cursor}) {
-      console.log('load', cursor, film);
-      if (cursor) {
-        cursor = cursor.replace(/^http:\/\//i, 'https://');
-      }
-      let items = [];
-      await new Promise(resolve => setTimeout(resolve, 1500));
-      let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search&film=${film}`, {signal});
-      let json = await res.json();
-      items = json.results.map((element) => ({title: element.name}));
-
-      return {
-        items: items,
-        cursor: json.next
-      };
-    }
-  });
-
-  useEffect(() => {
-    list.reload();
-  }, [film]);
-
-  return (
-    <div>
-      <ActionButton onPress={() => setFilm(undefined)}>All</ActionButton>
-      <ActionButton onPress={() => setFilm('https://swapi.py4e.com/api/films/1/')}>A New Hope</ActionButton>
-      <TableView aria-label="Characters"  height={200} width={400}>
-        <TableHeader>
-          <Column isRowHeader>Name</Column>
-        </TableHeader>
-        <TableBody items={list.items} loadingState={list.loadingState} onLoadMore={list.loadMore}>
-          {
-            item => (<Row key={item.title}>
-              <Cell>{item.title}</Cell>
-            </Row>)
-          }
-        </TableBody>
-      </TableView>
-    </div>
-  );
-}

packages/@react-stately/data/test/useAsyncList.test.js

@@ -334,6 +334,56 @@ describe('useAsyncList', () => {
     expect(result.current.items).toEqual(ITEMS);
   });
 
+  it('should prevent loadMore from firing if in the middle of a load', async () => {
+    let load = jest.fn().mockImplementation(getItems);
+    let {result} = renderHook(
+      () => useAsyncList({load})
+    );
+
+    expect(load).toHaveBeenCalledTimes(1);
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.items).toEqual([]);
+
+    await act(async () => {
+      result.current.loadMore();
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.items).toEqual([]);
+    expect(load).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      jest.runAllTimers();
+    });
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.items).toEqual(ITEMS);
+
+    await act(async () => {
+      result.current.reload();
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.items).toEqual([]);
+    expect(load).toHaveBeenCalledTimes(2);
+
+    await act(async () => {
+      result.current.loadMore();
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.items).toEqual([]);
+    expect(load).toHaveBeenCalledTimes(2);
+
+    await act(async () => {
+      jest.runAllTimers();
+    });
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.items).toEqual(ITEMS);
+  });
+
+
   it('should ignore duplicate loads where first resolves first', async () => {
     let load = jest.fn().mockImplementation(getItems2);
     let sort = jest.fn().mockImplementation(() => new Promise(resolve => setTimeout(() => resolve({items: ITEMS2}), 100)));