test(dashboard): assert seeded analytics dynamically

Author: izadoesdev

apps/dashboard/app/api/test/e2e/clickhouse/route.ts

@@ -109,6 +109,24 @@ export async function POST(request: Request): Promise<Response> {
 		};
 	});
 
+	const screenViewEvents = events.filter(
+		(event) => event.event_name === "screen_view"
+	);
+	const screenViewsByCountry = screenViewEvents.reduce<Record<string, number>>(
+		(acc, event) => {
+			acc[event.country] = (acc[event.country] ?? 0) + 1;
+			return acc;
+		},
+		{}
+	);
+	const screenViewsByPath = screenViewEvents.reduce<Record<string, number>>(
+		(acc, event) => {
+			acc[event.path] = (acc[event.path] ?? 0) + 1;
+			return acc;
+		},
+		{}
+	);
+
 	const outgoingLinks = sessions
 		.slice(0, Math.ceil(eventCount / 20))
 		.map((session) => ({
@@ -138,6 +156,9 @@ export async function POST(request: Request): Promise<Response> {
 	return Response.json({
 		events: events.length,
 		outgoingLinks: outgoingLinks.length,
+		screenViews: screenViewEvents.length,
+		screenViewsByCountry,
+		screenViewsByPath,
 		seeded: true,
 		websiteId: body.websiteId,
 	});

apps/dashboard/test/e2e/fixtures.ts

@@ -1,6 +1,17 @@
 import { test as base } from "@playwright/test";
 
+interface E2EAnalyticsSeed {
+	events: number;
+	outgoingLinks: number;
+	screenViews: number;
+	screenViewsByCountry: Record<string, number>;
+	screenViewsByPath: Record<string, number>;
+	seeded: true;
+	websiteId: string;
+}
+
 interface E2ESession {
+	analyticsSeed: E2EAnalyticsSeed | null;
 	email: string;
 	name: string;
 	organizationId: string;
@@ -34,9 +45,9 @@ function testScope(testTitle: string): string {
 async function seedClickHouse(
 	request: import("@playwright/test").APIRequestContext,
 	websiteId: string
-): Promise<void> {
+): Promise<E2EAnalyticsSeed | null> {
 	if (process.env.DATABUDDY_E2E_SEED_CLICKHOUSE !== "1") {
-		return;
+		return null;
 	}
 
 	const response = await request.post("/api/test/e2e/clickhouse", {
@@ -52,6 +63,8 @@ async function seedClickHouse(
 			`E2E ClickHouse seed failed with ${response.status()}: ${await response.text()}`
 		);
 	}
+
+	return (await response.json()) as E2EAnalyticsSeed;
 }
 
 export const test = base.extend<E2EFixtures>({
@@ -72,11 +85,14 @@ export const test = base.extend<E2EFixtures>({
 				`E2E session bootstrap failed with ${response.status()}: ${await response.text()}`
 			);
 		}
-		const session = (await response.json()) as E2ESession;
-		if (session.websiteId) {
-			await seedClickHouse(page.context().request, session.websiteId);
-		}
-		await use(session);
+		const session = (await response.json()) as Omit<
+			E2ESession,
+			"analyticsSeed"
+		>;
+		const analyticsSeed = session.websiteId
+			? await seedClickHouse(page.context().request, session.websiteId)
+			: null;
+		await use({ ...session, analyticsSeed });
 	},
 	authenticatedPage: async ({ e2eSession: _session, page }, use) => {
 		await use(page);

apps/dashboard/test/e2e/specs/regressions/website-analytics.spec.ts

@@ -1,5 +1,9 @@
 import { expect, test } from "@/test/e2e/fixtures";
 
+function formattedCount(value: number): string {
+	return new Intl.NumberFormat("en-US").format(value);
+}
+
 test(
 	"renders analytics controls in the website topbar",
 	{ tag: ["@regression", "@core"] },
@@ -32,10 +36,22 @@ test(
 
 		await authenticatedPage.goto(`/demo/${e2eSession.websiteId}`);
 
-		await expect(authenticatedPage.getByText("187").first()).toBeVisible({
-			timeout: 20_000,
-		});
-		await expect(authenticatedPage.getByText("/pricing").first()).toBeVisible();
+		expect(e2eSession.analyticsSeed).toBeTruthy();
+		const seed = e2eSession.analyticsSeed;
+		if (!seed) {
+			throw new Error("Expected E2E analytics seed metadata");
+		}
+
+		await expect(
+			authenticatedPage.getByText(formattedCount(seed.screenViews)).first()
+		).toBeVisible({ timeout: 20_000 });
+		const topSeededPath = Object.entries(seed.screenViewsByPath).sort(
+			([, a], [, b]) => b - a
+		)[0]?.[0];
+		expect(topSeededPath).toBeTruthy();
+		await expect(
+			authenticatedPage.getByText(topSeededPath ?? "/").first()
+		).toBeVisible();
 
 		const topbar = authenticatedPage.getByRole("toolbar", {
 			name: "Dashboard top bar",
@@ -50,5 +66,8 @@ test(
 		const main = authenticatedPage.getByRole("main");
 		await expect(main.getByText("Country")).toBeVisible();
 		await expect(main.getByText("US", { exact: true })).toBeVisible();
+		await expect(
+			main.getByText(formattedCount(seed.screenViewsByCountry.US ?? 0)).first()
+		).toBeVisible({ timeout: 20_000 });
 	}
 );