apphouse/dist/themes/defaults.tokens.test.ts

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

import { parsetheme } from './defaults.tokens';

describe('defaults.tokens', () => {
  test('parsetheme', () => {
    const styles = parsetheme('light');
    expect(Object.keys(styles)).toEqual([
      'button',
      'separator',
      'input',
      'background',
      'layout',
      'focus',
      'typography',
      'body',
      'icon',
      'utility'
    ]);

    expect(styles.button).toEqual(9);
    expect(styles.separator).toEqual(2);
    expect(styles.button).toEqual({});
    expect(styles.separator).toEqual({
      baseComponent: 'separator',
      id: 'separator.horizontal',
      previewWithTag: 'div',
      state: 'active',
      value: [
        {
          isSelector: false,
          property: 'border',
          reference: {
            key: 'border',
            type: 'token',
            value: '1px solid rgba(31, 31, 31, 0.1)'
          },
          value: '1px solid rgba(31, 31, 31, 0.1)'
        },
        {
          isSelector: false,
          property: 'marginTop',
          reference: { key: 'marginTop', type: 'token', value: 20 },
          value: 20
        },
        {
          isSelector: false,
          property: 'marginBottom',
          reference: { key: 'marginBottom', type: 'token', value: 20 },
          value: 20
        }
      ],
      variant: 'default'
    });
  });
});