import { fireEvent, render, screen } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { Sheet } from './Sheet';
describe('Sheet', () => {
const defaultProps = {
isOpen: true,
onClose: vi.fn(),
children:
Test Content
,
title: 'Test Title',
description: 'Test Description',
};
beforeEach(() => {
vi.clearAllMocks();
});
it('renders children when open', () => {
render();
expect(screen.getByText('Test Content')).toBeInTheDocument();
});
it('does not render children when closed', () => {
render();
expect(screen.queryByText('Test Content')).not.toBeInTheDocument();
});
it('calls onClose when Escape key is pressed on overlay', () => {
render();
fireEvent.keyDown(document, {
key: 'Escape',
});
expect(defaultProps.onClose).toHaveBeenCalled();
});
it('applies custom className when provided', () => {
render();
expect(screen.getByTestId('ockSheet')).toHaveClass('custom-class');
});
it('sets all ARIA attributes correctly', () => {
render(
Content
,
);
const sheet = screen.getByTestId('ockSheet');
expect(sheet).toHaveAttribute('role', 'dialog');
expect(sheet).toHaveAttribute('aria-label', 'Test Dialog');
expect(sheet).toHaveAttribute('aria-describedby', 'desc');
expect(sheet).toHaveAttribute('aria-labelledby', 'title');
});
describe('sides', () => {
it('renders the sheet with the correct side', () => {
render();
expect(screen.getByTestId('ockSheet')).toHaveClass(
'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
);
});
it('renders the sheet with the correct side', () => {
render();
expect(screen.getByTestId('ockSheet')).toHaveClass(
'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
);
});
it('renders the sheet with the correct side', () => {
render();
expect(screen.getByTestId('ockSheet')).toHaveClass(
'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top rounded-b-3xl',
);
});
it('renders the sheet with the correct side', () => {
render();
expect(screen.getByTestId('ockSheet')).toHaveClass(
'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom rounded-t-3xl',
);
});
});
});