6d94ac7b93
- Add `aria-busy` attribute to Button when loading. - Refactor Button rendering to keep children in DOM (visually hidden) instead of unmounting. - Fix layout shift regression by replicating flex properties in content wrapper. - Move inline styles to CSS modules. - Add tests for loading state accessibility. Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { render, screen, cleanup } from '@testing-library/react';
|
|
import { describe, it, expect, afterEach } from 'vitest';
|
|
import { Button } from '../Button';
|
|
|
|
describe('Button', () => {
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
it('passes aria-label to the button element', () => {
|
|
render(<Button aria-label="Test Label">Click me</Button>);
|
|
const button = screen.getByRole('button', { name: /test label/i });
|
|
expect(button).toBeTruthy();
|
|
});
|
|
|
|
it('passes other HTML attributes', () => {
|
|
render(<Button data-testid="custom-button">Click me</Button>);
|
|
const button = screen.getByTestId('custom-button');
|
|
expect(button).toBeTruthy();
|
|
});
|
|
|
|
it('renders loading state correctly', () => {
|
|
render(<Button isLoading>Submit</Button>);
|
|
const button = screen.getByRole('button', { name: /submit/i }) as HTMLButtonElement;
|
|
expect(button.getAttribute('aria-busy')).toBe('true');
|
|
expect(button.disabled).toBe(true);
|
|
// Verify text is present (opacity: 0 doesn't remove from DOM)
|
|
expect(screen.getByText('Submit')).toBeTruthy();
|
|
});
|
|
});
|