story and test

Author: slax57

packages/ra-core/src/dataProvider/useUpdate.spec.tsx

@@ -31,7 +31,12 @@ import {
     WithMiddlewaresSuccess as WithMiddlewaresSuccessUndoable,
     WithMiddlewaresError as WithMiddlewaresErrorUndoable,
 } from './useUpdate.undoable.stories';
-import { Middleware, MutationMode, Params } from './useUpdate.stories';
+import {
+    Middleware,
+    MutationMode,
+    Params,
+    InvalidateList,
+} from './useUpdate.stories';
 
 describe('useUpdate', () => {
     describe('mutate', () => {
@@ -653,6 +658,18 @@ describe('useUpdate', () => {
                 });
             });
         });
+
+        it('invalidates getList query dataProvider resolves in undoable mode', async () => {
+            render(<InvalidateList mutationMode="undoable" />);
+            fireEvent.change(await screen.findByDisplayValue('Hello'), {
+                target: { value: 'Hello changed' },
+            });
+            fireEvent.click(screen.getByText('Save'));
+            await screen.findByText('resources.posts.notifications.updated');
+            fireEvent.click(screen.getByText('Close'));
+            await screen.findByText(/Hello changed/);
+        });
+
         describe('pessimistic mutation mode', () => {
             it('updates getOne query cache when dataProvider promise resolves', async () => {
                 const queryClient = new QueryClient();

packages/ra-core/src/dataProvider/useUpdate.stories.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { QueryClient, useIsMutating } from '@tanstack/react-query';
+import fakeRestDataProvider from 'ra-data-fakerest';
 
 import { CoreAdmin, CoreAdminContext, Resource } from '../core';
 import { useUpdate } from './useUpdate';
@@ -333,3 +334,60 @@ const TextInput = (props: InputProps) => {
         </div>
     );
 };
+
+export const InvalidateList = ({
+    mutationMode = 'undoable',
+}: {
+    mutationMode?: MutationModeType;
+}) => {
+    const dataProvider = fakeRestDataProvider(
+        {
+            posts: [
+                { id: 1, title: 'Hello' },
+                { id: 2, title: 'World' },
+            ],
+        },
+        process.env.NODE_ENV !== 'test',
+        process.env.NODE_ENV === 'test' ? 10 : 1000
+    );
+    return (
+        <TestMemoryRouter initialEntries={['/posts/1']}>
+            <CoreAdmin dataProvider={dataProvider}>
+                <Resource
+                    name="posts"
+                    list={
+                        <ListBase loading={<p>Loading...</p>}>
+                            <RecordsIterator
+                                render={record => (
+                                    <div>
+                                        {record.id}: {record.title}
+                                    </div>
+                                )}
+                            />
+                            <Notification />
+                        </ListBase>
+                    }
+                    edit={
+                        <EditBase mutationMode={mutationMode}>
+                            <Form>
+                                <TextInput source="title" />
+                                <button type="submit">Save</button>
+                            </Form>
+                        </EditBase>
+                    }
+                />
+            </CoreAdmin>
+        </TestMemoryRouter>
+    );
+};
+InvalidateList.args = {
+    mutationMode: 'undoable',
+};
+InvalidateList.argTypes = {
+    mutationMode: {
+        control: {
+            type: 'select',
+        },
+        options: ['pessimistic', 'optimistic', 'undoable'],
+    },
+};