Permit the use of firebase emulator for testing mode

Author: JeremyVoisin

package.json

@@ -7,7 +7,7 @@
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
-		"test": "playwright test",
+		"test": "firebase emulators:exec --only firestore,storage,auth 'playwright test'",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "eslint .",

playwright.config.ts

@@ -2,7 +2,7 @@ import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
 	webServer: {
-		command: 'npm run build && npm run preview',
+		command: 'NODE_ENV=ci npm run build && npm run preview',
 		port: 4173
 	},
 	testDir: 'tests',

src/routes/firebase.ts

@@ -19,7 +19,7 @@ export const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
 export const auth = getAuth(app);
 
-if (dev) {
+if (dev || import.meta.env.MODE === "ci") {
     connectAuthEmulator(auth, "http://localhost:9099");
     connectFirestoreEmulator(db, "localhost", 8080);
 

tests/auth.test.ts

@@ -1,24 +1,24 @@
 import { expect, test, type Page } from "@playwright/test";
 
-test.describe("Auth", () => {
+test.describe.serial("Auth", () => {
   let page: Page;
   test.beforeAll(async ({ browser }) => {
     page = await browser.newPage();
     await page.goto("/auth-test");
   });
 
   test("Renders UI conditionally based on auth state", async () => {
-    expect(page.getByText("Signed In")).not.toBeVisible();
-    expect(page.getByText("Signed Out")).toBeVisible();
+    await expect(page.getByText("Signed Out")).toBeVisible();
+    await expect(page.getByText("Signed In")).toBeHidden();
   });
 
   test("User can sign in and out", async () => {
-    await page.click("text=Sign In");
-    await page.waitForSelector("text=Sign Out");
-    await expect(page.getByText("Signed In")).toBeVisible();
+    await expect(page.getByRole("button", { name: "Sign In" })).toBeVisible();
+    await page.getByRole("button", { name: "Sign In" }).click({delay: 1000});
+    await expect(page.getByRole("button", { name: "Sign Out" })).toBeVisible();
 
-    await page.click("text=Sign Out");
-    await page.waitForSelector("text=Sign In");
-    await expect(page.getByText("Signed In")).not.toBeVisible();
+    await page.getByRole("button", { name: "Sign Out" }).click();
+    await expect(page.getByRole("button", { name: "Sign In" })).toBeVisible();
+    await expect(page.getByText("Signed In")).toBeHidden();
   });
 });