mvc-kit 2.12.0 → 2.12.1

package/src/react/use-local.rapid-remount.test.tsx

@@ -0,0 +1,503 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Rapid remount lifecycle tests — verifies that useLocal's dep-change
+ * dispose/recreate cycle properly aborts in-flight fetches via disposeSignal,
+ * isolates stale responses, and isolates errors across VM instances.
+ *
+ * Uses MSW to intercept real fetch() calls so AbortSignal propagation
+ * is tested end-to-end through the network stack.
+ *
+ * All VMs use the canonical pattern: sync onInit() calls this.load()
+ * fire-and-forget. load() is wrapped by _wrapMethods, so AbortErrors
+ * are silently swallowed and HttpErrors are captured by async tracking.
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+import { http, HttpResponse, delay } from 'msw';
+import { setupServer } from 'msw/node';
+import { vi, afterAll, afterEach, beforeAll } from 'vitest';
+import { ViewModel } from '../ViewModel';
+import { HttpError } from '../errors';
+import { Service } from '../Service';
+import { useLocal } from './use-local';
+
+// ── Test Service ────────────────────────────────────────────────────
+
+class UserService extends Service {
+  async getUser(id: string, signal?: AbortSignal): Promise<{ id: string; name: string }> {
+    const res = await fetch(`/api/users/${id}`, { signal });
+    if (!res.ok) throw new HttpError(res.status, res.statusText);
+    return res.json();
+  }
+}
+
+// ── Test ViewModel ──────────────────────────────────────────────────
+
+interface UserState {
+  userId: string | null;
+  data: { id: string; name: string } | null;
+}
+
+class UserViewModel extends ViewModel<UserState> {
+  private service = new UserService();
+
+  protected onInit() {
+    const { userId } = this.state;
+    if (!userId) return;
+    this.load();
+  }
+
+  async load() {
+    const { userId } = this.state;
+    if (!userId) return;
+    const data = await this.service.getUser(userId, this.disposeSignal);
+    this.set({ data });
+  }
+}
+
+// ── Test Component ──────────────────────────────────────────────────
+
+function UserDetail({ userId }: { userId: string | null }) {
+  const [state, vm] = useLocal(UserViewModel, { userId, data: null }, [userId]);
+  return (
+    <div>
+      <span data-testid="userId">{state.userId ?? 'null'}</span>
+      <span data-testid="loading">{String(vm.async.load?.loading ?? false)}</span>
+      <span data-testid="error">{vm.async.load?.error ?? 'none'}</span>
+      <span data-testid="name">{state.data?.name ?? 'none'}</span>
+    </div>
+  );
+}
+
+// ── MSW Server ──────────────────────────────────────────────────────
+
+const server = setupServer(
+  http.get('/api/users/:id', async ({ params }) => {
+    await delay(250);
+    return HttpResponse.json({ id: params.id, name: `User ${params.id}` });
+  }),
+);
+
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+// Suppress DEV ghost warnings — we intentionally test dispose-during-fetch
+let consoleWarnSpy: ReturnType<typeof vi.spyOn>;
+beforeEach(() => {
+  consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+});
+afterEach(() => {
+  consoleWarnSpy.mockRestore();
+});
+
+// ── Helpers ─────────────────────────────────────────────────────────
+
+/** Let deferred dispose and microtasks settle */
+function flush(): Promise<void> {
+  return new Promise((r) => setTimeout(r, 10));
+}
+
+// ═════════════════════════════════════════════════════════════════════
+// Tests
+// ═════════════════════════════════════════════════════════════════════
+
+describe('rapid remount lifecycle', () => {
+  describe('dep transitions', () => {
+    it('null → real userId: no fetch for null, fetch succeeds for real value', async () => {
+      const requestUrls: string[] = [];
+      server.events.on('request:start', ({ request }) => {
+        requestUrls.push(new URL(request.url).pathname);
+      });
+
+      const { rerender } = render(<UserDetail userId={null} />);
+      expect(screen.getByTestId('userId').textContent).toBe('null');
+      expect(screen.getByTestId('name').textContent).toBe('none');
+
+      // Transition to real userId
+      rerender(<UserDetail userId="42" />);
+      await flush();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('name').textContent).toBe('User 42');
+      });
+
+      // Verify no fetch was made for null
+      expect(requestUrls).not.toContain('/api/users/null');
+      expect(requestUrls).toContain('/api/users/42');
+
+      server.events.removeAllListeners();
+    });
+
+    it('rapid 1→2→3→4: only final VM fetch completes, earlier signals aborted', async () => {
+      const signals = new Map<string, AbortSignal>();
+
+      class TrackedUserVM extends ViewModel<UserState> {
+        protected onInit() {
+          const { userId } = this.state;
+          if (!userId) return;
+          signals.set(userId, this.disposeSignal);
+          this.load();
+        }
+
+        async load() {
+          const { userId } = this.state;
+          if (!userId) return;
+          const res = await fetch(`/api/users/${userId}`, { signal: this.disposeSignal });
+          if (!res.ok) throw new HttpError(res.status, res.statusText);
+          const data = await res.json();
+          this.set({ data });
+        }
+      }
+
+      function Tracked({ userId }: { userId: string }) {
+        const [state] = useLocal(TrackedUserVM, { userId, data: null }, [userId]);
+        return (
+          <div>
+            <span data-testid="userId">{state.userId}</span>
+            <span data-testid="name">{state.data?.name ?? 'none'}</span>
+          </div>
+        );
+      }
+
+      const { rerender } = render(<Tracked userId="1" />);
+      rerender(<Tracked userId="2" />);
+      rerender(<Tracked userId="3" />);
+      rerender(<Tracked userId="4" />);
+      await flush();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('name').textContent).toBe('User 4');
+      });
+
+      // VM 1's signal should be aborted (disposed during render-phase dep change)
+      expect(signals.get('1')?.aborted).toBe(true);
+
+      // VM 4's signal should NOT be aborted — it's the active instance
+      expect(signals.get('4')?.aborted).toBe(false);
+    });
+
+    it('error on first VM does not bleed into second', async () => {
+      server.use(
+        http.get('/api/users/bad-user', async () => {
+          await delay(20);
+          return new HttpResponse(null, { status: 500, statusText: 'Internal Server Error' });
+        }),
+        http.get('/api/users/good-user', async () => {
+          await delay(20);
+          return HttpResponse.json({ id: 'good-user', name: 'Good User' });
+        }),
+      );
+
+      // VM that suppresses the re-thrown error from fire-and-forget load()
+      // (async tracking still captures it before re-throw)
+      class ErrorTestVM extends ViewModel<UserState> {
+        private service = new UserService();
+
+        protected onInit() {
+          const { userId } = this.state;
+          if (!userId) return;
+          // .catch suppresses unhandled rejection; async tracking already captured the error
+          this.load().catch(() => {});
+        }
+
+        async load() {
+          const { userId } = this.state;
+          if (!userId) return;
+          const data = await this.service.getUser(userId, this.disposeSignal);
+          this.set({ data });
+        }
+      }
+
+      function ErrorDetail({ userId }: { userId: string }) {
+        const [state, vm] = useLocal(ErrorTestVM, { userId, data: null }, [userId]);
+        return (
+          <div>
+            <span data-testid="userId">{state.userId}</span>
+            <span data-testid="loading">{String(vm.async.load?.loading ?? false)}</span>
+            <span data-testid="error">{vm.async.load?.error ?? 'none'}</span>
+            <span data-testid="name">{state.data?.name ?? 'none'}</span>
+          </div>
+        );
+      }
+
+      const { rerender } = render(<ErrorDetail userId="bad-user" />);
+      await flush();
+
+      // Wait for the error to be captured via async tracking
+      await waitFor(() => {
+        expect(screen.getByTestId('error').textContent).not.toBe('none');
+      });
+
+      // Dep change to good user
+      rerender(<ErrorDetail userId="good-user" />);
+      await flush();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('name').textContent).toBe('Good User');
+      });
+
+      // New VM should have clean async state — no error from the old VM
+      expect(screen.getByTestId('error').textContent).toBe('none');
+    });
+
+    it('clean async state after rapid remount', async () => {
+      server.use(
+        http.get('/api/users/first', async () => {
+          await delay(200);
+          return new HttpResponse(null, { status: 500, statusText: 'Server Error' });
+        }),
+        http.get('/api/users/second', async () => {
+          await delay(20);
+          return HttpResponse.json({ id: 'second', name: 'Second User' });
+        }),
+      );
+
+      const { rerender } = render(<UserDetail userId="first" />);
+      await flush();
+
+      // Dep change before "first" has time to fail
+      rerender(<UserDetail userId="second" />);
+      await flush();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('name').textContent).toBe('Second User');
+      });
+
+      // The new VM should have no error — first VM's fetch was aborted
+      expect(screen.getByTestId('error').textContent).toBe('none');
+      expect(screen.getByTestId('loading').textContent).toBe('false');
+    });
+  });
+
+  describe('unmount during fetch', () => {
+    it('unmount during active fetch aborts disposeSignal', async () => {
+      let capturedSignal: AbortSignal | null = null;
+      let setCalled = false;
+
+      class UnmountVM extends ViewModel<UserState> {
+        protected onInit() {
+          capturedSignal = this.disposeSignal;
+          this.load();
+        }
+
+        async load() {
+          const res = await fetch('/api/users/slow', { signal: this.disposeSignal });
+          const data = await res.json();
+          setCalled = true;
+          this.set({ data });
+        }
+      }
+
+      server.use(
+        http.get('/api/users/slow', async () => {
+          await delay(300);
+          return HttpResponse.json({ id: 'slow', name: 'Slow User' });
+        }),
+      );
+
+      function Comp() {
+        const [state] = useLocal(UnmountVM, { userId: 'slow', data: null });
+        return <span>{state.data?.name ?? 'none'}</span>;
+      }
+
+      const { unmount } = render(<Comp />);
+      await flush(); // let init fire
+
+      unmount();
+      await flush(); // let deferred dispose fire
+
+      expect(capturedSignal).not.toBeNull();
+      expect(capturedSignal!.aborted).toBe(true);
+
+      // Wait to ensure the fetch promise settled (aborted)
+      await new Promise((r) => setTimeout(r, 100));
+      expect(setCalled).toBe(false);
+    });
+  });
+
+  describe('stale response protection', () => {
+    it('slow VM1 cannot corrupt fast VM2', async () => {
+      server.use(
+        http.get('/api/users/slow', async () => {
+          await delay(500);
+          return HttpResponse.json({ id: 'slow', name: 'Slow User' });
+        }),
+        http.get('/api/users/fast', async () => {
+          await delay(20);
+          return HttpResponse.json({ id: 'fast', name: 'Fast User' });
+        }),
+      );
+
+      const { rerender } = render(<UserDetail userId="slow" />);
+      await flush();
+
+      // Dep change to fast before slow resolves
+      rerender(<UserDetail userId="fast" />);
+      await flush();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('name').textContent).toBe('Fast User');
+      });
+
+      // Wait past slow response time — should still show fast data
+      await new Promise((r) => setTimeout(r, 600));
+      expect(screen.getByTestId('name').textContent).toBe('Fast User');
+    });
+
+    it('defense in depth: set() is no-op on disposed VM even without disposeSignal', async () => {
+      class NoSignalVM extends ViewModel<UserState> {
+        protected onInit() {
+          const { userId } = this.state;
+          if (!userId) return;
+          this.load();
+        }
+
+        async load() {
+          const { userId } = this.state;
+          if (!userId) return;
+          // Intentionally NOT passing disposeSignal — testing second safety layer
+          const res = await fetch(`/api/users/${userId}`);
+          const data = await res.json();
+          this.set({ data });
+        }
+      }
+
+      function NoSignalComp({ userId }: { userId: string }) {
+        const [state] = useLocal(NoSignalVM, { userId, data: null }, [userId]);
+        return (
+          <div>
+            <span data-testid="name">{state.data?.name ?? 'none'}</span>
+          </div>
+        );
+      }
+
+      server.use(
+        http.get('/api/users/old', async () => {
+          await delay(300);
+          return HttpResponse.json({ id: 'old', name: 'Old User' });
+        }),
+        http.get('/api/users/new', async () => {
+          await delay(20);
+          return HttpResponse.json({ id: 'new', name: 'New User' });
+        }),
+      );
+
+      const { rerender } = render(<NoSignalComp userId="old" />);
+      await flush();
+
+      // Dep change before old resolves
+      rerender(<NoSignalComp userId="new" />);
+      await flush();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('name').textContent).toBe('New User');
+      });
+
+      // Wait for old response to arrive
+      await new Promise((r) => setTimeout(r, 400));
+
+      // Old VM's set() was a no-op — still showing new data
+      expect(screen.getByTestId('name').textContent).toBe('New User');
+    });
+  });
+
+  describe('signal propagation', () => {
+    it('signal propagates through service layer', async () => {
+      let abortFired = false;
+
+      server.use(
+        http.get('/api/users/:id', async ({ request }) => {
+          await new Promise<void>((resolve, reject) => {
+            const timer = setTimeout(resolve, 500);
+            request.signal.addEventListener('abort', () => {
+              clearTimeout(timer);
+              abortFired = true;
+              reject(request.signal.reason);
+            });
+          });
+          return HttpResponse.json({ id: 'x', name: 'X' });
+        }),
+      );
+
+      const { rerender } = render(<UserDetail userId="first" />);
+      await flush(); // let init + fetch start
+
+      // Dep change — old VM disposed, fetch aborted
+      rerender(<UserDetail userId="second" />);
+      await flush();
+
+      // Give time for abort event to propagate
+      await new Promise((r) => setTimeout(r, 50));
+      expect(abortFired).toBe(true);
+    });
+
+    it('multiple parallel fetches all abort on dep change', async () => {
+      const abortedEndpoints = new Set<string>();
+
+      server.use(
+        http.get('/api/users/:id', async ({ request, params }) => {
+          await new Promise<void>((resolve, reject) => {
+            const timer = setTimeout(resolve, 500);
+            request.signal.addEventListener('abort', () => {
+              clearTimeout(timer);
+              abortedEndpoints.add(`users-${params.id}`);
+              reject(request.signal.reason);
+            });
+          });
+          return HttpResponse.json({ id: params.id, name: `User ${params.id}` });
+        }),
+        http.get('/api/profiles/:id', async ({ request, params }) => {
+          await new Promise<void>((resolve, reject) => {
+            const timer = setTimeout(resolve, 500);
+            request.signal.addEventListener('abort', () => {
+              clearTimeout(timer);
+              abortedEndpoints.add(`profiles-${params.id}`);
+              reject(request.signal.reason);
+            });
+          });
+          return HttpResponse.json({ id: params.id, bio: 'Test bio' });
+        }),
+      );
+
+      interface MultiState {
+        userId: string;
+        data: any;
+        profile: any;
+      }
+
+      class MultiVM extends ViewModel<MultiState> {
+        protected onInit() {
+          this.load();
+        }
+
+        async load() {
+          const { userId } = this.state;
+          const [data, profile] = await Promise.all([
+            fetch(`/api/users/${userId}`, { signal: this.disposeSignal }).then((r) => r.json()),
+            fetch(`/api/profiles/${userId}`, { signal: this.disposeSignal }).then((r) => r.json()),
+          ]);
+          this.set({ data, profile });
+        }
+      }
+
+      function MultiComp({ userId }: { userId: string }) {
+        const [state] = useLocal(MultiVM, { userId, data: null, profile: null }, [userId]);
+        return <span data-testid="multi">{state.data?.name ?? 'none'}</span>;
+      }
+
+      const { rerender } = render(<MultiComp userId="abc" />);
+      await flush(); // let init + both fetches start
+
+      // Dep change — old VM disposed, both fetches aborted
+      rerender(<MultiComp userId="xyz" />);
+      await flush();
+
+      // Give time for abort events to propagate
+      await new Promise((r) => setTimeout(r, 100));
+
+      expect(abortedEndpoints.has('users-abc')).toBe(true);
+      expect(abortedEndpoints.has('profiles-abc')).toBe(true);
+    });
+  });
+});