quasar/src/components/badge/QBadge.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 QBadge from './QBadge.js'

describe('[QBadge API]', () => {
  describe('[Props]', () => {
    describe('[(prop)color]', () => {
      test('type String has effect', async () => {
        const propVal = 'red'
        const wrapper = mount(QBadge)
        const target = wrapper.get('.q-badge')

        expect(
          target.classes()
        ).not.toContain(`bg-${ propVal }`)

        expect(
          target.classes()
        ).not.toContain(`text-${ propVal }`)

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

        expect(
          target.classes()
        ).toContain(`bg-${ propVal }`)

        expect(
          target.classes()
        ).not.toContain(`text-${ propVal }`)
      })
    })

    describe('[(prop)text-color]', () => {
      test('type String has effect', async () => {
        const propVal = 'red'
        const wrapper = mount(QBadge)
        const target = wrapper.get('.q-badge')

        expect(
          target.classes()
        ).not.toContain(`bg-${ propVal }`)

        expect(
          target.classes()
        ).not.toContain(`text-${ propVal }`)

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

        expect(
          target.classes()
        ).toContain(`text-${ propVal }`)

        expect(
          target.classes()
        ).not.toContain(`bg-${ propVal }`)
      })
    })

    describe('[(prop)floating]', () => {
      test('type Boolean has effect', async () => {
        const wrapper = mount(QBadge)
        const target = wrapper.get('.q-badge')

        expect(
          target.classes()
        ).not.toContain('q-badge--floating')

        await wrapper.setProps({ floating: true })
        await flushPromises()

        expect(
          wrapper.classes()
        ).toContain('q-badge--floating')

        expect(
          wrapper.get('.q-badge')
            .$computedStyle('position')
        ).toBe('absolute')
      })
    })

    describe('[(prop)transparent]', () => {
      test('type Boolean has effect', async () => {
        const wrapper = mount(QBadge)
        const target = wrapper.get('.q-badge')

        expect(
          target.classes()
        ).not.toContain('q-badge--transparent')

        await wrapper.setProps({ transparent: true })
        await flushPromises()

        expect(
          target.classes()
        ).toContain('q-badge--transparent')

        expect(
          target.$computedStyle('opacity')
        ).not.toBe('1')
      })
    })

    describe('[(prop)multi-line]', () => {
      test('type Boolean has effect', async () => {
        const wrapper = mount(QBadge)
        const target = wrapper.get('.q-badge')

        expect(
          target.classes()
        ).not.toContain('q-badge--multi-line')

        await wrapper.setProps({ multiLine: true })
        await flushPromises()

        expect(
          target.classes()
        ).toContain('q-badge--multi-line')

        expect(
          target.$computedStyle('word-break')
        ).toBe('break-all')
      })
    })

    describe('[(prop)label]', () => {
      test.each([
        [ 'String', 'John Doe' ],
        [ 'Number', 22 ]
      ])('type %s has effect', async (_, propVal) => {
        const wrapper = mount(QBadge)
        const target = wrapper.get('.q-badge')

        expect(
          target.text()
        ).not.toContain(propVal)

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

        expect(
          target.text()
        ).toContain(propVal)
      })
    })

    describe('[(prop)align]', () => {
      test.each([
        [ 'top' ],
        [ 'middle' ],
        [ 'bottom' ]
      ])('value "%s" has effect', async propVal => {
        const wrapper = mount(QBadge)
        const target = wrapper.get('.q-badge')

        expect(
          target.$style('vertical-align')
        ).not.toBe(propVal)

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

        expect(
          target.$style('vertical-align')
        ).toBe(propVal)
      })
    })

    describe('[(prop)outline]', () => {
      test('type Boolean has effect', async () => {
        const wrapper = mount(QBadge)
        const target = wrapper.get('.q-badge')

        expect(
          target.classes()
        ).not.toContain('q-badge--outline')

        await wrapper.setProps({ outline: true })
        await flushPromises()

        expect(
          target.classes()
        ).toContain('q-badge--outline')

        expect(
          target.$computedStyle('border')
        ).toContain('1px solid')
      })
    })

    describe('[(prop)rounded]', () => {
      test('type Boolean has effect', async () => {
        const wrapper = mount(QBadge)
        const target = wrapper.get('.q-badge')

        expect(
          target.classes()
        ).not.toContain('q-badge--rounded')

        await wrapper.setProps({ rounded: true })
        await flushPromises()

        expect(
          target.classes()
        ).toContain('q-badge--rounded')

        expect(
          target.$computedStyle('border-radius')
        ).toBe('1em')
      })
    })
  })

  describe('[Slots]', () => {
    describe('[(slot)default]', () => {
      test('renders the content', () => {
        const slotContent = 'some-slot-content'
        const wrapper = mount(QBadge, {
          slots: {
            default: () => slotContent
          }
        })

        expect(wrapper.html()).toContain(slotContent)
      })
    })
  })
})