redux-devtools/packages/react-base16-styling/test/index.test.ts
Nathan Bierema 698fdec21d
chore(*): upgrade to TypeScript 4.0 (#736)
* chore(*): upgrade to TypeScript 4.0

* Fix

* Fix

* trigger

* build

* More fixes

* Fix
2021-06-16 12:20:20 -04:00

207 lines
4.8 KiB
TypeScript

import { createStyling, invertBase16Theme, getBase16Theme } from '../src';
import { apathy, Base16Theme } from 'base16';
import { Styling, StylingConfig } from '../src/types';
const base16Theme = {
scheme: 'myscheme',
author: 'me',
base00: '#000000',
base01: '#222222',
base02: '#444444',
base03: '#666666',
base04: '#999999',
base05: '#bbbbbb',
base06: '#dddddd',
base07: '#ffffff',
base08: '#ff0000',
base09: '#ff9900',
base0A: '#ffff00',
base0B: '#999900',
base0C: '#009999',
base0D: '#009900',
base0E: '#9999ff',
base0F: '#ff0099',
};
const invertedBase16Theme = {
scheme: 'myscheme:inverted',
author: 'me',
base00: '#FFFFFF',
base01: '#FFFFFF',
base02: '#A2A1A2',
base03: '#807F80',
base04: '#807F80',
base05: '#5E5D5E',
base06: '#3C3B3C',
base07: '#1A191A',
base08: '#FF4D4D',
base09: '#CB6500',
base0A: '#545400',
base0B: '#A2A20A',
base0C: '#0FA8A8',
base0D: '#32CB32',
base0E: '#6868CE',
base0F: '#FF2AC3',
};
const apathyInverted = {
author: 'jannik siebert (https://github.com/janniks)',
base00: '#EFFFFF',
base01: '#E3FFFF',
base02: '#DAFFFF',
base03: '#67A49A',
base04: '#66A399',
base05: '#51857C',
base06: '#3C635D',
base07: '#2A3F3C',
base08: '#2F8779',
base09: '#4E89A6',
base0A: '#8391DB',
base0B: '#B167BF',
base0C: '#C8707E',
base0D: '#A7994F',
base0E: '#469038',
base0F: '#3A9257',
scheme: 'apathy:inverted',
};
const getStylingFromBase16 = (base16: Base16Theme): StylingConfig => ({
testClass: 'testClass',
testStyle: {
color: base16.base00,
},
testFunc: ({ style }, arg: string) => ({
className: `testClass--${arg}`,
style: {
...style,
width: 0,
color: base16.base00,
},
}),
baseStyle: {
color: 'red',
},
additionalStyle: {
border: 0,
},
testFuncNoStyle: (_, arg: string) => ({
className: `testClass--${arg}`,
}),
});
test('invertTheme', () => {
expect(invertBase16Theme(base16Theme)).toEqual(invertedBase16Theme);
});
test('getBase16Theme', () => {
expect(getBase16Theme('apathy')).toEqual(apathy);
expect(getBase16Theme({ extend: 'apathy' })).toEqual(apathy);
expect(getBase16Theme('apathy:inverted')).toEqual(apathyInverted);
expect(getBase16Theme({})).toBeUndefined();
});
test('createStyling (default)', () => {
const styling = createStyling(getStylingFromBase16, {
defaultBase16: apathy,
});
const defaultStyling = styling(undefined);
expect(defaultStyling('testClass')).toEqual({ className: 'testClass' });
expect(defaultStyling('testStyle')).toEqual({
style: { color: apathy.base00 },
});
expect(defaultStyling('testFunc', 'mod')).toEqual({
className: 'testClass--mod',
style: {
width: 0,
color: apathy.base00,
},
});
});
test('createStyling (custom)', () => {
const styling = createStyling(getStylingFromBase16, {
defaultBase16: apathy,
});
let customStyling = styling({
testClass: 'customClass',
testStyle: { height: 0 },
testFunc: (styling: Styling, arg: string) => ({
className: `${styling.className!} customClass--${arg}`,
style: {
...styling.style,
border: 0,
},
}),
testFuncNoStyle: (styling: Styling, arg: string) => ({
className: `${styling.className!} customClass--${arg}`,
style: {
...styling.style,
border: 0,
},
}),
});
expect(customStyling('testClass')).toEqual({
className: 'testClass customClass',
});
expect(customStyling('testStyle')).toEqual({
style: { color: apathy.base00, height: 0 },
});
expect(customStyling('testFunc', 'mod')).toEqual({
className: 'testClass--mod customClass--mod',
style: {
width: 0,
color: apathy.base00,
border: 0,
},
});
expect(customStyling('testFuncNoStyle', 'mod')).toEqual({
className: 'testClass--mod customClass--mod',
style: {
border: 0,
},
});
customStyling = styling({
testClass: () => ({
className: 'customClass',
}),
testStyle: () => ({
style: {
border: 0,
},
}),
});
expect(customStyling('testClass')).toEqual({ className: 'customClass' });
expect(customStyling('testStyle')).toEqual({ style: { border: 0 } });
});
test('createStyling (multiple)', () => {
const styling = createStyling(getStylingFromBase16, {
defaultBase16: apathy,
});
let customStyling = styling({
baseStyle: ({ style }) => ({ style: { ...style, color: 'blue' } }),
});
expect(customStyling(['baseStyle', 'additionalStyle'])).toEqual({
style: {
color: 'blue',
border: 0,
},
});
customStyling = styling({
additionalStyle: ({ style }) => ({ style: { ...style, border: 1 } }),
});
expect(customStyling(['baseStyle', 'additionalStyle'])).toEqual({
style: {
color: 'red',
border: 1,
},
});
});