fix(e2e): Correct API mocks and add waits for dropdown enablement

Author: fabiendostie

tests/e2e/csv-validator.spec.ts

@@ -21,10 +21,10 @@ test.describe("CSV Data Validator Application", () => {
     // Set up page object
     csvValidatorPage = new CSVValidatorPage(page);
 
-    // Set up API mocks for consistent testing
+    // Set up API mocks for consistent testing (BEFORE navigation)
     await setupApiMocks(page);
 
-    // Navigate to application
+    // Navigate to application (AFTER mocks are set up)
     await csvValidatorPage.goto();
   });
 
@@ -153,8 +153,8 @@ A schema for validating data.
    * Test 1: Schema dropdown population and selection
    */
   test("should populate and allow selection from schema dropdown", async () => {
-    // Wait for schemas to load in dropdown
-    await expect(csvValidatorPage.schemaDropdownTrigger).toBeEnabled();
+    // Wait for schemas to load and dropdown to be enabled (due to mocked API call)
+    await expect(csvValidatorPage.schemaDropdownTrigger).toBeEnabled({ timeout: 10000 });
 
     // Open dropdown and verify schemas are listed
     await csvValidatorPage.schemaDropdownTrigger.click();
@@ -181,6 +181,8 @@ A schema for validating data.
    * Test 2: Schema documentation panel toggle and content
    */
   test("should toggle schema documentation panel and display content", async () => {
+    // Wait for dropdown to be enabled
+    await expect(csvValidatorPage.schemaDropdownTrigger).toBeEnabled({ timeout: 10000 });
     // First select a schema
     await csvValidatorPage.selectSchema("event");
 
@@ -208,6 +210,8 @@ A schema for validating data.
    * Test 3: CSV file upload functionality
    */
   test("should upload and display CSV file content", async () => {
+    // Wait for dropdown to be enabled
+    await expect(csvValidatorPage.schemaDropdownTrigger).toBeEnabled({ timeout: 10000 });
     // First select a schema
     await csvValidatorPage.selectSchema("event");
 
@@ -235,6 +239,8 @@ A schema for validating data.
     // Initially, validate button should be disabled
     await expect(csvValidatorPage.validateButton).toBeDisabled();
 
+    // Wait for dropdown to be enabled
+    await expect(csvValidatorPage.schemaDropdownTrigger).toBeEnabled({ timeout: 10000 });
     // Select a schema, button should still be disabled
     await csvValidatorPage.selectSchema("event");
     await expect(csvValidatorPage.validateButton).toBeDisabled();
@@ -254,7 +260,9 @@ A schema for validating data.
    * Test 5: Validation results display for valid CSV
    */
   test("should validate and display success for valid CSV", async () => {
-    // Set up test with schema and valid CSV
+    // Wait for dropdown to be enabled
+    await expect(csvValidatorPage.schemaDropdownTrigger).toBeEnabled({ timeout: 10000 });
+    // Select schema and upload valid CSV
     await csvValidatorPage.selectSchema("event");
     const sampleCsvPath = path.join(
       process.cwd(),
@@ -277,7 +285,9 @@ A schema for validating data.
    * Test 6: Validation results display for invalid CSV
    */
   test("should validate and display errors for invalid CSV", async () => {
-    // Set up test with schema and invalid CSV
+    // Wait for dropdown to be enabled
+    await expect(csvValidatorPage.schemaDropdownTrigger).toBeEnabled({ timeout: 10000 });
+    // Select schema and upload invalid CSV
     await csvValidatorPage.selectSchema("event");
     const invalidCsvPath = path.join(
       process.cwd(),
@@ -305,7 +315,9 @@ A schema for validating data.
    * Test 7 (Optional): Error highlighting when clicking on errors
    */
   test("should highlight CSV line when clicking on error", async () => {
-    // Set up test with schema and invalid CSV
+    // Wait for dropdown to be enabled
+    await expect(csvValidatorPage.schemaDropdownTrigger).toBeEnabled({ timeout: 10000 });
+    // Select schema, upload invalid CSV, and validate
     await csvValidatorPage.selectSchema("event");
     const invalidCsvPath = path.join(
       process.cwd(),

tests/e2e/e2e.spec.ts

@@ -10,33 +10,57 @@ test.describe("CSV Data Validator E2E", () => {
   // Helper function to set up API route mocking for all tests
   const setupApiMocks = async (page: Page) => {
     console.log("Setting up API mocks...");
-    // Mock schemas list response
-    await page.route("**/api/schemas", async (route: Route) => {
-      console.log("Intercepted /api/schemas");
+    // Mock schemas list response - Updated Endpoint
+    await page.route("**/api/list-schemas", async (route: Route) => {
+      console.log("Intercepted /api/list-schemas");
       await route.fulfill({
         status: 200,
         contentType: "application/json",
         body: JSON.stringify({
-          schemas: ["event.json", "place.json"],
+          schemas: ["event.json", "place.json"], // Ensure this matches expected schema names
         }),
       });
     });
 
-    // Mock individual schema content response
-    await page.route("**/api/schemas/event*", async (route: Route) => {
-      console.log("Intercepted /api/schemas/event*");
+    // Mock individual schema content response for event - Updated Endpoint
+    await page.route("**/api/get-schema/event*", async (route: Route) => {
+      console.log("Intercepted /api/get-schema/event*");
       await route.fulfill({
         status: 200,
         contentType: "application/json",
         body: JSON.stringify({
           content: {
             $schema: "http://json-schema.org/draft-07/schema#",
-            title: "Sample Schema",
+            title: "Event Schema", // Use a distinct title for clarity
             type: "object",
             properties: {
               id: { type: "string" },
               name: { type: "string" },
+              date: { type: "string", format: "date" },
             },
+            required: ["id", "name", "date"],
+          },
+        }),
+      });
+    });
+
+    // Mock individual schema content response for place - Added Mock
+    await page.route("**/api/get-schema/place*", async (route: Route) => {
+      console.log("Intercepted /api/get-schema/place*");
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          content: {
+            $schema: "http://json-schema.org/draft-07/schema#",
+            title: "Place Schema", // Use a distinct title for clarity
+            type: "object",
+            properties: {
+              placeId: { type: "string" },
+              address: { type: "string" },
+              city: { type: "string" },
+            },
+            required: ["placeId", "address"],
           },
         }),
       });