apphouse/dist/themes/utils/Converter.test.ts

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

import { CssPropertyStyle } from '../style.interface';
import Converter from './Converter';

describe('Converter', () => {
  describe('cssPropertyStyleToCssProperty', () => {
    test('should convert one CssPropertyStyles CssProperties', () => {
      const value = Converter.cssPropertyStyleToCssProperty({
        property: 'backgroundColor',
        value: '#FFF',
        reference: null,
        isSelector: false
      });
      expect(value).toEqual({ backgroundColor: '#FFF' });
    });
    test('should return color reference value', () => {
      const colorCssPropertyStyle: CssPropertyStyle = {
        property: 'backgroundColor',
        value: 'theme.primary',
        reference: {
          type: 'color',
          value: {
            hex: '#FFF',
            rgb: {
              r: 255,
              g: 255,
              b: 255,
              a: 1
            }
          },
          key: 'theme.primary'
        },
        isSelector: false
      };
      const value = Converter.cssPropertyStyleToCssProperty(
        colorCssPropertyStyle,
        true
      );
      expect(value).toEqual({ backgroundColor: 'rgba(255, 255, 255, 1)' });
    });
    test('should return token reference value', () => {
      const colorCssPropertyStyle: CssPropertyStyle = {
        property: 'padding',
        value: 'spacings.xs',
        reference: {
          type: 'token',
          value: 20,
          key: 'spacings.xs'
        },
        isSelector: false
      };
      const value = Converter.cssPropertyStyleToCssProperty(
        colorCssPropertyStyle,
        true
      );
      expect(value).toEqual({ padding: 20 });
    });
  });

  describe('cssPropertyStyleListToCssProperties', () => {
    test('should convert the array of CssPropertyStyles to CssProperties', () => {
      const value = Converter.toCssObjectFromCssPropertyStyleList([
        {
          property: 'backgroundColor',
          value: '#000',
          reference: null,
          isSelector: false
        },
        {
          property: 'color',
          value: '#FFF',
          reference: null,
          isSelector: false
        }
      ]);
      expect(value).toEqual({ backgroundColor: '#000', color: '#FFF' });
    });
  });
});