Experiments DB Dev
43 lines
1.4 KiB
React
43 lines
1.4 KiB
React
import React from 'react';
|
|
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import Button from '../src/components/ui/Button';
|
|
|
|
describe('Button component', () => {
|
|
it('renders with children text', () => {
|
|
render(<Button>Click me</Button>);
|
|
expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it('calls onClick when clicked', () => {
|
|
const onClick = jest.fn();
|
|
render(<Button onClick={onClick}>Click</Button>);
|
|
fireEvent.click(screen.getByRole('button'));
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('is disabled when disabled prop is true', () => {
|
|
render(<Button disabled>Submit</Button>);
|
|
expect(screen.getByRole('button')).toBeDisabled();
|
|
});
|
|
|
|
it('is disabled and shows spinner when loading', () => {
|
|
render(<Button loading>Submit</Button>);
|
|
const btn = screen.getByRole('button');
|
|
expect(btn).toBeDisabled();
|
|
expect(btn.querySelector('svg')).toBeTruthy();
|
|
});
|
|
|
|
it('renders danger variant', () => {
|
|
render(<Button variant="danger">Delete</Button>);
|
|
const btn = screen.getByRole('button');
|
|
expect(btn.className).toContain('bg-red-600');
|
|
});
|
|
|
|
it('does not call onClick when disabled', () => {
|
|
const onClick = jest.fn();
|
|
render(<Button disabled onClick={onClick}>Click</Button>);
|
|
fireEvent.click(screen.getByRole('button'));
|
|
expect(onClick).not.toHaveBeenCalled();
|
|
});
|
|
});
|