04f38e4779
* Parse color_mode cookie in browser * Update useTheme.ts * Update use-theme.js * Update use-theme.js * Add support for dark_high_contrast Per https://primer.style/css/support/theming I also checked all the color mode options, this is the only additional working with Primer 20 so far * Remove gray bg * Remove type * Use defaults instead of types for fn args * Thicker types
40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
import { describe, expect, test } from '@jest/globals'
|
|
import {
|
|
getComponentTheme,
|
|
getCssTheme,
|
|
defaultCSSTheme,
|
|
defaultComponentTheme,
|
|
} from '../../components/hooks/useTheme.ts'
|
|
|
|
describe('getTheme basics', () => {
|
|
test('always return an object with certain keys', () => {
|
|
const cookieValue = JSON.stringify({})
|
|
expect(getCssTheme(cookieValue)).toEqual(defaultCSSTheme)
|
|
expect(getComponentTheme(cookieValue)).toEqual(defaultComponentTheme)
|
|
})
|
|
|
|
test('ignore "junk" cookie values', () => {
|
|
const cookieValue = '[This is not valid JSON}'
|
|
expect(getCssTheme(cookieValue)).toEqual(defaultCSSTheme)
|
|
expect(getComponentTheme(cookieValue)).toEqual(defaultComponentTheme)
|
|
})
|
|
|
|
test('respect the color_mode cookie value', () => {
|
|
const cookieValue = JSON.stringify({
|
|
color_mode: 'dark',
|
|
light_theme: { name: 'light_colorblind', color_mode: 'light' },
|
|
dark_theme: { name: 'dark_tritanopia', color_mode: 'dark' },
|
|
})
|
|
|
|
const cssTheme = getCssTheme(cookieValue)
|
|
expect(cssTheme.colorMode).toBe('dark')
|
|
expect(cssTheme.darkTheme).toBe(defaultCSSTheme.darkTheme)
|
|
expect(cssTheme.lightTheme).toBe(defaultCSSTheme.lightTheme)
|
|
|
|
const componentTheme = getComponentTheme(cookieValue)
|
|
expect(componentTheme.colorMode).toBe('night')
|
|
expect(componentTheme.nightScheme).toBe(defaultComponentTheme.nightScheme)
|
|
expect(componentTheme.dayScheme).toBe(defaultComponentTheme.dayScheme)
|
|
})
|
|
})
|