@probat/react 0.2.1 → 0.3.0

package/src/__tests__/Experiment.test.tsx

@@ -0,0 +1,764 @@
+import React, { StrictMode } from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { ProbatProviderClient } from "../components/ProbatProviderClient";
+import { Experiment } from "../components/Experiment";
+import { resetDedupe } from "../utils/dedupeStorage";
+import { resetInstanceIdState } from "../utils/stableInstanceId";
+import { MockIntersectionObserver } from "./setup";
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function wrapper({ children }: { children: React.ReactNode }) {
+    return (
+        <ProbatProviderClient userId="test-user-id" host="https://api.test.com">
+            {children}
+        </ProbatProviderClient>
+    );
+}
+
+function wrapperWithBootstrap(bootstrap: Record<string, string>) {
+    return function BootstrapWrapper({ children }: { children: React.ReactNode }) {
+        return (
+            <ProbatProviderClient
+                userId="test-user-id"
+                host="https://api.test.com"
+                bootstrap={bootstrap}
+            >
+                {children}
+            </ProbatProviderClient>
+        );
+    };
+}
+
+// ── Setup / teardown ───────────────────────────────────────────────────────
+
+beforeEach(() => {
+    vi.useFakeTimers();
+    localStorage.clear();
+    sessionStorage.clear();
+    resetDedupe();
+    resetInstanceIdState();
+    MockIntersectionObserver._reset();
+    vi.restoreAllMocks();
+    global.fetch = vi.fn();
+});
+
+afterEach(() => {
+    vi.useRealTimers();
+});
+
+// ── Assignment caching ─────────────────────────────────────────────────────
+
+describe("assignment caching", () => {
+    it("caches assignment in localStorage after fetch", async () => {
+        (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+            ok: true,
+            json: () => Promise.resolve({ variant_key: "ai_v1" }),
+        });
+
+        render(
+            <Experiment
+                id="test-exp"
+                control={<div>Control</div>}
+                variants={{ ai_v1: <div>Variant AI</div> }}
+            />,
+            { wrapper }
+        );
+
+        // Initially renders control (sync)
+        expect(screen.getByText("Control")).toBeInTheDocument();
+
+        // Flush fetch
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        expect(screen.getByText("Variant AI")).toBeInTheDocument();
+
+        // Verify localStorage
+        const stored = localStorage.getItem("probat:assignment:test-exp");
+        expect(stored).toBeTruthy();
+        const parsed = JSON.parse(stored!);
+        expect(parsed.variantKey).toBe("ai_v1");
+    });
+
+    it("reads cached assignment without fetching", async () => {
+        localStorage.setItem(
+            "probat:assignment:cached-exp",
+            JSON.stringify({ variantKey: "ai_v1", ts: Date.now() })
+        );
+
+        render(
+            <Experiment
+                id="cached-exp"
+                control={<div>Control</div>}
+                variants={{ ai_v1: <div>Cached Variant</div> }}
+            />,
+            { wrapper }
+        );
+
+        // Should render variant immediately from cache
+        expect(screen.getByText("Cached Variant")).toBeInTheDocument();
+        expect(global.fetch).not.toHaveBeenCalled();
+    });
+
+    it("uses bootstrap over localStorage", () => {
+        localStorage.setItem(
+            "probat:assignment:boot-exp",
+            JSON.stringify({ variantKey: "old_variant", ts: Date.now() })
+        );
+
+        render(
+            <Experiment
+                id="boot-exp"
+                control={<div>Control</div>}
+                variants={{ bootstrapped: <div>Bootstrapped</div>, old_variant: <div>Old</div> }}
+            />,
+            { wrapper: wrapperWithBootstrap({ "boot-exp": "bootstrapped" }) }
+        );
+
+        expect(screen.getByText("Bootstrapped")).toBeInTheDocument();
+    });
+
+    it("falls back to control on fetch failure", async () => {
+        (global.fetch as ReturnType<typeof vi.fn>).mockRejectedValueOnce(
+            new Error("Network error")
+        );
+
+        render(
+            <Experiment
+                id="fail-exp"
+                control={<div>Fallback Control</div>}
+                variants={{ ai_v1: <div>Variant</div> }}
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        expect(screen.getByText("Fallback Control")).toBeInTheDocument();
+        // Should NOT persist fallback
+        expect(localStorage.getItem("probat:assignment:fail-exp")).toBeNull();
+    });
+
+    it("falls back to control for unknown variant key", async () => {
+        (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+            ok: true,
+            json: () => Promise.resolve({ variant_key: "nonexistent_variant" }),
+        });
+
+        render(
+            <Experiment
+                id="unknown-exp"
+                control={<div>Control</div>}
+                variants={{ ai_v1: <div>Variant</div> }}
+                debug
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        expect(screen.getByText("Control")).toBeInTheDocument();
+    });
+});
+
+// ── Dedupe key behavior ────────────────────────────────────────────────────
+
+describe("dedupe", () => {
+    it("does not double-send impressions for same experiment on same page", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        // First call: decide endpoint, second+ calls: metrics
+        fetchMock.mockResolvedValue({
+            ok: true,
+            json: () => Promise.resolve({ variant_key: "control" }),
+        });
+
+        // Use explicit componentInstanceId so dedupe key is stable across mounts
+        const { unmount } = render(
+            <Experiment
+                id="dedupe-exp"
+                control={<div>Control</div>}
+                variants={{}}
+                componentInstanceId="stable-inst"
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        // Trigger intersection
+        const observer = MockIntersectionObserver._instances[0];
+        if (observer) {
+            act(() => observer._trigger(true));
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(300);
+            });
+        }
+
+        const metricCalls1 = fetchMock.mock.calls.filter(
+            (c: any[]) => typeof c[0] === "string" && c[0].includes("/experiment/metrics")
+        );
+
+        // Unmount and remount with same instanceId
+        unmount();
+
+        render(
+            <Experiment
+                id="dedupe-exp"
+                control={<div>Control</div>}
+                variants={{}}
+                componentInstanceId="stable-inst"
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        const observer2 = MockIntersectionObserver._instances[MockIntersectionObserver._instances.length - 1];
+        if (observer2) {
+            act(() => observer2._trigger(true));
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(300);
+            });
+        }
+
+        const metricCalls2 = fetchMock.mock.calls.filter(
+            (c: any[]) => typeof c[0] === "string" && c[0].includes("/experiment/metrics")
+        );
+
+        // Should only have 1 impression total (deduped on second mount)
+        expect(metricCalls2.length).toBe(metricCalls1.length);
+    });
+});
+
+// ── Click capture rules ────────────────────────────────────────────────────
+
+describe("click tracking", () => {
+    beforeEach(() => {
+        localStorage.setItem(
+            "probat:assignment:click-exp",
+            JSON.stringify({ variantKey: "control", ts: Date.now() })
+        );
+    });
+
+    it("captures clicks on data-probat-click='primary'", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        fetchMock.mockResolvedValue({ ok: true });
+
+        render(
+            <Experiment
+                id="click-exp"
+                control={
+                    <div>
+                        <span data-probat-click="primary" data-testid="primary-el">
+                            Primary CTA
+                        </span>
+                    </div>
+                }
+                variants={{}}
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        fireEvent.click(screen.getByTestId("primary-el"));
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        const clickCalls = fetchMock.mock.calls.filter((c: any[]) => {
+            if (typeof c[0] !== "string" || !c[0].includes("/experiment/metrics")) return false;
+            const body = JSON.parse(c[1]?.body || "{}");
+            return body.event === "$experiment_click";
+        });
+
+        expect(clickCalls.length).toBe(1);
+        const payload = JSON.parse(clickCalls[0][1].body);
+        expect(payload.properties.click_is_primary).toBe(true);
+        expect(payload.properties.click_target_text).toBe("Primary CTA");
+    });
+
+    it("captures clicks on <button>", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        fetchMock.mockResolvedValue({ ok: true });
+
+        render(
+            <Experiment
+                id="click-exp"
+                control={<button data-testid="btn">Click Me</button>}
+                variants={{}}
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        fireEvent.click(screen.getByTestId("btn"));
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        const clickCalls = fetchMock.mock.calls.filter((c: any[]) => {
+            if (typeof c[0] !== "string" || !c[0].includes("/experiment/metrics")) return false;
+            const body = JSON.parse(c[1]?.body || "{}");
+            return body.event === "$experiment_click";
+        });
+
+        expect(clickCalls.length).toBe(1);
+        const payload = JSON.parse(clickCalls[0][1].body);
+        expect(payload.properties.click_target_tag).toBe("BUTTON");
+        expect(payload.properties.click_is_primary).toBe(false);
+    });
+
+    it("captures clicks on <a>", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        fetchMock.mockResolvedValue({ ok: true });
+
+        render(
+            <Experiment
+                id="click-exp"
+                control={<a href="#" data-testid="link">Link</a>}
+                variants={{}}
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        fireEvent.click(screen.getByTestId("link"));
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        const clickCalls = fetchMock.mock.calls.filter((c: any[]) => {
+            if (typeof c[0] !== "string" || !c[0].includes("/experiment/metrics")) return false;
+            const body = JSON.parse(c[1]?.body || "{}");
+            return body.event === "$experiment_click";
+        });
+
+        expect(clickCalls.length).toBe(1);
+    });
+
+    it("captures clicks on role='button'", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        fetchMock.mockResolvedValue({ ok: true });
+
+        render(
+            <Experiment
+                id="click-exp"
+                control={<div role="button" data-testid="role-btn">Role Btn</div>}
+                variants={{}}
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        fireEvent.click(screen.getByTestId("role-btn"));
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        const clickCalls = fetchMock.mock.calls.filter((c: any[]) => {
+            if (typeof c[0] !== "string" || !c[0].includes("/experiment/metrics")) return false;
+            const body = JSON.parse(c[1]?.body || "{}");
+            return body.event === "$experiment_click";
+        });
+
+        expect(clickCalls.length).toBe(1);
+    });
+
+    it("ignores clicks on non-interactive elements", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        fetchMock.mockResolvedValue({ ok: true });
+
+        render(
+            <Experiment
+                id="click-exp"
+                control={<p data-testid="paragraph">Just text</p>}
+                variants={{}}
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        fireEvent.click(screen.getByTestId("paragraph"));
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        const clickCalls = fetchMock.mock.calls.filter((c: any[]) => {
+            if (typeof c[0] !== "string" || !c[0].includes("/experiment/metrics")) return false;
+            const body = JSON.parse(c[1]?.body || "{}");
+            return body.event === "$experiment_click";
+        });
+
+        expect(clickCalls.length).toBe(0);
+    });
+});
+
+// ── Impression visibility (IntersectionObserver + 250ms) ───────────────────
+
+describe("impression tracking", () => {
+    beforeEach(() => {
+        localStorage.setItem(
+            "probat:assignment:vis-exp",
+            JSON.stringify({ variantKey: "control", ts: Date.now() })
+        );
+    });
+
+    it("sends impression after >=250ms of 50% visibility", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        fetchMock.mockResolvedValue({ ok: true });
+
+        render(
+            <Experiment
+                id="vis-exp"
+                control={<div>Visible</div>}
+                variants={{}}
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        const observer = MockIntersectionObserver._instances[MockIntersectionObserver._instances.length - 1];
+        expect(observer).toBeDefined();
+
+        // Trigger visible
+        act(() => observer._trigger(true));
+
+        // Before 250ms — should NOT have sent
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(200);
+        });
+
+        let impressionCalls = fetchMock.mock.calls.filter((c: any[]) => {
+            if (typeof c[0] !== "string" || !c[0].includes("/experiment/metrics")) return false;
+            const body = JSON.parse(c[1]?.body || "{}");
+            return body.event === "$experiment_exposure";
+        });
+        expect(impressionCalls.length).toBe(0);
+
+        // After 250ms total — should have sent
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(100);
+        });
+
+        impressionCalls = fetchMock.mock.calls.filter((c: any[]) => {
+            if (typeof c[0] !== "string" || !c[0].includes("/experiment/metrics")) return false;
+            const body = JSON.parse(c[1]?.body || "{}");
+            return body.event === "$experiment_exposure";
+        });
+        expect(impressionCalls.length).toBe(1);
+
+        const payload = JSON.parse(impressionCalls[0][1].body);
+        expect(payload.properties.experiment_id).toBe("vis-exp");
+        expect(payload.properties.variant_key).toBe("control");
+    });
+
+    it("cancels impression if element leaves viewport before 250ms", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        fetchMock.mockResolvedValue({ ok: true });
+
+        render(
+            <Experiment
+                id="vis-exp"
+                control={<div>Short Visit</div>}
+                variants={{}}
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        const observer = MockIntersectionObserver._instances[MockIntersectionObserver._instances.length - 1];
+
+        // Enter viewport
+        act(() => observer._trigger(true));
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(100);
+        });
+
+        // Leave viewport before 250ms
+        act(() => observer._trigger(false));
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(300);
+        });
+
+        const impressionCalls = fetchMock.mock.calls.filter((c: any[]) => {
+            if (typeof c[0] !== "string" || !c[0].includes("/experiment/metrics")) return false;
+            const body = JSON.parse(c[1]?.body || "{}");
+            return body.event === "$experiment_exposure";
+        });
+        expect(impressionCalls.length).toBe(0);
+    });
+});
+
+// ── StrictMode double-mount safety ─────────────────────────────────────────
+
+describe("StrictMode safety", () => {
+    it("does not double-count impressions in StrictMode (no componentInstanceId)", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        fetchMock.mockResolvedValue({ ok: true });
+
+        localStorage.setItem(
+            "probat:assignment:strict-exp",
+            JSON.stringify({ variantKey: "control", ts: Date.now() })
+        );
+
+        render(
+            <StrictMode>
+                <ProbatProviderClient userId="test-user-id" host="https://api.test.com">
+                    <Experiment
+                        id="strict-exp"
+                        control={<div>Strict Control</div>}
+                        variants={{}}
+                    />
+                </ProbatProviderClient>
+            </StrictMode>
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        // Trigger ALL observers — the dedupe key must be identical across the
+        // StrictMode double-mount so that even if both observers fire only one
+        // impression is sent.  Earlier observers have empty element sets (cleanup
+        // called disconnect()) so _trigger produces an empty entries array which
+        // the component guards with `if (!entry)`.
+        for (const obs of MockIntersectionObserver._instances) {
+            act(() => obs._trigger(true));
+        }
+
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(300);
+        });
+
+        const impressionCalls = fetchMock.mock.calls.filter((c: any[]) => {
+            if (typeof c[0] !== "string" || !c[0].includes("/experiment/metrics")) return false;
+            const body = JSON.parse(c[1]?.body || "{}");
+            return body.event === "$experiment_exposure";
+        });
+
+        // Should be exactly 1, not 2
+        expect(impressionCalls.length).toBe(1);
+    });
+
+    it("auto instanceId is stable across StrictMode double-mount", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        fetchMock.mockResolvedValue({ ok: true });
+
+        localStorage.setItem(
+            "probat:assignment:stable-id-exp",
+            JSON.stringify({ variantKey: "control", ts: Date.now() })
+        );
+
+        render(
+            <StrictMode>
+                <ProbatProviderClient userId="test-user-id" host="https://api.test.com">
+                    <Experiment
+                        id="stable-id-exp"
+                        control={<button>Buy</button>}
+                        variants={{}}
+                    />
+                </ProbatProviderClient>
+            </StrictMode>
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        // Fire a click so we get a metric payload with the auto-generated instanceId
+        fireEvent.click(screen.getByText("Buy"));
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        // Now trigger impression via the active observer
+        const lastObs = MockIntersectionObserver._instances[MockIntersectionObserver._instances.length - 1];
+        act(() => lastObs._trigger(true));
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(300);
+        });
+
+        // Collect all metric payloads
+        const metricPayloads = fetchMock.mock.calls
+            .filter((c: any[]) => typeof c[0] === "string" && c[0].includes("/experiment/metrics"))
+            .map((c: any[]) => JSON.parse(c[1].body));
+
+        // Should have at least click + impression
+        expect(metricPayloads.length).toBeGreaterThanOrEqual(2);
+
+        // Every payload must share the same component_instance_id
+        const instanceIds = new Set(
+            metricPayloads.map((p: any) => p.properties.component_instance_id)
+        );
+        expect(instanceIds.size).toBe(1);
+
+        // The id should have the inst_ prefix (auto-generated, not undefined)
+        const theId = [...instanceIds][0] as string;
+        expect(theId).toMatch(/^inst_/);
+    });
+
+    it("persists auto instanceId mapping in sessionStorage", () => {
+        (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({ ok: true });
+
+        localStorage.setItem(
+            "probat:assignment:persist-exp",
+            JSON.stringify({ variantKey: "control", ts: Date.now() })
+        );
+
+        render(
+            <Experiment
+                id="persist-exp"
+                control={<div>Control</div>}
+                variants={{}}
+            />,
+            { wrapper }
+        );
+
+        // Check that a sessionStorage key was written for the instance mapping
+        const keys = Object.keys(sessionStorage);
+        const instanceKey = keys.find((k) => k.startsWith("probat:instance:persist-exp:"));
+        expect(instanceKey).toBeDefined();
+
+        // The stored value should be the stable inst_ id
+        const storedId = sessionStorage.getItem(instanceKey!);
+        expect(storedId).toMatch(/^inst_/);
+    });
+});
+
+// ── Event payload fields ───────────────────────────────────────────────────
+
+describe("event payload", () => {
+    it("includes all required fields in exposure event", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        fetchMock.mockResolvedValue({ ok: true });
+
+        localStorage.setItem(
+            "probat:assignment:payload-exp",
+            JSON.stringify({ variantKey: "ai_v1", ts: Date.now() })
+        );
+
+        render(
+            <Experiment
+                id="payload-exp"
+                control={<div>Control</div>}
+                variants={{ ai_v1: <div>AI Variant</div> }}
+                componentInstanceId="hero-cta"
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        const observer = MockIntersectionObserver._instances[MockIntersectionObserver._instances.length - 1];
+        act(() => observer._trigger(true));
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(300);
+        });
+
+        const impressionCalls = fetchMock.mock.calls.filter((c: any[]) => {
+            if (typeof c[0] !== "string" || !c[0].includes("/experiment/metrics")) return false;
+            const body = JSON.parse(c[1]?.body || "{}");
+            return body.event === "$experiment_exposure";
+        });
+
+        expect(impressionCalls.length).toBe(1);
+        const payload = JSON.parse(impressionCalls[0][1].body);
+
+        expect(payload.event).toBe("$experiment_exposure");
+        expect(payload.properties.experiment_id).toBe("payload-exp");
+        expect(payload.properties.variant_key).toBe("ai_v1");
+        expect(payload.properties.component_instance_id).toBe("hero-cta");
+        expect(payload.properties.distinct_id).toBeDefined();
+        expect(payload.properties.session_id).toBeDefined();
+        expect(payload.properties.source).toBe("react-sdk");
+        expect(payload.properties.captured_at).toBeDefined();
+    });
+
+    it("includes all required fields in click event", async () => {
+        const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
+        fetchMock.mockResolvedValue({ ok: true });
+
+        localStorage.setItem(
+            "probat:assignment:click-payload-exp",
+            JSON.stringify({ variantKey: "control", ts: Date.now() })
+        );
+
+        render(
+            <Experiment
+                id="click-payload-exp"
+                control={<button id="cta-btn">Buy Now</button>}
+                variants={{}}
+                componentInstanceId="footer-cta"
+            />,
+            { wrapper }
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        fireEvent.click(screen.getByText("Buy Now"));
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        const clickCalls = fetchMock.mock.calls.filter((c: any[]) => {
+            if (typeof c[0] !== "string" || !c[0].includes("/experiment/metrics")) return false;
+            const body = JSON.parse(c[1]?.body || "{}");
+            return body.event === "$experiment_click";
+        });
+
+        expect(clickCalls.length).toBe(1);
+        const payload = JSON.parse(clickCalls[0][1].body);
+
+        expect(payload.event).toBe("$experiment_click");
+        expect(payload.properties.experiment_id).toBe("click-payload-exp");
+        expect(payload.properties.variant_key).toBe("control");
+        expect(payload.properties.component_instance_id).toBe("footer-cta");
+        expect(payload.properties.click_target_tag).toBe("BUTTON");
+        expect(payload.properties.click_target_text).toBe("Buy Now");
+        expect(payload.properties.click_target_id).toBe("cta-btn");
+        expect(payload.properties.click_is_primary).toBe(false);
+    });
+});