1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
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 = `<body class="${bodyClass}" data-page="${page}"></body>`;
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);
});
});
});
|
