quasar/src/components/spinner/QSpinner.test.js

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

import { mount, flushPromises } from '@vue/test-utils'
import { describe, test, expect } from 'vitest'

import QSpinner from './QSpinner.js'

describe('[QSpinner API]', () => {
  describe('[Props]', () => {
    describe('[(prop)size]', () => {
      test.each([
        ['String', '100px'],
        ['Number', 100]
      ])('type %s has effect', async (_, propVal) => {
        const expectedValue = String(propVal)
        const wrapper = mount(QSpinner)

        const target = wrapper.get('.q-spinner')

        expect(target.attributes('width')).not.toBe(expectedValue)

        expect(target.attributes('height')).not.toBe(expectedValue)

        await wrapper.setProps({ size: propVal })
        await flushPromises()

        expect(target.attributes('width')).toBe(expectedValue)

        expect(target.attributes('height')).toBe(expectedValue)
      })
    })

    describe('[(prop)color]', () => {
      test('type String has effect', async () => {
        const propVal = 'red'
        const wrapper = mount(QSpinner)

        const target = wrapper.get('.q-spinner')

        expect(target.classes()).not.toContain('text-red')

        await wrapper.setProps({ color: propVal })
        await flushPromises()

        expect(target.classes()).toContain('text-red')
      })
    })

    describe('[(prop)thickness]', () => {
      test('type Number has effect', async () => {
        const propVal = 50
        const wrapper = mount(QSpinner)

        const target = wrapper.get('.q-spinner circle')

        expect(target.attributes('stroke-width')).not.toBe(String(propVal))

        await wrapper.setProps({ thickness: propVal })
        await flushPromises()

        expect(target.attributes('stroke-width')).toBe(String(propVal))
      })
    })
  })
})