quasar/src/utils/css-var/set-css-var.test.js

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

import { describe, test, expect } from 'vitest'

import setCssVar from './set-css-var.js'

describe('[setCssVar API]', () => {
  describe('[Functions]', () => {
    describe('[(function)default]', () => {
      test('setCss(prop)', () => {
        expect(
          setCssVar('prop', 'awesome')
        ).toBeUndefined()

        expect(
          getComputedStyle(document.body)
            .getPropertyValue('--q-prop')
        ).toBe('awesome')
      })

      test('setCss(prop, el)', () => {
        const el = document.createElement('div')
        document.body.appendChild(el)

        expect.soft(
          setCssVar('my-prop', 'cool', el)
        ).toBeUndefined()

        expect.soft(
          getComputedStyle(el)
            .getPropertyValue('--q-my-prop')
        ).toBe('cool')

        el.remove()
      })

      test('should throw if propName is not a string', () => {
        expect(() => {
          setCssVar(5, 'awesome')
        }).toThrow(TypeError)
      })

      test('should throw if value is not a string', () => {
        expect(() => {
          setCssVar('prop', 5)
        }).toThrow(TypeError)
      })

      test('should throw if element is not a DOM element', () => {
        expect(() => {
          setCssVar('prop', 'awesome', {})
        }).toThrow(TypeError)
      })
    })
  })
})