styles-merge/test.js

A JavaScript utility for merging style objects together

import test from 'ava'

import stylesmerge from './index'

const style1 = {
  justifyContent: 'center',
  alignItems: 'center'
}

const style2 = {
  fontFamily: 'SourceCodePro',
  fontSize: 64
}

const style3 = {
  flex: 1,
  flexDirection: 'row'
}

test('ifThen - only works with boolean predicates', t => {
  const expected = {
    ...style1
  }

  const actual = stylesmerge()
    .ifThen(null, style3)
    .ifThen(true, style1)
    .eval()

  t.deepEqual(expected, actual)
})

test('ifThen - only truthy args', t => {
  const expectedStyles = {
    ...style1,
    ...style2
  }

  const actualStyles =
    stylesmerge()
      .ifThen(true, style1)
      .ifThen(true, style2)
      .eval()

  t.deepEqual(expectedStyles, actualStyles)
})

test('ifThen - with falsy args', t => {
  const expectedStyles = {
    ...style1
  }

  const actualStyles =
    stylesmerge()
      .ifThen(true, style1)
      .ifThen(false, style2)
      .eval()

  t.deepEqual(expectedStyles, actualStyles)
})

test('ifThen - with undefined argThen', t => {
  const expectedStyles = {
    ...style1
  }

  const actualStyles =
    stylesmerge()
      .ifThen(true, style1)
      .ifThen(true, undefined)
      .eval()

  t.deepEqual(expectedStyles, actualStyles)
})

test('ifThenElse - only works with boolean predicates', t => {
  const expected = {
    ...style3
  }

  const actual = stylesmerge()
    .ifThenElse(null, style2, style3)
    .eval()

  t.deepEqual(expected, actual)
})

test('ifThenElse - falsy case', t => {
  const expectedStyles = {
    ...style1,
    ...style3
  }

  const actualStyles =
    stylesmerge()
      .ifThen(true, style1)
      .ifThenElse(false, style2, style3)
      .eval()

  t.deepEqual(expectedStyles, actualStyles)
})

test('ifThenElse - truthy case', t => {
  const expectedStyles = {
    ...style1,
    ...style2
  }

  const actualStyles =
    stylesmerge()
      .ifThen(true, style1)
      .ifThenElse(true, style2, style3)
      .eval()

  t.deepEqual(expectedStyles, actualStyles)
})

test('ifThenElse - undefined argThen', t => {
  const expectedStyles = {
    ...style1
  }

  const actualStyles =
    stylesmerge()
      .ifThen(true, style1)
      .ifThenElse(true, undefined, style3)
      .eval()

  t.deepEqual(expectedStyles, actualStyles)
})

test('ifThenElse - undefined argElse', t => {
  const expectedStyles = {
    ...style1
  }

  const actualStyles =
    stylesmerge()
      .ifThen(true, style1)
      .ifThenElse(false, style2, undefined)
      .eval()

  t.deepEqual(expectedStyles, actualStyles)
})

test('default argument is always present', t => {
  const expectedStyles = {
    ...style1,
    ...style2,
    ...style3
  }

  const actualStyles =
    stylesmerge(style3)
      .ifThen(true, style1)
      .ifThen(true, style2)
      .eval()

  t.deepEqual(expectedStyles, actualStyles)
})

test('multiple default arguments are always present', t => {
  const expectedStyles = {
    ...style1,
    ...style2,
    ...style3
  }

  const actualStyles =
    stylesmerge(style1, style3)
      .ifThen(true, style2)
      .eval()

  t.deepEqual(expectedStyles, actualStyles)
})

test('only default args', t => {
  const expectedStyles = {
    ...style1,
    ...style3
  }

  const actualStyles = stylesmerge(style1, style3).eval()

  t.deepEqual(expectedStyles, actualStyles)
})