feat: add Berlin Clock e2e tests

cypress/e2e/clock.cy.ts

@@ -0,0 +1,212 @@
+/// <reference types="cypress" />
+
+describe("Berlin Clock", () => {
+  const range = Cypress._.range;
+
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  const enterTime = (time: string) => {
+    cy.get('[data-testid="time-input"]').clear().type(time).type("{enter}");
+  };
+
+  const getLamp = (rowTestId: string, index: number) => {
+    return cy.get(`[data-testid="${rowTestId}"] [data-testid="lamp-${index}"]`);
+  };
+
+  const assertLampColors = (rowTestId: string, expectedColors: string) => {
+    range(expectedColors.length).forEach((i) => {
+      getLamp(rowTestId, i).should(
+        "have.attr",
+        "aria-label",
+        expectedColors[i],
+      );
+    });
+  };
+
+  describe("Seconds Lamp", () => {
+    it("should show Y at 00:00:00", () => {
+      enterTime("00:00:00");
+      cy.get('[data-testid="seconds-lamp"]').should(
+        "have.attr",
+        "aria-label",
+        "Y",
+      );
+    });
+
+    it("should show O at 23:59:59", () => {
+      enterTime("23:59:59");
+      cy.get('[data-testid="seconds-lamp"]').should(
+        "have.attr",
+        "aria-label",
+        "O",
+      );
+    });
+  });
+
+  describe("Five Hours Row", () => {
+    it("should show OOOO at 00:00:00", () => {
+      enterTime("00:00:00");
+      assertLampColors("five-hours-row", "OOOO");
+    });
+
+    it("should show RRRR at 23:59:59", () => {
+      enterTime("23:59:59");
+      assertLampColors("five-hours-row", "RRRR");
+    });
+
+    it("should show OOOO at 02:04:00", () => {
+      enterTime("02:04:00");
+      assertLampColors("five-hours-row", "OOOO");
+    });
+
+    it("should show ROOO at 08:23:00", () => {
+      enterTime("08:23:00");
+      assertLampColors("five-hours-row", "ROOO");
+    });
+
+    it("should show RRRO at 16:35:00", () => {
+      enterTime("16:35:00");
+      assertLampColors("five-hours-row", "RRRO");
+    });
+  });
+
+  describe("Single Hours Row", () => {
+    it("should show OOOO at 00:00:00", () => {
+      enterTime("00:00:00");
+      assertLampColors("single-hours-row", "OOOO");
+    });
+
+    it("should show RRRO at 23:59:59", () => {
+      enterTime("23:59:59");
+      assertLampColors("single-hours-row", "RRRO");
+    });
+
+    it("should show RROO at 02:04:00", () => {
+      enterTime("02:04:00");
+      assertLampColors("single-hours-row", "RROO");
+    });
+
+    it("should show RRRO at 08:23:00", () => {
+      enterTime("08:23:00");
+      assertLampColors("single-hours-row", "RRRO");
+    });
+
+    it("should show RRRR at 14:35:00", () => {
+      enterTime("14:35:00");
+      assertLampColors("single-hours-row", "RRRR");
+    });
+  });
+
+  describe("Five Minutes Row", () => {
+    it("should show OOOOOOOOOOO at 00:00:00", () => {
+      enterTime("00:00:00");
+      assertLampColors("five-minutes-row", "OOOOOOOOOOO");
+    });
+
+    it("should show YYRYYRYYRYY at 23:59:59", () => {
+      enterTime("23:59:59");
+      assertLampColors("five-minutes-row", "YYRYYRYYRYY");
+    });
+
+    it("should show OOOOOOOOOOO at 12:04:00", () => {
+      enterTime("12:04:00");
+      assertLampColors("five-minutes-row", "OOOOOOOOOOO");
+    });
+
+    it("should show YYRYOOOOOOO at 12:23:00", () => {
+      enterTime("12:23:00");
+      assertLampColors("five-minutes-row", "YYRYOOOOOOO");
+    });
+
+    it("should show YYRYYRYOOOO at 12:35:00", () => {
+      enterTime("12:35:00");
+      assertLampColors("five-minutes-row", "YYRYYRYOOOO");
+    });
+  });
+
+  describe("Single Minutes Row", () => {
+    it("should show OOOO at 00:00:00", () => {
+      enterTime("00:00:00");
+      assertLampColors("single-minutes-row", "OOOO");
+    });
+
+    it("should show YYYY at 23:59:59", () => {
+      enterTime("23:59:59");
+      assertLampColors("single-minutes-row", "YYYY");
+    });
+
+    it("should show YYOO at 12:32:00", () => {
+      enterTime("12:32:00");
+      assertLampColors("single-minutes-row", "YYOO");
+    });
+
+    it("should show YYYY at 12:34:00", () => {
+      enterTime("12:34:00");
+      assertLampColors("single-minutes-row", "YYYY");
+    });
+
+    it("should show OOOO at 12:35:00", () => {
+      enterTime("12:35:00");
+      assertLampColors("single-minutes-row", "OOOO");
+    });
+  });
+
+  describe("Full Clock Integration", () => {
+    const assertFullClock = (time: string, expected: string) => {
+      enterTime(time);
+
+      // Seconds
+      cy.get('[data-testid="seconds-lamp"]').should(
+        "have.attr",
+        "aria-label",
+        expected[0],
+      );
+
+      // Five hours (indices 1-4)
+      range(4).forEach((i) => {
+        cy.get(
+          `[data-testid="five-hours-row"] [data-testid="lamp-${i}"]`,
+        ).should("have.attr", "aria-label", expected[1 + i]);
+      });
+
+      // Single hours (indices 5-8)
+      range(4).forEach((i) => {
+        cy.get(
+          `[data-testid="single-hours-row"] [data-testid="lamp-${i}"]`,
+        ).should("have.attr", "aria-label", expected[5 + i]);
+      });
+
+      // Five minutes (indices 9-19)
+      range(11).forEach((i) => {
+        cy.get(
+          `[data-testid="five-minutes-row"] [data-testid="lamp-${i}"]`,
+        ).should("have.attr", "aria-label", expected[9 + i]);
+      });
+
+      // Single minutes (indices 20-23)
+      range(4).forEach((i) => {
+        cy.get(
+          `[data-testid="single-minutes-row"] [data-testid="lamp-${i}"]`,
+        ).should("have.attr", "aria-label", expected[20 + i]);
+      });
+    };
+
+    it("displays correct clock for 00:00:00", () => {
+      assertFullClock("00:00:00", "YOOOOOOOOOOOOOOOOOOOOOOO");
+    });
+
+    it("displays correct clock for 23:59:59", () => {
+      assertFullClock("23:59:59", "ORRRRRRROYYRYYRYYRYYYYYY");
+    });
+
+    it("displays correct clock for 16:50:06", () => {
+      assertFullClock("16:50:06", "YRRROROOOYYRYYRYYRYOOOOO");
+    });
+
+    it("displays correct clock for 11:37:01", () => {
+      assertFullClock("11:37:01", "ORROOROOOYYRYYRYOOOOYYOO");
+    });
+  });
+});