zammad/app/frontend/shared/components/CommonBadge/__tests__/CommonBadge.spec.ts

// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/

import { renderComponent } from '#tests/support/components/index.ts'

import CommonBadge from '../CommonBadge.vue'

describe('CommonLabel.vue', () => {
  it('renders when no props are passed', () => {
    const view = renderComponent(CommonBadge, {
      slots: {
        default: 'Dummy',
      },
    })

    const badge = view.getByTestId('common-badge')

    expect(badge).toHaveTextContent('Dummy')
    expect(badge).toHaveClass('text-xs')
  })

  it('renders bigger text if size is given', () => {
    const view = renderComponent(CommonBadge, {
      props: {
        size: 'large',
      },
      slots: {
        default: 'Dummy',
      },
    })

    const badge = view.getByTestId('common-badge')

    expect(badge).toHaveTextContent('Dummy')
    expect(badge).toHaveClass('text-base')
  })

  it('renders correct colors if variant is given', () => {
    const view = renderComponent(CommonBadge, {
      props: {
        variant: 'success',
      },
      slots: {
        default: 'Dummy',
      },
    })

    const badge = view.getByTestId('common-badge')

    expect(badge).toHaveTextContent('Dummy')
    expect(badge).toHaveClasses([
      'common-badge',
      'common-badge-success',
      'text-xs',
    ])
  })

  it('renders correct colors if variant custom is given', () => {
    const view = renderComponent(CommonBadge, {
      props: {
        variant: 'custom',
        class: ['dark:bg-pink-300', 'bg-pink-300', 'text-white'],
      },
      slots: {
        default: 'Dummy',
      },
    })

    const badge = view.getByTestId('common-badge')

    expect(badge).toHaveTextContent('Dummy')
    expect(badge).toHaveClasses([
      'text-xs',
      'dark:bg-pink-300',
      'bg-pink-300',
      'text-white',
    ])
  })
})