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

package/src/__tests__/flow.test.ts

@@ -0,0 +1,312 @@
+import { test, vitest, expect } from "vitest";
+import type { FlowController } from "../controllers";
+import type { DataController } from "..";
+import { Player } from "..";
+import type { InProgressState } from "../types";
+
+test("transitions on action nodes", async () => {
+  const player = new Player();
+
+  player.start({
+    id: "test-flow",
+    data: {
+      my: {
+        puppy: "Ginger",
+      },
+    },
+    navigation: {
+      BEGIN: "FLOW_1",
+      FLOW_1: {
+        startState: "ACTION_1",
+        ACTION_1: {
+          state_type: "ACTION",
+          exp: "{{my.puppy}}",
+          transitions: {
+            Ginger: "EXTERNAL_1",
+          },
+        },
+        EXTERNAL_1: {
+          state_type: "EXTERNAL",
+          ref: "view_1",
+          param: {
+            best: "{{my.puppy}}",
+          },
+          transitions: {},
+        },
+      },
+    },
+  });
+
+  await vitest.waitFor(() =>
+    expect(player.getState().status).toBe("in-progress"),
+  );
+
+  const state = player.getState();
+  const currentState = (state as InProgressState).controllers.flow.current
+    ?.currentState;
+  expect(currentState?.name).toBe("EXTERNAL_1");
+  expect(currentState?.value).toStrictEqual({
+    state_type: "EXTERNAL",
+    ref: "view_1",
+    param: {
+      best: "Ginger",
+    },
+    transitions: {},
+  });
+});
+
+test("resolves data when transitioning", async () => {
+  const player = new Player();
+
+  let flowController: FlowController | undefined;
+
+  player.hooks.flowController.tap("test", (fc) => {
+    flowController = fc;
+  });
+
+  const flowResponse = player.start({
+    id: "test-flow",
+    views: [
+      { id: "view-1", type: "view" },
+      { id: "view-2", type: "view" },
+    ],
+    data: {
+      viewNum: 2,
+      outcomeData: "not good",
+    },
+    navigation: {
+      BEGIN: "FLOW_1",
+      FLOW_1: {
+        startState: "VIEW_1",
+        VIEW_1: {
+          state_type: "VIEW",
+          ref: "view-1",
+          transitions: {
+            Next: "VIEW_{{viewNum}}",
+          },
+        },
+        VIEW_2: {
+          state_type: "VIEW",
+          ref: "view-{{viewNum}}",
+          transitions: {
+            "*": "END",
+          },
+        },
+        END: {
+          state_type: "END",
+          outcome: "{{outcomeData}}",
+        },
+      },
+    },
+  });
+
+  /** A helper to get the current view */
+  const getView = () =>
+    (player.getState() as InProgressState).controllers.view.currentView
+      ?.lastUpdate;
+
+  expect(getView()).toStrictEqual({
+    id: "view-1",
+    type: "view",
+  });
+
+  flowController?.transition("Next");
+
+  expect(getView()).toStrictEqual({
+    id: "view-2",
+    type: "view",
+  });
+
+  flowController?.transition("Next");
+  expect((await flowResponse).endState).toStrictEqual({
+    state_type: "END",
+    outcome: "not good",
+  });
+});
+
+test("resolves dynamic view ids", () => {
+  const player = new Player();
+
+  player.start({
+    id: "test-flow",
+    views: [{ id: "view-1-{{name}}", type: "view" }],
+    data: {
+      viewNum: 1,
+      name: "adam",
+      outcomeData: "not good",
+    },
+    navigation: {
+      BEGIN: "FLOW_1",
+      FLOW_1: {
+        startState: "VIEW_1",
+        VIEW_1: {
+          state_type: "VIEW",
+          ref: "view-1-adam",
+          transitions: {
+            Next: "END",
+          },
+        },
+        END: {
+          state_type: "END",
+          outcome: "{{outcomeData}}",
+        },
+      },
+    },
+  });
+
+  const state = player.getState();
+
+  expect(state.status).toBe("in-progress");
+  expect(
+    (state as InProgressState).controllers.view.currentView?.lastUpdate?.id,
+  ).toBe("view-1-adam");
+});
+
+test("resolves data when completing", async () => {
+  const player = new Player();
+
+  let flowController: FlowController | undefined;
+  let dataController: DataController | undefined;
+
+  player.hooks.flowController.tap("test", (fc) => {
+    flowController = fc;
+  });
+
+  player.hooks.dataController.tap("test", (dc) => {
+    dataController = dc;
+  });
+
+  const flowResponse = player.start({
+    id: "test-flow",
+    views: [
+      { id: "view-1", type: "view" },
+      { id: "view-2", type: "view" },
+    ],
+    data: {
+      viewNum: 2,
+      outcomeData: "not good",
+    },
+    navigation: {
+      BEGIN: "FLOW_1",
+      FLOW_1: {
+        startState: "VIEW_1",
+        VIEW_1: {
+          state_type: "VIEW",
+          ref: "view-1",
+          transitions: {
+            Next: "VIEW_{{viewNum}}",
+          },
+        },
+        VIEW_2: {
+          state_type: "VIEW",
+          ref: "view-{{viewNum}}",
+          transitions: {
+            "*": "END",
+          },
+        },
+        END: {
+          state_type: "END",
+          outcome: "{{outcomeData}}",
+        },
+      },
+    },
+  });
+
+  /** A helper to get the current view */
+  const getView = () =>
+    (player.getState() as InProgressState).controllers.view.currentView
+      ?.lastUpdate;
+
+  expect(getView()).toStrictEqual({
+    id: "view-1",
+    type: "view",
+  });
+
+  flowController?.transition("Next");
+
+  dataController?.set({ testData: "testValue" });
+
+  expect(getView()).toStrictEqual({
+    id: "view-2",
+    type: "view",
+  });
+
+  flowController?.transition("Next");
+  const result = await flowResponse;
+
+  expect(result.data).toStrictEqual({
+    viewNum: 2,
+    outcomeData: "not good",
+    testData: "testValue",
+  });
+});
+
+test("resolves param on end nodes", async () => {
+  const player = new Player();
+
+  const flowResponse = player.start({
+    id: "test-flow",
+    views: [
+      { id: "view-1", type: "view" },
+      { id: "view-2", type: "view" },
+    ],
+    data: {
+      cat: {
+        name: "Sam",
+      },
+    },
+    navigation: {
+      BEGIN: "FLOW_1",
+      FLOW_1: {
+        startState: "VIEW_1",
+        VIEW_1: {
+          state_type: "VIEW",
+          ref: "view-1",
+          transitions: {
+            Next: "ACTION_1",
+          },
+        },
+        ACTION_1: {
+          state_type: "ACTION",
+          exp: '{{cat.name}} = "FRODO"',
+          transitions: {
+            "*": "END",
+          },
+        },
+        END: {
+          state_type: "END",
+          outcome: "favoritePet",
+          param: "{{cat.name}}",
+        },
+      },
+    },
+  });
+
+  (player.getState() as InProgressState).controllers.flow.transition("Next");
+
+  expect((await flowResponse).endState).toStrictEqual({
+    state_type: "END",
+    outcome: "favoritePet",
+    param: "FRODO",
+  });
+});
+
+test("works with iffe flows", async () => {
+  const player = new Player();
+  const flowResponse = player.start({
+    id: "first-end-flow",
+    navigation: {
+      BEGIN: "DoneWithTopicFlow",
+      DoneWithTopicFlow: {
+        startState: "END_done",
+        END_before_topic: { state_type: "END", outcome: "BACK" },
+        END_done: { state_type: "END", outcome: "doneWithTopic" },
+      },
+    },
+  });
+
+  expect((await flowResponse).endState).toStrictEqual({
+    state_type: "END",
+    outcome: "doneWithTopic",
+  });
+});

