Simplify theme tests

app/src/utils/themeStyle.test.ts

@@ -13,42 +13,23 @@ const createMockTheme = (colorScheme: 'light' | 'dark') => ({
   radius: { sm: '4px' },
   spacing: { md: '16px' },
   colors: {
-    dark: [
-      '#fff',
-      '#f8f9fa',
-      '#e9ecef',
-      '#dee2e6',
-      '#ced4da',
-      '#adb5bd',
-      '#6c757d',
-      '#495057',
-      '#343a40',
-      '#212529',
-    ],
-    gray: [
-      '#f8f9fa',
-      '#e9ecef',
-      '#dee2e6',
-      '#ced4da',
-      '#adb5bd',
-      '#6c757d',
-      '#495057',
-      '#343a40',
-      '#212529',
-      '#000',
-    ],
-    blue: [
-      '#e7f5ff',
-      '#d0ebff',
-      '#a5d8ff',
-      '#74c0fc',
-      '#339af0',
-      '#228be6',
-      '#1971c2',
-      '#1864ab',
-      '#0b4fa8',
-      '#073e78',
-    ],
+    // Use different color values for light and dark themes
+    // so we can test that different themes produce different results
+    dark: Array(10)
+      .fill(0)
+      .map((_, i) =>
+        colorScheme === 'light' ? `#dark-light-${i}` : `#dark-dark-${i}`
+      ),
+    gray: Array(10)
+      .fill(0)
+      .map((_, i) =>
+        colorScheme === 'light' ? `#gray-light-${i}` : `#gray-dark-${i}`
+      ),
+    blue: Array(10)
+      .fill(0)
+      .map((_, i) =>
+        colorScheme === 'light' ? `#blue-light-${i}` : `#blue-dark-${i}`
+      ),
   },
   colorScheme,
 });
