apphouse/dist/themes/utils/theme.conversion.utils.test.ts

Component library for React that uses observable state management and theme-able components.

import { ThemeFull } from '../../styles/defaults/themes.interface';
import { Color } from '../Color';
import { Palette } from '../Palette';
import { Style } from '../Style';
import { Theme } from '../Theme';
import { Token } from '../Token';
import { ThemeModeType } from '../palette.interface';
import {
  objStyleToStyle,
  objThemeToTheme,
  objTokenToToken,
  PaletteUtils
} from './theme.conversion.utils';

describe('theme converters', () => {
  describe('objPaletteToPalette', () => {
    test('convert palette object to be instance Palette', () => {
      const _palette = {
        id: 'light',
        title: 'Palette test',
        description: 'Palette test description',
        mode: 'light' as ThemeModeType,
        colors: []
      };
      const palette = PaletteUtils.objPaletteToPalette(_palette);
      expect(palette).toBeInstanceOf(Palette);
    });
    test('convert color obj to be instance of Color', () => {
      const _palette = {
        id: 'light.id',
        title: 'Palette test',
        description: 'Palette test description',
        mode: 'light' as ThemeModeType,
        colors: [
          {
            title: 'black',
            id: 'black.id',
            color: {
              hex: '#000000',
              rgb: {
                r: 0,
                g: 0,
                b: 0,
                a: 1
              }
            }
          },
          {
            title: 'white',
            id: 'white.id',
            color: {
              hex: '#FFFFFF',
              rgb: {
                r: 255,
                g: 255,
                b: 255,
                a: 1
              }
            }
          }
        ]
      };

      const palette = PaletteUtils.objPaletteToPalette(_palette);
      expect(palette.colors['black.id']).toBeInstanceOf(Color);
      expect(palette.colors['white.id']).toBeInstanceOf(Color);
      expect(palette.colors['black.id'].id).toEqual(_palette.colors[0].id);
      expect(palette.colors['black.id'].title).toEqual(
        _palette.colors[0].title
      );
      expect(palette.colors['black.id'].color).toEqual(
        _palette.colors[0].color
      );

      expect(palette.colors['white.id'].id).toEqual(_palette.colors[1].id);
      expect(palette.colors['white.id'].title).toEqual(
        _palette.colors[1].title
      );
      expect(palette.colors['white.id'].color).toEqual(
        _palette.colors[1].color
      );
    });
  });

  describe('objTokenToToken', () => {
    test('convert token object to be instance Token', () => {
      const _token = {
        key: 'l',
        value: '20px',
        type: 'spacings'
      };
      const token = objTokenToToken(_token);
      expect(token).toBeInstanceOf(Token);
    });
  });

  describe('objStyleToStyle', () => {
    test('convert style object to be instance Style', () => {
      const _style = {
        id: 'button.primary',
        variant: 'primary',
        baseComponent: 'button',
        value: [
          {
            property: 'backgroundColor',
            value: '#000000',
            isSelector: false,
            reference: null
          },
          {
            property: 'color',
            value: '#FFFFFF',
            isSelector: false,
            reference: null
          }
        ],
        state: 'active',
        previewWithTag: 'button'
      };
      const style = objStyleToStyle(_style);
      expect(style).toBeInstanceOf(Style);
    });
  });

  describe('objThemeToTheme', () => {
    test('should convert theme object to instance Theme', () => {
      const _style = {
        id: 'button.primary',
        variant: 'primary',
        baseComponent: 'button',
        value: [
          {
            property: 'backgroundColor',
            value: '#000000',
            isSelector: false,
            reference: null
          },
          {
            property: 'color',
            value: '#FFFFFF',
            isSelector: false,
            reference: null
          }
        ],
        state: 'active',
        previewWithTag: 'button'
      };
      const _theme: ThemeFull = {
        id: 'light',
        title: 'Theme test',
        colors: [],
        tokens: [],
        styles: [_style]
      };
      const theme = objThemeToTheme(_theme);
      expect(theme).toBeInstanceOf(Theme);
      expect(theme.styles).toHaveProperty('button');
      expect(theme.styles.button).toBeInstanceOf(Array);
    });
  });
});