apphouse/dist/styles/mergeStyles.test.ts

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

import { CSSProperties } from 'glamor';
import { mergeStyles } from './mergeStyles';

describe('mergeStyles', () => {
  test('should keep overwrite initial styles', () => {
    const styles = mergeStyles({ color: 'red' }, { color: 'green' });
    expect(styles).toEqual({ color: 'green' });
  });
  test('should keep original when there are no overwrite styles for that key', () => {
    const styles = mergeStyles(
      { color: 'red', backgroundColor: 'blue' },
      { color: 'green' }
    );
    expect(styles).toEqual({ color: 'green', backgroundColor: 'blue' });
  });

  test('should merge default styles with overwrites', () => {
    const defaultStyles: CSSProperties = {
      color: 'red',
      fontSize: '14px'
    };
    const overwrites: CSSProperties = {
      fontSize: '16px',
      fontWeight: 'bold'
    };
    const mergedStyles = mergeStyles(defaultStyles, overwrites);

    expect(mergedStyles).toEqual({
      color: 'red',
      fontSize: '16px',
      fontWeight: 'bold'
    });
  });

  test('should merge default styles with overwrites and gutters', () => {
    const defaultStyles = {
      padding: '10px',
      margin: '0px'
    };
    const overwrites = {
      padding: '5px'
    };
    const gutters = '10px';
    const mergedStyles = mergeStyles(defaultStyles, overwrites, gutters);

    expect(mergedStyles).toEqual({
      padding: '10px',
      margin: '10px',
      marginLeft: '10px',
      marginRight: '10px',
      marginTop: '10px',
      marginBottom: '10px',
      paddingTop: '10px',
      paddingBottom: '10px',
      paddingLeft: '10px',
      paddingRight: '10px'
    });
  });

  test('should return default styles if no overwrites provided', () => {
    const defaultStyles = {
      color: 'red',
      fontSize: '14px'
    };
    const mergedStyles = mergeStyles(defaultStyles);

    expect(mergedStyles).toEqual(defaultStyles);
  });
});