Ensure no existing tests are broken

marmelab · Feb 24, 2025 · 70e4917 · 70e4917
1 parent 2c608f2
commit 70e4917
Showing 1 changed file with 39 additions and 7 deletions.
diff --git a/examples/simple/src/posts/PostCreate.tsx b/examples/simple/src/posts/PostCreate.tsx
@@ -28,14 +28,40 @@ import {
     CanAccess,
 } from 'react-admin';
 import { useFormContext, useWatch } from 'react-hook-form';
-import { Button, Dialog, DialogActions, DialogContent } from '@mui/material';
+import {
+    Alert,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+} from '@mui/material';
+
+/**
+ * To ensure no existing tests are broken, we keep the same mutation mode as before by default.
+ * In order to test the new optimistic or undoable modes, you can add `mutationMode=optimistic` or `mutationMode=undoable`
+ * to the query string.
+ */
+const getMutationMode = () => {
+    const querystring = new URLSearchParams(window.location.search);
+    const mutationMode = querystring.get('mutationMode');
+    switch (mutationMode) {
+        case 'undoable':
+            return 'undoable';
+        case 'optimistic':
+            return 'optimistic';
+        default:
+            return 'pessimistic';
+    }
+};
 
-const mutationMode = 'undoable';
 // Client side id generation. We start from 100 to avoid querying the post list to get the next id as we
 // may be offline and accessing this page directly (without going through the list page first) which would
 // be possible if the app was also a PWA.
+// We only do that for optimistic and undoable modes in order to not break any existing tests that expect
+// the id to be generated by the server (e.g. by FakeRest).
 let next_id = 100;
-const getNewId = () => next_id++;
+const getNewId = () =>
+    getMutationMode() === 'pessimistic' ? undefined : next_id++;
 
 const PostCreateToolbar = () => {
     const notify = useNotify();
@@ -54,7 +80,7 @@ const PostCreateToolbar = () => {
                         notify('resources.posts.notifications.created', {
                             type: 'info',
                             messageArgs: { smart_count: 1 },
-                            undoable: mutationMode === 'undoable',
+                            undoable: getMutationMode() === 'undoable',
                         });
                         redirect('show', 'posts', data.id);
                     },
@@ -72,7 +98,7 @@ const PostCreateToolbar = () => {
                         notify('resources.posts.notifications.created', {
                             type: 'info',
                             messageArgs: { smart_count: 1 },
-                            undoable: mutationMode === 'undoable',
+                            undoable: getMutationMode() === 'undoable',
                         });
                     },
                 }}
@@ -86,7 +112,7 @@ const PostCreateToolbar = () => {
                         notify('resources.posts.notifications.created', {
                             type: 'info',
                             messageArgs: { smart_count: 1 },
-                            undoable: mutationMode === 'undoable',
+                            undoable: getMutationMode() === 'undoable',
                         });
                         redirect('show', 'posts', data.id);
                     },
@@ -120,9 +146,15 @@ const PostCreate = () => {
     return (
         <Create
             redirect="edit"
-            mutationMode={mutationMode}
+            mutationMode={getMutationMode()}
             transform={data => ({ ...data, id: getNewId() })}
         >
+            <Alert severity="info">
+                To test offline support, add either{' '}
+                <code>?mutationMode=optimistic</code> or{' '}
+                <code>?mutationMode=undoable</code> to the page search
+                parameters.
+            </Alert>
             <SimpleFormConfigurable
                 toolbar={<PostCreateToolbar />}
                 defaultValues={defaultValues}