refactor: replace enabled prop with disabled in DigitalClock

src/__tests__/DigitalClock.test.tsx

@@ -24,21 +24,21 @@ describe("DigitalClock", () => {
     });
   });
 
-  it("renders nothing when disabled", () => {
+  it("renders the input as disabled when disabled prop is true", () => {
-    const { container } = render(
+    render(
       <DigitalClock
-        enabled={false}
+        disabled={true}
         currentTime={new Date(2025, 0, 1, 14, 30, 15)}
         onTimeChange={onTimeChangeMock}
       />,
     );
-    expect(container.innerHTML).toBe("");
+    const input = screen.getByTestId("time-input");
+    expect(input).toBeDisabled();
   });
 
   it("renders the digital time and input when enabled", () => {
     render(
       <DigitalClock
-        enabled={true}
         currentTime={new Date(2025, 0, 1, 14, 30, 15)}
         onTimeChange={onTimeChangeMock}
       />,
@@ -50,7 +50,6 @@ describe("DigitalClock", () => {
   it("calls onTimeChange when a valid time is entered", () => {
     render(
       <DigitalClock
-        enabled={true}
         currentTime={new Date(2025, 0, 1, 14, 30, 15)}
         onTimeChange={onTimeChangeMock}
       />,
@@ -68,7 +67,6 @@ describe("DigitalClock", () => {
   it("does not call onTimeChange when an invalid time is entered", () => {
     render(
       <DigitalClock
-        enabled={true}
         currentTime={new Date(2025, 0, 1, 14, 30, 15)}
         onTimeChange={onTimeChangeMock}
       />,

src/__tests__/TimeConverter.test.tsx

@@ -13,13 +13,21 @@ vi.mock("../containers/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))}
@@ -52,11 +60,16 @@ describe("TimeConverter", () => {
     expect(screen.getByTestId("digital-clock-wrapper")).toBeInTheDocument();
   });
 
-  it("disables both clocks when checkbox is checked", () => {
+  it("disables the digital clock input when checkbox is checked", () => {
     render(<TimeConverter />);
+    // Initially the input is enabled
+    expect(screen.getByTestId("time-input")).not.toBeDisabled();
+    // Click the checkbox
     fireEvent.click(screen.getByTestId("use-system-time"));
-    expect(screen.getByTestId("berlin-clock")).toHaveTextContent("disabled");
+    // Now the input should be disabled
-    expect(screen.getByTestId("disabled-indicator")).toBeInTheDocument();
+    expect(screen.getByTestId("time-input")).toBeDisabled();
+    // But the BerlinClock still appears enabled (no "disabled" text)
+    expect(screen.getByTestId("berlin-clock")).toHaveTextContent("enabled");
   });
 
   it("calls setCurrentTime when DigitalClock triggers onTimeChange", () => {

src/containers/DigitalClock.tsx

@@ -2,15 +2,15 @@ import { useState } from "react";
 import { dateToDigital, digitalToDate } from "../utils";
 
 interface DigitalClockProps {
-  enabled: boolean;
   currentTime: Date;
   onTimeChange: (time: Date) => void;
+  disabled?: boolean;
 }
 
 export function DigitalClock({
-  enabled,
   currentTime,
   onTimeChange,
+  disabled = false,
 }: DigitalClockProps) {
   const [inputValue, setInputValue] = useState(dateToDigital(currentTime));
 
@@ -23,8 +23,6 @@ export function DigitalClock({
     }
   };
 
-  if (!enabled) return null;
-
   return (
     <div>
       <span data-testid="digital-clock">{dateToDigital(currentTime)}</span>
@@ -34,6 +32,7 @@ export function DigitalClock({
         value={inputValue}
         onChange={handleChange}
         placeholder="HH:MM:SS"
+        disabled={disabled}
       />
     </div>
   );

src/containers/TimeConverter.tsx

@@ -7,7 +7,6 @@ import { dateToBerlin } from "../utils";
 export function TimeConverter() {
   const { currentTime, setCurrentTime } = useCurrentTime();
   const [useSystemTime, setUseSystemTime] = useState(false);
-  const enabled = !useSystemTime;
   const berlinClock = dateToBerlin(currentTime);
 
   return (
@@ -26,11 +25,11 @@ export function TimeConverter() {
         />
         Use system time
       </label>
-      <BerlinClock enabled={enabled} clock={berlinClock} />
+      <BerlinClock enabled={true} clock={berlinClock} />
       <DigitalClock
-        enabled={enabled}
         currentTime={currentTime}
         onTimeChange={setCurrentTime}
+        disabled={useSystemTime}
       />
     </div>
   );