test: tracking

RBND-studio · Jan 19, 2024 · ebbf0d0 · ebbf0d0
1 parent 9ac0d1e
commit ebbf0d0
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 6 deletions.
diff --git a/src/cloud/index.ts b/src/cloud/index.ts
@@ -42,7 +42,7 @@ export const init = async (options: FlowsCloudOptions): Promise<void> => {
     tracking: (event) => {
       options.tracking?.(event);
 
-      const { flowHash, flowId, type, projectId, stepIndex, stepHash, userId } = event;
+      const { flowHash, flowId, type, projectId = "", stepIndex, stepHash, userId } = event;
 
       void (async () =>
         api(apiUrl)

diff --git a/src/flows-context.ts b/src/flows-context.ts
@@ -107,12 +107,13 @@ export class FlowsContext {
 
   track(props: Omit<TrackingEvent, "userId" | "projectId" | "location">): this {
     if (!this.tracking) return this;
-    this.tracking({
+    const event: TrackingEvent = {
       userId: this.userId,
-      projectId: this.projectId,
       location: getPathname(),
       ...props,
-    });
+    };
+    if (this.projectId) event.projectId = this.projectId;
+    this.tracking(event);
     return this;
   }
 

diff --git a/src/types/options.ts b/src/types/options.ts
@@ -16,7 +16,7 @@ export interface TrackingEvent {
    */
   flowHash: string;
   userId?: string;
-  projectId: string;
+  projectId?: string;
   /**
    * Browser location
    * @example

diff --git a/src/validation.ts b/src/validation.ts
@@ -170,8 +170,11 @@ const OptionsStruct: Describe<FlowsInitOptions> = type({
   customApiUrl: optional(string()),
   onLocationChange: optional(func()) as Describe<FlowsInitOptions["onLocationChange"]>,
 });
-const CloudOptionsStruct: Describe<Omit<FlowsCloudOptions, keyof FlowsInitOptions>> = type({
+const CloudOptionsStruct: Describe<
+  Omit<FlowsCloudOptions, keyof Omit<FlowsInitOptions, "projectId">>
+> = type({
   customApiUrl: optional(string()),
+  projectId: string(),
 });
 
 const validateStruct =

diff --git a/tests/tracking/tracking.html b/tests/tracking/tracking.html
@@ -0,0 +1,15 @@
+<!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="start">Start flow</button>
+    <div class="log"></div>
+
+    <script type="module" src="./tracking.ts"></script>
+  </body>
+</html>
diff --git a/tests/tracking/tracking.spec.ts b/tests/tracking/tracking.spec.ts
@@ -0,0 +1,13 @@
+import { expect, test } from "@playwright/test";
+
+test("Emits correct events", async ({ page }) => {
+  await page.goto("/tracking/tracking.html");
+  await page.locator(".start").click();
+  await page.locator(".flows-continue").click();
+  await page.locator(".flows-back").click();
+  await page.locator(".flows-cancel").click();
+  await page.locator(".start").click();
+  await page.locator(".flows-continue").click();
+  await page.locator(".flows-finish").click();
+  await expect(page).toHaveScreenshot({ scale: "css" });
+});
diff --git a/...s/tracking/tracking.spec.ts-snapshots/Emits-correct-events-1-chromium-linux.png b/...s/tracking/tracking.spec.ts-snapshots/Emits-correct-events-1-chromium-linux.png
diff --git a/tests/tracking/tracking.spec.ts-snapshots/Emits-correct-events-1-firefox-linux.png b/tests/tracking/tracking.spec.ts-snapshots/Emits-correct-events-1-firefox-linux.png
diff --git a/tests/tracking/tracking.spec.ts-snapshots/Emits-correct-events-1-webkit-linux.png b/tests/tracking/tracking.spec.ts-snapshots/Emits-correct-events-1-webkit-linux.png
diff --git a/tests/tracking/tracking.ts b/tests/tracking/tracking.ts
@@ -0,0 +1,25 @@
+import { init } from "../../dist";
+
+void init({
+  flows: [
+    {
+      id: "flow",
+      element: ".start",
+      frequency: "every-time",
+      steps: [
+        {
+          title: "Step 1",
+        },
+        {
+          title: "Step 2",
+        },
+      ],
+    },
+  ],
+  tracking: (e) => {
+    const p = document.createElement("p");
+    p.classList.add("log-item");
+    p.innerText = JSON.stringify(e);
+    document.querySelector(".log")?.appendChild(p);
+  },
+});