From 261c97803747d890915f86429b43dcf0576d5d02 Mon Sep 17 00:00:00 2001 From: Loic Coenen Date: Thu, 25 Jun 2026 09:04:06 +0200 Subject: [PATCH] test: add failing TDD test for system time checkbox behavior --- cypress/e2e/clock.cy.ts | 33 ++++++++++++---------- src/__tests__/TimeConverter.test.tsx | 41 ++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 14 deletions(-) diff --git a/cypress/e2e/clock.cy.ts b/cypress/e2e/clock.cy.ts index a6d8eeb..88db869 100644 --- a/cypress/e2e/clock.cy.ts +++ b/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) => { - // 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); - }); + 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); + }); }); }); }); diff --git a/src/__tests__/TimeConverter.test.tsx b/src/__tests__/TimeConverter.test.tsx index 12198ae..c96a75f 100644 --- a/src/__tests__/TimeConverter.test.tsx +++ b/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(); + + // 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(); + }); });