test: add failing TDD test for system time checkbox behavior

cypress/e2e/clock.cy.ts

@@ -213,26 +213,31 @@ describe("Berlin Clock", () => {
   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="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) => {
+      cy.get('[data-testid="digital-clock"]')
-        // displayedTime is "HH:mm:ss"
+        .invoke("text")
-        const parts = displayedTime.split(":");
+        .then((displayedTime) => {
-        const displayedSeconds =
+          // displayedTime is "HH:mm:ss"
-          parseInt(parts[0]) * 3600 +
+          const parts = displayedTime.split(":");
-          parseInt(parts[1]) * 60 +
+          const displayedSeconds =
-          parseInt(parts[2]);
+            parseInt(parts[0]) * 3600 +
-        const now = new Date();
+            parseInt(parts[1]) * 60 +
-        const realSeconds =
+            parseInt(parts[2]);
-          now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
+          const now = new Date();
-        // Allow a 5-second tolerance
+          const realSeconds =
-        expect(Math.abs(displayedSeconds - realSeconds)).to.be.lessThan(5);
+            now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
-      });
+          // Allow a 5-second tolerance
+          expect(Math.abs(displayedSeconds - realSeconds)).to.be.lessThan(5);
+        });
     });
   });
 });

src/__tests__/TimeConverter.test.tsx

@@ -66,4 +66,45 @@ describe("TimeConverter", () => {
       new Date(2025, 0, 1, 12, 0, 0),
     );
   });
+
+  // ──────────────────────────────────────────────────────────
+  // NEW TDD TEST – should FAIL with current component code
+  // ──────────────────────────────────────────────────────────
+  it("switches to system time when 'Use system time' checkbox is checked (TDD)", () => {
+    // Fix system time to 15:00:00
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2025, 0, 1, 15, 0, 0));
+
+    // A mutable currentTime that the mock will return
+    let currentDate = new Date(2025, 0, 1, 12, 0, 0);
+    const setCurrentDate = vi.fn((d: Date) => {
+      currentDate = d;
+    });
+
+    mockedUseCurrentTime.mockImplementation(() => ({
+      currentTime: currentDate,
+      setCurrentTime: setCurrentDate,
+    }));
+
+    render(<TimeConverter />);
+
+    // Initially the digital clock shows the manual time 12:00:00
+    expect(screen.getByTestId("digital-clock-time")).toHaveTextContent(
+      new Date(2025, 0, 1, 12, 0, 0).toISOString(),
+    );
+
+    // Click the "Use system time" checkbox
+    fireEvent.click(screen.getByTestId("use-system-time"));
+
+    // The component SHOULD have called setCurrentDate with the system time
+    // (currently it does NOT, so this assertion fails)
+    expect(setCurrentDate).toHaveBeenCalledWith(new Date(2025, 0, 1, 15, 0, 0));
+
+    // And the digital clock should now show the system time 15:00:00
+    expect(screen.getByTestId("digital-clock-time")).toHaveTextContent(
+      new Date(2025, 0, 1, 15, 0, 0).toISOString(),
+    );
+
+    vi.useRealTimers();
+  });
 });