package/src/__tests__/helpers/action-exp.plugin.ts

@@ -0,0 +1,22 @@
+import type { Player, PlayerPlugin } from "../../player";
+
+export class ActionExpPlugin implements PlayerPlugin {
+  name = "action-plugin";
+
+  apply(player: Player) {
+    player.hooks.view.tap("test", (view) => {
+      view.hooks.resolver.tap("test", (resolver) => {
+        resolver.hooks.beforeResolve.tap("test", (n) => {
+          return {
+            ...n,
+            plugins: {
+              stringResolver: {
+                propertiesToSkip: ["exp"],
+              },
+            },
+          };
+        });
+      });
+    });
+  }
+}

package/src/__tests__/helpers/actions.flow.ts

@@ -0,0 +1,67 @@
+export default {
+  id: "generated-flow",
+  views: [
+    {
+      id: "action",
+      type: "collection",
+      values: [
+        {
+          asset: {
+            id: "just-a-label",
+            type: "text",
+            value: "Click some stuff!",
+          },
+        },
+        {
+          asset: {
+            id: "action-1",
+            type: "action",
+            exp: "{{count1}} += 1",
+            label: {
+              asset: {
+                id: "action-label-1",
+                type: "text",
+                value: "Clicked {{count1}} times",
+              },
+            },
+          },
+        },
+        {
+          asset: {
+            id: "action-2",
+            type: "action",
+            exp: "{{count2}} += 1",
+            label: {
+              asset: {
+                id: "action-label-2",
+                type: "text",
+                value: "Clicked {{count2}} times",
+              },
+            },
+          },
+        },
+      ],
+    },
+  ],
+  data: {
+    count1: 0,
+    count2: 0,
+  },
+  navigation: {
+    BEGIN: "FLOW_1",
+    FLOW_1: {
+      startState: "VIEW_1",
+      VIEW_1: {
+        state_type: "VIEW",
+        ref: "action",
+        transitions: {
+          "*": "END_Done",
+        },
+      },
+      END_Done: {
+        state_type: "END",
+        outcome: "done",
+      },
+    },
+  },
+};

