65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
|
import { render, screen } from '@testing-library/react';
|
||
|
|
import { describe, it, expect } from 'vitest';
|
||
|
|
import { ButtonLoading } from './button-loading';
|
||
|
|
|
||
|
|
describe('ButtonLoading Component', () => {
|
||
|
|
it('renders button with children', () => {
|
||
|
|
render(<ButtonLoading>Click me</ButtonLoading>);
|
||
|
|
|
||
|
|
expect(screen.getByText('Click me')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('shows loading spinner when isLoading is true', () => {
|
||
|
|
render(<ButtonLoading isLoading={true}>Click me</ButtonLoading>);
|
||
|
|
|
||
|
|
const spinner = screen.getByRole('img', { hidden: true });
|
||
|
|
expect(spinner).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('shows loading text when provided', () => {
|
||
|
|
render(
|
||
|
|
<ButtonLoading isLoading={true} loadingText="Loading...">
|
||
|
|
Click me
|
||
|
|
</ButtonLoading>
|
||
|
|
);
|
||
|
|
|
||
|
|
expect(screen.getByText('Loading...')).toBeInTheDocument();
|
||
|
|
expect(screen.queryByText('Click me')).not.toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('disables button when isLoading is true', () => {
|
||
|
|
render(<ButtonLoading isLoading={true}>Click me</ButtonLoading>);
|
||
|
|
|
||
|
|
const button = screen.getByRole('button');
|
||
|
|
expect(button).toBeDisabled();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('disables button when disabled prop is true', () => {
|
||
|
|
render(<ButtonLoading disabled={true}>Click me</ButtonLoading>);
|
||
|
|
|
||
|
|
const button = screen.getByRole('button');
|
||
|
|
expect(button).toBeDisabled();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('disables button when both isLoading and disabled are true', () => {
|
||
|
|
render(
|
||
|
|
<ButtonLoading isLoading={true} disabled={true}>
|
||
|
|
Click me
|
||
|
|
</ButtonLoading>
|
||
|
|
);
|
||
|
|
|
||
|
|
const button = screen.getByRole('button');
|
||
|
|
expect(button).toBeDisabled();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('applies custom className', () => {
|
||
|
|
const { container } = render(
|
||
|
|
<ButtonLoading className="custom-class">Click me</ButtonLoading>
|
||
|
|
);
|
||
|
|
|
||
|
|
const button = container.querySelector('button');
|
||
|
|
expect(button).toHaveClass('custom-class');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|