@weasel-js/labkit 1.4.4 → 1.5.1

package/src/lab/Lab.test.tsx

@@ -1,10 +1,9 @@
-import { act, render, screen } from '@testing-library/react';
-import type { ReactNode } from 'react';
-import { describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { type ReactNode, useEffect } from 'react';
+import { describe, expect, it } from 'vitest';
 import type { Instrument } from '../instrument/types';
 import { createMemoryAdapter } from '../state/adapters';
-import { labDocumentKey } from '../state/document';
-import { Lab } from './Lab';
+import { Lab, type LabProps } from './Lab';
 import { LabContext, type LabContextValue } from './LabContext';
 
 const stub: Instrument = {
@@ -33,10 +32,10 @@ function CaptureLab({ children }: { children?: ReactNode }) {
   );
 }
 
-function mountLab(props: Partial<Parameters<typeof Lab>[0]> = {}) {
+function mountLab(props: Partial<Record<keyof LabProps, unknown>> = {}) {
   labRef = null;
   return render(
-    <Lab instruments={[stub, stubB]} defaultInstrument="Stub" {...props}>
+    <Lab {...({ instruments: [stub, stubB], defaultInstrument: 'Stub', ...props } as LabProps)}>
       <CaptureLab />
     </Lab>,
   );
@@ -142,9 +141,8 @@ describe('<Lab>', () => {
   // the only thing positioned to collect them off the instruments. They went
   // uncollected for months, and an instrument holding anything JSON drops
   // lost it with no error.
-  it('gives the store the serializers its instruments declare', () => {
-    vi.useFakeTimers();
-    const storage = createMemoryAdapter();
+  it('gives the store the serializers its instruments declare', async () => {
+    const backing = new Map<string, unknown>();
     const mapped: Instrument = {
       ...stub,
       name: 'Mapped',
@@ -152,15 +150,169 @@ describe('<Lab>', () => {
       serialize: (state) => ({ seen: [...(state as { seen: Set<string> }).seen] }),
       deserialize: (data) => ({ seen: new Set((data as { seen: string[] }).seen) }),
     };
+    const storage = () => createMemoryAdapter(backing);
 
-    render(
-      <Lab instruments={[mapped]} defaultInstrument="Mapped" storage={storage} storageKey="s" />,
+    const first = render(
+      <Lab instruments={[mapped]} defaultInstrument="Mapped" storage={storage()} storageKey="s" />,
     );
-    act(() => vi.advanceTimersByTime(500));
-    expect(storage.read(labDocumentKey('s')) ?? '').toContain('"seen":["a"]');
-    vi.useRealTimers();
+    await waitFor(() => expect(JSON.stringify([...backing.values()])).toContain('"seen":["a"]'));
+    first.unmount();
 
-    mountLab({ instruments: [mapped], defaultInstrument: 'Mapped', storage, storageKey: 's' });
+    mountLab({
+      instruments: [mapped],
+      defaultInstrument: 'Mapped',
+      storage: storage(),
+      storageKey: 's',
+    });
+    await waitFor(() => expect(labRef?.trials[0]).toBeDefined());
     expect((labRef?.trials[0]?.state as { seen: Set<string> }).seen).toEqual(new Set(['a']));
   });
 });
+
+describe('instruments that change while mounted', () => {
+  it('fills an open trial’s config before its replaced instrument renders', () => {
+    const v1: Instrument = {
+      name: 'Grow',
+      defaultConfig: () => ({ size: 1 }),
+      initialState: () => ({}),
+      render: () => null,
+    };
+    const seenByV2: Array<{ color?: string }> = [];
+    const v2: Instrument = {
+      ...v1,
+      defaultConfig: () => ({ size: 1, color: 'red' }),
+      render: ({ config }) => {
+        seenByV2.push(config as { color?: string });
+        return null;
+      },
+    };
+    const view = render(
+      <Lab instruments={[v1]} defaultInstrument="Grow">
+        <CaptureLab />
+      </Lab>,
+    );
+    view.rerender(
+      <Lab instruments={[v2]} defaultInstrument="Grow">
+        <CaptureLab />
+      </Lab>,
+    );
+    expect(labRef?.trials[0]?.config).toEqual({ size: 1, color: 'red' });
+    expect(seenByV2.length).toBeGreaterThan(0);
+    expect(seenByV2.every((c) => c.color === 'red')).toBe(true);
+  });
+
+  it('opens a trial of an instrument added after mount', () => {
+    const later: Instrument = { ...stub, name: 'Later' };
+    const view = render(
+      <Lab instruments={[stub]} defaultInstrument="Stub">
+        <CaptureLab />
+      </Lab>,
+    );
+    view.rerender(
+      <Lab instruments={[stub, later]} defaultInstrument="Stub">
+        <CaptureLab />
+      </Lab>,
+    );
+    act(() => labRef?.addTrial('Later'));
+    expect(labRef?.trials.map((t) => t.instrumentName)).toEqual(['Stub', 'Later']);
+    expect(screen.queryByText(/Unknown instrument/)).toBeNull();
+  });
+
+  it('keeps a trial’s content mounted across an instrument swap', () => {
+    let mounts = 0;
+    function Probe() {
+      useEffect(() => {
+        mounts += 1;
+      }, []);
+      return <p>probe</p>;
+    }
+    const v1: Instrument = {
+      name: 'Keep',
+      defaultConfig: () => ({}),
+      initialState: () => ({}),
+      render: () => <Probe />,
+    };
+    const v2: Instrument = { ...v1, defaultConfig: () => ({ extra: 1 }) };
+    const view = render(<Lab instruments={[v1]} defaultInstrument="Keep" />);
+    view.rerender(<Lab instruments={[v2]} defaultInstrument="Keep" />);
+    expect(mounts).toBe(1);
+  });
+});
+
+describe('focused trial', () => {
+  const regions = () => screen.getAllByRole('region', { name: /trial/i });
+  const framed: Instrument = {
+    ...stub,
+    name: 'Framed',
+    render: () => <iframe title="story frame" />,
+  };
+
+  it('is the only trial until another opens, then the one that opened', () => {
+    mountLab();
+    expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id);
+    act(() => labRef?.addTrial('StubB'));
+    expect(labRef?.focusedTrialId).toBe(labRef?.trials[1]?.id);
+    act(() => labRef?.cloneTrial(labRef?.trials[0]?.id ?? ''));
+    expect(labRef?.focusedTrialId).toBe(labRef?.trials[1]?.id);
+    expect(labRef?.trials.map((t) => t.instrumentName)).toEqual(['Stub', 'Stub', 'StubB']);
+  });
+
+  it('moves to a trial a pointer goes down in', () => {
+    mountLab();
+    act(() => labRef?.addTrial('StubB'));
+    fireEvent.pointerDown(within(regions()[0] as HTMLElement).getByTestId('stub-content'));
+    expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id);
+  });
+
+  it('moves to a trial focus moves into', () => {
+    mountLab();
+    act(() => labRef?.addTrial('StubB'));
+    act(() => (regions()[0] as HTMLElement).focus());
+    expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id);
+  });
+
+  it('moves to a trial whose frame takes focus, which fires nothing in the lab’s document', async () => {
+    mountLab({ instruments: [framed, stubB], defaultInstrument: 'Framed' });
+    act(() => labRef?.addTrial('StubB'));
+    act(() => screen.getByTitle('story frame').focus());
+    fireEvent.blur(window);
+    await waitFor(() => expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id));
+  });
+
+  it('falls back to the first trial when the focused one closes', () => {
+    mountLab();
+    act(() => labRef?.addTrial('StubB'));
+    act(() => labRef?.closeTrial(labRef?.trials[1]?.id ?? ''));
+    expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id);
+  });
+
+  it('is marked on its trial only when there is more than one', () => {
+    mountLab();
+    expect(regions()[0]).not.toHaveAttribute('data-focused');
+    act(() => labRef?.addTrial('StubB'));
+    expect(regions()[1]).toHaveAttribute('data-focused', 'true');
+    expect(regions()[0]).not.toHaveAttribute('data-focused');
+  });
+});
+
+describe('swapTrial', () => {
+  it('runs another instrument in the trial’s place, and keeps focus on that place', () => {
+    mountLab();
+    act(() => labRef?.addTrial('Stub'));
+    const second = labRef?.trials[1]?.id;
+    act(() => labRef?.focusTrial(labRef?.trials[0]?.id ?? ''));
+    act(() => labRef?.swapTrial(labRef?.trials[0]?.id ?? '', 'StubB'));
+    expect(labRef?.trials.map((t) => t.instrumentName)).toEqual(['StubB', 'Stub']);
+    expect(labRef?.trials[1]?.id).toBe(second);
+    expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id);
+    expect(screen.getByTestId('stub-b-content')).toBeInTheDocument();
+  });
+
+  it('leaves focus where it was when the swapped trial did not have it', () => {
+    mountLab();
+    act(() => labRef?.addTrial('Stub'));
+    const focused = labRef?.focusedTrialId;
+    act(() => labRef?.swapTrial(labRef?.trials[0]?.id ?? '', 'StubB'));
+    expect(labRef?.focusedTrialId).toBe(focused);
+  });
+});