framit/app/components/navbar/ThemeSwitcher.test.ts

import { describe, it, expect } from 'vitest';

describe('ThemeSwitcher', () => {
  describe('icon mapping', () => {
    const icons: Record<string, string> = {
      light: 'material-symbols:light-mode',
      dark: 'material-symbols:dark-mode',
      system: 'material-symbols:computer-outline',
    };

    it('should have correct icon for light theme', () => {
      expect(icons.light).toBe('material-symbols:light-mode');
    });

    it('should have correct icon for dark theme', () => {
      expect(icons.dark).toBe('material-symbols:dark-mode');
    });

    it('should have correct icon for system theme', () => {
      expect(icons.system).toBe('material-symbols:computer-outline');
    });
  });

  describe('computed currentColor', () => {
    it('should return preference when set', () => {
      const mockColorMode = reactive({ preference: 'dark' as 'light' | 'dark' | 'system' });
      const currentColor = computed(() => mockColorMode.preference ?? 'system');

      expect(currentColor.value).toBe('dark');
    });

    it('should return system as default', () => {
      const mockColorMode = reactive({ preference: 'system' as 'light' | 'dark' | 'system' });
      const currentColor = computed(() => mockColorMode.preference ?? 'system');

      expect(currentColor.value).toBe('system');
    });
  });

  describe('computed themes', () => {
    it('should generate theme options with correct structure', () => {
      const icons: Record<string, string> = {
        light: 'material-symbols:light-mode',
        dark: 'material-symbols:dark-mode',
        system: 'material-symbols:computer-outline',
      };
      const mockColorMode = reactive({ preference: 'light' as 'light' | 'dark' | 'system' });
      const currentColor = computed(() => mockColorMode.preference ?? 'system');
      const mockT = (key: string) => key;

      const themes = computed(() =>
        (['light', 'dark', 'system'] as const).map((theme) => ({
          code: theme,
          label: mockT(`theme.${theme}`),
          icon: icons[theme],
          type: 'checkbox' as const,
          checked: currentColor.value === theme,
        })),
      );

      expect(themes.value).toHaveLength(3);
      expect(themes.value[0]!.code).toBe('light');
      expect(themes.value[0]!.checked).toBe(true);
      expect(themes.value[1]!.code).toBe('dark');
      expect(themes.value[1]!.checked).toBe(false);
      expect(themes.value[2]!.code).toBe('system');
      expect(themes.value[2]!.checked).toBe(false);
    });
  });

  describe('switchColor', () => {
    it('should update colorMode.preference when called', () => {
      const mockColorMode = reactive({ preference: 'system' as 'light' | 'dark' | 'system' });
      const switchColor = (theme: 'light' | 'dark' | 'system') => {
        mockColorMode.preference = theme;
      };

      switchColor('dark');

      expect(mockColorMode.preference).toBe('dark');
    });
  });
});