55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, expect, it } from 'vitest';
|
|
import { Chip } from '../../src/components/Chip';
|
|
|
|
describe('Chip', () => {
|
|
it('renders default span with solid classes', () => {
|
|
render(<Chip>Default</Chip>);
|
|
|
|
const chip = screen.getByText('Default');
|
|
expect(chip.tagName).toBe('SPAN');
|
|
expect(chip.className).toContain('chip-solid');
|
|
});
|
|
|
|
it('supports outlined variant with valid tone', () => {
|
|
render(
|
|
<Chip as="div" variant="outlined" tone="indigo-700">
|
|
Custom
|
|
</Chip>,
|
|
);
|
|
|
|
const chip = screen.getByText('Custom');
|
|
expect(chip.tagName).toBe('DIV');
|
|
expect(chip.className).toContain('chip-outlined');
|
|
expect(chip).toHaveStyle({
|
|
borderColor: 'rgb(67, 56, 202)',
|
|
color: 'rgb(67, 56, 202)',
|
|
});
|
|
});
|
|
|
|
it('supports direct tone tokens without shades for solid variant', () => {
|
|
render(<Chip tone="white">Solid</Chip>);
|
|
|
|
expect(screen.getByText('Solid')).toHaveStyle({
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(255, 255, 255)',
|
|
color: 'rgb(255, 255, 255)',
|
|
});
|
|
});
|
|
|
|
it('ignores invalid/empty tones and keeps className', () => {
|
|
const { rerender } = render(
|
|
<Chip tone="not-a-token" className="chip-custom">
|
|
Invalid
|
|
</Chip>,
|
|
);
|
|
|
|
const invalid = screen.getByText('Invalid');
|
|
expect(invalid).toHaveClass('chip-custom');
|
|
expect(invalid.getAttribute('style')).toBeNull();
|
|
|
|
rerender(<Chip tone=" ">Blank</Chip>);
|
|
expect(screen.getByText('Blank').getAttribute('style')).toBeNull();
|
|
});
|
|
});
|