@player-ui/react 0.12.0 → 0.12.1-next.0

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

@@ -1,7 +1,14 @@
-import { test, expect, vitest } from "vitest";
+import { test, expect, vitest, describe, beforeEach } from "vitest";
 import React, { Suspense } from "react";
 import { makeFlow } from "@player-ui/make-flow";
-import { render, act, configure, waitFor } from "@testing-library/react";
+import {
+  render,
+  act,
+  configure,
+  waitFor,
+  screen,
+} from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
 import {
   MetricsCorePlugin,
   RequestTimeWebPlugin,
@@ -23,116 +30,103 @@ vitest.mock("@player-ui/metrics-plugin", async () => {
 
 configure({ testIdAttribute: "id" });
 
-const testOptions = { legacyRoot: true };
+describe.each([
+  { legacyRoot: true, version: 17 },
+  { legacyRoot: false, version: 18 },
+])("ManagedPlayer with React $version", ({ legacyRoot }) => {
+  beforeEach(() => {
+    vitest.clearAllMocks();
+  });
 
-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",
+  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",
+        )
+        .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 })),
-  };
+        )
+        .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();
-  });
+    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>,
+      { legacyRoot },
+    );
+
+    expect(manager.next).toBeCalledWith(undefined);
+    const view = await container.findByTestId("flow-1");
+    expect(view).toBeInTheDocument();
 
-  expect(manager.next).toBeCalledTimes(2);
+    await act(async () => {
+      const nextButton = await container.findByText("Continue");
+      nextButton.click();
+    });
 
-  const view2 = await container.findByTestId("flow-2");
-  expect(view2).toBeInTheDocument();
+    expect(manager.next).toBeCalledTimes(2);
 
-  await act(async () => {
-    const nextButton = await container.findByText("Continue");
-    nextButton.click();
+    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();
   });
-  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",
+  test("handles dummy flows", async () => {
+    const manager: FlowManager = {
+      next: vitest
+        .fn()
+        .mockReturnValueOnce(
+          Promise.resolve({
+            value: makeFlow({
+              id: "flow-1",
               type: "collection",
               values: [
                 {
@@ -145,298 +139,309 @@ test("handles dummy flows", async () => {
                 },
               ],
             }),
-            data: { foo: "bar" },
-          },
-        }),
-      )
-      .mockReturnValue(Promise.resolve({ done: true })),
-  };
+          }),
+        )
+        .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();
-  });
+    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>,
+      { legacyRoot },
+    );
+
+    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);
+    expect(manager.next).toBeCalledTimes(2);
 
-  const view2 = await screen.findByTestId("flow-2");
-  expect(view2).toBeInTheDocument();
+    const view2 = await screen.findByTestId("flow-2");
+    expect(view2).toBeInTheDocument();
 
-  await act(async () => {
-    const nextButton = await screen.findByText("Continue");
-    nextButton.click();
+    await act(async () => {
+      const nextButton = await screen.findByText("Continue");
+      nextButton.click();
+    });
+    expect(onComplete).toBeCalledWith(
+      expect.objectContaining({
+        status: "completed",
+        data: { foo: "bar" },
+      }),
+    );
   });
-  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",
+  test("handles FlowManager error", async () => {
+    const user = userEvent.setup();
+    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 })),
-  };
+        )
+        .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 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();
-  });
+    const screen = render(
+      <Suspense fallback="loading">
+        <ManagedPlayer
+          manager={manager}
+          plugins={[new SimpleAssetPlugin()]}
+          fallbackComponent={MyFallback}
+          onComplete={onComplete}
+          onError={onError}
+        />
+      </Suspense>,
+      { legacyRoot },
+    );
 
-  expect(manager.next).toBeCalledTimes(2);
+    expect(manager.next).toBeCalledWith(undefined);
+    const view = await screen.findByTestId("flow-1");
+    expect(view).toBeInTheDocument();
 
-  await act(async () => {
-    const nextButton = await screen.findByText("Retry");
-    nextButton.click();
-  });
+    let nextButton = await screen.findByText("Continue");
+    await user.click(nextButton);
 
