test: branching

RBND-studio · Jan 17, 2024 · 404f5a7 · 404f5a7
1 parent ff8cb36
commit 404f5a7
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 0 deletions.
diff --git a/tests/branch/branch.html b/tests/branch/branch.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/tests/reset.css" />
+    <link rel="stylesheet" href="/public/flows.css" />
+  </head>
+  <body>
+    <button class="enter-1">Variant 1</button>
+    <button class="enter-2">Variant 2</button>
+    <div
+      style="background-color: grey; width: 20px; height: 20px; margin: 40px"
+      class="target"
+    ></div>
+
+    <script type="module" src="./branch.ts"></script>
+  </body>
+</html>
diff --git a/tests/branch/branch.spec.ts b/tests/branch/branch.spec.ts
@@ -0,0 +1,36 @@
+import { expect, test } from "@playwright/test";
+
+test("Enter branch by footerAction", async ({ page }) => {
+  await page.goto("/branch/branch.html");
+  await page.locator(".flows-option").nth(0).click();
+  await expect(page.locator(".flows-tooltip")).toContainText("Variant 1");
+  await page.locator(".flows-finish").click();
+  await page.goto("/branch/branch.html");
+  await page.locator(".flows-option").nth(1).click();
+  await expect(page.locator(".flows-tooltip")).toContainText("Variant 2");
+});
+test("Enter branch by click", async ({ page }) => {
+  await page.goto("/branch/branch.html");
+  await page.locator(".enter-1").click();
+  await expect(page.locator(".flows-tooltip")).toContainText("Variant 1");
+  await page.locator(".flows-finish").click();
+  await page.goto("/branch/branch.html");
+  await page.locator(".enter-2").click();
+  await expect(page.locator(".flows-tooltip")).toContainText("Variant 2");
+});
+test("Exits branch and returns to root step", async ({ page }) => {
+  await page.goto("/branch/branch.html?lastStep=true");
+  await page.locator(".enter-1").click();
+  await expect(page.locator(".flows-tooltip")).toContainText("Variant 1");
+  await page.locator(".flows-continue").click();
+  await expect(page.locator(".flows-tooltip")).toContainText("Last Step");
+});
+test("branch can have multiple steps", async ({ page }) => {
+  await page.goto("/branch/branch.html?lastStep=true");
+  await page.locator(".enter-2").click();
+  await expect(page.locator(".flows-tooltip")).toContainText("Variant 2");
+  await page.locator(".flows-continue").click();
+  await expect(page.locator(".flows-tooltip")).toContainText("Var 2 last step");
+  await page.locator(".flows-continue").click();
+  await expect(page.locator(".flows-tooltip")).toContainText("Last Step");
+});
diff --git a/tests/branch/branch.ts b/tests/branch/branch.ts
@@ -0,0 +1,56 @@
+import type { FlowSteps } from "../../dist";
+import { init } from "../../dist";
+
+const lastStep = new URLSearchParams(window.location.search).get("lastStep") === "true";
+
+const steps: FlowSteps = [
+  {
+    element: ".target",
+    title: "Hello",
+    hideNext: true,
+    wait: [
+      { element: ".enter-1", action: 0 },
+      { element: ".enter-2", action: 1 },
+    ],
+    footerActions: {
+      right: [
+        { text: "1", action: 0 },
+        { text: "2", action: 1 },
+      ],
+    },
+  },
+  [
+    [
+      {
+        element: ".target",
+        title: "Variant 1",
+      },
+    ],
+    [
+      {
+        element: ".target",
+        title: "Variant 2",
+      },
+      {
+        element: ".target",
+        title: "Var 2 last step",
+      },
+    ],
+  ],
+];
+
+if (lastStep)
+  steps.push({
+    element: ".target",
+    title: "Last Step",
+  });
+
+void init({
+  flows: [
+    {
+      id: "flow",
+      location: "/",
+      steps,
+    },
+  ],
+});