test: add failing TDD test for system time checkbox behavior

This commit is contained in:
Loic Coenen
2026-06-25 09:04:06 +02:00
committed by Loic Coenen (aider)
parent d33c434fe9
commit 261c978037
2 changed files with 60 additions and 14 deletions

View File

@@ -213,14 +213,19 @@ describe("Berlin Clock", () => {
describe("Use System Time", () => { describe("Use System Time", () => {
it("should show system time when checkbox is checked", () => { it("should show system time when checkbox is checked", () => {
// Start by entering a fixed time // 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"); cy.get('[data-testid="digital-clock"]').should("contain", "12:00:00");
// Check the "Use system time" checkbox // Check the "Use system time" checkbox
cy.get('[data-testid="use-system-time"]').check(); cy.get('[data-testid="use-system-time"]').check();
// Now the digital clock should reflect the real system time // 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"]')
.invoke("text")
.then((displayedTime) => {
// displayedTime is "HH:mm:ss" // displayedTime is "HH:mm:ss"
const parts = displayedTime.split(":"); const parts = displayedTime.split(":");
const displayedSeconds = const displayedSeconds =

View File

@@ -66,4 +66,45 @@ describe("TimeConverter", () => {
new Date(2025, 0, 1, 12, 0, 0), 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();
});
}); });