Improve test coverage from 1.18% to 89.21%

- 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

__tests__/components/BackToTop.test.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react';
+import { BackToTop } from '@/src/components/BackToTop';
+
+// Mock window properties
+global.scrollTo = jest.fn();
+Object.defineProperty(window, 'pageYOffset', {
+  writable: true,
+  configurable: true,
+  value: 0,
+});
+
+describe('BackToTop', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.pageYOffset = 0;
+  });
+
+  it('does not render button when at top of page', () => {
+    const { container } = render(<BackToTop />);
+    const button = container.querySelector('button');
+    expect(button).not.toBeInTheDocument();
+  });
+
+  it('renders button when scrolled down', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Simulate scroll down
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('hides button when scrolled back up', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Scroll down first
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    expect(container.querySelector('button')).toBeInTheDocument();
+    
+    // Scroll back up
+    act(() => {
+      window.pageYOffset = 100;
+      fireEvent.scroll(window);
+    });
+    
+    expect(container.querySelector('button')).not.toBeInTheDocument();
+  });
+
+  it('scrolls to top when clicked', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    fireEvent.click(button!);
+    
+    expect(global.scrollTo).toHaveBeenCalledWith({
+      top: 0,
+      behavior: 'smooth'
+    });
+  });
+
+  it('has correct styling when visible', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    
+    expect(button).toHaveClass('fixed');
+    expect(button).toHaveClass('bottom-8');
+    expect(button).toHaveClass('right-8');
+    expect(button).toHaveClass('bg-blue-600');
+    expect(button).toHaveClass('text-white');
+    expect(button).toHaveClass('rounded-full');
+    expect(button).toHaveClass('shadow-lg');
+  });
+
+  it('has hover effect', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('hover:bg-blue-700');
+    expect(button).toHaveClass('hover:scale-110');
+  });
+
+  it('contains arrow icon', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const svg = container.querySelector('svg');
+    
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveClass('w-6');
+    expect(svg).toHaveClass('h-6');
+  });
+
+  it('has aria-label for accessibility', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    expect(button).toHaveAttribute('aria-label', 'Back to top');
+  });
+
+  it('cleans up scroll listener on unmount', () => {
+    const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+    const { unmount } = render(<BackToTop />);
+    
+    unmount();
+    
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+    removeEventListenerSpy.mockRestore();
+  });
+});

__tests__/components/ColorCell.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ColorCell } from '@/src/components/ColorCell';
+
+// Mock the bambuLabColors module
+jest.mock('@/src/data/bambuLabColors', () => ({
+  getFilamentColor: jest.fn((colorName) => {
+    const colors = {
+      'Black': { hex: '#000000' },
+      'Red': { hex: '#FF0000' },
+      'Blue': { hex: '#0000FF' },
+      'Rainbow': { hex: ['#FF0000', '#00FF00'], isGradient: true }
+    };
+    return colors[colorName] || { hex: '#CCCCCC' };
+  }),
+  getColorStyle: jest.fn((colorMapping) => {
+    if (colorMapping.isGradient && Array.isArray(colorMapping.hex)) {
+      return {
+        background: `linear-gradient(90deg, ${colorMapping.hex[0]} 0%, ${colorMapping.hex[1]} 100%)`
+      };
+    }
+    return {
+      backgroundColor: Array.isArray(colorMapping.hex) ? colorMapping.hex[0] : colorMapping.hex
+    };
+  })
+}));
+
+describe('ColorCell', () => {
+  it('renders color name', () => {
+    const { getByText } = render(<ColorCell colorName="Black" />);
+    expect(getByText('Black')).toBeInTheDocument();
+  });
+
+  it('renders color swatch with correct style', () => {
+    const { container } = render(<ColorCell colorName="Red" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveStyle({ backgroundColor: '#FF0000' });
+  });
+
+  it('renders with correct dimensions', () => {
+    const { container } = render(<ColorCell colorName="Blue" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveClass('w-6');
+    expect(colorDiv).toHaveClass('h-6');
+  });
+
+  it('has rounded corners and border', () => {
+    const { container } = render(<ColorCell colorName="Black" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveClass('rounded');
+    expect(colorDiv).toHaveClass('border');
+    expect(colorDiv).toHaveClass('border-gray-300');
+  });
+
+  it('renders gradient colors', () => {
+    const { container } = render(<ColorCell colorName="Rainbow" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveStyle({ 
+      background: 'linear-gradient(90deg, #FF0000 0%, #00FF00 100%)' 
+    });
+  });
+
+  it('has title attribute with hex value', () => {
+    const { container } = render(<ColorCell colorName="Black" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveAttribute('title', '#000000');
+  });
+
+  it('has title attribute with gradient hex values', () => {
+    const { container } = render(<ColorCell colorName="Rainbow" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveAttribute('title', '#FF0000 - #00FF00');
+  });
+
+  it('renders with flex layout', () => {
+    const { container } = render(<ColorCell colorName="Black" />);
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass('flex');
+    expect(wrapper).toHaveClass('items-center');
+    expect(wrapper).toHaveClass('gap-2');
+  });
+});

__tests__/components/MaterialBadge.test.tsx

@@ -0,0 +1,87 @@
+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');
+    });
+  });
+});