kitchen-sink-server/src/modules/css-utils/index.test.ts

import { css, CssIfStringImpl, CssStringImpl } from '.';

jest.mock('goober', () => {
  return {
    css: () => 'gooberClass',
  };
});

describe('css-utils', () => {
  describe('css', () => {
    it('should return CssString', () => {
      const c = css`
        background-color: white;
        color: black;
      `

      expect(c).toBeInstanceOf(CssStringImpl);
      expect(c.toString()).toBe('background-color:white;color:black;');
    })
  })

  describe('css.if', () => {
    it('should return CssString when the condition is true', () => {
      const c = css.if(true)(
        css`
          background-color: white;
        `
      )

      expect(c).toBeInstanceOf(CssIfStringImpl)
      expect(c.toString()).toBe('background-color:white;')
    })

    it('should return empty string when the condition is false', () => {
      const c = css.if(false)(
        css`
          background-color: white;
        `
      )

      expect(c.toString()).toBe('')
    })

    it('should return CssString with .else when the if condition is false', () => {
      const c = css.if(false)(
        css`
          background-color: white;
        `
      ).else(
        css`
          background-color: black;
        `
      )

      expect(c.toString()).toBe('background-color:black;')
    })

    it('should return CssString with .else when the if condition is true', () => {
      const c = css.if(true)(
        css`
          background-color: white;
        `
      ).else(
        css`
          background-color: black;
        `
      )

      expect(c.toString()).toBe('background-color:white;')
    })
  })

  describe('css.nest', () => {
    it('should add selector', () => {
      const c = css.nest('> div')(
        css`
          background-color: white;
        `
      )

      expect(c.toString()).toBe('> div{background-color:white;}')
    })
  })

  describe('css.dynamic', () => {
    it('should evaluate dynamic object', () => {
      const randomNumber = Math.floor(Math.random() * 1000);

      const c = css.dynamic({
        'line-height': randomNumber,
      })

      expect(c.toString()).toBe(`line-height:${randomNumber};`)
    })
  })

  describe('css.media', () => {
    it('should accept raw queries', () => {
      const c = css.media('only screen and (min-width: 720px)')(
        css`
          color: black;
          background-color: white;
        `
      )

      expect(c.toString()).toBe('@media only screen and (min-width: 720px){color:black;background-color:white;}')
    })
  })

  describe('css.cx', () => {
    it('should accept strings as classnames', () => {
      expect(css.cx('class1', 'class2')).toBe('class1 class2');
    })

    it('should accept CSS strings for classname generation', () => {
      expect(
        css.cx(
          css`
            color: white;
          `
        )
      ).toBe('gooberClass');
    })

    it('should accept mixed values', () => {
      expect(
        css.cx(
          'class1',
          'class2',
          css`
            color: white;
          `
        )
      ).toBe('class1 class2 gooberClass');
    })
  })
})