fix: update seconds lamp every second when using system time

cypress/e2e/clock.cy.ts

@@ -211,33 +211,40 @@ describe("Berlin Clock", () => {
   });
 
   describe("Use System Time", () => {
-    it("should show system time when checkbox is checked", () => {
+    it("should update every second and the seconds lamp should blink", () => {
-      // Start by entering a fixed time
+      // Freeze the clock at a known time (even seconds e.g. 0, so lamp is Y)
-      cy.get('[data-testid="time-input"]')
+      const now = new Date();
-        .clear()
+      now.setSeconds(0, 0); // seconds = 0 → even → lamp = Y
-        .type("12:00:00")
+      cy.clock(now);
-        .type("{enter}");
+
-      cy.get('[data-testid="digital-clock"]').should("contain", "12:00:00");
+      // 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();
 
-      // Now the digital clock should reflect the real system time
+      // Verify initial seconds lamp is Y (seconds=0)
-      cy.get('[data-testid="digital-clock"]')
+      cy.get('[data-testid="seconds-lamp"]').should(
-        .invoke("text")
+        "have.attr",
-        .then((displayedTime) => {
+        "aria-label",
-          // displayedTime is "HH:mm:ss"
+        "Y",
-          const parts = displayedTime.split(":");
+      );
-          const displayedSeconds =
+
-            parseInt(parts[0]) * 3600 +
+      // Advance time by 1 second → seconds=1 (odd) → lamp toggles to O
-            parseInt(parts[1]) * 60 +
+      cy.tick(1000);
-            parseInt(parts[2]);
+      cy.get('[data-testid="seconds-lamp"]').should(
-          const now = new Date();
+        "have.attr",
-          const realSeconds =
+        "aria-label",
-            now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
+        "O",
-          // Allow a 5-second tolerance
+      );
-          expect(Math.abs(displayedSeconds - realSeconds)).to.be.lessThan(5);
+
-        });
+      // 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",
+      );
     });
   });
 });

src/containers/TimeConverter.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { BerlinClock } from "./BerlinClock";
 import { DigitalClock } from "./DigitalClock";
 import { useCurrentTime } from "../hooks/useCurrentTime";
@@ -9,6 +9,14 @@ export function TimeConverter() {
   const [useSystemTime, setUseSystemTime] = useState(false);
   const berlinClock = dateToBerlin(currentTime);
 
+  useEffect(() => {
+    if (!useSystemTime) return;
+    const id = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, [useSystemTime, setCurrentTime]);
+
   return (
     <div>
       <label>