-  expect(manager.next).toBeCalledTimes(3);
+    expect(manager.next).toBeCalledTimes(2);
 
-  await act(async () => {
-    const nextButton = await screen.findByText("Reset");
-    nextButton.click();
-  });
+    nextButton = await screen.findByText("Retry");
+    await user.click(nextButton);
 
-  expect(manager.next).toBeCalledTimes(4);
-  expect(onError).toBeCalledTimes(2);
-  expect(onComplete).toBeCalled();
-});
+    expect(manager.next).toBeCalledTimes(3);
 
-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",
+    nextButton = await screen.findByText("Reset");
+    await user.click(nextButton);
+
+    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",
+            }),
           }),
-        }),
-      )
-      .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();
-  });
+        )
+        .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>
+    );
 
-  await waitFor(() => expect(manager.next).toBeCalledTimes(2));
+    const screen = render(
+      <Suspense fallback="loading">
+        <ManagedPlayer
+          manager={manager}
+          plugins={[new SimpleAssetPlugin()]}
+          fallbackComponent={MyFallback}
+          onComplete={onComplete}
+          onError={onError}
+        />
+      </Suspense>,
+      { legacyRoot },
+    );
 
-  const view2 = await screen.findByTestId("flow-2");
-  expect(view2).toBeInTheDocument();
+    expect(manager.next).toBeCalledWith(undefined);
+    const view = await screen.findByTestId("flow-1");
+    expect(view).toBeInTheDocument();
 
-  await act(async () => {
-    view2.click();
-  });
+    await act(async () => {
+      const nextButton = await screen.findByText("Continue");
+      nextButton.click();
+    });
 
-  const retryButton = await screen.findByText("Retry");
-  expect(retryButton).toBeInTheDocument();
+    await waitFor(() => expect(manager.next).toBeCalledTimes(2));
 
-  await act(async () => {
-    retryButton.click();
-  });
+    const view2 = await screen.findByTestId("flow-2");
+    expect(view2).toBeInTheDocument();
 
-  expect(manager.next).toBeCalledTimes(3);
+    await act(async () => {
+      view2.click();
+    });
 
-  const view3 = await screen.findByTestId("flow-2");
-  expect(view3).toBeInTheDocument();
+    const retryButton = await screen.findByText("Retry");
+    expect(retryButton).toBeInTheDocument();
 
-  await act(async () => {
-    view3.click();
-  });
+    await act(async () => {
+      retryButton.click();
+    });
 
-  const resetButton = await screen.findByText("Retry");
-  expect(resetButton).toBeInTheDocument();
+    expect(manager.next).toBeCalledTimes(3);
 
-  await act(async () => {
-    resetButton.click();
-  });
+    const view3 = await screen.findByTestId("flow-2");
+    expect(view3).toBeInTheDocument();
 
-  expect(manager.next).toBeCalledTimes(4);
-  expect(onError).toBeCalledTimes(2);
+    await act(async () => {
+      view3.click();
+    });
 
-  expect(onComplete).toBeCalled();
-});
+    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",
+  test("handles terminating with data", 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",
+                  },
                 },
-              },
-            ],
-          }),
-          data: {
-            returns: { id: "123" },
+              ],
+            }),
+            data: {
+              returns: { id: "123" },
+            },
           },
-        },
-      }),
-    ),
-    terminate: vitest.fn(),
-  };
+        }),
+      ),
+      terminate: vitest.fn(),
+    };
 
-  const onComplete = vitest.fn();
-  const onError = vitest.fn();
+    const onComplete = vitest.fn();
+    const onError = vitest.fn();
 
