mvc-kit 2.12.0 → 2.12.1

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

@@ -0,0 +1,692 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render, screen, act } from '@testing-library/react';
+import { useState } from 'react';
+import { vi } from 'vitest';
+import { ViewModel } from '../ViewModel';
+import { Controller } from '../Controller';
+import { Trackable } from '../Trackable';
+import { useLocal } from './use-local';
+
+interface CounterState {
+  count: number;
+}
+
+class CounterVM extends ViewModel<CounterState> {
+  static instanceCount = 0;
+
+  constructor(initial = 0) {
+    super({ count: initial });
+    CounterVM.instanceCount++;
+  }
+
+  increment() {
+    this.set((prev) => ({ count: prev.count + 1 }));
+  }
+
+  protected onDispose() {
+    CounterVM.instanceCount--;
+  }
+}
+
+function Counter({ initial = 0 }: { initial?: number }) {
+  const [state, vm] = useLocal(CounterVM, initial);
+  return (
+    <div>
+      <div data-testid="count">{state.count}</div>
+      <button onClick={() => vm.increment()}>Increment</button>
+    </div>
+  );
+}
+
+describe('useLocal', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    CounterVM.instanceCount = 0;
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('with Subscribable (class-based)', () => {
+    it('should return state and vm tuple', () => {
+      render(<Counter initial={5} />);
+      expect(screen.getByTestId('count').textContent).toBe('5');
+    });
+
+    it('should create separate instances for each component', () => {
+      function App() {
+        return (
+          <>
+            <Counter initial={0} />
+            <Counter initial={10} />
+          </>
+        );
+      }
+
+      render(<App />);
+      const counts = screen.getAllByTestId('count');
+      expect(counts).toHaveLength(2);
+      expect(counts[0].textContent).toBe('0');
+      expect(counts[1].textContent).toBe('10');
+      expect(CounterVM.instanceCount).toBe(2);
+
+      act(() => {
+        screen.getAllByRole('button')[0].click();
+      });
+
+      expect(counts[0].textContent).toBe('1');
+      expect(counts[1].textContent).toBe('10');
+    });
+
+    it('should dispose on unmount', () => {
+      const { unmount } = render(<Counter />);
+      expect(CounterVM.instanceCount).toBe(1);
+
+      unmount();
+      vi.runAllTimers();
+
+      expect(CounterVM.instanceCount).toBe(0);
+    });
+
+    it('should maintain same instance across re-renders', () => {
+      const { rerender } = render(<Counter initial={0} />);
+      expect(CounterVM.instanceCount).toBe(1);
+
+      act(() => {
+        screen.getByRole('button').click();
+      });
+      expect(screen.getByTestId('count').textContent).toBe('1');
+
+      rerender(<Counter initial={0} />);
+
+      expect(CounterVM.instanceCount).toBe(1);
+      expect(screen.getByTestId('count').textContent).toBe('1');
+    });
+  });
+
+  describe('with Subscribable (factory-based)', () => {
+    function FactoryCounter({ initial = 0 }: { initial?: number }) {
+      const [state, vm] = useLocal(() => new CounterVM(initial));
+      return (
+        <div>
+          <div data-testid="factory-count">{state.count}</div>
+          <button onClick={() => vm.increment()}>Increment</button>
+        </div>
+      );
+    }
+
+    it('should return state and vm tuple', () => {
+      render(<FactoryCounter initial={7} />);
+      expect(screen.getByTestId('factory-count').textContent).toBe('7');
+    });
+
+    it('should dispose on unmount', () => {
+      const { unmount } = render(<FactoryCounter />);
+      expect(CounterVM.instanceCount).toBe(1);
+
+      unmount();
+      vi.runAllTimers();
+
+      expect(CounterVM.instanceCount).toBe(0);
+    });
+
+    it('should maintain same instance across re-renders', () => {
+      const { rerender } = render(<FactoryCounter initial={0} />);
+      expect(CounterVM.instanceCount).toBe(1);
+
+      act(() => {
+        screen.getByRole('button').click();
+      });
+      expect(screen.getByTestId('factory-count').textContent).toBe('1');
+
+      rerender(<FactoryCounter initial={0} />);
+      expect(CounterVM.instanceCount).toBe(1);
+    });
+  });
+
+  describe('with Disposable-only (class-based)', () => {
+    class CountController extends Controller {
+      private value = 0;
+      onDisposeCalled = false;
+
+      increment(): number {
+        this.value++;
+        return this.value;
+      }
+
+      getValue(): number {
+        return this.value;
+      }
+
+      protected onDispose() {
+        this.onDisposeCalled = true;
+      }
+    }
+
+    function ControllerComponent() {
+      const controller = useLocal(CountController);
+      const [count, setCount] = useState(controller.getValue());
+
+      return (
+        <div>
+          <div data-testid="ctrl-count">{count}</div>
+          <button onClick={() => setCount(controller.increment())}>Increment</button>
+        </div>
+      );
+    }
+
+    it('should return controller instance directly', () => {
+      render(<ControllerComponent />);
+      expect(screen.getByTestId('ctrl-count').textContent).toBe('0');
+    });
+
+    it('should call controller methods', () => {
+      render(<ControllerComponent />);
+
+      act(() => {
+        screen.getByRole('button').click();
+      });
+
+      expect(screen.getByTestId('ctrl-count').textContent).toBe('1');
+    });
+
+    it('should dispose on unmount', () => {
+      let controller: CountController;
+
+      function Wrapper() {
+        controller = useLocal(CountController);
+        return null;
+      }
+
+      const { unmount } = render(<Wrapper />);
+      expect(controller!.disposed).toBe(false);
+
+      unmount();
+      vi.runAllTimers();
+      expect(controller!.disposed).toBe(true);
+      expect(controller!.onDisposeCalled).toBe(true);
+    });
+  });
+
+  describe('with Disposable-only (factory-based)', () => {
+    class ConfigurableController extends Controller {
+      readonly config: string;
+      constructor(config: string) {
+        super();
+        this.config = config;
+      }
+    }
+
+    function FactoryControllerComponent({ config }: { config: string }) {
+      const controller = useLocal(() => new ConfigurableController(config));
+      return <div data-testid="config">{controller.config}</div>;
+    }
+
+    it('should support factory pattern for controllers', () => {
+      render(<FactoryControllerComponent config="test-config" />);
+      expect(screen.getByTestId('config').textContent).toBe('test-config');
+    });
+
+    it('should dispose on unmount', () => {
+      let controller: ConfigurableController;
+
+      function Wrapper() {
+        controller = useLocal(() => new ConfigurableController('test'));
+        return null;
+      }
+
+      const { unmount } = render(<Wrapper />);
+      expect(controller!.disposed).toBe(false);
+
+      unmount();
+      vi.runAllTimers();
+      expect(controller!.disposed).toBe(true);
+    });
+  });
+
+  describe('with deps', () => {
+    interface UserState {
+      userId: string;
+      data: string | null;
+    }
+
+    class UserVM extends ViewModel<UserState> {
+      static instanceCount = 0;
+      initCount = 0;
+
+      constructor(state: UserState) {
+        super(state);
+        UserVM.instanceCount++;
+      }
+
+      protected onInit() {
+        this.initCount++;
+      }
+
+      protected onDispose() {
+        UserVM.instanceCount--;
+      }
+
+      setData(data: string) {
+        this.set({ data });
+      }
+    }
+
+    beforeEach(() => {
+      UserVM.instanceCount = 0;
+    });
+
+    it('disposes old and creates new on dep change (class + deps)', () => {
+      function UserDetail({ userId }: { userId: string }) {
+        const [state] = useLocal(UserVM, { userId, data: null }, [userId]);
+        return <div data-testid="userId">{state.userId}</div>;
+      }
+
+      const { rerender } = render(<UserDetail userId="1" />);
+      expect(UserVM.instanceCount).toBe(1);
+      expect(screen.getByTestId('userId').textContent).toBe('1');
+
+      rerender(<UserDetail userId="2" />);
+      vi.runAllTimers();
+
+      expect(UserVM.instanceCount).toBe(1);
+      expect(screen.getByTestId('userId').textContent).toBe('2');
+    });
+
+    it('keeps same instance when deps are stable', () => {
+      let latestVm: UserVM | null = null;
+
+      function UserDetail({ userId }: { userId: string }) {
+        const [state, vm] = useLocal(UserVM, { userId, data: null }, [userId]);
+        latestVm = vm;
+        return <div data-testid="userId">{state.userId}</div>;
+      }
+
+      const { rerender } = render(<UserDetail userId="1" />);
+      const vm1 = latestVm!;
+      expect(UserVM.instanceCount).toBe(1);
+
+      rerender(<UserDetail userId="1" />);
+      expect(UserVM.instanceCount).toBe(1);
+      expect(latestVm).toBe(vm1);
+    });
+
+    it('disposes old and creates new on dep change (factory + deps)', () => {
+      function FactoryUserDetail({ userId }: { userId: string }) {
+        const [state] = useLocal(() => new UserVM({ userId, data: null }), [userId]);
+        return <div data-testid="userId">{state.userId}</div>;
+      }
+
+      const { rerender } = render(<FactoryUserDetail userId="1" />);
+      expect(UserVM.instanceCount).toBe(1);
+      expect(screen.getByTestId('userId').textContent).toBe('1');
+
+      rerender(<FactoryUserDetail userId="2" />);
+      vi.runAllTimers();
+
+      expect(UserVM.instanceCount).toBe(1);
+      expect(screen.getByTestId('userId').textContent).toBe('2');
+    });
+
+    it('calls init on mount and after each dep change', () => {
+      let latestVm: UserVM | null = null;
+
+      function UserDetail({ userId }: { userId: string }) {
+        const [, vm] = useLocal(UserVM, { userId, data: null }, [userId]);
+        latestVm = vm;
+        return <div>{userId}</div>;
+      }
+
+      render(<UserDetail userId="1" />);
+      const vm1 = latestVm!;
+      expect(vm1.initCount).toBe(1);
+
+      // Trigger dep change — re-render triggers effect re-run but we need act
+      act(() => {
+        render(<UserDetail userId="2" />);
+      });
+      const vm2 = latestVm!;
+      expect(vm2).not.toBe(vm1);
+      expect(vm2.initCount).toBe(1);
+    });
+
+    it('multi deps triggers on either element changing', () => {
+      function Multi({ a, b }: { a: string; b: number }) {
+        const [state] = useLocal(UserVM, { userId: a, data: String(b) }, [a, b]);
+        return <div data-testid="data">{state.userId}-{state.data}</div>;
+      }
+
+      const { rerender } = render(<Multi a="x" b={1} />);
+      expect(UserVM.instanceCount).toBe(1);
+
+      rerender(<Multi a="x" b={2} />);
+      vi.runAllTimers();
+      expect(UserVM.instanceCount).toBe(1);
+      expect(screen.getByTestId('data').textContent).toBe('x-2');
+
+      rerender(<Multi a="y" b={2} />);
+      vi.runAllTimers();
+      expect(UserVM.instanceCount).toBe(1);
+      expect(screen.getByTestId('data').textContent).toBe('y-2');
+    });
+
+    it('disposes on unmount with deps', () => {
+      function UserDetail({ userId }: { userId: string }) {
+        const [state] = useLocal(UserVM, { userId, data: null }, [userId]);
+        return <div>{state.userId}</div>;
+      }
+
+      const { unmount } = render(<UserDetail userId="1" />);
+      expect(UserVM.instanceCount).toBe(1);
+
+      unmount();
+      vi.runAllTimers();
+      expect(UserVM.instanceCount).toBe(0);
+    });
+
+    it('aborts old disposeSignal on dep change', () => {
+      const signals: AbortSignal[] = [];
+
+      class SignalVM extends ViewModel<UserState> {
+        static instanceCount = 0;
+
+        constructor(state: UserState) {
+          super(state);
+          SignalVM.instanceCount++;
+        }
+
+        protected onInit() {
+          signals.push(this.disposeSignal);
+        }
+
+        protected onDispose() {
+          SignalVM.instanceCount--;
+        }
+      }
+
+      function Comp({ userId }: { userId: string }) {
+        const [state] = useLocal(SignalVM, { userId, data: null }, [userId]);
+        return <div>{state.userId}</div>;
+      }
+
+      const { rerender } = render(<Comp userId="1" />);
+      expect(signals).toHaveLength(1);
+      expect(signals[0].aborted).toBe(false);
+
+      rerender(<Comp userId="2" />);
+      expect(signals).toHaveLength(2);
+      expect(signals[0].aborted).toBe(true);
+      expect(signals[1].aborted).toBe(false);
+
+      SignalVM.instanceCount = 0;
+    });
+
+    it('rapid dep changes — only final instance alive', () => {
+      function UserDetail({ userId }: { userId: string }) {
+        const [state] = useLocal(UserVM, { userId, data: null }, [userId]);
+        return <div data-testid="userId">{state.userId}</div>;
+      }
+
+      const { rerender } = render(<UserDetail userId="1" />);
+      rerender(<UserDetail userId="2" />);
+      rerender(<UserDetail userId="3" />);
+      rerender(<UserDetail userId="4" />);
+      vi.runAllTimers();
+
+      expect(UserVM.instanceCount).toBe(1);
+      expect(screen.getByTestId('userId').textContent).toBe('4');
+    });
+
+    it('existing behavior unchanged without deps', () => {
+      render(<Counter initial={5} />);
+      expect(screen.getByTestId('count').textContent).toBe('5');
+      expect(CounterVM.instanceCount).toBe(1);
+    });
+
+    it('factory + Disposable-only + deps recreates on change', () => {
+      class TimerCtrl extends Controller {
+        static instanceCount = 0;
+        readonly id: string;
+
+        constructor(id: string) {
+          super();
+          this.id = id;
+          TimerCtrl.instanceCount++;
+        }
+
+        protected onDispose() {
+          TimerCtrl.instanceCount--;
+        }
+      }
+
+      function Comp({ roomId }: { roomId: string }) {
+        const ctrl = useLocal(() => new TimerCtrl(roomId), [roomId]);
+        return <div data-testid="roomId">{ctrl.id}</div>;
+      }
+
+      const { rerender } = render(<Comp roomId="a" />);
+      expect(TimerCtrl.instanceCount).toBe(1);
+      expect(screen.getByTestId('roomId').textContent).toBe('a');
+
+      rerender(<Comp roomId="b" />);
+      vi.runAllTimers();
+      expect(TimerCtrl.instanceCount).toBe(1);
+      expect(screen.getByTestId('roomId').textContent).toBe('b');
+    });
+  });
+
+  describe('init lifecycle', () => {
+    it('should auto-call init on mount for Subscribable', () => {
+      let initCalled = false;
+      class InitVM extends ViewModel<CounterState> {
+        constructor() {
+          super({ count: 0 });
+        }
+        protected onInit() {
+          initCalled = true;
+        }
+        increment() {
+          this.set((prev) => ({ count: prev.count + 1 }));
+        }
+      }
+
+      function Comp() {
+        const [state] = useLocal(InitVM);
+        return <div data-testid="count">{state.count}</div>;
+      }
+
+      render(<Comp />);
+      expect(initCalled).toBe(true);
+    });
+
+    it('should call init only once across re-renders', () => {
+      let initCount = 0;
+      class InitVM extends ViewModel<CounterState> {
+        constructor() {
+          super({ count: 0 });
+        }
+        protected onInit() {
+          initCount++;
+        }
+        increment() {
+          this.set((prev) => ({ count: prev.count + 1 }));
+        }
+      }
+
+      function Comp() {
+        const [state, vm] = useLocal(InitVM);
+        return (
+          <div>
+            <div data-testid="count">{state.count}</div>
+            <button onClick={() => vm.increment()}>+</button>
+          </div>
+        );
+      }
+
+      render(<Comp />);
+      expect(initCount).toBe(1);
+
+      act(() => {
+        screen.getByRole('button').click();
+      });
+      expect(initCount).toBe(1);
+    });
+
+    it('should auto-call init for Disposable-only classes', () => {
+      let initCalled = false;
+      class InitCtrl extends Controller {
+        protected onInit() {
+          initCalled = true;
+        }
+      }
+
+      function Comp() {
+        useLocal(InitCtrl);
+        return null;
+      }
+
+      render(<Comp />);
+      expect(initCalled).toBe(true);
+    });
+
+    it('should call init before dispose on unmount cycle', () => {
+      const order: string[] = [];
+      class LifecycleVM extends ViewModel<CounterState> {
+        constructor() {
+          super({ count: 0 });
+        }
+        protected onInit() {
+          order.push('init');
+        }
+        protected onDispose() {
+          order.push('dispose');
+        }
+        increment() {
+          this.set((prev) => ({ count: prev.count + 1 }));
+        }
+      }
+
+      function Comp() {
+        const [state] = useLocal(LifecycleVM);
+        return <div>{state.count}</div>;
+      }
+
+      const { unmount } = render(<Comp />);
+      expect(order).toEqual(['init']);
+
+      unmount();
+      vi.runAllTimers();
+      expect(order).toEqual(['init', 'dispose']);
+    });
+  });
+
+  describe('with subscribe-only (Trackable)', () => {
+    class TrackableCounter extends Trackable {
+      private _count = 0;
+
+      get count() { return this._count; }
+
+      increment() {
+        this._count++;
+        this.notify();
+      }
+    }
+
+    function TrackableComponent() {
+      const counter = useLocal(TrackableCounter);
+      return (
+        <div>
+          <div data-testid="trackable-count">{counter.count}</div>
+          <button onClick={() => counter.increment()}>+</button>
+        </div>
+      );
+    }
+
+    it('should return instance directly (not tuple)', () => {
+      render(<TrackableComponent />);
+      expect(screen.getByTestId('trackable-count').textContent).toBe('0');
+    });
+
+    it('should trigger re-render when notify() fires', () => {
+      render(<TrackableComponent />);
+      expect(screen.getByTestId('trackable-count').textContent).toBe('0');
+
+      act(() => {
+        screen.getByRole('button').click();
+      });
+
+      expect(screen.getByTestId('trackable-count').textContent).toBe('1');
+    });
+
+    it('should dispose on unmount', () => {
+      let counter: TrackableCounter;
+
+      function Wrapper() {
+        counter = useLocal(TrackableCounter);
+        return null;
+      }
+
+      const { unmount } = render(<Wrapper />);
+      expect(counter!.disposed).toBe(false);
+
+      unmount();
+      vi.runAllTimers();
+      expect(counter!.disposed).toBe(true);
+    });
+
+    it('should support factory pattern', () => {
+      function FactoryComp() {
+        const counter = useLocal(() => new TrackableCounter());
+        return (
+          <div>
+            <div data-testid="factory-trackable">{counter.count}</div>
+            <button onClick={() => counter.increment()}>+</button>
+          </div>
+        );
+      }
+
+      render(<FactoryComp />);
+      expect(screen.getByTestId('factory-trackable').textContent).toBe('0');
+
+      act(() => {
+        screen.getByRole('button').click();
+      });
+      expect(screen.getByTestId('factory-trackable').textContent).toBe('1');
+    });
+
+    it('should support deps (recreates on change)', () => {
+      class ConfigTrackable extends Trackable {
+        static instanceCount = 0;
+        readonly id: string;
+
+        constructor(id: string) {
+          super();
+          this.id = id;
+          ConfigTrackable.instanceCount++;
+        }
+
+        protected onDispose() {
+          ConfigTrackable.instanceCount--;
+        }
+      }
+
+      function Comp({ id }: { id: string }) {
+        const t = useLocal(() => new ConfigTrackable(id), [id]);
+        return <div data-testid="config-id">{t.id}</div>;
+      }
+
+      ConfigTrackable.instanceCount = 0;
+      const { rerender } = render(<Comp id="a" />);
+      expect(ConfigTrackable.instanceCount).toBe(1);
+      expect(screen.getByTestId('config-id').textContent).toBe('a');
+
+      rerender(<Comp id="b" />);
+      vi.runAllTimers();
+      expect(ConfigTrackable.instanceCount).toBe(1);
+      expect(screen.getByTestId('config-id').textContent).toBe('b');
+    });
+  });
+});