123 lines
3.4 KiB
TypeScript
123 lines
3.4 KiB
TypeScript
import { describe, it, expect, vi } from 'vitest';
|
|
import React from 'react';
|
|
import { render, screen, fireEvent } from '@testing-library/react';
|
|
|
|
// Mock() Button component
|
|
vi.mock('../../../apps/website/components/ui/Button', () => ({
|
|
default: ({ onClick, children, className, title, variant }: any) => (
|
|
<button
|
|
onClick={onClick}
|
|
className={className}
|
|
title={title}
|
|
data-variant={variant}
|
|
data-testid="penalty-button"
|
|
>
|
|
{children}
|
|
</button>
|
|
),
|
|
}));
|
|
|
|
import InlinePenaltyButton from '../../../apps/website/components/races/InlinePenaltyButton';
|
|
|
|
describe('InlinePenaltyButton', () => {
|
|
const mockDriver = { id: 'driver-1', name: 'Test Driver' };
|
|
const mockOnPenaltyClick = vi.fn();
|
|
|
|
it('should not render when user is not admin', () => {
|
|
render(
|
|
<InlinePenaltyButton
|
|
driver={mockDriver}
|
|
onPenaltyClick={mockOnPenaltyClick}
|
|
isAdmin={false}
|
|
/>
|
|
);
|
|
|
|
const button = screen.queryByTestId('penalty-button');
|
|
expect(button).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('should render when user is admin', () => {
|
|
render(
|
|
<InlinePenaltyButton
|
|
driver={mockDriver}
|
|
onPenaltyClick={mockOnPenaltyClick}
|
|
isAdmin={true}
|
|
/>
|
|
);
|
|
|
|
const button = screen.getByTestId('penalty-button');
|
|
expect(button).toBeInTheDocument();
|
|
expect(button).toHaveAttribute('title', 'Issue penalty to Test Driver');
|
|
expect(button).toHaveAttribute('data-variant', 'danger');
|
|
});
|
|
|
|
it('should call onPenaltyClick when button is clicked', () => {
|
|
render(
|
|
<InlinePenaltyButton
|
|
driver={mockDriver}
|
|
onPenaltyClick={mockOnPenaltyClick}
|
|
isAdmin={true}
|
|
/>
|
|
);
|
|
|
|
const button = screen.getByTestId('penalty-button');
|
|
fireEvent.click(button);
|
|
|
|
expect(mockOnPenaltyClick).toHaveBeenCalledTimes(1);
|
|
expect(mockOnPenaltyClick).toHaveBeenCalledWith(mockDriver);
|
|
});
|
|
|
|
it('should not crash when onPenaltyClick is not provided', () => {
|
|
render(
|
|
<InlinePenaltyButton
|
|
driver={mockDriver}
|
|
isAdmin={true}
|
|
/>
|
|
);
|
|
|
|
const button = screen.getByTestId('penalty-button');
|
|
|
|
// Should not crash when clicked without onPenaltyClick
|
|
expect(() => fireEvent.click(button)).not.toThrow();
|
|
});
|
|
|
|
it('should have proper button styling for spacing', () => {
|
|
render(
|
|
<InlinePenaltyButton
|
|
driver={mockDriver}
|
|
onPenaltyClick={mockOnPenaltyClick}
|
|
isAdmin={true}
|
|
/>
|
|
);
|
|
|
|
const button = screen.getByTestId('penalty-button');
|
|
|
|
// Check that button has proper spacing classes
|
|
expect(button).toHaveClass('p-1.5');
|
|
expect(button).toHaveClass('min-h-[32px]');
|
|
expect(button).toHaveClass('w-8');
|
|
expect(button).toHaveClass('h-8');
|
|
expect(button).toHaveClass('rounded-full');
|
|
expect(button).toHaveClass('flex');
|
|
expect(button).toHaveClass('items-center');
|
|
expect(button).toHaveClass('justify-center');
|
|
});
|
|
|
|
it('should render AlertTriangle icon with proper sizing', () => {
|
|
render(
|
|
<InlinePenaltyButton
|
|
driver={mockDriver}
|
|
onPenaltyClick={mockOnPenaltyClick}
|
|
isAdmin={true}
|
|
/>
|
|
);
|
|
|
|
const button = screen.getByTestId('penalty-button');
|
|
const icon = button.querySelector('svg');
|
|
|
|
expect(icon).toBeInTheDocument();
|
|
expect(icon).toHaveClass('w-4');
|
|
expect(icon).toHaveClass('h-4');
|
|
expect(icon).toHaveClass('flex-shrink-0');
|
|
});
|
|
}); |