Tamdang/e2e/multi users connection

.github/workflows/ci.yml

@@ -60,6 +60,17 @@ jobs:
         # todo(nickbar01234): Cache playwright?
       - name: Install Playwright browsers
         run: pnpm exec playwright install --with-deps
+
+      - name: Start Firebase emulator
+        run: docker compose up -d
+      - name: Wait for firebase emulator
+        run: |
+          echo "Waiting to check firebase to be healthy"
+          until [ "$(docker inspect --format='{{.State.Health.Status}}' firebase)" = "healthy" ]; do
+            echo "Waiting..."
+            sleep 2
+          done
+          echo "Firebase is healthy"
       # todo(nickbar01234): Should switch to chrome-mv3 for production build or setup CI to point to docker firebase
       - name: Build extension in dev mode
         run: pnpm build:dev

extension/package.json

@@ -19,7 +19,7 @@
     "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.2.8",

extension/src/components/panel/editor/EditorPanel.tsx

@@ -113,6 +113,7 @@ const EditorPanel = () => {
                 trigger={{
                   node: (
                     <div
+                      data-testid="toggle-code-visibility"
                       className="h-fit hover:bg-fill-quaternary dark:hover:bg-fill-quaternary inline-flex items-center justify-between focus:outline-none p-2 rounded-md cursor-pointer"
                       onClick={toggleCodeVisibility}
                     >

extension/src/components/panel/editor/tab/CodeTab.tsx

@@ -17,7 +17,7 @@ export const CodeTab: React.FC = () => {
                 className="h-fit hover:bg-fill-quaternary dark:hover:bg-fill-quaternary inline-flex items-center justify-between focus:outline-none p-2 rounded-md cursor-pointer"
                 onClick={copyCode}
               >
-                <Copy size={16} />
+                <Copy data-testid="copy-code" size={16} />
               </div>
             ),
           }}

extension/src/components/panel/problem/index.tsx

@@ -3,6 +3,7 @@ import { DOM, EXTENSION } from "@cb/constants";
 import { useHtmlActions } from "@cb/hooks/store";
 import useResource from "@cb/hooks/useResource";
 import { Question } from "@cb/types";
+import { waitForElement } from "@cb/utils";
 import React, { useEffect } from "react";
 import { toast } from "sonner";
 

extension/src/components/root/ContentScript.tsx

@@ -1,7 +1,6 @@
 import { AppNavigator } from "@cb/components/navigator/AppNavigator";
 import { ContainerNavigator } from "@cb/components/navigator/ContainerNavigator";
 import { AppControlMenu, RoomControlMenu } from "@cb/components/navigator/menu";
-import { BottomBannerPanel } from "@cb/components/panel/BottomBannerPanel";
 import { LoadingPanel } from "@cb/components/panel/LoadingPanel";
 import { ResizablePanel } from "@cb/components/panel/ResizablePanel";
 import SignInPanel from "@cb/components/panel/SignInPanel";
@@ -22,9 +21,7 @@ export const ContentScript = () => {
       case AppStatus.AUTHENTICATED:
         return (
           <ContainerNavigator menu={<RoomControlMenu />}>
-            <BottomBannerPanel>
-              <AppNavigator />
-            </BottomBannerPanel>
+            <AppNavigator />
           </ContainerNavigator>
         );
       case AppStatus.UNAUTHENTICATED:

extension/tests/fixture/factory.ts

@@ -0,0 +1,49 @@
+import { test as base, BrowserContext, chromium, Page } from "@playwright/test";
+import { signIn } from "@tests/utils/auth";
+import { getExtensionId, getExtensionPath, setupPage } from "@tests/utils/page";
+
+export interface UserPage {
+  page: Page;
+  email: string;
+  extensionId: string;
+  context: BrowserContext;
+}
+
+interface PlayWrightPageFactory {
+  instantiate: (email: string) => Promise<UserPage>;
+}
+const extension = getExtensionPath();
+
+export const factory = base.extend<{ pageCreator: PlayWrightPageFactory }>({
+  // eslint-disable-next-line no-empty-pattern
+  pageCreator: async ({}, use) => {
+    const contexts: BrowserContext[] = [];
+    const instantiate: PlayWrightPageFactory["instantiate"] = async (email) => {
+      const context = await chromium.launchPersistentContext("", {
+        headless: false,
+        channel: "chromium",
+        args: [
+          `--disable-extensions-except=${extension}`,
+          `--load-extension=${extension}`,
+        ],
+        permissions: [
+          "clipboard-read",
+          "clipboard-write",
+          "local-network-access",
+        ],
+      });
+      contexts.push(context);
+
+      const extensionId = await getExtensionId(context);
+      const page = context.pages()[0] ?? (await context.newPage());
+      await setupPage(page);
+      await signIn(page, email);
+
+      return { page, context, email, extensionId };
+    };
+
+    await use({ instantiate });
+
+    await Promise.all(contexts.map((ctx) => ctx.close()));
+  },
+});

extension/tests/fixture/in-room.ts

@@ -0,0 +1,36 @@
+import { createRoom, joinRoom, RoomInfo } from "@tests/utils/room";
+import { factory, UserPage } from "./factory";
+
+interface UserInRoomPage extends UserPage {
+  room: RoomInfo;
+}
+
+export const singleUserTest = factory.extend<{
+  user: UserInRoomPage;
+}>({
+  user: async ({ pageCreator }, use) => {
+    const user = await pageCreator.instantiate("user@test.com");
+    const room = await createRoom(user.page);
+    await use({ ...user, room });
+  },
+});
+
+export const twoUserTest = factory.extend<{
+  user1: UserInRoomPage;
+  user2: UserInRoomPage;
+}>({
+  user1: async ({ pageCreator }, use) => {
+    const user = await pageCreator.instantiate("user1@test.com");
+    const room = await createRoom(user.page);
+    await use({ ...user, room });
+  },
+
+  user2: async ({ pageCreator, user1 }, use) => {
+    const user = await pageCreator.instantiate("user2@test.com");
+    await joinRoom(user.page, user1.room.id);
+    await use({ ...user, room: user1.room });
+  },
+});
+
+export const twoUserExpect = twoUserTest.expect;
+export const singleUserExpect = singleUserTest.expect;

extension/tests/pages/content.spec.ts

@@ -1,7 +1,21 @@
-import { expect, test } from "@tests/fixture";
+import { twoUserExpect, twoUserTest } from "@tests/fixture/in-room";
 
-test("Content script is mounted", async ({ page }) => {
-  await expect(page.getByText("CodeBuddy").first()).toBeVisible({
-    timeout: 30_000,
-  });
+const EXPECTED_CPP_CODE = `class Solution {
+public:
+    vector<int> twoSum(vector<int>& nums, int target) {
+
+    }
+};`;
+
+twoUserTest("User1 can copy code from User2", async ({ user1, user2 }) => {
+  await user1.page.getByRole("tab", { name: /Code/i }).click();
+  await user1.page.getByTestId("toggle-code-visibility").click();
+  await user1.page.getByTestId("copy-code").click({ timeout: 30_000 });
+
+  await twoUserExpect(async () => {
+    const copiedCode = await user1.page.evaluate(() =>
+      navigator.clipboard.readText()
+    );
+    twoUserExpect(copiedCode.trim()).toBe(EXPECTED_CPP_CODE.trim());
+  }).toPass();
 });

extension/tests/utils/auth.ts

@@ -0,0 +1,6 @@
+import type { Page } from "@playwright/test";
+
+export async function signIn(page: Page, email: string): Promise<void> {
+  await page.getByRole("textbox", { name: "Enter your email" }).fill(email);
+  await page.getByRole("button", { name: "Continue" }).click();
+}

extension/tests/utils/page.ts

@@ -0,0 +1,51 @@
+import { DOM } from "@cb/constants";
+import { chromium, type BrowserContext, type Page } from "@playwright/test";
+import fs from "node:fs";
+import { dirname, resolve } from "path";
+import { fileURLToPath } from "url";
+
+const extension = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  "../../dist/chrome-mv3-dev"
+);
+
+if (!fs.existsSync(extension)) {
+  throw new Error(`Invalid path ${extension}`);
+}
+
+export function getExtensionPath(): string {
+  return extension;
+}
+
+export async function createExtensionContext(): Promise<BrowserContext> {
+  const context = await chromium.launchPersistentContext("", {
+    headless: false,
+    channel: "chromium",
+    args: [
+      `--disable-extensions-except=${extension}`,
+      `--load-extension=${extension}`,
+    ],
+    permissions: ["clipboard-read", "clipboard-write", "local-network-access"],
+  });
+  return context;
+}
+
+export async function getExtensionId(context: BrowserContext): Promise<string> {
+  let [serviceWorker] = context.serviceWorkers();
+  if (!serviceWorker)
+    serviceWorker = await context.waitForEvent("serviceworker");
+  return serviceWorker.url().split("/")[2];
+}
+
+export async function setupPage(page: Page): Promise<void> {
+  page.on("console", (msg) => {
+    console.log("Received message from page", msg.text(), msg.type());
+  });
+  await page.goto("https://leetcode.com/problems/two-sum", {
+    waitUntil: "domcontentloaded",
+  });
+  await page.waitForSelector(DOM.LEETCODE_ROOT_ID, {
+    state: "visible",
+    timeout: 30_000,
+  });
+}

extension/tests/utils/room.ts

@@ -0,0 +1,22 @@
+import type { Page } from "@playwright/test";
+
+export interface RoomInfo {
+  id: string;
+}
+
+export async function createRoom(page: Page): Promise<RoomInfo> {
+  await page.getByRole("button", { name: "Create Room" }).click();
+  await page.getByRole("radio", { name: "Private" }).click();
+  await page.getByRole("button", { name: "Create" }).click();
+  await page.getByRole("img", { name: "Copy room ID" }).click();
+
+  const roomId = await page.evaluate(() => navigator.clipboard.readText());
+
+  return { id: roomId };
+}
+
+export async function joinRoom(page: Page, roomId: string): Promise<void> {
+  await page.getByRole("button", { name: "Join room" }).click();
+  await page.getByRole("textbox", { name: "Enter room ID" }).fill(roomId);
+  await page.getByRole("button", { name: "Join" }).click();
+}

extension/tsconfig.json

@@ -6,6 +6,6 @@
       "@cb/*": ["./src/*"]
     }
   },
-  "exclude": ["./**/*.spec.ts", ".output"],
+  "exclude": ["./**/*.spec.ts", ".output", "tests"],
   "extends": ["./.wxt/tsconfig.json"]
 }