web-ui/tests/components/Chip.test.tsx

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();
    });

    it('ignores unresolved direct palettes and unknown shades', () => {
        const { rerender } = render(<Chip tone="indigo">Palette token</Chip>);
        expect(screen.getByText('Palette token').getAttribute('style')).toBeNull();

        rerender(<Chip tone="indigo-999">Unknown shade</Chip>);
        expect(screen.getByText('Unknown shade').getAttribute('style')).toBeNull();
    });
});