9f01158241
- Add comprehensive test suite for api.ts service layer - Create component tests for BackToTop, ColorCell, MaterialBadge - Add tests for data modules: bambuLabColors and bambuLabColorsComplete - Include specialized tests for UI features, CRUD operations, and data consistency - Achieve 100% coverage for core components and data utilities - All 91 tests passing with robust mocking strategies
87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { render } from '@testing-library/react';
|
|
import { MaterialBadge } from '@/src/components/MaterialBadge';
|
|
|
|
describe('MaterialBadge', () => {
|
|
describe('Material type badges', () => {
|
|
it('renders PLA badge with correct style', () => {
|
|
const { getByText } = render(<MaterialBadge base="PLA" />);
|
|
const badge = getByText('PLA');
|
|
expect(badge).toHaveClass('bg-green-100');
|
|
expect(badge).toHaveClass('text-green-800');
|
|
});
|
|
|
|
it('renders PETG badge with correct style', () => {
|
|
const { getByText } = render(<MaterialBadge base="PETG" />);
|
|
const badge = getByText('PETG');
|
|
expect(badge).toHaveClass('bg-blue-100');
|
|
expect(badge).toHaveClass('text-blue-800');
|
|
});
|
|
|
|
it('renders ABS badge with correct style', () => {
|
|
const { getByText } = render(<MaterialBadge base="ABS" />);
|
|
const badge = getByText('ABS');
|
|
expect(badge).toHaveClass('bg-red-100');
|
|
expect(badge).toHaveClass('text-red-800');
|
|
});
|
|
|
|
it('renders TPU badge with correct style', () => {
|
|
const { getByText } = render(<MaterialBadge base="TPU" />);
|
|
const badge = getByText('TPU');
|
|
expect(badge).toHaveClass('bg-purple-100');
|
|
expect(badge).toHaveClass('text-purple-800');
|
|
});
|
|
});
|
|
|
|
describe('Unknown material type', () => {
|
|
it('renders unknown material with default style', () => {
|
|
const { getByText } = render(<MaterialBadge base="UNKNOWN" />);
|
|
const badge = getByText('UNKNOWN');
|
|
expect(badge).toHaveClass('bg-gray-100');
|
|
expect(badge).toHaveClass('text-gray-800');
|
|
});
|
|
});
|
|
|
|
describe('With modifier', () => {
|
|
it('renders base and modifier', () => {
|
|
const { getByText } = render(<MaterialBadge base="PLA" modifier="Silk" />);
|
|
expect(getByText('PLA')).toBeInTheDocument();
|
|
expect(getByText('Silk')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders modifier with correct style', () => {
|
|
const { getByText } = render(<MaterialBadge base="PLA" modifier="Matte" />);
|
|
const modifier = getByText('Matte');
|
|
expect(modifier).toHaveClass('bg-gray-100');
|
|
expect(modifier).toHaveClass('text-gray-800');
|
|
});
|
|
});
|
|
|
|
describe('Common styles', () => {
|
|
it('has correct padding and shape', () => {
|
|
const { getByText } = render(<MaterialBadge base="PLA" />);
|
|
const badge = getByText('PLA');
|
|
expect(badge).toHaveClass('px-2.5');
|
|
expect(badge).toHaveClass('py-0.5');
|
|
expect(badge).toHaveClass('rounded-full');
|
|
});
|
|
|
|
it('has correct text size', () => {
|
|
const { getByText } = render(<MaterialBadge base="PLA" />);
|
|
const badge = getByText('PLA');
|
|
expect(badge).toHaveClass('text-xs');
|
|
});
|
|
|
|
it('has correct font weight', () => {
|
|
const { getByText } = render(<MaterialBadge base="PLA" />);
|
|
const badge = getByText('PLA');
|
|
expect(badge).toHaveClass('font-medium');
|
|
});
|
|
|
|
it('accepts custom className', () => {
|
|
const { container } = render(<MaterialBadge base="PLA" className="custom-class" />);
|
|
const wrapper = container.firstChild;
|
|
expect(wrapper).toHaveClass('custom-class');
|
|
});
|
|
});
|
|
}); |