-  let renderResult;
-  act(() => {
-    renderResult = render(
+    const result = render(
       <Suspense fallback="loading">
         <ManagedPlayer
           manager={manager}
@@ -445,10 +450,152 @@ test("handles terminating with data", async () => {
           onError={onError}
         />
       </Suspense>,
+      { legacyRoot },
     );
+
+    await screen.findByTestId("flow-1");
+    result.unmount();
+    expect(manager.terminate).toBeCalledWith({ returns: { id: "123" } });
   });
 
-  await renderResult.findByTestId("flow-1");
-  (renderResult as any).unmount();
-  expect(manager.terminate).toBeCalledWith({ returns: { id: "123" } });
+  test("handles new manager", async () => {
+    const user = userEvent.setup();
+
+    const makeManager = (num: number): FlowManager => {
+      return {
+        terminate: vitest.fn(),
+        next: vitest
+          .fn()
+          .mockReturnValueOnce(
+            Promise.resolve({
+              value: makeFlow({
+                id: `flow-1-${num}`,
+                type: "collection",
+                values: [
+                  {
+                    asset: {
+                      id: "action",
+                      type: "action",
+                      value: "Next",
+                      label: "Continue",
+                    },
+                  },
+                ],
+              }),
+            }),
+          )
+          .mockReturnValueOnce(
+            Promise.resolve({
+              value: {
+                ...makeFlow({
+                  id: `flow-2-${num}`,
+                  type: "collection",
+                  values: [
+                    {
+                      asset: {
+                        id: "action",
+                        type: "action",
+                        value: "Next",
+                        label: "Continue",
+                      },
+                    },
+                  ],
+                }),
+                data: { foo: "bar" },
+              },
+            }),
+          )
+          .mockReturnValue(Promise.resolve({ done: true })),
+      };
+    };
+
+    let manager = makeManager(1);
+    const previousManager = {
+      current: manager,
+    };
+
+    const onComplete = vitest.fn();
+    const onError = vitest.fn();
+
+    const Wrapper = () => {
+      const [count, setCount] = React.useState(1);
+
+      return (
+        <div>
+          <button
+            id="newManager"
+            type="button"
+            onClick={() =>
+              setCount((c) => {
+                const newVal = c + 1;
+                previousManager.current = manager;
+                manager = makeManager(newVal);
+                return newVal;
+              })
+            }
+          >
+            New Manager {count}
+          </button>
+          <ManagedPlayer
+            manager={manager}
+            plugins={[new SimpleAssetPlugin()]}
+            onComplete={onComplete}
+            onError={onError}
+          />
+        </div>
+      );
+    };
+
+    const screen = render(
+      <Suspense fallback="loading">
+        <Wrapper />
+      </Suspense>,
+      { legacyRoot },
+    );
+
+    expect(manager.next).toBeCalledWith(undefined);
+    const view = await screen.findByTestId("flow-1-1");
+    expect(view).toBeInTheDocument();
+
+    let newManagerBtn = await screen.findByTestId("newManager");
+    await user.click(newManagerBtn);
+
+    expect(previousManager.current.terminate).toBeCalledWith({});
+    expect(previousManager.current.next).toBeCalledTimes(1);
+    expect(manager.next).toBeCalledTimes(1);
+    await screen.findByTestId("flow-1-2");
+
+    newManagerBtn = await screen.findByTestId("newManager");
+    await user.click(newManagerBtn);
+
+    const prevMan = previousManager.current;
+    expect(prevMan.terminate).toBeCalledWith({});
+    expect(prevMan.next).toBeCalledTimes(1);
+    expect(manager.next).toBeCalledTimes(1);
+    await screen.findByTestId("flow-1-3");
+
+    let nextButton = await screen.findByText("Continue");
+    await user.click(nextButton);
+
+    expect(prevMan).toEqual(previousManager.current);
+    expect(previousManager.current.next).toBeCalledTimes(1);
+    expect(manager.next).toBeCalledTimes(2);
+
+    const view2 = await screen.findByTestId("flow-2-3");
+    expect(view2).toBeInTheDocument();
+
+    nextButton = await screen.findByText("Continue");
+    await user.click(nextButton);
+
+    expect(prevMan).toEqual(previousManager.current);
+    expect(previousManager.current.next).toBeCalledTimes(1);
+    expect(manager.next).toBeCalledTimes(3);
+
+    expect(onComplete).toBeCalledWith(
+      expect.objectContaining({
+        status: "completed",
+        data: { foo: "bar" },
+      }),
+    );
+  });
 });