boomjacky/berlin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Loic Coenen
2026-06-24 16:54:57 +02:00
committed by Loic Coenen (aider)
parent 88ce663b44
commit 2c84312947
7 changed files with 117 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/__tests__/BerlinClock.test.tsx
View File

@@ -1,74 +1,54 @@
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({
secondsRow: [LampState.Y],
fiveHours: [LampState.R, LampState.R, LampState.R, LampState.O],
oneHour: [LampState.R, LampState.R, LampState.R, LampState.R],
fiveMinutes: [
LampState.Y, LampState.Y, LampState.R,
LampState.Y, LampState.Y, LampState.R,
LampState.O, LampState.O, LampState.O,
LampState.O, LampState.O,
],
oneMinute: [LampState.O, LampState.O, LampState.O, LampState.O],
});
});
const testClock = {
secondsRow: [LampState.Y],
fiveHours: [LampState.R, LampState.R, LampState.R, LampState.O],
oneHour: [LampState.R, LampState.R, LampState.R, LampState.R],
fiveMinutes: [
LampState.Y, LampState.Y, LampState.R,
LampState.Y, LampState.Y, LampState.R,
LampState.O, LampState.O, LampState.O,
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');
});
});

2
src/__tests__/utils.test.ts
View File

@@ -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],