element-plus/packages/utils/__tests__/dom/style.test.ts

import { afterEach, describe, expect, it, vi } from 'vitest'
import { addClass, addUnit, debugWarn, hasClass, removeClass } from '../..'

vi.mock('@element-plus/utils/error', () => ({
  debugWarn: vi.fn(),
}))

const getClass = (el: Element) => {
  if (!el) return ''
  return el.getAttribute('class')
}

describe('dom style', () => {
  afterEach(() => {
    vi.clearAllMocks()
  })

  describe('hasClass', () => {
    it('Judge whether a Element has a class', () => {
      const div = document.createElement('div')
      div.className = 'a b   cc'
      expect(hasClass(div, 'a')).toBe(true)
      expect(hasClass(div, 'ab')).toBe(false)
      try {
        expect(hasClass(div, 'a b'))
      } catch (error: any) {
        expect(error.message).toEqual('className should not contain space.')
      }

      const canvas = document.createElement('canvas')
      canvas.className = 'canvas-a canvas-b cc'
      expect(hasClass(canvas, 'a')).toBe(false)
      expect(hasClass(canvas, 'canvas-a')).toBe(true)
      // remove classList
      canvas.setAttribute('classList', '')
      expect(hasClass(canvas, 'b')).toBe(false)
      expect(hasClass(canvas, 'canvas-b')).toBe(true)

      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
      svg.setAttribute('class', 'svg-a svg-b')
      expect(hasClass(svg, 'a')).toBe(false)
      expect(hasClass(svg, 'svg-a')).toBe(true)
      // remove classList
      svg.setAttribute('classList', '')
      expect(hasClass(svg, 'b')).toBe(false)
      expect(hasClass(svg, 'svg-b')).toBe(true)

      const path = document.createElementNS(
        'http://www.w3.org/2000/svg',
        'path'
      )
      path.setAttribute('class', 'path-a path-b')
      expect(hasClass(path, 'a')).toBe(false)
      expect(hasClass(path, 'path-a')).toBe(true)
      // remove classList
      path.setAttribute('classList', '')
      expect(hasClass(path, 'b')).toBe(false)
      expect(hasClass(path, 'path-b')).toBe(true)
    })
  })

  describe('addClass', () => {
    it('Add class to element', () => {
      const div = document.createElement('div')
      addClass(div, 'div-abc abc')
      expect(hasClass(div, 'abc')).toBe(true)
      expect(hasClass(div, 'div-abc')).toBe(true)
      expect(hasClass(div, 'div')).toBe(false)
      addClass(div, 'abc')
      expect(getClass(div)).toEqual('div-abc abc')
      // remove classList
      div.setAttribute('classList', '')
      addClass(div, 'div-box con')
      expect(hasClass(div, 'con')).toBe(true)
      expect(hasClass(div, 'div-box')).toBe(true)
      expect(hasClass(div, 'box')).toBe(false)
      addClass(div, 'con')
      expect(getClass(div)).toEqual('div-abc abc div-box con')

      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
      addClass(svg, 'svg-abc svg')
      expect(hasClass(svg, 'svg')).toBe(true)
      expect(hasClass(svg, 'svg-abc')).toBe(true)
      expect(hasClass(svg, 'abc')).toBe(false)
      expect(hasClass(svg, 'sv')).toBe(false)
      addClass(svg, 'svg')
      expect(getClass(svg)).toEqual('svg-abc svg')
      addClass(svg, 'svg-aa     space')
      expect(getClass(svg)).toEqual('svg-abc svg svg-aa space')
      // remove classList
      svg.setAttribute('classList', '')
      addClass(svg, 'svg-abc-a svg-b')
      expect(hasClass(svg, 'svg')).toBe(true)
      expect(hasClass(svg, 'svg-abc')).toBe(true)
      expect(hasClass(svg, 'abc')).toBe(false)
      expect(hasClass(svg, 'sv')).toBe(false)
      expect(hasClass(svg, 'svg-abc-a')).toBe(true)
      expect(hasClass(svg, 'svg-b')).toBe(true)
      expect(hasClass(svg, 'a')).toBe(false)

      const path = document.createElementNS(
        'http://www.w3.org/2000/svg',
        'path'
      )
      addClass(path, 'path-abc path')
      expect(hasClass(path, 'path')).toBe(true)
      expect(hasClass(path, 'path-abc')).toBe(true)
      expect(hasClass(path, 'abc')).toBe(false)
      expect(hasClass(path, 'pa')).toBe(false)
      addClass(path, 'path')
      expect(getClass(path)).toEqual('path-abc path')
      // remove classList
      path.setAttribute('classList', '')
      expect(hasClass(path, 'path')).toBe(true)
      expect(hasClass(path, 'path-abc')).toBe(true)
      expect(hasClass(path, 'abc')).toBe(false)
      expect(hasClass(path, 'pa')).toBe(false)
    })
  })

  describe('removeClass', () => {
    it('Remove class on element', () => {
      const div = document.createElement('div')
      addClass(div, 'div-abc abc ab bb cc')

      removeClass(div, 'abc')
      expect(hasClass(div, 'abc')).toBe(false)

      expect(hasClass(div, 'bb')).toBe(true)
      expect(hasClass(div, 'cc')).toBe(true)

      removeClass(div, 'bb cc')
      expect(hasClass(div, 'bb')).toBe(false)
      expect(hasClass(div, 'cc')).toBe(false)
      expect(getClass(div)).toEqual('div-abc ab')

      // remove classList
      div.setAttribute('classList', '')
      addClass(div, 'div-box con')
      removeClass(div, 'div-box con')
      expect(hasClass(div, 'con')).toBe(false)
      expect(hasClass(div, 'div-box')).toBe(false)
      expect(getClass(div)).toBe('div-abc ab')

      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
      addClass(svg, 'svg-abc svg')
      removeClass(svg, 'svg-abc     svg')
      expect(hasClass(svg, 'svg-abc')).toBe(false)
      expect(hasClass(svg, 'abc')).toBe(false)
      expect(getClass(svg)).toEqual('')
      // remove classList
      svg.setAttribute('classList', '')
      addClass(svg, 'svg-abc-a svg-b')
      expect(hasClass(svg, 'svg')).toBe(false)
      expect(hasClass(svg, 'svg-abc')).toBe(false)
      expect(hasClass(svg, 'abc')).toBe(false)
      expect(hasClass(svg, 'svg-abc-a')).toBe(true)
      expect(hasClass(svg, 'svg-b')).toBe(true)
      removeClass(svg, 'svg')
      expect(getClass(svg)).toEqual('svg-abc-a svg-b')
      removeClass(svg, 'svg-abc-a')
      expect(hasClass(svg, 'svg-abc-a')).toBe(false)
      expect(hasClass(svg, 'svg-b')).toBe(true)

      const path = document.createElementNS(
        'http://www.w3.org/2000/svg',
        'path'
      )
      addClass(path, 'path-abc path')
      expect(hasClass(path, 'path')).toBe(true)
      expect(hasClass(path, 'path-abc')).toBe(true)
      expect(hasClass(path, 'abc')).toBe(false)
      expect(hasClass(path, 'pa')).toBe(false)
      removeClass(path, 'path')
      expect(hasClass(path, 'path')).toBe(false)
      expect(hasClass(path, 'path-abc')).toBe(true)
      // remove classList
      path.setAttribute('classList', '')
      addClass(path, 'path path-1 path2')
      expect(hasClass(path, 'path')).toBe(true)
      expect(hasClass(path, 'path-1')).toBe(true)
      expect(getClass(path)).toEqual('path-abc path path-1 path2')
      removeClass(path, 'path')
      expect(hasClass(path, 'path')).toBe(false)
      expect(getClass(path)).toEqual('path-abc path-1 path2')
      removeClass(path, 'path-abc path-1 path2')
      expect(getClass(path)).toEqual('')
    })
  })

  describe('addUnit', () => {
    it('should return empty string when value is undefined or empty string', () => {
      expect(addUnit()).toBe('')
      expect(addUnit('')).toBe('')
      expect(addUnit(undefined)).toBe('')
    })

    it('should append default unit to number', () => {
      expect(addUnit(10)).toBe('10px')
      expect(addUnit(0)).toBe('0px')
      expect(addUnit(-5)).toBe('-5px')
    })

    it('should append custom unit to number', () => {
      expect(addUnit(10, 'em')).toBe('10em')
      expect(addUnit(5, '%')).toBe('5%')
    })

    it('should append default unit to string number', () => {
      expect(addUnit('10')).toBe('10px')
      expect(addUnit('0')).toBe('0px')
      expect(addUnit('-5')).toBe('-5px')
    })

    it('should append custom unit to string number', () => {
      expect(addUnit('10', 'em')).toBe('10em')
      expect(addUnit('5', '%')).toBe('5%')
    })

    it('should return string value as is if not a number', () => {
      expect(addUnit('10px')).toBe('10px')
      expect(addUnit('auto')).toBe('auto')
      expect(addUnit('inherit')).toBe('inherit')
      expect(addUnit('50%')).toBe('50%')
    })

    it('should warn if value is not string or number', () => {
      addUnit({} as any)
      expect(debugWarn).toHaveBeenCalled()
    })
  })
})