refactor: replace mocked time with injected clock prop and implement conversion logic

src/__tests__/BerlinClock.test.tsx

@@ -1,26 +1,9 @@
 import { render, screen } from '@testing-library/react';
 import { BerlinClock } from '../containers/BerlinClock';
 import { LampState } from '../types';
-import { useCurrentTime } from '../hooks/useCurrentTime';
-import * as utils from '../utils';
-
-// Mock the hook and the converter
-vi.mock('../hooks/useCurrentTime');
-vi.mock('../utils');
-
-const mockedUseCurrentTime = vi.mocked(useCurrentTime);
-const mockedDateToBerlin = vi.mocked(utils.dateToBerlin);
 
 describe('BerlinClock', () => {
-  beforeEach(() => {
-    // Set a fixed date for the hook
-    mockedUseCurrentTime.mockReturnValue({
-      currentTime: new Date(2025, 0, 1, 14, 30, 0),
-      setCurrentTime: vi.fn(),
-    });
-
-    // Provide a controlled BerlinClock output for that time
-    mockedDateToBerlin.mockReturnValue({
+  const testClock = {
     secondsRow: [LampState.Y],
     fiveHours: [LampState.R, LampState.R, LampState.R, LampState.O],
     oneHour: [LampState.R, LampState.R, LampState.R, LampState.R],
@@ -31,44 +14,41 @@ describe('BerlinClock', () => {
       LampState.O, LampState.O,
     ],
     oneMinute: [LampState.O, LampState.O, LampState.O, LampState.O],
-    });
-  });
+  };
 
   it('renders nothing when disabled', () => {
-    const { container } = render(<BerlinClock enabled={false} />);
+    const { container } = render(<BerlinClock enabled={false} clock={testClock} />);
     expect(container.innerHTML).toBe('');
   });
 
   it('renders all five rows when enabled', () => {
-    render(<BerlinClock enabled={true} />);
+    render(<BerlinClock enabled={true} clock={testClock} />);
 
-    expect(screen.getByTestId('seconds-lamp')).toBeInTheDocument();
+    expect(screen.getByTestId('seconds-row')).toBeInTheDocument();
     expect(screen.getByTestId('five-hours-row')).toBeInTheDocument();
     expect(screen.getByTestId('single-hours-row')).toBeInTheDocument();
     expect(screen.getByTestId('five-minutes-row')).toBeInTheDocument();
     expect(screen.getByTestId('single-minutes-row')).toBeInTheDocument();
   });
 
-  it('renders the seconds lamp with correct aria-label', () => {
-    render(<BerlinClock enabled={true} />);
-    const secLamp = screen.getByTestId('seconds-lamp').querySelector('[data-testid="lamp-0"]');
-    expect(secLamp).toHaveAttribute('aria-label', 'Y');
+  it('renders the correct number of lamps in seconds-row', () => {
+    render(<BerlinClock enabled={true} clock={testClock} />);
+    const secRow = screen.getByTestId('seconds-row');
+    const lampLine = secRow.querySelector('[data-testid="lamp-line"]');
+    expect(lampLine?.children).toHaveLength(1);
   });
 
   it('renders the correct number of lamps in five-hours-row', () => {
-    render(<BerlinClock enabled={true} />);
-    const container = screen.getByTestId('five-hours-row').querySelector('[data-testid="lamp-line"]');
-    expect(container?.children).toHaveLength(4);
+    render(<BerlinClock enabled={true} clock={testClock} />);
+    const row = screen.getByTestId('five-hours-row');
+    const lampLine = row.querySelector('[data-testid="lamp-line"]');
+    expect(lampLine?.children).toHaveLength(4);
   });
 
-  it('renders correct aria-labels in five-hours-row', () => {
-    render(<BerlinClock enabled={true} />);
-    const container = screen.getByTestId('five-hours-row').querySelector('[data-testid="lamp-line"]');
-    const spans = container?.querySelectorAll('span');
-    expect(spans).toHaveLength(4);
-    const expected = ['R', 'R', 'R', 'O'];
-    spans?.forEach((span, i) => {
-      expect(span).toHaveAttribute('aria-label', expected[i]);
-    });
+  it('renders correct aria-labels in the seconds lamp', () => {
+    render(<BerlinClock enabled={true} clock={testClock} />);
+    const secRow = screen.getByTestId('seconds-row');
+    const span = secRow.querySelector('span');
+    expect(span).toHaveAttribute('aria-label', 'Y');
   });
 });

src/__tests__/utils.test.ts

@@ -106,7 +106,7 @@ describe('Utils', () => {
         fiveMinutes: [
           LampState.Y, LampState.Y, LampState.R,
           LampState.Y, LampState.Y, LampState.R,
-          LampState.Y, LampState.Y, LampState.O,
+          LampState.O, LampState.O, LampState.O,
           LampState.O, LampState.O,
         ],
         oneMinute: [LampState.Y, LampState.Y, LampState.Y, LampState.Y],

src/components/Lamp.tsx

@@ -2,8 +2,9 @@ import { LampState } from '../types';
 
 interface LampProps {
   state: LampState;
+  id?: string;
 }
 
-export function Lamp({ state }: LampProps) {
-  return <span aria-label={state} />;
+export function Lamp({ state, id }: LampProps) {
+  return <span data-testid={id} aria-label={state} />;
 }

src/components/LampLine.tsx

@@ -3,13 +3,14 @@ import { Lamp } from './Lamp';
 
 interface LampLineProps {
   states: LampState[];
+  rowTestId?: string;
 }
 
-export function LampLine({ states }: LampLineProps) {
+export function LampLine({ states, rowTestId }: LampLineProps) {
   return (
-    <div data-testid="lamp-line">
+    <div data-testid={rowTestId ?? "lamp-line"}>
       {states.map((state, index) => (
-        <Lamp key={index} state={state} />
+        <Lamp key={index} state={state} id={`lamp-${index}`} />
       ))}
     </div>
   );

src/containers/BerlinClock.tsx

@@ -1,49 +1,24 @@
-import { useState } from 'react';
-import { Lamp } from '../components/Lamp';
-import { LampLine } from '../components/LampLine';
-import { useCurrentTime } from '../hooks/useCurrentTime';
-import { dateToBerlin } from '../utils';
+import { Lamp } from "../components/Lamp";
+import { LampLine } from "../components/LampLine";
+import type { BerlinClock as BerlinClockType } from "../types";
 
 interface BerlinClockProps {
   enabled: boolean;
+  clock: BerlinClockType;
 }
 
-export function BerlinClock({ enabled }: BerlinClockProps) {
-  const { currentTime } = useCurrentTime();
-  const berlin = dateToBerlin(currentTime);
-
+export function BerlinClock({ enabled, clock }: BerlinClockProps) {
   if (!enabled) return null;
 
   return (
     <div>
-      {/* Seconds lamp */}
-      <div data-testid="seconds-lamp">
-        {berlin.secondsRow.length > 0 && (
-          <span data-testid="lamp-0" aria-label={berlin.secondsRow[0]}>
-            {/* optional visual */}
-          </span>
-        )}
-      </div>
-
-      {/* Five hours row */}
-      <div data-testid="five-hours-row">
-        <LampLine states={berlin.fiveHours} />
-      </div>
-
-      {/* Single hours row */}
-      <div data-testid="single-hours-row">
-        <LampLine states={berlin.oneHour} />
-      </div>
-
-      {/* Five minutes row */}
-      <div data-testid="five-minutes-row">
-        <LampLine states={berlin.fiveMinutes} />
-      </div>
-
-      {/* Single minutes row */}
-      <div data-testid="single-minutes-row">
-        <LampLine states={berlin.oneMinute} />
+      <div data-testid="seconds-row">
+        <Lamp state={clock.secondsRow[0]} id="seconds-lamp" />
       </div>
+      <LampLine states={clock.fiveHours} rowTestId="five-hours-row" />
+      <LampLine states={clock.oneHour} rowTestId="single-hours-row" />
+      <LampLine states={clock.fiveMinutes} rowTestId="five-minutes-row" />
+      <LampLine states={clock.oneMinute} rowTestId="single-minutes-row" />
     </div>
   );
 }

src/containers/TimeConverter.tsx

@@ -1,15 +1,14 @@
-import { useState } from 'react';
-import { BerlinClock } from './BerlinClock';
-import { DigitalClock } from './DigitalClock';
-import { useCurrentTime } from '../hooks/useCurrentTime';
+import { useState } from "react";
+import { BerlinClock } from "./BerlinClock";
+import { DigitalClock } from "./DigitalClock";
+import { useCurrentTime } from "../hooks/useCurrentTime";
+import { dateToBerlin } from "../utils";
 
 export function TimeConverter() {
   const { currentTime, setCurrentTime } = useCurrentTime();
   const [useSystemTime, setUseSystemTime] = useState(false);
-
-  const handleTimeChange = (newTime: Date) => {
-    setCurrentTime(newTime);
-  };
+  const enabled = !useSystemTime;
+  const berlinClock = dateToBerlin(currentTime);
 
   return (
     <div>
@@ -22,11 +21,11 @@ export function TimeConverter() {
         />
         Use system time
       </label>
-      <BerlinClock enabled={!useSystemTime} />
+      <BerlinClock enabled={enabled} clock={berlinClock} />
       <DigitalClock
-        enabled={!useSystemTime}
+        enabled={enabled}
         currentTime={currentTime}
-        onTimeChange={handleTimeChange}
+        onTimeChange={setCurrentTime}
       />
     </div>
   );

src/utils/index.ts

@@ -1,25 +1,74 @@
 import type { BerlinClock } from '../types';
+import { LampState } from '../types';
 
 export function dateToDigital(date: Date): string {
-  // returns "HH:mm:ss"
-  return '';
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
 }
 
 export function digitalToDate(digital: string): Date {
-  // parses "HH:mm:ss"
-  return new Date();
+  const parts = digital.split(':');
+  if (parts.length !== 3) return new Date(NaN);
+  const [h, m, s] = parts.map(Number);
+  if (isNaN(h) || isNaN(m) || isNaN(s)) return new Date(NaN);
+  const d = new Date();
+  d.setHours(h, m, s, 0);
+  return d;
 }
 
 export function dateToBerlin(date: Date): BerlinClock {
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+
+  const secondsLamp = seconds % 2 === 0 ? [LampState.Y] : [LampState.O];
+
+  const fiveHoursCount = Math.floor(hours / 5);
+  const fiveHours: LampState[] = Array.from({ length: 4 }, (_, i) =>
+    i < fiveHoursCount ? LampState.R : LampState.O,
+  );
+
+  const oneHourCount = hours % 5;
+  const oneHour: LampState[] = Array.from({ length: 4 }, (_, i) =>
+    i < oneHourCount ? LampState.R : LampState.O,
+  );
+
+  const fiveMinutesCount = Math.floor(minutes / 5);
+  const fiveMinutes: LampState[] = Array.from({ length: 11 }, (_, i) => {
+    if (i < fiveMinutesCount) {
+      // third, sixth, ninth positions (indices 2,5,8) are red (R)
+      return (i + 1) % 3 === 0 ? LampState.R : LampState.Y;
+    }
+    return LampState.O;
+  });
+
+  const oneMinuteCount = minutes % 5;
+  const oneMinute: LampState[] = Array.from({ length: 4 }, (_, i) =>
+    i < oneMinuteCount ? LampState.Y : LampState.O,
+  );
+
   return {
-    secondsRow: [],
-    fiveHours: [],
-    oneHour: [],
-    fiveMinutes: [],
-    oneMinute: [],
+    secondsRow: secondsLamp,
+    fiveHours,
+    oneHour,
+    fiveMinutes,
+    oneMinute,
   };
 }
 
 export function berlinToDate(berlin: BerlinClock): Date {
-  return new Date();
+  const countR = (arr: LampState[]) =>
+    arr.filter((s) => s === LampState.R).length;
+  const countY = (arr: LampState[]) =>
+    arr.filter((s) => s === LampState.Y).length;
+  const countYorR = (arr: LampState[]) =>
+    arr.filter((s) => s === LampState.R || s === LampState.Y).length;
+
+  const hours = countR(berlin.fiveHours) * 5 + countR(berlin.oneHour);
+  const minutes =
+    countYorR(berlin.fiveMinutes) * 5 + countY(berlin.oneMinute);
+
+  const d = new Date();
+  d.setHours(hours, minutes, 0, 0);
+  return d;
 }