test(TimeTravel): async atom snapshot history (#170)

* test(TimeTravel): async atom snapshot history

* chore: bump Jotai version

* fix: inspect promise values more reliably

Author: arjunvegda

__tests__/devtools/TimeTravel.test.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { act, fireEvent, screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import { atom, useAtomValue, useSetAtom } from 'jotai';
-import { DevTools, DevToolsProps } from 'jotai-devtools';
+import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { DevTools, type DevToolsProps } from 'jotai-devtools';
 import { customRender } from '../custom-render';
 
 const BasicAtomsWithDevTools = (props: DevToolsProps) => {
@@ -456,6 +456,75 @@ describe('DevTools - TimeTravel', () => {
         screen.getAllByTestId(/jotai-devtools-snapshot-[0-9]/),
       ).toHaveLength(3);
     });
+
+    it('should not add another snapshot history entry when restoring an async atom', async () => {
+      const countAtom = atom(0);
+      countAtom.debugLabel = 'countAtom';
+      const asyncAtom = atom<Promise<number> | null>(null);
+      asyncAtom.debugLabel = 'asyncAtom';
+
+      let resolvePromise: (value: number) => void = () => {};
+      const pendingPromise = new Promise<number>((resolve) => {
+        resolvePromise = resolve;
+      });
+
+      const AsyncAtomsWithDevTools = () => {
+        const [request, setRequest] = useAtom(asyncAtom);
+        const setCount = useSetAtom(countAtom);
+
+        const handleFetchClick = async () => {
+          setRequest(pendingPromise);
+        };
+
+        return (
+          <div>
+            <DevTools isInitialOpen={true} />
+            <span data-testid="request-value">
+              {request ? 'Resolved' : 'Pending'}
+            </span>
+            <button onClick={() => setCount((c) => c + 1)} type="button">
+              Increment
+            </button>
+            <button onClick={handleFetchClick} type="button">
+              Fetch
+            </button>
+          </div>
+        );
+      };
+
+      customRender(
+        <React.Suspense fallback={<div>Loading...</div>}>
+          <AsyncAtomsWithDevTools />
+        </React.Suspense>,
+      );
+
+      fireEvent.click(screen.getByText('Time travel'));
+      fireEvent.click(screen.getByLabelText('Record snapshot history'));
+      fireEvent.click(screen.getByText('Increment'));
+
+      expect(
+        screen.getAllByTestId(/jotai-devtools-snapshot-[0-9]/),
+      ).toHaveLength(1);
+
+      await userEvent.click(screen.getByText('Fetch'));
+
+      resolvePromise(1);
+
+      await waitFor(() =>
+        expect(
+          screen.getAllByTestId(/jotai-devtools-snapshot-[0-9]/),
+        ).toHaveLength(3),
+      );
+
+      expect(
+        screen.getAllByTestId('json-tree-view-container'),
+      ).toMatchSnapshot();
+
+      await userEvent.click(screen.getByTestId('jotai-devtools-snapshot-2'));
+      expect(
+        screen.getAllByTestId('json-tree-view-container'),
+      ).toMatchSnapshot();
+    });
   });
 
   describe('Time travel', () => {

__tests__/devtools/__snapshots__/TimeTravel.test.tsx.snap

@@ -574,6 +574,110 @@ exports[`DevTools - TimeTravel Snapshot details should display the full state in
 </div>
 `;
 
+exports[`DevTools - TimeTravel Snapshot details should not add another snapshot history entry when restoring an async atom 1`] = `
+[
+  <div
+    class="internal-jotai-devtools-json-tree-wrapper"
+    data-testid="json-tree-view-container"
+  >
+    <ul
+      style="border: 0px; padding: 0.625rem; margin: 0px; list-style: none; background-color: rgba(248, 249, 250, 0.65);"
+    >
+      <li
+        style="padding: 0px; margin: 0px;"
+      >
+        <ul
+          style="padding: 0px; margin: 0px; list-style: none;"
+        >
+          <li
+            style="position: relative; padding-top: 0.25em; margin-left: 0px; padding-left: 0px;"
+          >
+            <div
+              style="display: inline-block; padding-right: 0.5em; padding-left: 0px; cursor: pointer;"
+            >
+              <div
+                style="color: rgb(52, 58, 64); margin-left: 0px; transition: 150ms; transform: rotateZ(0deg); transform-origin: 45% 50%; position: relative; line-height: 1.1em; font-size: 0.75em; padding-left: 0.2em;"
+              >
+                ▶
+              </div>
+            </div>
+            <label
+              style="display: inline-block; color: rgb(52, 58, 64); margin: 0px; padding: 0px; cursor: pointer;"
+            >
+              <span>
+                asyncAtom
+                :
+              </span>
+            </label>
+            <span
+              style="padding-left: 0.5em; cursor: pointer; color: rgb(144, 146, 150); display: inline;"
+            >
+              { status: "fulfilled", value: 1 }
+            </span>
+            <ul
+              style="padding: 0px; margin: 0px; list-style: none; display: block;"
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>,
+]
+`;
+
+exports[`DevTools - TimeTravel Snapshot details should not add another snapshot history entry when restoring an async atom 2`] = `
+[
+  <div
+    class="internal-jotai-devtools-json-tree-wrapper"
+    data-testid="json-tree-view-container"
+  >
+    <ul
+      style="border: 0px; padding: 0.625rem; margin: 0px; list-style: none; background-color: rgba(248, 249, 250, 0.65);"
+    >
+      <li
+        style="padding: 0px; margin: 0px;"
+      >
+        <ul
+          style="padding: 0px; margin: 0px; list-style: none;"
+        >
+          <li
+            style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 1.25em; text-indent: -0.5em; word-break: break-all;"
+          >
+            <label
+              style="display: inline-block; color: rgb(52, 58, 64); margin: 0px 0.5em 0px 0px;"
+            >
+              <span>
+                asyncAtom
+                :
+              </span>
+            </label>
+            <span>
+              <span
+                style="position: relative; padding: 2px 3px; border-radius: 3px; text-decoration: line-through; background-color: rgba(224, 49, 49, 0.65);"
+              >
+                null
+              </span>
+              <span
+                style="position: relative; padding: 2px 3px; border-radius: 3px; color: rgb(144, 146, 150);"
+              >
+                 =&gt; 
+              </span>
+              <span
+                style="position: relative; padding: 2px 3px; border-radius: 3px; background-color: rgba(47, 158, 68, 0.65);"
+              >
+                {
+  status: "pending"
+}
+              </span>
+            </span>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>,
+]
+`;
+
 exports[`DevTools - TimeTravel Snapshot list Search should display an error if no snapshots are found 1`] = `
 <div
   class="internal-jotai-devtools-time-travel-wrapper m_8bffd616 __m__-r2c3"

src/DevTools/Extension/components/Shell/components/TimeTravel/useSyncSnapshotHistory.ts

@@ -24,14 +24,22 @@ const generateShortId = () =>
   Date.now().toString(36).substring(5) +
   Math.random().toString(36).substring(8);
 
-type PromiseWithMeta = Promise<unknown> & {
-  status?: 'pending' | 'fulfilled' | 'rejected';
-  value?: unknown;
-  reason?: unknown;
-};
+const inspectPromise = async (promise: Promise<unknown>) => {
+  const immediatePromise = Promise.resolve();
+
+  try {
+    const winner = await Promise.race([promise, immediatePromise]);
 
-export const isPromiseWithMeta = (x: unknown): x is PromiseWithMeta =>
-  x instanceof Promise;
+    if (winner === undefined) {
+      return { status: 'pending' };
+    }
+
+    const value = await promise;
+    return { status: 'fulfilled', value };
+  } catch (error) {
+    return { status: 'rejected', reason: error };
+  }
+};
 
 export default function useSyncSnapshotHistory() {
   const userStore = useUserStore();
@@ -73,7 +81,7 @@ export default function useSyncSnapshotHistory() {
       });
     };
 
-    const collectValues = () => {
+    const collectValues = async () => {
       const values: AtomsValues = new Map();
       const displayValues: SnapshotHistory['displayValues'] = {};
       const dependents: AtomsDependents = new Map();
@@ -84,26 +92,9 @@ export default function useSyncSnapshotHistory() {
             values.set(atom, atomState.v);
             // if atom is not private, we'll add it to displayValues
             if (!atom.debugPrivate) {
-              if (isPromiseWithMeta(atomState.v)) {
-                if (atomState.v.status === 'pending') {
-                  displayValues[atomToPrintable(atom)] = {
-                    status: 'pending',
-                  };
-                } else if (atomState.v.status === 'rejected') {
-                  displayValues[atomToPrintable(atom)] = {
-                    status: atomState.v.status,
-                    reason: atomState.v.reason,
-                  };
-                } else if (atomState.v.status === 'fulfilled') {
-                  displayValues[atomToPrintable(atom)] = {
-                    status: atomState.v.status,
-                    value: atomState.v.value,
-                  };
-                } else {
-                  displayValues[atomToPrintable(atom)] = {
-                    status: 'pending',
-                  };
-                }
+              if (atomState.v instanceof Promise) {
+                const promiseResult = await inspectPromise(atomState.v);
+                displayValues[atomToPrintable(atom)] = promiseResult;
               } else {
                 displayValues[atomToPrintable(atom)] = atomState.v;
               }
@@ -117,7 +108,7 @@ export default function useSyncSnapshotHistory() {
       }
       addToHistoryStack({ values, dependents }, displayValues);
     };
-    const cb = (
+    const cb = async (
       action: Parameters<Parameters<typeof userStore.subscribeStore>[0]>[0],
     ) => {
       const isWrite = action.type === 'set' || action.type === 'async-get';
@@ -126,7 +117,7 @@ export default function useSyncSnapshotHistory() {
         shouldRecordSnapshotHistory &&
         !store.get(isTimeTravelingAtom)
       ) {
-        collectValues();
+        await collectValues();
       }
     };
 

src/stories/Default/Playground/Async.tsx

@@ -3,12 +3,13 @@ import { Box, Button, Flex, Text, Title } from '@mantine/core';
 import { useAtom, useAtomValue } from 'jotai/react';
 import { atom } from 'jotai/vanilla';
 
+const RESPONSE_DELAY = 1000;
 const delayedPromise = (data: any) =>
   new Promise((resolve, reject) => {
     const timeout = setTimeout(() => {
       clearTimeout(timeout);
       resolve(data);
-    }, 1000);
+    }, RESPONSE_DELAY);
   });
 
 const getRandomNumberBetweenMinAndMax = (min = 1, max = 100) => {
@@ -23,6 +24,14 @@ const makeRandomFetchReq = async () => {
     },
   );
 };
+
+const makeRandomFetchReqError = async () => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      reject('foo');
+    }, RESPONSE_DELAY);
+  });
+};
 // const asyncAtom = atom<Promise<any>>(Promise.resolve(null));
 const asyncAtom = atom<Promise<any> | null>(null);
 asyncAtom.debugLabel = 'asyncAtom';
@@ -49,26 +58,36 @@ export const Async = () => {
     setShowResult((v) => !v);
   };
 
+  const handleFetchErrorClick = () => {
+    setRequest(makeRandomFetchReqError); // Will suspend until request resolves
+  };
+
   return (
     <Box>
       <Title size="h5">Async</Title>
       <Text mb={10} c="dark.2">
-        Out-of-the-box Suspense support. <i>Timeout: 8000 ms</i>
+        Out-of-the-box Suspense support. <i>Delay: {RESPONSE_DELAY / 1000}s</i>
       </Text>
       {/* User: {userId} */}
       {showResult && <ConditionalAsync />}
       <Text>Request status: {!request ? 'Ready' : '✅ Success'} </Text>
-      <Flex>
-        <Button onClick={handleFetchClick} size="xs" tt="uppercase" mt={5}>
-          Fetch
+      <Flex mt={5} gap={5}>
+        <Button onClick={handleFetchClick} size="xs" tt="uppercase">
+          Fetch Success
         </Button>
 
+        <Button
+          onClick={handleFetchErrorClick}
+          size="xs"
+          tt="uppercase"
+          color="red"
+        >
+          Fetch Error
+        </Button>
         <Button
           onClick={handleShowResultClick}
           size="xs"
           tt="uppercase"
-          mt={5}
-          ml={5}
           color="green"
         >
           Toggle result