42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
// src/components/UnitSystemToggle.test.tsx
|
|
import React from 'react';
|
|
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
import { UnitSystemToggle } from './UnitSystemToggle';
|
|
|
|
describe('UnitSystemToggle', () => {
|
|
const mockOnToggle = vi.fn();
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it('should render correctly for imperial system', () => {
|
|
render(<UnitSystemToggle currentSystem="imperial" onToggle={mockOnToggle} />);
|
|
|
|
const checkbox = screen.getByRole('checkbox');
|
|
expect(checkbox).toBeChecked();
|
|
|
|
// Check which label is visually prominent
|
|
expect(screen.getByText('Imperial')).not.toHaveClass('text-gray-400');
|
|
expect(screen.getByText('Metric')).toHaveClass('text-gray-400');
|
|
});
|
|
|
|
it('should render correctly for metric system', () => {
|
|
render(<UnitSystemToggle currentSystem="metric" onToggle={mockOnToggle} />);
|
|
|
|
const checkbox = screen.getByRole('checkbox');
|
|
expect(checkbox).not.toBeChecked();
|
|
|
|
// Check which label is visually prominent
|
|
expect(screen.getByText('Metric')).not.toHaveClass('text-gray-400');
|
|
expect(screen.getByText('Imperial')).toHaveClass('text-gray-400');
|
|
});
|
|
|
|
it('should call onToggle when the toggle is clicked', () => {
|
|
render(<UnitSystemToggle currentSystem="metric" onToggle={mockOnToggle} />);
|
|
fireEvent.click(screen.getByRole('checkbox'));
|
|
expect(mockOnToggle).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|