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

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

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 condition is true', () => {
      const c = css.if(false)(
        css`
          background-color: white;
        `
      ).else(
        css`
          background-color: black;
        `
      )

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

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

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

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

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

  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;}')
    })
  })
})