bigbuffet-rw/app/soapbox/utils/__tests__/tailwind.test.ts
marcin mikołajczak 5fec879148 Fix mutes test, prefer TypeScript for tests
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
2022-06-12 16:30:48 +02:00

215 lines
4.8 KiB
TypeScript

import { Map as ImmutableMap } from 'immutable';
import { toTailwind, fromLegacyColors, expandPalette } from '../tailwind';
describe('toTailwind()', () => {
it('handles empty Soapbox config', () => {
const soapboxConfig = ImmutableMap();
const result = toTailwind(soapboxConfig);
const expected = ImmutableMap({ colors: ImmutableMap() });
expect(result).toEqual(expected);
});
it('converts brandColor into a Tailwind color palette', () => {
const soapboxConfig = ImmutableMap({ brandColor: '#0482d8' });
const expected = {
brandColor: '#0482d8',
colors: {
primary: {
50: '#f2f9fd',
100: '#e6f3fb',
200: '#c0e0f5',
300: '#4fa8e4',
400: '#369be0',
500: '#0482d8',
600: '#0475c2',
700: '#0362a2',
800: '#024e82',
900: '#02406a',
},
},
};
const result = toTailwind(soapboxConfig);
expect(result.toJS()).toMatchObject(expected);
});
it('prefers Tailwind colors object over legacy colors', () => {
const soapboxConfig = ImmutableMap({
brandColor: '#0482d8',
colors: ImmutableMap({
primary: ImmutableMap({
300: '#ff0000',
}),
}),
});
const expected = {
brandColor: '#0482d8',
colors: {
primary: {
50: '#f2f9fd',
100: '#e6f3fb',
200: '#c0e0f5',
300: '#ff0000', // <--
400: '#369be0',
500: '#0482d8',
600: '#0475c2',
700: '#0362a2',
800: '#024e82',
900: '#02406a',
},
},
};
const result = toTailwind(soapboxConfig);
expect(result.toJS()).toMatchObject(expected);
});
});
describe('fromLegacyColors()', () => {
it('converts only brandColor', () => {
const soapboxConfig = ImmutableMap({ brandColor: '#0482d8' });
const expected = {
primary: {
50: '#f2f9fd',
100: '#e6f3fb',
200: '#c0e0f5',
300: '#4fa8e4',
400: '#369be0',
500: '#0482d8',
600: '#0475c2',
700: '#0362a2',
800: '#024e82',
900: '#02406a',
},
// Accent color is generated from brandColor
accent: {
50: '#f3fbfd',
100: '#e7f7fa',
200: '#c3ecf4',
300: '#58cadf',
400: '#40c2da',
500: '#10b3d1',
600: '#0ea1bc',
700: '#0c869d',
800: '#0a6b7d',
900: '#085866',
},
};
const result = fromLegacyColors(soapboxConfig);
expect(result).toEqual(expected);
});
it('converts both legacy colors', () => {
const soapboxConfig = ImmutableMap({
brandColor: '#0482d8',
accentColor: '#2bd110',
});
const expected = {
primary: {
50: '#f2f9fd',
100: '#e6f3fb',
200: '#c0e0f5',
300: '#4fa8e4',
400: '#369be0',
500: '#0482d8',
600: '#0475c2',
700: '#0362a2',
800: '#024e82',
900: '#02406a',
},
accent: {
50: '#f4fdf3',
100: '#eafae7',
200: '#caf4c3',
300: '#6bdf58',
400: '#55da40',
500: '#2bd110',
600: '#27bc0e',
700: '#209d0c',
800: '#1a7d0a',
900: '#156608',
},
};
const result = fromLegacyColors(soapboxConfig);
expect(result).toEqual(expected);
});
});
describe('expandPalette()', () => {
it('expands one color', () => {
const palette = { primary: '#0482d8' };
const expected = {
primary: {
50: '#f2f9fd',
100: '#e6f3fb',
200: '#c0e0f5',
300: '#4fa8e4',
400: '#369be0',
500: '#0482d8',
600: '#0475c2',
700: '#0362a2',
800: '#024e82',
900: '#02406a',
},
};
const result = expandPalette(palette);
expect(result).toEqual(expected);
});
it('expands mixed palette', () => {
const palette = {
primary: {
50: '#f2f9fd',
100: '#e6f3fb',
200: '#c0e0f5',
300: '#4fa8e4',
400: '#369be0',
500: '#0482d8',
600: '#0475c2',
700: '#0362a2',
800: '#024e82',
900: '#02406a',
},
accent: '#2bd110',
};
const expected = {
primary: {
50: '#f2f9fd',
100: '#e6f3fb',
200: '#c0e0f5',
300: '#4fa8e4',
400: '#369be0',
500: '#0482d8',
600: '#0475c2',
700: '#0362a2',
800: '#024e82',
900: '#02406a',
},
accent: {
50: '#f4fdf3',
100: '#eafae7',
200: '#caf4c3',
300: '#6bdf58',
400: '#55da40',
500: '#2bd110',
600: '#27bc0e',
700: '#209d0c',
800: '#1a7d0a',
900: '#156608',
},
};
const result = expandPalette(palette);
expect(result).toEqual(expected);
});
});