75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import userEvent from '@testing-library/user-event';
|
|
import React from 'react';
|
|
|
|
import { Container } from './Container';
|
|
import { render, screen } from '../../lib/testing';
|
|
|
|
describe('components/Container', () => {
|
|
it('handles onPress event', async () => {
|
|
const user = userEvent.setup();
|
|
const handlePress = vi.fn();
|
|
render(<Container onPress={handlePress}>Content</Container>);
|
|
|
|
const container = screen.getByText('Content');
|
|
await user.click(container);
|
|
expect(handlePress).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('applies interactive styles when onPress is present', () => {
|
|
const { rerender } = render(<Container>Content</Container>);
|
|
let container = screen.getByText('Content');
|
|
expect(container).not.toHaveClass('cursor-pointer');
|
|
|
|
rerender(<Container onPress={() => {}}>Content</Container>);
|
|
container = screen.getByText('Content');
|
|
expect(container).toHaveClass('cursor-pointer');
|
|
expect(container).toHaveClass('hover:brightness-95');
|
|
expect(container).toHaveClass('active:opacity-80');
|
|
});
|
|
|
|
it('renders as different HTML elements using the "as" prop', () => {
|
|
const { rerender } = render(<Container as="main">Main Content</Container>);
|
|
expect(screen.getByText('Main Content').tagName).toBe('MAIN');
|
|
|
|
rerender(<Container as="article">Article Content</Container>);
|
|
expect(screen.getByText('Article Content').tagName).toBe('ARTICLE');
|
|
|
|
rerender(<Container as="section">Section Content</Container>);
|
|
expect(screen.getByText('Section Content').tagName).toBe('SECTION');
|
|
});
|
|
|
|
it('renders as an anchor tag with href when href prop is provided', () => {
|
|
render(<Container href="/test-path">Link Content</Container>);
|
|
const linkElement = screen.getByText('Link Content');
|
|
expect(linkElement.tagName).toBe('A');
|
|
expect(linkElement).toHaveAttribute('href', '/test-path');
|
|
});
|
|
|
|
it('gives precedence to href over onPress', async () => {
|
|
const user = userEvent.setup();
|
|
const handlePress = vi.fn();
|
|
render(
|
|
<Container href="/test-path" onPress={handlePress}>
|
|
Link Content
|
|
</Container>
|
|
);
|
|
const linkElement = screen.getByText('Link Content');
|
|
await user.click(linkElement);
|
|
expect(handlePress).not.toHaveBeenCalled();
|
|
expect(linkElement.tagName).toBe('A');
|
|
});
|
|
|
|
it('warns when both href and onPress are provided', () => {
|
|
const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
|
|
render(
|
|
<Container href="/test-path" onPress={() => {}}>
|
|
Content
|
|
</Container>
|
|
);
|
|
expect(consoleWarnSpy).toHaveBeenCalledWith(
|
|
'[@ermnvldmr/ui] Container cannot have both `onPress` and `href` props.',
|
|
);
|
|
consoleWarnSpy.mockRestore();
|
|
});
|
|
});
|