Initial Commit

apps/testbed/e2e/multi-session/broadcast-channel.spec.ts

@@ -0,0 +1,93 @@
+import { test, expect } from "@playwright/test";
+import { createMultiSession } from "@suaveplan/testing-e2e/multi-session";
+
+test.describe("BroadcastChannel", () => {
+  test("sender and receiver pages both render page-title", async ({ browser }) => {
+    const { pages, teardown } = await createMultiSession({
+      browser,
+      count: 2,
+      baseUrl: "http://localhost:3200/network-broadcast",
+      roles: ["sender", "receiver"],
+    });
+
+    try {
+      const sender = pages[0]!;
+      const receiver = pages[1]!;
+      await expect(sender.locator('[data-testid="page-title"]')).toContainText(
+        "Network — BroadcastChannel",
+      );
+      await expect(receiver.locator('[data-testid="page-title"]')).toContainText(
+        "Network — BroadcastChannel",
+      );
+    } finally {
+      await teardown();
+    }
+  });
+
+  test("sender has message-input and send-button", async ({ browser }) => {
+    const { pages, teardown } = await createMultiSession({
+      browser,
+      count: 1,
+      baseUrl: "http://localhost:3200/network-broadcast",
+      roles: ["sender"],
+    });
+
+    try {
+      const sender = pages[0]!;
+      await expect(
+        sender.locator('[data-testid="message-input"]'),
+      ).toBeVisible();
+      await expect(
+        sender.locator('[data-testid="send-button"]'),
+      ).toBeVisible();
+    } finally {
+      await teardown();
+    }
+  });
+
+  test("receiver does not have send-button", async ({ browser }) => {
+    const { pages, teardown } = await createMultiSession({
+      browser,
+      count: 1,
+      baseUrl: "http://localhost:3200/network-broadcast",
+      roles: ["receiver"],
+    });
+
+    try {
+      const receiver = pages[0]!;
+      await expect(
+        receiver.locator('[data-testid="send-button"]'),
+      ).not.toBeVisible();
+    } finally {
+      await teardown();
+    }
+  });
+
+  test("message sent by sender appears in receiver output", async ({ browser }) => {
+    const { pages, teardown } = await createMultiSession({
+      browser,
+      count: 2,
+      baseUrl: "http://localhost:3200/network-broadcast",
+      roles: ["sender", "receiver"],
+    });
+
+    try {
+      const sender = pages[0]!;
+      const receiver = pages[1]!;
+
+      await expect(sender.locator('[data-testid="message-input"]')).toBeVisible();
+      await expect(receiver.locator('[data-testid="output"]')).toBeVisible();
+
+      const msg = `broadcast-test-${Date.now()}`;
+      await sender.locator('[data-testid="message-input"]').fill(msg);
+      await sender.locator('[data-testid="send-button"]').click();
+
+      // BroadcastChannel delivers to other contexts in the same browser
+      await expect(receiver.locator('[data-testid="output"]')).toContainText(msg, {
+        timeout: 5000,
+      });
+    } finally {
+      await teardown();
+    }
+  });
+});