diff --git a/src/cloud/index.ts b/src/cloud/index.ts index 9a76737..85d1539 100644 --- a/src/cloud/index.ts +++ b/src/cloud/index.ts @@ -42,7 +42,7 @@ export const init = async (options: FlowsCloudOptions): Promise => { 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 index 2f46f15..efefdab 100644 --- a/src/flows-context.ts +++ b/src/flows-context.ts @@ -107,12 +107,13 @@ export class FlowsContext { track(props: Omit): 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 index 960531b..79e8dcc 100644 --- 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 index 2848aff..60a6cca 100644 --- a/src/validation.ts +++ b/src/validation.ts @@ -170,8 +170,11 @@ const OptionsStruct: Describe = type({ customApiUrl: optional(string()), onLocationChange: optional(func()) as Describe, }); -const CloudOptionsStruct: Describe> = type({ +const CloudOptionsStruct: Describe< + Omit> +> = type({ customApiUrl: optional(string()), + projectId: string(), }); const validateStruct = diff --git a/tests/tracking/tracking.html b/tests/tracking/tracking.html new file mode 100644 index 0000000..cfef143 --- /dev/null +++ b/tests/tracking/tracking.html @@ -0,0 +1,15 @@ + + + + + + + + + + +
+ + + + diff --git a/tests/tracking/tracking.spec.ts b/tests/tracking/tracking.spec.ts new file mode 100644 index 0000000..71a142f --- /dev/null +++ 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/tests/tracking/tracking.spec.ts-snapshots/Emits-correct-events-1-chromium-linux.png b/tests/tracking/tracking.spec.ts-snapshots/Emits-correct-events-1-chromium-linux.png new file mode 100644 index 0000000..639ff67 Binary files /dev/null and b/tests/tracking/tracking.spec.ts-snapshots/Emits-correct-events-1-chromium-linux.png differ 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 new file mode 100644 index 0000000..cafb090 Binary files /dev/null and b/tests/tracking/tracking.spec.ts-snapshots/Emits-correct-events-1-firefox-linux.png differ 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 new file mode 100644 index 0000000..1c70351 Binary files /dev/null and b/tests/tracking/tracking.spec.ts-snapshots/Emits-correct-events-1-webkit-linux.png differ diff --git a/tests/tracking/tracking.ts b/tests/tracking/tracking.ts new file mode 100644 index 0000000..b02a1fd --- /dev/null +++ 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); + }, +});