189 lines
4.1 KiB
JavaScript
189 lines
4.1 KiB
JavaScript
import { Map as ImmutableMap } from 'immutable';
|
|
|
|
import { toTailwind, fromLegacyColors, expandPalette } from '../tailwind';
|
|
|
|
describe('toTailwind()', () => {
|
|
it('converts brandColor into a Tailwind color palette', () => {
|
|
const soapboxConfig = ImmutableMap({ brandColor: '#0482d8' });
|
|
|
|
const expected = {
|
|
primary: {
|
|
50: '#f2f9fd',
|
|
100: '#e6f3fb',
|
|
200: '#c0e0f5',
|
|
300: '#9bcdef',
|
|
400: '#4fa8e4',
|
|
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 = {
|
|
primary: {
|
|
50: '#f2f9fd',
|
|
100: '#e6f3fb',
|
|
200: '#c0e0f5',
|
|
300: '#ff0000', // <--
|
|
400: '#4fa8e4',
|
|
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: '#9bcdef',
|
|
400: '#4fa8e4',
|
|
500: '#0482d8',
|
|
600: '#0475c2',
|
|
700: '#0362a2',
|
|
800: '#024e82',
|
|
900: '#02406a',
|
|
},
|
|
};
|
|
|
|
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: '#9bcdef',
|
|
400: '#4fa8e4',
|
|
500: '#0482d8',
|
|
600: '#0475c2',
|
|
700: '#0362a2',
|
|
800: '#024e82',
|
|
900: '#02406a',
|
|
},
|
|
accent: {
|
|
50: '#f4fdf3',
|
|
100: '#eafae7',
|
|
200: '#caf4c3',
|
|
300: '#aaed9f',
|
|
400: '#6bdf58',
|
|
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: '#9bcdef',
|
|
400: '#4fa8e4',
|
|
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: '#9bcdef',
|
|
400: '#4fa8e4',
|
|
500: '#0482d8',
|
|
600: '#0475c2',
|
|
700: '#0362a2',
|
|
800: '#024e82',
|
|
900: '#02406a',
|
|
},
|
|
accent: '#2bd110',
|
|
};
|
|
|
|
const expected = {
|
|
primary: {
|
|
50: '#f2f9fd',
|
|
100: '#e6f3fb',
|
|
200: '#c0e0f5',
|
|
300: '#9bcdef',
|
|
400: '#4fa8e4',
|
|
500: '#0482d8',
|
|
600: '#0475c2',
|
|
700: '#0362a2',
|
|
800: '#024e82',
|
|
900: '#02406a',
|
|
},
|
|
accent: {
|
|
50: '#f4fdf3',
|
|
100: '#eafae7',
|
|
200: '#caf4c3',
|
|
300: '#aaed9f',
|
|
400: '#6bdf58',
|
|
500: '#2bd110',
|
|
600: '#27bc0e',
|
|
700: '#209d0c',
|
|
800: '#1a7d0a',
|
|
900: '#156608',
|
|
},
|
|
};
|
|
|
|
const result = expandPalette(palette);
|
|
expect(result).toEqual(expected);
|
|
});
|
|
});
|