@player-ui/react 0.8.0--canary.307.9621 → 0.8.0-next.0

package/src/manager/__tests__/managed-player.test.tsx

@@ -0,0 +1,454 @@
+import { test, expect, vitest } from "vitest";
+import React, { Suspense } from "react";
+import { makeFlow } from "@player-ui/make-flow";
+import { render, act, configure, waitFor } from "@testing-library/react";
+import {
+  MetricsCorePlugin,
+  RequestTimeWebPlugin,
+} from "@player-ui/metrics-plugin";
+import { ManagedPlayer } from "../managed-player";
+import type { FlowManager, FallbackProps } from "../types";
+import { SimpleAssetPlugin } from "../../__tests__/helpers/simple-asset-plugin";
+
+vitest.mock("@player-ui/metrics-plugin", async () => {
+  const actual: object = await vitest.importActual("@player-ui/metrics-plugin");
+
+  return {
+    ...actual,
+    RequestTimeWebPlugin: vitest.fn().mockImplementation(() => {
+      return { apply: vitest.fn() };
+    }),
+  };
+});
+
+configure({ testIdAttribute: "id" });
+
+const testOptions = { legacyRoot: true };
+
+test("requestTime should be available", async () => {
+  const manager: FlowManager = {
+    next: vitest
+      .fn()
+      .mockReturnValueOnce(
+        Promise.resolve({
+          value: makeFlow({
+            id: "flow-1",
+            type: "collection",
+            values: [
+              {
+                asset: {
+                  id: "action",
+                  type: "action",
+                  value: "Next",
+                  label: "Continue",
+                },
+              },
+            ],
+          }),
+        }),
+      )
+      .mockReturnValueOnce(
+        Promise.resolve({
+          value: makeFlow({
+            id: "flow-2",
+            type: "collection",
+            values: [
+              {
+                asset: {
+                  id: "action",
+                  type: "action",
+                  value: "Next",
+                  label: "Continue",
+                },
+              },
+            ],
+          }),
+        }),
+      )
+      .mockReturnValue(Promise.resolve({ done: true })),
+  };
+
+  const onComplete = vitest.fn();
+  const onError = vitest.fn();
+
+  const container = render(
+    <Suspense fallback="loading">
+      <ManagedPlayer
+        manager={manager}
+        plugins={[new SimpleAssetPlugin(), new MetricsCorePlugin()]}
+        onComplete={onComplete}
+        onError={onError}
+      />
+    </Suspense>,
+    testOptions,
+  );
+
+  expect(manager.next).toBeCalledWith(undefined);
+  const view = await container.findByTestId("flow-1");
+  expect(view).toBeInTheDocument();
+
+  await act(async () => {
+    const nextButton = await container.findByText("Continue");
+    nextButton.click();
+  });
+
+  expect(manager.next).toBeCalledTimes(2);
+
+  const view2 = await container.findByTestId("flow-2");
+  expect(view2).toBeInTheDocument();
+
+  await act(async () => {
+    const nextButton = await container.findByText("Continue");
+    nextButton.click();
+  });
+  const getRequestTime = (RequestTimeWebPlugin as any).mock.calls[0][0];
+  expect(getRequestTime()).toBeDefined();
+  expect(onComplete).toBeCalled();
+});
+
+test("handles dummy flows", async () => {
+  const manager: FlowManager = {
+    next: vitest
+      .fn()
+      .mockReturnValueOnce(
+        Promise.resolve({
+          value: makeFlow({
+            id: "flow-1",
+            type: "collection",
+            values: [
+              {
+                asset: {
+                  id: "action",
+                  type: "action",
+                  value: "Next",
+                  label: "Continue",
+                },
+              },
+            ],
+          }),
+        }),
+      )
+      .mockReturnValueOnce(
+        Promise.resolve({
+          value: {
+            ...makeFlow({
+              id: "flow-2",
+              type: "collection",
+              values: [
+                {
+                  asset: {
+                    id: "action",
+                    type: "action",
+                    value: "Next",
+                    label: "Continue",
+                  },
+                },
+              ],
+            }),
+            data: { foo: "bar" },
+          },
+        }),
+      )
+      .mockReturnValue(Promise.resolve({ done: true })),
+  };
+
+  const onComplete = vitest.fn();
+  const onError = vitest.fn();
+
+  const screen = render(
+    <Suspense fallback="loading">
+      <ManagedPlayer
+        manager={manager}
+        plugins={[new SimpleAssetPlugin()]}
+        onComplete={onComplete}
+        onError={onError}
+      />
+    </Suspense>,
+    testOptions,
+  );
+
+  expect(manager.next).toBeCalledWith(undefined);
+  const view = await screen.findByTestId("flow-1");
+  expect(view).toBeInTheDocument();
+
+  await act(async () => {
+    const nextButton = await screen.findByText("Continue");
+    nextButton.click();
+  });
+
+  expect(manager.next).toBeCalledTimes(2);
+
+  const view2 = await screen.findByTestId("flow-2");
+  expect(view2).toBeInTheDocument();
+
+  await act(async () => {
+    const nextButton = await screen.findByText("Continue");
+    nextButton.click();
+  });
+  expect(onComplete).toBeCalledWith(
+    expect.objectContaining({
+      status: "completed",
+      data: { foo: "bar" },
+    }),
+  );
+});
+
+test("handles FlowManager error", async () => {
+  const manager: FlowManager = {
+    next: vitest
+      .fn()
+      .mockReturnValueOnce(
+        Promise.resolve({
+          value: makeFlow({
+            id: "flow-1",
+            type: "collection",
+            values: [
+              {
+                asset: {
+                  id: "action",
+                  type: "action",
+                  value: "Next",
+                  label: "Continue",
+                },
+              },
+            ],
+          }),
+        }),
+      )
+      .mockImplementationOnce(() => {
+        throw new Error();
+      })
+      .mockImplementationOnce(() => {
+        throw new Error();
+      })
+      .mockReturnValue(Promise.resolve({ done: true })),
+  };
+
+  const onComplete = vitest.fn();
+  const onError = vitest.fn();
+  /**
+   *
+   */
+  const MyFallback = (props: FallbackProps) => (
+    <div>
+      <button type="button" onClick={props?.retry}>
+        Retry
+      </button>
+      <button type="button" onClick={props?.reset}>
+        Reset
+      </button>
+    </div>
+  );
+
+  const screen = render(
+    <Suspense fallback="loading">
+      <ManagedPlayer
+        manager={manager}
+        plugins={[new SimpleAssetPlugin()]}
+        fallbackComponent={MyFallback}
+        onComplete={onComplete}
+        onError={onError}
+      />
+    </Suspense>,
+    testOptions,
+  );
+
+  expect(manager.next).toBeCalledWith(undefined);
+  const view = await screen.findByTestId("flow-1");
+  expect(view).toBeInTheDocument();
+
+  await act(async () => {
+    const nextButton = await screen.findByText("Continue");
+    nextButton.click();
+  });
+
+  expect(manager.next).toBeCalledTimes(2);
+
+  await act(async () => {
+    const nextButton = await screen.findByText("Retry");
+    nextButton.click();
+  });
+
+  expect(manager.next).toBeCalledTimes(3);
+
+  await act(async () => {
+    const nextButton = await screen.findByText("Reset");
+    nextButton.click();
+  });
+
+  expect(manager.next).toBeCalledTimes(4);
+  expect(onError).toBeCalledTimes(2);
+  expect(onComplete).toBeCalled();
+});
+
+test("handles flow error", async () => {
+  const manager: FlowManager = {
+    next: vitest
+      .fn()
+      .mockReturnValueOnce(
+        Promise.resolve({
+          value: makeFlow({
+            id: "flow-1",
+            type: "collection",
+            values: [
+              {
+                asset: {
+                  id: "action",
+                  type: "action",
+                  value: "Next",
+                  label: "Continue",
+                },
+              },
+            ],
+          }),
+        }),
+      )
+      .mockReturnValueOnce(
+        Promise.resolve({
+          value: makeFlow({
+            id: "flow-2",
+            type: "action",
+            exp: "err(",
+            label: "Error",
+          }),
+        }),
+      )
+      .mockReturnValueOnce(
+        Promise.resolve({
+          value: makeFlow({
+            id: "flow-2",
+            type: "action",
+            exp: "err(",
+            label: "Error",
+          }),
+        }),
+      )
+      .mockReturnValue(Promise.resolve({ done: true })),
+  };
+  const onComplete = vitest.fn();
+  const onError = vitest.fn();
+
+  /**
+   *
+   */
+  const MyFallback = (props: FallbackProps) => (
+    <div>
+      <button type="button" onClick={props?.retry}>
+        Retry
+      </button>
+      <button type="button" onClick={props?.reset}>
+        Reset
+      </button>
+    </div>
+  );
+
+  const screen = render(
+    <Suspense fallback="loading">
+      <ManagedPlayer
+        manager={manager}
+        plugins={[new SimpleAssetPlugin()]}
+        fallbackComponent={MyFallback}
+        onComplete={onComplete}
+        onError={onError}
+      />
+    </Suspense>,
+    testOptions,
+  );
+
+  expect(manager.next).toBeCalledWith(undefined);
+  const view = await screen.findByTestId("flow-1");
+  expect(view).toBeInTheDocument();
+
+  await act(async () => {
+    const nextButton = await screen.findByText("Continue");
+    nextButton.click();
+  });
+
+  await waitFor(() => expect(manager.next).toBeCalledTimes(2));
+
+  const view2 = await screen.findByTestId("flow-2");
+  expect(view2).toBeInTheDocument();
+
+  await act(async () => {
+    view2.click();
+  });
+
+  const retryButton = await screen.findByText("Retry");
+  expect(retryButton).toBeInTheDocument();
+
+  await act(async () => {
+    retryButton.click();
+  });
+
+  expect(manager.next).toBeCalledTimes(3);
+
+  const view3 = await screen.findByTestId("flow-2");
+  expect(view3).toBeInTheDocument();
+
+  await act(async () => {
+    view3.click();
+  });
+
+  const resetButton = await screen.findByText("Retry");
+  expect(resetButton).toBeInTheDocument();
+
+  await act(async () => {
+    resetButton.click();
+  });
+
+  expect(manager.next).toBeCalledTimes(4);
+  expect(onError).toBeCalledTimes(2);
+
+  expect(onComplete).toBeCalled();
+});
+
+test("handles terminating with data", async () => {
+  vitest.useRealTimers();
+  const manager: FlowManager = {
+    next: vitest.fn().mockReturnValueOnce(
+      Promise.resolve({
+        value: {
+          ...makeFlow({
+            id: "flow-1",
+            type: "collection",
+            values: [
+              {
+                asset: {
+                  id: "action",
+                  type: "action",
+                  value: "Next",
+                  label: "Continue",
+                },
+              },
+            ],
+          }),
+          data: {
+            returns: { id: "123" },
+          },
+        },
+      }),
+    ),
+    terminate: vitest.fn(),
+  };
+
+  const onComplete = vitest.fn();
+  const onError = vitest.fn();
+
+  let renderResult;
+  act(() => {
+    renderResult = render(
+      <Suspense fallback="loading">
+        <ManagedPlayer
+          manager={manager}
+          plugins={[new SimpleAssetPlugin()]}
+          onComplete={onComplete}
+          onError={onError}
+        />
+      </Suspense>,
+    );
+  });
+
+  await renderResult.findByTestId("flow-1");
+  (renderResult as any).unmount();
+  expect(manager.terminate).toBeCalledWith({ returns: { id: "123" } });
+});

