football2801
4002ff9fbf
CI / test (push) Has been cancelled
Web app: new entities (Image, RenderedAsset, SharedImage, Token, DeviceImageHistory), enums, repositories, controllers, message handlers, migrations, tests, frontend upload/library/sticker UI, Vue components. Firmware: EPD background screen binaries + gen scripts, setup_bg header. Infra: ddev config, test bundle, gitignore coverage dir. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
110 lines
3.3 KiB
TypeScript
110 lines
3.3 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { mount } from '@vue/test-utils'
|
|
import BaseButton from '@/components/BaseButton.vue'
|
|
|
|
describe('BaseButton', () => {
|
|
it('renders slot content', () => {
|
|
const wrapper = mount(BaseButton, {
|
|
slots: { default: 'Click me' },
|
|
})
|
|
expect(wrapper.text()).toContain('Click me')
|
|
})
|
|
|
|
it('renders as a <button> by default', () => {
|
|
const wrapper = mount(BaseButton, {
|
|
slots: { default: 'OK' },
|
|
})
|
|
expect(wrapper.element.tagName).toBe('BUTTON')
|
|
})
|
|
|
|
it('applies primary variant class by default', () => {
|
|
const wrapper = mount(BaseButton, { slots: { default: 'OK' } })
|
|
expect(wrapper.classes()).toContain('btn--primary')
|
|
})
|
|
|
|
it('applies the given variant class', () => {
|
|
const wrapper = mount(BaseButton, {
|
|
props: { variant: 'destructive' },
|
|
slots: { default: 'Delete' },
|
|
})
|
|
expect(wrapper.classes()).toContain('btn--destructive')
|
|
})
|
|
|
|
it('shows spinner element when loading is true', () => {
|
|
const wrapper = mount(BaseButton, {
|
|
props: { loading: true },
|
|
slots: { default: 'Saving...' },
|
|
})
|
|
expect(wrapper.find('.btn__spinner').exists()).toBe(true)
|
|
})
|
|
|
|
it('does not show spinner when loading is false', () => {
|
|
const wrapper = mount(BaseButton, {
|
|
props: { loading: false },
|
|
slots: { default: 'Save' },
|
|
})
|
|
expect(wrapper.find('.btn__spinner').exists()).toBe(false)
|
|
})
|
|
|
|
it('applies btn--loading class when loading', () => {
|
|
const wrapper = mount(BaseButton, {
|
|
props: { loading: true },
|
|
slots: { default: 'Wait' },
|
|
})
|
|
expect(wrapper.classes()).toContain('btn--loading')
|
|
})
|
|
|
|
it('is disabled when disabled prop is true', () => {
|
|
const wrapper = mount(BaseButton, {
|
|
props: { disabled: true },
|
|
slots: { default: 'Blocked' },
|
|
})
|
|
expect((wrapper.element as HTMLButtonElement).disabled).toBe(true)
|
|
})
|
|
|
|
it('is disabled when loading prop is true', () => {
|
|
const wrapper = mount(BaseButton, {
|
|
props: { loading: true },
|
|
slots: { default: 'Loading' },
|
|
})
|
|
expect((wrapper.element as HTMLButtonElement).disabled).toBe(true)
|
|
})
|
|
|
|
it('is not disabled when neither disabled nor loading', () => {
|
|
const wrapper = mount(BaseButton, {
|
|
props: { disabled: false, loading: false },
|
|
slots: { default: 'Go' },
|
|
})
|
|
expect((wrapper.element as HTMLButtonElement).disabled).toBe(false)
|
|
})
|
|
|
|
it('emits click event when clicked and not disabled', async () => {
|
|
const wrapper = mount(BaseButton, { slots: { default: 'Go' } })
|
|
await wrapper.trigger('click')
|
|
expect(wrapper.emitted('click')).toBeTruthy()
|
|
})
|
|
|
|
it('type attribute defaults to button', () => {
|
|
const wrapper = mount(BaseButton, { slots: { default: 'OK' } })
|
|
expect(wrapper.attributes('type')).toBe('button')
|
|
})
|
|
|
|
it('type attribute can be set to submit', () => {
|
|
const wrapper = mount(BaseButton, {
|
|
props: { type: 'submit' },
|
|
slots: { default: 'Submit' },
|
|
})
|
|
expect(wrapper.attributes('type')).toBe('submit')
|
|
})
|
|
|
|
it('renders as an anchor when tag is a', () => {
|
|
const wrapper = mount(BaseButton, {
|
|
props: { tag: 'a' },
|
|
slots: { default: 'Link' },
|
|
})
|
|
expect(wrapper.element.tagName).toBe('A')
|
|
// <a> should not have a type attribute
|
|
expect(wrapper.attributes('type')).toBeUndefined()
|
|
})
|
|
})
|