apphouse/dist/styles/getBoxSizedStyles.test.ts

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

import { ApphouseThemeTokens } from '../styles/defaults/app.token.values';
import { ThemeTokens } from '../styles/defaults/themes.interface';
import { getBoxSizedStyles } from './getBoxSizedStyles';
const tokens: ThemeTokens = ApphouseThemeTokens;

describe('getBoxSizedStyles', () => {
  it('should return the expected xSmallStyles', () => {
    const expectedStyles = {
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      boxSizing: 'border-box',
      fontSize: '10px',
      paddingLeft: '4px',
      paddingRight: '4px',
      paddingTop: '4px',
      paddingBottom: '4px',
      marginBlockEnd: '0px',
      marginBlockStart: '0px',
      marginInlineEnd: '0px',
      marginInlineStart: '0px'
    };

    const result = getBoxSizedStyles(tokens, 'px');
    expect(result.xs).toEqual(expectedStyles);
  });

  it('should return the expected largeStyles', () => {
    const expectedStyles = {
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      boxSizing: 'border-box',
      fontSize: '18px',
      paddingLeft: '20px',
      paddingRight: '20px',
      paddingTop: '20px',
      paddingBottom: '20px',
      marginBlockEnd: '0px',
      marginBlockStart: '0px',
      marginInlineEnd: '0px',
      marginInlineStart: '0px'
    };

    const result = getBoxSizedStyles(tokens, 'px');
    expect(result.l).toEqual(expectedStyles);
  });

  // Add more tests for other sizes if needed
});