bigbuffet-rw/app/soapbox/utils/__tests__/tailwind.test.ts

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);
  });
});