You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
2.0 KiB
62 lines
2.0 KiB
import { describe, it, expect } from 'vitest'
|
|
import { mount } from '@vue/test-utils'
|
|
import CaptchaField from '../CaptchaField.vue'
|
|
|
|
const stubs = {
|
|
UInput: {
|
|
template: '<input :type="type" :disabled="disabled" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
|
|
props: ['type', 'disabled', 'modelValue', 'placeholder'],
|
|
},
|
|
UButton: {
|
|
template: '<button :disabled="disabled" @click="$emit(\'click\')"><slot /></button>',
|
|
props: ['disabled', 'icon', 'variant', 'color', 'square'],
|
|
emits: ['click'],
|
|
},
|
|
UFormField: {
|
|
template: '<div><span>{{ label }}</span><slot /></div>',
|
|
props: ['label', 'required'],
|
|
},
|
|
}
|
|
|
|
const defaultProps = { svg: '<svg></svg>', loading: false, modelValue: '' }
|
|
|
|
function mountComponent(overrides = {}) {
|
|
return mount(CaptchaField, {
|
|
props: { ...defaultProps, ...overrides },
|
|
global: { stubs },
|
|
})
|
|
}
|
|
|
|
describe('CaptchaField', () => {
|
|
it('renders SVG via v-html', () => {
|
|
const svg = '<svg><circle cx="10" cy="10" r="5"/></svg>'
|
|
const wrapper = mountComponent({ svg })
|
|
expect(wrapper.html()).toContain('<circle')
|
|
})
|
|
|
|
it('emits refresh when button clicked', async () => {
|
|
const wrapper = mountComponent()
|
|
const btn = wrapper.find('button')
|
|
await btn.trigger('click')
|
|
expect(wrapper.emitted('refresh')).toBeTruthy()
|
|
})
|
|
|
|
it('disables refresh button when loading', () => {
|
|
const wrapper = mountComponent({ loading: true })
|
|
const btn = wrapper.find('button')
|
|
expect(btn.attributes('disabled')).toBeDefined()
|
|
})
|
|
|
|
it('renders error state when svg is empty', () => {
|
|
const wrapper = mountComponent({ svg: '' })
|
|
expect(wrapper.text()).toContain('加载失败')
|
|
})
|
|
|
|
it('emits update:modelValue when input changes', async () => {
|
|
const wrapper = mountComponent()
|
|
const input = wrapper.find('input')
|
|
await input.setValue('abc')
|
|
expect(wrapper.emitted('update:modelValue')).toBeTruthy()
|
|
expect(wrapper.emitted('update:modelValue')![0]).toEqual(['abc'])
|
|
})
|
|
})
|
|
|