berlin/cypress/e2e/clock.cy.ts

/// <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");
    });
  });

  describe("Use System Time", () => {
    it("should update every second and the seconds lamp should blink", () => {
      // Freeze the clock at a known time (even seconds e.g. 0, so lamp is Y)
      const now = new Date();
      now.setSeconds(0, 0); // seconds = 0 → even → lamp = Y
      cy.clock(now);

      // Visit the page (clock is frozen from this point)
      cy.visit("/");

      // Check the "Use system time" checkbox
      cy.get('[data-testid="use-system-time"]').check();

      // Verify initial seconds lamp is Y (seconds=0)
      cy.get('[data-testid="seconds-lamp"]').should(
        "have.attr",
        "aria-label",
        "Y",
      );

      // Advance time by 1 second → seconds=1 (odd) → lamp toggles to O
      cy.tick(1000);
      cy.get('[data-testid="seconds-lamp"]').should(
        "have.attr",
        "aria-label",
        "O",
      );

      // Advance another second → seconds=2 (even) → lamp back to Y
      cy.tick(1000);
      cy.get('[data-testid="seconds-lamp"]').should(
        "have.attr",
        "aria-label",
        "Y",
      );
    });
  });
});