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 show system time when checkbox is checked", () => {
      // Start by entering a fixed time
      cy.get('[data-testid="time-input"]')
        .clear()
        .type("12:00:00")
        .type("{enter}");
      cy.get('[data-testid="digital-clock"]').should("contain", "12:00:00");

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

      // Now the digital clock should reflect the real system time
      cy.get('[data-testid="digital-clock"]')
        .invoke("text")
        .then((displayedTime) => {
          // displayedTime is "HH:mm:ss"
          const parts = displayedTime.split(":");
          const displayedSeconds =
            parseInt(parts[0]) * 3600 +
            parseInt(parts[1]) * 60 +
            parseInt(parts[2]);
          const now = new Date();
          const realSeconds =
            now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
          // Allow a 5-second tolerance
          expect(Math.abs(displayedSeconds - realSeconds)).to.be.lessThan(5);
        });
    });
  });
});