Mathis/lemma
1
0
Fork 0
mirror of https://github.com/lordmathis/lemma.git synced 2025-11-06 16:04:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify theme tests

Browse Source
This commit is contained in:
Matúš Námešný
2025-06-04 17:03:24 +02:00
parent 3f2aaa34e5
commit f37c024d65
1 changed files with 81 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
app/src/utils/themeStyle.test.ts
View File

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