test: expand frontend test suite to 82% coverage

Adds ~45 new and updated test files covering Admin, Collab, Dashboard, Map, Memories, PDF, Photos, Planner, Settings, Vacay, Weather components, pages, stores, and a WebSocket integration test.
2026-06-20 13:51:45 +00:00 · 2026-04-08 21:14:23 +02:00
parent 2b7057b922
commit d4bb8be86b
45 changed files with 13643 additions and 524 deletions
@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, screen } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { resetAllStores } from '../../../tests/helpers/store';
+import ToggleSwitch from './ToggleSwitch';
+
+beforeEach(() => {
+  resetAllStores();
+  vi.clearAllMocks();
+});
+
+describe('ToggleSwitch', () => {
+  it('FE-COMP-TOGGLESWITCH-001: renders a button', () => {
+    render(<ToggleSwitch on={false} onToggle={() => {}} />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-TOGGLESWITCH-002: knob is positioned left when on is false', () => {
+    render(<ToggleSwitch on={false} onToggle={() => {}} />);
+    const button = screen.getByRole('button');
+    const knob = button.querySelector('span')!;
+    expect(knob.style.left).toBe('2px');
+  });
+
+  it('FE-COMP-TOGGLESWITCH-003: knob is positioned right when on is true', () => {
+    render(<ToggleSwitch on={true} onToggle={() => {}} />);
+    const button = screen.getByRole('button');
+    const knob = button.querySelector('span')!;
+    expect(knob.style.left).toBe('22px');
+  });
+
+  it('FE-COMP-TOGGLESWITCH-004: background uses accent variable when on is true', () => {
+    render(<ToggleSwitch on={true} onToggle={() => {}} />);
+    const button = screen.getByRole('button');
+    expect(button.style.background).toContain('var(--accent');
+  });
+
+  it('FE-COMP-TOGGLESWITCH-005: background uses border-primary variable when on is false', () => {
+    render(<ToggleSwitch on={false} onToggle={() => {}} />);
+    const button = screen.getByRole('button');
+    expect(button.style.background).toContain('var(--border-primary');
+  });
+
+  it('FE-COMP-TOGGLESWITCH-006: clicking the button calls onToggle', async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+    render(<ToggleSwitch on={false} onToggle={onToggle} />);
+    await user.click(screen.getByRole('button'));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-COMP-TOGGLESWITCH-007: clicking does not change visual state without parent update', async () => {
+    const user = userEvent.setup();
+    render(<ToggleSwitch on={false} onToggle={() => {}} />);
+    const button = screen.getByRole('button');
+    await user.click(button);
+    expect(button.querySelector('span')!.style.left).toBe('2px');
+  });
+
+  it('FE-COMP-TOGGLESWITCH-008: re-renders correctly when on prop changes from false to true', () => {
+    const { rerender } = render(<ToggleSwitch on={false} onToggle={() => {}} />);
+    const button = screen.getByRole('button');
+    expect(button.querySelector('span')!.style.left).toBe('2px');
+    rerender(<ToggleSwitch on={true} onToggle={() => {}} />);
+    expect(button.querySelector('span')!.style.left).toBe('22px');
+  });
+});