Spaces:
Sleeping
Sleeping
File size: 2,769 Bytes
cd99321 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 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');
});
});
|