test: add unit and integration tests for utils and hooks

Author: Just-Insane

knip.json

@@ -9,7 +9,6 @@
     "buffer",
     "@element-hq/element-call-embedded",
     "@matrix-org/matrix-sdk-crypto-wasm",
-    "@testing-library/react",
     "@testing-library/user-event"
   ],
   "ignoreBinaries": ["knope"],

src/app/hooks/useAsyncCallback.test.tsx

@@ -0,0 +1,126 @@
+// Integration tests: renderHook exercises the full React lifecycle including
+// useAlive (cleanup on unmount) and retry-race-condition logic.
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useAsyncCallback, AsyncStatus } from './useAsyncCallback';
+
+describe('useAsyncCallback', () => {
+  it('starts in Idle state', () => {
+    const { result } = renderHook(() => useAsyncCallback(async () => 'value'));
+    const [state] = result.current;
+    expect(state.status).toBe(AsyncStatus.Idle);
+  });
+
+  it('transitions to Success with returned data', async () => {
+    const { result } = renderHook(() => useAsyncCallback(async () => 42));
+
+    await act(async () => {
+      await result.current[1]();
+    });
+
+    expect(result.current[0]).toEqual({ status: AsyncStatus.Success, data: 42 });
+  });
+
+  it('transitions to Error when the async function throws', async () => {
+    const boom = new Error('boom');
+    const { result } = renderHook(() =>
+      useAsyncCallback(async () => {
+        throw boom;
+      })
+    );
+
+    await act(async () => {
+      await result.current[1]().catch(() => {});
+    });
+
+    expect(result.current[0]).toEqual({ status: AsyncStatus.Error, error: boom });
+  });
+
+  it('ignores the result of a stale (superseded) request', async () => {
+    // Two calls are made. The first resolves AFTER the second — its result should
+    // be discarded so the final state reflects only the second call.
+    let resolveFirst!: (v: string) => void;
+    let resolveSecond!: (v: string) => void;
+    let callCount = 0;
+
+    const { result } = renderHook(() =>
+      useAsyncCallback(async () => {
+        callCount += 1;
+        if (callCount === 1) {
+          return new Promise<string>((res) => {
+            resolveFirst = res;
+          });
+        }
+        return new Promise<string>((res) => {
+          resolveSecond = res;
+        });
+      })
+    );
+
+    // Fire both requests before either resolves
+    act(() => {
+      result.current[1]();
+    });
+    act(() => {
+      result.current[1]();
+    });
+
+    // Resolve the stale first request — its result should be ignored
+    await act(async () => {
+      resolveFirst('stale');
+      await Promise.resolve();
+    });
+
+    // Resolve the fresh second request — this should be the final state
+    await act(async () => {
+      resolveSecond('fresh');
+      await Promise.resolve();
+    });
+
+    const successStates = result.current[0];
+    expect(successStates.status).toBe(AsyncStatus.Success);
+    if (successStates.status === AsyncStatus.Success) {
+      expect(successStates.data).toBe('fresh');
+    }
+  });
+
+  it('does not call setState after the component unmounts', async () => {
+    let resolveAfterUnmount!: (v: string) => void;
+    const stateChanges: string[] = [];
+
+    const { result, unmount } = renderHook(() =>
+      useAsyncCallback(
+        async () =>
+          new Promise<string>((res) => {
+            resolveAfterUnmount = res;
+          })
+      )
+    );
+
+    // Track state changes via the third returned setter
+    const [, callback, setState] = result.current;
+    const originalSetState = setState;
+    // Patch setState to record calls
+    result.current[2] = (s) => {
+      stateChanges.push(typeof s === 'function' ? 'fn' : s.status);
+      originalSetState(s);
+    };
+
+    act(() => {
+      callback();
+    });
+
+    unmount();
+
+    // Resolve after unmount — alive() returns false, so state should NOT be updated
+    await act(async () => {
+      resolveAfterUnmount('late');
+      await Promise.resolve();
+    });
+
+    // Only the Loading state (queued before unmount) may have been emitted;
+    // Success must not appear after unmount.
+    const successCalls = stateChanges.filter((s) => s === AsyncStatus.Success);
+    expect(successCalls).toHaveLength(0);
+  });
+});