package/src/__tests__/helpers/binding.plugin.ts

@@ -0,0 +1,125 @@
+import type { FormatType } from "../../schema";
+import type { ValidationController } from "../../controllers/validation";
+import type { Player, PlayerPlugin } from "../../player";
+
+/**
+ * Adds a validation provider to the validator registry
+ *
+ * @param vc - validation controller
+ */
+export const addValidator = (vc: ValidationController) => {
+  vc.hooks.createValidatorRegistry.tap("test", (registry) => {
+    registry.register<{
+      /** specific names to match against */
+      names: string[];
+    }>("names", (context, val, options) => {
+      if (options?.names?.includes(val)) {
+        return undefined;
+      }
+
+      return {
+        message: `Names just be in: ${options?.names?.join(",")}`,
+      };
+    });
+
+    registry.register<any>("expression", (context, value, options) => {
+      if (options?.exp === undefined) {
+        return;
+      }
+
+      const result = context.evaluate(options.exp);
+
+      if (!result) {
+        return { message: "Expression evaluation failed" };
+      }
+    });
+
+    registry.register("required", (context, value) => {
+      if (value === undefined || value === null || value === "") {
+        return {
+          message: "A value is required",
+          severity: "error",
+        };
+      }
+    });
+
+    registry.register<any>("integer", (context, value) => {
+      if (typeof value !== "number" || Math.floor(value) !== value) {
+        return {
+          message: "Value must be an integer",
+          parameters: {
+            type: typeof value,
+            flooredValue: Math.floor(value),
+            value,
+          },
+          severity: "error",
+        };
+      }
+    });
+  });
+};
+
+/** A plugin that tracks bindings and attaches validations to anything w/ a binding property */
+export default class TrackBindingPlugin implements PlayerPlugin {
+  name = "track-binding";
+
+  apply(player: Player) {
+    player.hooks.validationController.tap(this.name, (validationProvider) => {
+      addValidator(validationProvider);
+    });
+    const indexFormatter: FormatType<
+      number,
+      string,
+      {
+        /**
+         * @param
+         * @ignore
+         */
+        options: Array<string>;
+      }
+    > = {
+      name: "indexOf",
+      format: (val, options) => {
+        if (typeof val === "number" && options?.options) {
+          return options.options[val];
+        }
+
+        return undefined;
+      },
+      deformat: (val, options) => {
+        if (typeof val === "string" && options?.options) {
+          return options.options.indexOf(val);
+        }
+      },
+    };
+
+    player.hooks.schema.tap("test", (schema) => {
+      schema.addFormatters([indexFormatter] as any);
+    });
+
+    player.hooks.viewController.tap("test", (vc) => {
+      vc.hooks.view.tap("test", (view) => {
+        view.hooks.resolver.tap("test", (resolver) => {
+          resolver.hooks.resolve.tap("test", (val, node, options) => {
+            if (val?.binding) {
+              const currentValue = options?.data.model.get(val.binding);
+              options.validation?.track(val.binding);
+              const valObj = options.validation?.get(val.binding);
+
+              if (valObj) {
+                return {
+                  ...val,
+                  value: currentValue,
+                  validation: valObj,
+                  allValidations: options.validation?.getAll(),
+                };
+              }
+            }
+
+            return val;
+          });
+        });
+      });
+    });
+  }
+}

package/src/__tests__/helpers/expression.plugin.ts

