import { isValidColorExpression, textColorForBackground, hexToRgb, validateHexColor, darkModeEnabled, } from '~/lib/utils/color_utils'; describe('Color utils', () => { describe('Converting hex code to rgb', () => { it('convert hex code to rgb', () => { expect(hexToRgb('#000000')).toEqual([0, 0, 0]); expect(hexToRgb('#ffffff')).toEqual([255, 255, 255]); }); it('convert short hex code to rgb', () => { expect(hexToRgb('#000')).toEqual([0, 0, 0]); expect(hexToRgb('#fff')).toEqual([255, 255, 255]); }); it('handle conversion regardless of the characters case', () => { expect(hexToRgb('#f0F')).toEqual([255, 0, 255]); }); }); describe('Getting text color for given background', () => { // following tests are being ported from `text_color_for_bg` section in labels_helper_spec.rb it('uses light text on dark backgrounds', () => { expect(textColorForBackground('#222E2E')).toEqual('#FFFFFF'); }); it('uses dark text on light backgrounds', () => { expect(textColorForBackground('#EEEEEE')).toEqual('#333333'); }); it('supports RGB triplets', () => { expect(textColorForBackground('#FFF')).toEqual('#333333'); expect(textColorForBackground('#000')).toEqual('#FFFFFF'); }); }); describe('Validate hex color', () => { it.each` color | output ${undefined} | ${null} ${null} | ${null} ${''} | ${null} ${'ABC123'} | ${false} ${'#ZZZ'} | ${false} ${'#FF0'} | ${true} ${'#FF0000'} | ${true} `('returns $output when $color is given', ({ color, output }) => { expect(validateHexColor(color)).toEqual(output); }); }); describe('darkModeEnabled', () => { it.each` page | bodyClass | ideTheme | expected ${'ide:index'} | ${'gl-dark'} | ${'monokai-light'} | ${false} ${'ide:index'} | ${'ui-light'} | ${'monokai'} | ${true} ${'groups:issues:index'} | ${'ui-light'} | ${'monokai'} | ${false} ${'groups:issues:index'} | ${'gl-dark'} | ${'monokai-light'} | ${true} `( 'is $expected on $page with $bodyClass body class and $ideTheme IDE theme', async ({ page, bodyClass, ideTheme, expected }) => { document.body.outerHTML = ``; window.gon = { user_color_scheme: ideTheme, }; expect(darkModeEnabled()).toBe(expected); }, ); }); describe('isValidColorExpression', () => { it.each` colorExpression | valid | desc ${'#F00'} | ${true} | ${'valid'} ${'rgba(0,0,0,0)'} | ${true} | ${'valid'} ${'hsl(540,70%,50%)'} | ${true} | ${'valid'} ${'red'} | ${true} | ${'valid'} ${'F00'} | ${false} | ${'invalid'} ${'F00'} | ${false} | ${'invalid'} ${'gba(0,0,0,0)'} | ${false} | ${'invalid'} ${'hls(540,70%,50%)'} | ${false} | ${'invalid'} ${'hello'} | ${false} | ${'invalid'} `('color expression $colorExpression is $desc', ({ colorExpression, valid }) => { expect(isValidColorExpression(colorExpression)).toBe(valid); }); }); });