package/src/manager/managed-player.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React from "react";
 import type {
   FlowManager,
   ManagedPlayerProps,
   ManagedPlayerState,
   ManagerMiddleware,
   ManagedPlayerContext,
-} from './types';
-import { useRequestTime } from './request-time';
-import type { ReactPlayerOptions } from '../player';
-import { ReactPlayer } from '../player';
+} from "./types";
+import { useRequestTime } from "./request-time";
+import type { ReactPlayerOptions } from "../player";
+import { ReactPlayer } from "../player";
 
 /** noop middleware */
 function identityMiddleware<T>(next: Promise<T>) {
@@ -60,16 +60,11 @@ class ManagedState {
     /** the config to use when creating a player */
     playerConfig: ReactPlayerOptions;
   }) {
-    const playerConfig: ReactPlayerOptions = {
-      ...options.playerConfig,
-      suspend: true,
-    };
-
     const initialState: ManagedPlayerState = {
-      value: 'not_started',
+      value: "not_started",
       context: {
-        playerConfig,
-        reactPlayer: new ReactPlayer(playerConfig),
+        playerConfig: options.playerConfig,
+        reactPlayer: new ReactPlayer(options.playerConfig),
         manager: options.manager,
       },
     };
@@ -81,21 +76,21 @@ class ManagedState {
 
   /** reset starts from nothing */
   public reset() {
-    if (this.state?.value === 'error') {
+    if (this.state?.value === "error") {
       const { playerConfig, manager } = this.state.context;
       this.start({ playerConfig, manager });
     } else {
-      throw new Error('Flow must be in error state to reset');
+      throw new Error("Flow must be in error state to reset");
     }
   }
 
   /** restart starts from the last result */
   public restart() {
-    if (this.state?.value === 'error') {
+    if (this.state?.value === "error") {
       const { playerConfig, manager, prevResult, reactPlayer } =
         this.state.context;
       this.setState({
-        value: 'completed',
+        value: "completed",
         context: {
           playerConfig,
           manager,
@@ -104,7 +99,7 @@ class ManagedState {
         },
       });
     } else {
-      throw new Error('Flow must be in error state to restart');
+      throw new Error("Flow must be in error state to restart");
     }
   }
 
@@ -128,7 +123,7 @@ class ManagedState {
       }
     } catch (e) {
       this.setState({
-        value: 'error',
+        value: "error",
         context: {
           manager,
           reactPlayer,
@@ -141,16 +136,16 @@ class ManagedState {
 
   private async processState(
     state: ManagedPlayerState,
-    context: ManagedPlayerContext
+    context: ManagedPlayerContext,
   ): Promise<ManagedPlayerState | undefined> {
-    if (state.value === 'not_started' || state.value === 'completed') {
+    if (state.value === "not_started" || state.value === "completed") {
       const prevResult =
-        state.value === 'completed' ? state.context.result : undefined;
+        state.value === "completed" ? state.context.result : undefined;
 
       const middleware = this.middleware?.next ?? identityMiddleware;
 
       return {
-        value: 'pending',
+        value: "pending",
         context: {
           ...context,
           prevResult,
@@ -159,12 +154,12 @@ class ManagedState {
       };
     }
 
-    if (state.value === 'pending') {
+    if (state.value === "pending") {
       const nextResult = await state.context.next;
 
       if (nextResult.done) {
         return {
-          value: 'ended',
+          value: "ended",
           context: {
             ...context,
             result: state.context.prevResult,
@@ -173,7 +168,7 @@ class ManagedState {
       }
 
       return {
-        value: 'loaded',
+        value: "loaded",
         context: {
           ...context,
           prevResult: state.context.prevResult,
@@ -182,9 +177,9 @@ class ManagedState {
       };
     }
 
-    if (state.value === 'loaded') {
+    if (state.value === "loaded") {
       return {
-        value: 'running',
+        value: "running",
         context: {
           ...context,
           flow: state.context.flow,
@@ -194,11 +189,11 @@ class ManagedState {
       };
     }
 
-    if (state.value === 'running') {
+    if (state.value === "running") {
       const result = await state.context.result;
 
       return {
-        value: 'completed',
+        value: "completed",
         context: {
           ...context,
           result,
@@ -225,7 +220,7 @@ export const usePersistentStateMachine = (options: {
   middleware?: ManagerMiddleware;
 }) => {
   const keyRef = React.useRef<ManagedPlayerStateKey>({
-    _key: Symbol('managed-player'),
+    _key: Symbol("managed-player"),
   });
 
   const managedState =
@@ -270,11 +265,11 @@ export const ManagedPlayer = (props: ManagedPlayerProps) => {
   });
 
   React.useEffect(() => {
-    if (state?.value === 'ended') {
+    if (state?.value === "ended") {
       props.onComplete?.(state?.context.result);
-    } else if (state?.value === 'error') {
+    } else if (state?.value === "error") {
       props.onError?.(state?.context.error);
-    } else if (state?.value === 'running') {
+    } else if (state?.value === "running") {
       props.onStartedFlow?.();
     }
   }, [state]);
@@ -283,13 +278,13 @@ export const ManagedPlayer = (props: ManagedPlayerProps) => {
     return () => {
       const playerState = state?.context.reactPlayer.player.getState();
 
-      if (state?.value === 'running' && playerState?.status === 'in-progress') {
+      if (state?.value === "running" && playerState?.status === "in-progress") {
         props.manager.terminate?.(playerState.controllers.data.serialize());
       }
     };
   }, [props.manager, state?.context.reactPlayer.player, state?.value]);
 
-  if (state?.value === 'error') {
+  if (state?.value === "error") {
     if (props.fallbackComponent) {
       return (
         <props.fallbackComponent

package/src/manager/request-time.tsx

@@ -1,11 +1,11 @@
-import { useCallback, useEffect, useRef, useMemo } from 'react';
-import type { Player } from '@player-ui/player';
-import type { MetricsCorePlugin } from '@player-ui/metrics-plugin';
+import { useCallback, useEffect, useRef, useMemo } from "react";
+import type { Player } from "@player-ui/player";
+import type { MetricsCorePlugin } from "@player-ui/metrics-plugin";
 import {
   MetricsCorePluginSymbol,
   RequestTimeWebPlugin,
-} from '@player-ui/metrics-plugin';
-import type { ReactPlayerPlugin } from '../player';
+} from "@player-ui/metrics-plugin";
+import type { ReactPlayerPlugin } from "../player";
 
 type RequestTime = {
   /** request start time */
@@ -34,7 +34,7 @@ export const useRequestTime = () => {
 
   /** wrap a promise with tracking it's time in flight */
   function withRequestTime<Type>(nextPromise: Promise<Type>): Promise<Type> {
-    const getTime = typeof performance === 'undefined' ? Date : performance;
+    const getTime = typeof performance === "undefined" ? Date : performance;
     requestTimeRef.current = { start: getTime.now() };
 
     return nextPromise.finally(() => {
@@ -47,13 +47,13 @@ export const useRequestTime = () => {
 
   const RequestTimeMetricsPlugin: ReactPlayerPlugin = useMemo(() => {
     return {
-      name: 'RequestTimeMetricsPlugin',
+      name: "RequestTimeMetricsPlugin",
       apply(player: Player): void {
         player.applyTo<MetricsCorePlugin>(
           MetricsCorePluginSymbol,
           (metricsCorePlugin) => {
             new RequestTimeWebPlugin(getRequestTime).apply(metricsCorePlugin);
-          }
+          },
         );
       },
     };