run: remove init prop, add loading prop

QuentinRoy · Sep 27, 2023 · 147db01 · 147db01
1 parent 845fdec
commit 147db01
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 230 deletions.
diff --git a/packages/react-experiment/__tests__/run.test.tsx b/packages/react-experiment/__tests__/run.test.tsx
@@ -1,6 +1,7 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import userEventPackage from '@testing-library/user-event';
 import { Run, RunElements, useTask } from '../src/main.js';
+import * as React from 'react';
 
 const userEvent =
   userEventPackage as unknown as typeof userEventPackage.default;
@@ -131,9 +132,9 @@ describe('run', () => {
     vi.useRealTimers();
   });
 
-  it("fetch the timeline from init if it isn't specified as a prop", async () => {
-    vi.useFakeTimers();
-    const initTime = 150;
+  it('let timeline being undefined as long as loading is true', async () => {
+    const user = userEvent.setup();
+
     let config: RunElements<Task> = {
       tasks: {
         A: <Task type="A" dataProp="a" />,
@@ -142,24 +143,46 @@ describe('run', () => {
       loading: <div data-testid="loading" />,
       completed: <div data-testid="end" />,
     };
-    let init = async () => {
-      await wait(initTime);
-      return { timeline: tasks };
-    };
-    render(<Run elements={config} init={init} />);
+
+    function Test() {
+      const [isLoading, toggleLoading] = React.useReducer((s) => !s, true);
+      const [timeline, loadTimeline] = React.useReducer(
+        (): Task[] | undefined => tasks,
+        undefined,
+      );
+      return (
+        <div>
+          {/* @ts-expect-error this is a test */}
+          <Run elements={config} loading={isLoading} timeline={timeline} />
+          <button data-testid="load-timeline-button" onClick={loadTimeline}>
+            Load Timeline
+          </button>
+          <button data-testid="toggle-loading-button" onClick={toggleLoading}>
+            {isLoading ? 'Finish Loading' : 'Load'}
+          </button>
+        </div>
+      );
+    }
+
+    render(<Test />);
+    expect(screen.getByTestId('loading')).toBeInTheDocument();
+    await user.click(screen.getByTestId('load-timeline-button'));
     expect(screen.getByTestId('loading')).toBeInTheDocument();
-    await act(() => vi.advanceTimersByTime(initTime));
+    await user.click(screen.getByTestId('toggle-loading-button'));
     expect(screen.getByRole('heading')).toHaveTextContent('Type A');
     expect(screen.getByTestId('data')).toHaveTextContent('hello');
-    // Use fireEvent instead of userEvent because userEvent doesn't work with
-    // fake timers.
-    fireEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByText('Complete'));
     expect(screen.getByRole('heading')).toHaveTextContent('Type B');
     expect(screen.getByTestId('data')).toHaveTextContent('42');
-    fireEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByTestId('toggle-loading-button'));
+    expect(screen.getByTestId('loading')).toBeInTheDocument();
+    await user.click(screen.getByTestId('toggle-loading-button'));
+    expect(screen.getByRole('heading')).toHaveTextContent('Type B');
+    expect(screen.getByTestId('data')).toHaveTextContent('42');
+    await user.click(screen.getByText('Complete'));
     expect(screen.getByRole('heading')).toHaveTextContent('Type A');
     expect(screen.getByTestId('data')).toHaveTextContent('world');
-    fireEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByText('Complete'));
     expect(screen.getByTestId('end')).toBeInTheDocument();
   });
 });
diff --git a/packages/react-experiment/src/config.ts b/packages/react-experiment/src/config.ts
@@ -4,25 +4,21 @@ export interface RegisterExperiment {
   // log: Log;
 }
 
-export type BaseLog = {
-  type: string;
-};
-
-export type BaseTask = {
-  type: string;
+export type Typed<T extends string = string> = {
+  type: T;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnyTask = BaseTask & { [key: PropertyKey]: any };
+export type AnyTask = Typed & { [key: PropertyKey]: any };
 export type RegisteredTask = RegisterExperiment extends { task: infer T }
-  ? T extends BaseTask
+  ? T extends Typed
     ? T
     : never
   : AnyTask;
 
-export type AnyLog = BaseLog & { [key: PropertyKey]: unknown };
-export type RegisteredLog = RegisterExperiment extends { log: infer T }
-  ? T extends BaseLog
-    ? T
+export type AnyLog = Typed & { [key: PropertyKey]: unknown };
+export type RegisteredLog = RegisterExperiment extends { log: infer L }
+  ? L extends Typed
+    ? L
     : never
-  : BaseLog;
+  : Typed;
diff --git a/packages/react-experiment/src/contexts.ts b/packages/react-experiment/src/contexts.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RegisteredLog, RegisteredTask } from './config.js';
-import { TimelineState } from './timeline.js';
+import { TimelineState } from './useManagedTimeline.js';
 
 export const timelineContext =
   React.createContext<TimelineState<RegisteredTask> | null>(null);

diff --git a/packages/react-experiment/src/main.tsx b/packages/react-experiment/src/main.tsx
@@ -2,4 +2,3 @@ export { Run, RunElements } from './run.js';
 export { RegisterExperiment } from './config.js';
 export { useLogger } from './useLogger.js';
 export { useTask } from './useTask.js';
-export { useError } from './useError.js';