fix e2e tests

Author: matschik

e2e/home.test.ts

@@ -1,7 +1,7 @@
 import { defineConfig, devices } from "@playwright/test";
 
 export default defineConfig({
-  testDir: "e2e",
+  testDir: "test/e2e",
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,

playwright.config.ts

@@ -200,7 +200,11 @@
             data-testid={`framework-button-${framework.id}`}
             onclick={() => {
               toggleFrameworkId(framework.id);
-              frameworkIdsStorage.setJSON(frameworkIdsSelectedArr);
+              if (frameworkIdsSelectedArr.length === 0) {
+                frameworkIdsStorage.remove();
+              } else {
+                frameworkIdsStorage.setJSON(frameworkIdsSelectedArr);
+              }
             }}
           >
             <FrameworkLabel id={framework.id} size={16} />

src/Index.svelte

@@ -0,0 +1,86 @@
+import { expect, test } from "@playwright/test";
+import { TestHelpers } from "./utils/test-helpers";
+
+test.describe("Homepage", () => {
+  let testHelpers: TestHelpers;
+
+  test.beforeEach(async ({ page }) => {
+    testHelpers = new TestHelpers(page);
+    await page.goto("/");
+  });
+
+  test("should display the main header and navigation", async ({ page }) => {
+    await expect(page.getByRole("banner")).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: "Component Party" }),
+    ).toBeVisible();
+  });
+
+  test("should display default frameworks on first visit", async () => {
+    // Clear localStorage to simulate first visit
+    await testHelpers.clearFrameworkSelection();
+
+    // Wait for frameworks to load
+    await testHelpers.waitForFrameworksToLoad();
+
+    const selectedFrameworks = await testHelpers.getSelectedFrameworks();
+    expect(selectedFrameworks).toContain("react");
+    expect(selectedFrameworks).toContain("svelte5");
+  });
+
+  test("should allow toggling framework selection", async ({ page }) => {
+    // Wait for frameworks to load
+    await testHelpers.waitForFrameworksToLoad();
+
+    // Deselect React
+    await testHelpers.deselectFramework("react");
+
+    // Verify React is no longer selected
+    const selectedFrameworks = await testHelpers.getSelectedFrameworks();
+    expect(selectedFrameworks).not.toContain("react");
+
+    // Reselect React
+    await testHelpers.selectFramework("react");
+
+    // Wait for the selection to update
+    await testHelpers.waitForFrameworksToLoad();
+
+    // Verify React is selected again
+    const selectedFrameworksAfter = await testHelpers.getSelectedFrameworks();
+    expect(selectedFrameworksAfter).toContain("react");
+  });
+
+  test("should show framework selection prompt when no frameworks are selected", async ({
+    page,
+  }) => {
+    // Clear localStorage to simulate first visit
+    await testHelpers.clearFrameworkSelection();
+
+    await testHelpers.waitForFrameworksToLoad();
+
+    // Deselect all frameworks
+    await testHelpers.deselectAllFrameworks();
+
+    await expect(page.getByTestId("empty-state")).toBeVisible();
+    await expect(page.getByTestId("empty-state-message")).toContainText(
+      "Please select a framework",
+    );
+  });
+
+  test("should display content sections when frameworks are selected", async ({
+    page,
+  }) => {
+    // Wait for frameworks to be selected
+    await testHelpers.waitForFrameworksToLoad();
+
+    // Wait for content to load
+    await testHelpers.waitForContentToLoad();
+
+    // Check that we have content sections
+    await expect(page.getByRole("heading", { level: 1 })).toHaveCount(7); // 6 main sections + 1 header
+
+    // Check for specific sections using test IDs
+    await expect(page.getByTestId("section-reactivity")).toBeVisible();
+    await expect(page.getByTestId("section-templating")).toBeVisible();
+  });
+});

e2e/config/test-config.ts renamed to test/e2e/config/test-config.ts

@@ -15,6 +15,7 @@ test.describe("Integration Tests", () => {
   }) => {
     // Start with no frameworks selected
     await helpers.clearFrameworkSelection();
+    await helpers.deselectAllFrameworks();
 
     // Verify empty state using test ID
     await expect(page.getByTestId("empty-state")).toBeVisible();
@@ -70,8 +71,8 @@ test.describe("Integration Tests", () => {
     // Add another framework
     await helpers.selectFramework("svelte5");
 
-    // Should navigate back to home
-    await expect(page).toHaveURL("/");
+    // Should navigate back to home (with framework parameters)
+    await expect(page).toHaveURL(/\/\?f=/);
 
     // Verify all three frameworks are selected
     const updatedFrameworks = await helpers.getSelectedFrameworks();

e2e/framework-comparison.test.ts renamed to test/e2e/framework-comparison.test.ts

@@ -6,7 +6,6 @@ export class TestHelpers {
   async clearFrameworkSelection() {
     await this.page.evaluate(() => {
       localStorage.removeItem("framework_display");
-      localStorage.setItem("framework_display_initialized", "true");
     });
     await this.page.reload();
   }
@@ -35,6 +34,35 @@ export class TestHelpers {
     await button.click();
   }
 
+  async deselectFramework(frameworkId: string) {
+    const button = this.page.getByTestId(`framework-button-${frameworkId}`);
+    await expect(button).toBeVisible();
+    await button.click();
+  }
+
+  async toggleFramework(frameworkId: string) {
+    const button = this.page.getByTestId(`framework-button-${frameworkId}`);
+    await expect(button).toBeVisible();
+    await button.click();
+  }
+
+  async selectFrameworks(frameworkIds: string[]) {
+    for (const frameworkId of frameworkIds) {
+      await this.selectFramework(frameworkId);
+    }
+  }
+
+  async deselectFrameworks(frameworkIds: string[]) {
+    for (const frameworkId of frameworkIds) {
+      await this.deselectFramework(frameworkId);
+    }
+  }
+
+  async deselectAllFrameworks() {
+    const selectedFrameworks = await this.getSelectedFrameworks();
+    await this.deselectFrameworks(selectedFrameworks);
+  }
+
   async getFrameworkButton(frameworkId: string) {
     return this.page.getByTestId(`framework-button-${frameworkId}`);
   }