feat: #2 add aria labels to shiftTable for accessibility and e2e testing

adrianrbp · Aug 6, 2024 · 14938ad · 14938ad
1 parent 602e770
commit 14938ad
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 1 deletion.
diff --git a/frontend/e2e/checkCompanyServiceShifts.spec.js b/frontend/e2e/checkCompanyServiceShifts.spec.js
@@ -25,5 +25,57 @@ test.describe("Check Company Service Shifts", () => {
     // Show Subtitle
     const dateRange = await page.locator("text=Del 05/08/2024 al 11/08/2024");
     await expect(dateRange).toBeVisible();
+
+    // Check if all days are rendered
+    const days = [
+      "Lunes 05 de Agosto",
+      "Martes 06 de Agosto",
+      "Miercoles 07 de Agosto",
+      "Jueves 08 de Agosto",
+      "Viernes 09 de Agosto",
+      "Sabado 10 de Agosto",
+      "Domingo 11 de Agosto",
+    ];
+
+    for (const day of days) {
+      await expect(page.locator(`[aria-label="Day ${day}"]`)).toBeVisible();
+      await expect(page.locator(`[aria-label="Header ${day}"]`)).toHaveText(
+        day
+      );
+    }
+
+    const timeBlocks = [
+      { start: "09:00", end: "10:00", engineer: "Engineer 1" },
+      { start: "10:00", end: "11:00", engineer: "Engineer 2" },
+    ];
+
+    // Check if time blocks and engineers are rendered correctly for a specific day
+    for (const timeBlock of timeBlocks) {
+      const specificTimeBlock = page.locator(
+        `[aria-label="Time block Lunes 05 de Agosto ${timeBlock.start}"]`
+      );
+
+      await expect(specificTimeBlock).toBeVisible();
+      await expect(
+        specificTimeBlock.locator(`[aria-label="Hour ${timeBlock.start}"]`)
+      ).toHaveText(`${timeBlock.start} - ${timeBlock.end}`);
+      await expect(
+        specificTimeBlock.locator(
+          `[aria-label="Engineer Assigned ${timeBlock.engineer}"]`
+        )
+      ).toHaveText(timeBlock.engineer);
+    }
+
+    // Check for an unassigned time block
+    const unassignedTimeBlock = page.locator(
+      '[aria-label="Time block Martes 06 de Agosto 09:00"]'
+    );
+    await expect(unassignedTimeBlock).toBeVisible();
+    await expect(
+      unassignedTimeBlock.locator('[aria-label="Hour 09:00"]')
+    ).toHaveText("09:00 - 10:00");
+    await expect(
+      unassignedTimeBlock.locator('[aria-label="Engineer Assigned ⚠"]')
+    ).toHaveText("⚠");
   });
 });
diff --git a/frontend/src/components/ShiftManagement/ShiftTable.vue b/frontend/src/components/ShiftManagement/ShiftTable.vue
@@ -4,13 +4,16 @@
       v-for="shift in shifts"
       :key="shift.day"
       class="border rounded-lg p-4 shadow-lg bg-white"
+      :aria-label="`Day ${shift.day}`"
+      role="table"
     >
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-yellow-100">
           <tr>
             <th
               colspan="2"
               class="px-6 py-3 text-left text-xs font-medium text-black uppercase tracking-wider"
+              :aria-label="`Header ${shift.day}`"
             >
               {{ shift.day }}
             </th>
@@ -20,13 +23,21 @@
           <tr
             v-for="timeBlock in shift.time_blocks"
             :key="timeBlock.start_time"
+            :aria-label="`Time block ${shift.day} ${timeBlock.start_time}`"
           >
-            <td class="py-2 px-4" :class="getColor(timeBlock.engineer)">
+            <td
+              class="py-2 px-4"
+              :class="getColor(timeBlock.engineer)"
+              :aria-label="`Hour ${timeBlock.start_time}`"
+            >
               {{ timeBlock.start_time }} - {{ timeBlock.end_time }}
             </td>
             <td
               class="py-2 px-4"
               :style="{ backgroundColor: getEngineerColor(timeBlock.engineer) }"
+              :aria-label="`Engineer Assigned ${getEngineerName(
+                timeBlock.engineer
+              )}`"
             >
               {{ getEngineerName(timeBlock.engineer) }}
             </td>