@@ -58,38 +39,41 @@ const mockDarkTheme = createMockTheme('dark') as unknown as MantineTheme;
 
 describe('themeStyles utilities', () => {
   describe('getHoverStyle', () => {
-    it('returns correct hover styles for light theme', () => {
-      const result = getHoverStyle(mockLightTheme);
+    it('returns hover styles with theme-appropriate values', () => {
+      const lightResult = getHoverStyle(mockLightTheme);
+      const darkResult = getHoverStyle(mockDarkTheme);
 
-      expect(result).toEqual({
-        borderRadius: '4px',
-        '&:hover': {
-          backgroundColor: '#f8f9fa', // gray[0] for light theme
-        },
-      });
-    });
+      // Test structure is correct
+      expect(lightResult).toHaveProperty('borderRadius');
+      expect(lightResult).toHaveProperty('&:hover.backgroundColor');
+      expect(darkResult).toHaveProperty('borderRadius');
+      expect(darkResult).toHaveProperty('&:hover.backgroundColor');
 
-    it('returns correct hover styles for dark theme', () => {
-      const result = getHoverStyle(mockDarkTheme);
+      // Both themes should use the small border radius
+      expect(lightResult.borderRadius).toBe(mockLightTheme.radius.sm);
+      expect(darkResult.borderRadius).toBe(mockDarkTheme.radius.sm);
 
-      expect(result).toEqual({
-        borderRadius: '4px',
-        '&:hover': {
-          backgroundColor: '#adb5bd', // dark[5] for dark theme
-        },
-      });
+      // Dark and light themes should have different hover colors
+      expect(lightResult['&:hover'].backgroundColor).not.toBe(
+        darkResult['&:hover'].backgroundColor
+      );
     });
   });
 
   describe('getConditionalColor', () => {
-    it('returns blue color when selected in light theme', () => {
-      const result = getConditionalColor(mockLightTheme, true);
-      expect(result).toBe('#1864ab'); // blue[7] for light theme
-    });
+    it('returns theme-specific colors when selected', () => {
+      // Test behavior, not specific hex values
+      const lightResult = getConditionalColor(mockLightTheme, true);
+      const darkResult = getConditionalColor(mockDarkTheme, true);
 
-    it('returns blue color when selected in dark theme', () => {
-      const result = getConditionalColor(mockDarkTheme, true);
-      expect(result).toBe('#a5d8ff'); // blue[2] for dark theme
+      // Different colors for different themes
+      expect(lightResult).not.toBe(darkResult);
+      // Not using the fallback value
+      expect(lightResult).not.toBe('dimmed');
+      expect(darkResult).not.toBe('dimmed');
+      // Should be a color string
+      expect(typeof lightResult).toBe('string');
+      expect(typeof darkResult).toBe('string');
     });
 
     it('returns dimmed when not selected', () => {
@@ -104,38 +88,43 @@ describe('themeStyles utilities', () => {
   });
 
   describe('getAccordionStyles', () => {
-    it('returns correct accordion styles for light theme', () => {
-      const result = getAccordionStyles(mockLightTheme);
+    it('returns theme-appropriate accordion styles', () => {
+      const lightResult = getAccordionStyles(mockLightTheme);
+      const darkResult = getAccordionStyles(mockDarkTheme);
 
-      expect(result.control.paddingTop).toBe('16px');
-      expect(result.control.paddingBottom).toBe('16px');
-      expect(result.item.borderBottom).toBe('1px solid #ced4da'); // gray[3]
-      expect(result.item['&[data-active]'].backgroundColor).toBe('#f8f9fa'); // gray[0]
-    });
+      // Test structure is correct
+      expect(lightResult.control).toHaveProperty('paddingTop');
+      expect(lightResult.control).toHaveProperty('paddingBottom');
+      expect(lightResult.item).toHaveProperty('borderBottom');
+      expect(lightResult.item['&[data-active]']).toHaveProperty(
+        'backgroundColor'
+      );
 
-    it('returns correct accordion styles for dark theme', () => {
-      const result = getAccordionStyles(mockDarkTheme);
+      // Padding should use theme spacing
+      expect(lightResult.control.paddingTop).toBe(mockLightTheme.spacing.md);
+      expect(lightResult.control.paddingBottom).toBe(mockLightTheme.spacing.md);
 
-      expect(result.control.paddingTop).toBe('16px');
-      expect(result.control.paddingBottom).toBe('16px');
-      expect(result.item.borderBottom).toBe('1px solid #ced4da'); // dark[4]
-      expect(result.item['&[data-active]'].backgroundColor).toBe('#495057'); // dark[7]
+      // Active state should have different background colors in different themes
+      expect(lightResult.item['&[data-active]'].backgroundColor).not.toBe(
+        darkResult.item['&[data-active]'].backgroundColor
+      );
     });
   });
 
   describe('getWorkspacePaperStyle', () => {
-    it('returns selected styles for light theme when selected', () => {
-      const result = getWorkspacePaperStyle(mockLightTheme, true);
+    it('returns theme-appropriate styles when selected', () => {
+      const lightResult = getWorkspacePaperStyle(mockLightTheme, true);
+      const darkResult = getWorkspacePaperStyle(mockDarkTheme, true);
 
-      expect(result.backgroundColor).toBe('#d0ebff'); // blue[1]
-      expect(result.borderColor).toBe('#228be6'); // blue[5]
-    });
+      // Test structure is correct
+      expect(lightResult).toHaveProperty('backgroundColor');
+      expect(lightResult).toHaveProperty('borderColor');
+      expect(darkResult).toHaveProperty('backgroundColor');
+      expect(darkResult).toHaveProperty('borderColor');
 
-    it('returns selected styles for dark theme when selected', () => {
-      const result = getWorkspacePaperStyle(mockDarkTheme, true);
-
-      expect(result.backgroundColor).toBe('#0b4fa8'); // blue[8]
-      expect(result.borderColor).toBe('#1864ab'); // blue[7]
+      // Different themes should use different colors
+      expect(lightResult.backgroundColor).not.toBe(darkResult.backgroundColor);
+      expect(lightResult.borderColor).not.toBe(darkResult.borderColor);
     });
 
     it('returns undefined styles when not selected', () => {
@@ -147,14 +136,16 @@ describe('themeStyles utilities', () => {
   });
 
   describe('getTextColor', () => {
-    it('returns blue text color when selected in light theme', () => {
-      const result = getTextColor(mockLightTheme, true);
-      expect(result).toBe('#073e78'); // blue[9]
-    });
+    it('returns theme-dependent color when selected', () => {
+      const lightResult = getTextColor(mockLightTheme, true);
+      const darkResult = getTextColor(mockDarkTheme, true);
 
-    it('returns blue text color when selected in dark theme', () => {
-      const result = getTextColor(mockDarkTheme, true);
-      expect(result).toBe('#e7f5ff'); // blue[0]
+      // Should return a string for selected state
+      expect(typeof lightResult).toBe('string');
+      expect(typeof darkResult).toBe('string');
+
+      // Different themes should have different text colors
+      expect(lightResult).not.toBe(darkResult);
     });
 
     it('returns null when not selected', () => {