src/app/hooks/usePreviousValue.test.tsx

@@ -0,0 +1,51 @@
+// Integration tests: renders a real React component tree via renderHook.
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { usePreviousValue } from './usePreviousValue';
+
+describe('usePreviousValue', () => {
+  it('returns the initial value on the first render', () => {
+    const { result } = renderHook(() => usePreviousValue('current', 'initial'));
+    expect(result.current).toBe('initial');
+  });
+
+  it('returns the previous value after a prop update', () => {
+    const { result, rerender } = renderHook(
+      ({ value }: { value: string }) => usePreviousValue(value, 'initial'),
+      { initialProps: { value: 'first' } }
+    );
+
+    // Before any update: returns initial
+    expect(result.current).toBe('initial');
+
+    rerender({ value: 'second' });
+    expect(result.current).toBe('first');
+
+    rerender({ value: 'third' });
+    expect(result.current).toBe('second');
+  });
+
+  it('works with numeric values', () => {
+    const { result, rerender } = renderHook(({ n }: { n: number }) => usePreviousValue(n, 0), {
+      initialProps: { n: 1 },
+    });
+
+    expect(result.current).toBe(0);
+    rerender({ n: 42 });
+    expect(result.current).toBe(1);
+  });
+
+  it('works with object values (reference equality)', () => {
+    const a = { x: 1 };
+    const b = { x: 2 };
+
+    const { result, rerender } = renderHook(
+      ({ obj }: { obj: { x: number } }) => usePreviousValue(obj, a),
+      { initialProps: { obj: a } }
+    );
+
+    expect(result.current).toBe(a);
+    rerender({ obj: b });
+    expect(result.current).toBe(a);
+  });
+});

src/app/hooks/useTimeoutToggle.test.tsx

@@ -0,0 +1,101 @@
+// Integration tests: uses fake timers to control setTimeout behaviour.
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useTimeoutToggle } from './useTimeoutToggle';
+
+describe('useTimeoutToggle', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('starts with the default initial value of false', () => {
+    const { result } = renderHook(() => useTimeoutToggle());
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('becomes true after trigger() is called', () => {
+    const { result } = renderHook(() => useTimeoutToggle());
+    act(() => {
+      result.current[1]();
+    });
+    expect(result.current[0]).toBe(true);
+  });
+
+  it('resets to false after the default 1500ms duration', () => {
+    const { result } = renderHook(() => useTimeoutToggle());
+
+    act(() => {
+      result.current[1]();
+    });
+    expect(result.current[0]).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('does not reset before the duration has elapsed', () => {
+    const { result } = renderHook(() => useTimeoutToggle(500));
+
+    act(() => {
+      result.current[1]();
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(499);
+    });
+    expect(result.current[0]).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('re-triggering before timeout resets the countdown', () => {
+    const { result } = renderHook(() => useTimeoutToggle(1000));
+
+    act(() => {
+      result.current[1](); // t=0: trigger
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(800); // t=800
+    });
+
+    act(() => {
+      result.current[1](); // t=800: re-trigger, timer resets
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(800); // t=1600 — only 800ms since re-trigger
+    });
+    expect(result.current[0]).toBe(true); // still active
+
+    act(() => {
+      vi.advanceTimersByTime(200); // t=1800 — 1000ms since re-trigger
+    });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('supports a custom initial value of true (inverted toggle)', () => {
+    const { result } = renderHook(() => useTimeoutToggle(1500, true));
+
+    expect(result.current[0]).toBe(true);
+
+    act(() => {
+      result.current[1](); // trigger → false
+    });
+    expect(result.current[0]).toBe(false);
+
+    act(() => {
+      vi.advanceTimersByTime(1500); // resets back to true
+    });
+    expect(result.current[0]).toBe(true);
+  });
+});