From 0b8d76a057e9e08ee62f7cb31a782f7164e7f6dd Mon Sep 17 00:00:00 2001
From: Loic Coenen <loic@visua.com>
Date: Thu, 25 Jun 2026 10:43:36 +0200
Subject: [PATCH] refactor: simplify DigitalClock and TimeConverter components

---
 src/__tests__/DigitalClock.test.tsx  |  7 ++--
 src/__tests__/TimeConverter.test.tsx | 57 +++++++++++-----------------
 src/containers/DigitalClock.tsx      |  1 -
 src/containers/TimeConverter.tsx     |  4 +-
 src/index.css                        | 15 ++++++++
 5 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/src/__tests__/DigitalClock.test.tsx b/src/__tests__/DigitalClock.test.tsx
index 0bf094b..22ca69c 100644
--- a/src/__tests__/DigitalClock.test.tsx
+++ b/src/__tests__/DigitalClock.test.tsx
@@ -36,15 +36,16 @@ describe("DigitalClock", () => {
     expect(input).toBeDisabled();
   });
 
-  it("renders the digital time and input when enabled", () => {
+  it("renders the input with the correct initial value when enabled", () => {
     render(
       <DigitalClock
         currentTime={new Date(2025, 0, 1, 14, 30, 15)}
         onTimeChange={onTimeChangeMock}
       />,
     );
-    expect(screen.getByTestId("digital-clock")).toHaveTextContent("14:30:15");
-    expect(screen.getByTestId("time-input")).toBeInTheDocument();
+    const input = screen.getByTestId("time-input") as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    expect(input.value).toBe("14:30:15");
   });
 
   it("calls onTimeChange when a valid time is entered", () => {
diff --git a/src/__tests__/TimeConverter.test.tsx b/src/__tests__/TimeConverter.test.tsx
index cd64e14..dc254ac 100644
--- a/src/__tests__/TimeConverter.test.tsx
+++ b/src/__tests__/TimeConverter.test.tsx
@@ -10,33 +10,26 @@ vi.mock("../containers/BerlinClock", () => ({
 }));
 vi.mock("../containers/DigitalClock", () => ({
   DigitalClock: ({
-    enabled,
     currentTime,
     onTimeChange,
     disabled = false,
   }: {
-    enabled: boolean;
     currentTime: Date;
     onTimeChange: (d: Date) => void;
     disabled?: boolean;
-  }) => (
-    <div data-testid="digital-clock-wrapper">
-      <span data-testid="digital-clock-time">{currentTime.toISOString()}</span>
-      <input
-        data-testid="time-input"
-        disabled={disabled}
-        value=""
-        onChange={() => {}}
-      />
-      <button
-        data-testid="set-time"
-        onClick={() => onTimeChange(new Date(2025, 0, 1, 12, 0, 0))}
-      >
-        Set time
-      </button>
-      {!enabled && <span data-testid="disabled-indicator">disabled</span>}
-    </div>
-  ),
+  }) => {
+    const digitalTime = `${String(currentTime.getHours()).padStart(2, "0")}:${String(currentTime.getMinutes()).padStart(2, "0")}:${String(currentTime.getSeconds()).padStart(2, "0")}`;
+    return (
+      <div data-testid="digital-clock-wrapper">
+        <input
+          data-testid="time-input"
+          disabled={disabled}
+          value={digitalTime}
+          onChange={() => {}}
+        />
+      </div>
+    );
+  },
 }));
 
 const mockedUseCurrentTime = vi.mocked(useCurrentTime);
@@ -72,12 +65,10 @@ describe("TimeConverter", () => {
     expect(screen.getByTestId("berlin-clock")).toHaveTextContent("enabled");
   });
 
-  it("calls setCurrentTime when DigitalClock triggers onTimeChange", () => {
+  it("renders the digital clock input with the correct initial value", () => {
     render(<TimeConverter />);
-    fireEvent.click(screen.getByTestId("set-time"));
-    expect(setCurrentTimeMock).toHaveBeenCalledWith(
-      new Date(2025, 0, 1, 12, 0, 0),
-    );
+    const input = screen.getByTestId("time-input") as HTMLInputElement;
+    expect(input.value).toBe("14:30:15");
   });
 
   // ──────────────────────────────────────────────────────────
@@ -101,22 +92,18 @@ describe("TimeConverter", () => {
 
     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(),
-    );
+    // Initially the digital clock input shows the manual time 12:00:00
+    const input = screen.getByTestId("time-input") as HTMLInputElement;
+    expect(input.value).toBe("12:00:00");
 
     // 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)
+    // The component should have called setCurrentDate with the system time
     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(),
-    );
+    // And the input should now show the system time 15:00:00
+    expect(input.value).toBe("15:00:00");
 
     vi.useRealTimers();
   });
diff --git a/src/containers/DigitalClock.tsx b/src/containers/DigitalClock.tsx
index 55f60bb..fd2d2c9 100644
--- a/src/containers/DigitalClock.tsx
+++ b/src/containers/DigitalClock.tsx
@@ -25,7 +25,6 @@ export function DigitalClock({
 
   return (
     <div>
-      <span data-testid="digital-clock">{dateToDigital(currentTime)}</span>
       <input
         data-testid="time-input"
         type="text"
diff --git a/src/containers/TimeConverter.tsx b/src/containers/TimeConverter.tsx
index 6392c90..b5d540c 100644
--- a/src/containers/TimeConverter.tsx
+++ b/src/containers/TimeConverter.tsx
@@ -6,7 +6,7 @@ import { dateToBerlin } from "../utils";
 
 export function TimeConverter() {
   const { currentTime, setCurrentTime } = useCurrentTime();
-  const [useSystemTime, setUseSystemTime] = useState(false);
+  const [useSystemTime, setUseSystemTime] = useState(true);
   const berlinClock = dateToBerlin(currentTime);
 
   useEffect(() => {
@@ -18,7 +18,7 @@ export function TimeConverter() {
   }, [useSystemTime, setCurrentTime]);
 
   return (
-    <div>
+    <div className="time-converter">
       <BerlinClock enabled={true} clock={berlinClock} />
       <DigitalClock
         currentTime={currentTime}
diff --git a/src/index.css b/src/index.css
index b3d019b..71de6ac 100644
--- a/src/index.css
+++ b/src/index.css
@@ -120,4 +120,19 @@ code {
 
 .clock-container input {
   font-family: inherit;
+  border: none;
+  outline: none;
+  display: block;
+  width: 100%;
+  height: 50px;
+  font-size: 28px;
+  text-align: center;
+  margin: 16px auto;
+  border-radius: 8px;
+  background: var(--code-bg);
+  color: var(--text-h);
+}
+
+.time-converter > :first-child {
+  margin-top: 20px;
 }