@@ -0,0 +1,88 @@
+import type { Player, PlayerPlugin } from "../../player";
+import type {
+  Binding,
+  Expression,
+  ExpressionHandler,
+  ValidatorFunction,
+} from "../..";
+
+/**
+ * Adds a validation provider to the validator registry
+ *
+ * @param vc - validation controller
+ */
+export const sumFunction: ExpressionHandler<
+  [Binding | unknown, string | string[]],
+  number
+> = (ctx, modelOrReference, propName) => {
+  const values = Array.isArray(modelOrReference)
+    ? modelOrReference
+    : [modelOrReference];
+
+  let total = 0;
+  values.forEach((value) => {
+    total += ctx.model.get(value);
+  });
+
+  return total;
+};
+
+/** A plugin that tracks bindings and attaches validations to anything w/ a binding property */
+export default class TestExpressionPlugin implements PlayerPlugin {
+  name = "expressions";
+
+  apply(player: Player) {
+    player.hooks.expressionEvaluator.tap(this.name, (expressionEvaluator) => {
+      expressionEvaluator.addExpressionFunction("sumValues", sumFunction);
+    });
+  }
+}
+
+/** A test validator function that makes sure the value is present */
+export const required: ValidatorFunction<{
+  /** An optional expression to limit the required check only if true */
+  if?: Expression;
+
+  /** An optional expression to limit the required check only if false */
+  ifNot?: Expression;
+}> = (context, value) => {
+  if (value === undefined || value === null || value === "") {
+    const message = context.constants.getConstants(
+      "validation.required",
+      "constants",
+      "A value is required",
+    ) as string;
+    return { message, severity: "error" };
+  }
+};
+
+/** A test validator function that makes sure the value is present given a condition */
+export const requiredIf: ValidatorFunction<{
+  /** binding of the required field */
+  param?: string;
+  /** expression that needs to be true for the field to be required */
+  exp?: string;
+}> = (context, value, options) => {
+  let ifExp = "false";
+  const evaluatedVal = context.evaluate(options?.exp || options?.param);
+
+  if (typeof evaluatedVal === "boolean") ifExp = JSON.stringify(evaluatedVal);
+
+  return required(context, value, { ...options, if: ifExp });
+};
+
+/** A test plugin that registers requiredIf validation */
+export class RequiredIfValidationProviderPlugin implements PlayerPlugin {
+  name = "RequiredIfValidationProvider";
+
+  apply(player: Player) {
+    player.hooks.validationController.tap(this.name, (validationController) => {
+      validationController.hooks.createValidatorRegistry.tap(
+        this.name,
+        (validationRegistry) => {
+          validationRegistry.register("requiredIf", requiredIf);
+        },
+      );
+    });
+  }
+}

package/src/__tests__/helpers/transform-plugin.ts

@@ -0,0 +1,19 @@
+import type { Player, PlayerPlugin } from "../..";
+
+/** Just need something quick to use in tests */
+export class AssetTransformPlugin implements PlayerPlugin {
+  name = "asset-transform-test";
+  public readonly registry: Array<[string, any]>;
+
+  constructor(transforms: Array<[string, any]>) {
+    this.registry = transforms;
+  }
+
+  apply(player: Player) {
+    player.hooks.viewController.tap(this.name, (vc) => {
+      this.registry.forEach(([key, value]) =>
+        vc.transformRegistry.set(key, value),
+      );
+    });
+  }
+}

package/src/__tests__/helpers/validation.flow.ts

@@ -0,0 +1,56 @@
+export default {
+  id: "minimal-player-content-response-format",
+  topic: "MOCK",
+  schema: {
+    ROOT: {
+      returns: {
+        type: "returnsType",
+      },
+    },
+    returnsType: {
+      input: {
+        type: "TextType",
+        validation: [
+          {
+            type: "required",
+          },
+          {
+            param: 6,
+            type: "maxLength",
+          },
+        ],
+      },
+    },
+  },
+  data: {},
+  views: [
+    {
+      id: "KitchenSink-View1",
+      title: {
+        asset: {
+          id: "KitchenSink-View1-Title",
+          type: "text",
+          value: "Minimal JSON Example",
+        },
+      },
+      type: "questionAnswer",
+    },
+  ],
+  navigation: {
+    BEGIN: "KitchenSinkFlow",
+    KitchenSinkFlow: {
+      END_Done: {
+        outcome: "doneWithTopic",
+        state_type: "END",
+      },
+      VIEW_KitchenSink_1: {
+        ref: "KitchenSink-View1",
+        state_type: "VIEW",
+        transitions: {
+          "*": "END_Done",
+        },
+      },
+      startState: "VIEW_KitchenSink_1",
+    },
+  },
+};