99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
|
import { describe, it, expect } from 'vitest'
|
||
|
|
import { mount } from '@vue/test-utils'
|
||
|
|
import VCheckbox from '../src/components/checkbox/VCheckbox.vue'
|
||
|
|
import PrimeCheckbox from 'primevue/checkbox'
|
||
|
|
|
||
|
|
const globalConfig = {
|
||
|
|
global: {
|
||
|
|
components: {
|
||
|
|
Checkbox: PrimeCheckbox
|
||
|
|
},
|
||
|
|
mocks: {
|
||
|
|
$primevue: {
|
||
|
|
config: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
stubs: {
|
||
|
|
VLabel: true,
|
||
|
|
VHint: true,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
describe('VCheckbox.vue', () => {
|
||
|
|
it('adds value to modelValue array when checkbox is clicked (multiple mode)', async () => {
|
||
|
|
const wrapper = mount(VCheckbox, {
|
||
|
|
props: {
|
||
|
|
label: 'Fruit',
|
||
|
|
modelValue: [],
|
||
|
|
value: 'pomme'
|
||
|
|
},
|
||
|
|
global: globalConfig.global
|
||
|
|
});
|
||
|
|
|
||
|
|
const input = wrapper.find('input[type="checkbox"]');
|
||
|
|
await input.setValue(true);
|
||
|
|
|
||
|
|
const emitted = wrapper.emitted('update:modelValue');
|
||
|
|
expect(emitted).toBeTruthy();
|
||
|
|
expect(emitted?.[0]?.[0]).toContain('pomme');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('removes value from modelValue array when checkbox is unchecked (multiple mode)', async () => {
|
||
|
|
const wrapper = mount(VCheckbox, {
|
||
|
|
props: {
|
||
|
|
label: 'Fruit',
|
||
|
|
modelValue: ['pomme'],
|
||
|
|
value: 'pomme'
|
||
|
|
},
|
||
|
|
global: globalConfig.global
|
||
|
|
});
|
||
|
|
|
||
|
|
const input = wrapper.find('input[type="checkbox"]');
|
||
|
|
await input.setValue(false);
|
||
|
|
|
||
|
|
const emitted = wrapper.emitted('update:modelValue');
|
||
|
|
expect(emitted).toBeTruthy();
|
||
|
|
expect(emitted?.[0]?.[0]).not.toContain('pomme');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('emits change, focus and blur events', async () => {
|
||
|
|
const wrapper = mount(VCheckbox, {
|
||
|
|
props: {
|
||
|
|
label: 'Test Checkbox',
|
||
|
|
modelValue: false
|
||
|
|
},
|
||
|
|
global: globalConfig.global
|
||
|
|
});
|
||
|
|
const input = wrapper.find('input[type="checkbox"]');
|
||
|
|
await input.trigger('focus');
|
||
|
|
await input.trigger('blur');
|
||
|
|
await input.trigger('change');
|
||
|
|
expect(wrapper.emitted('focus')).toBeTruthy();
|
||
|
|
expect(wrapper.emitted('blur')).toBeTruthy();
|
||
|
|
expect(wrapper.emitted('change')).toBeTruthy();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('applies error and success classes based on props', () => {
|
||
|
|
const errorWrapper = mount(VCheckbox, {
|
||
|
|
props: {
|
||
|
|
label: 'Error Checkbox',
|
||
|
|
modelValue: false,
|
||
|
|
errorMessage: 'Error occurred'
|
||
|
|
},
|
||
|
|
global: globalConfig.global
|
||
|
|
});
|
||
|
|
expect(errorWrapper.find('.p-checkbox.error').exists()).toBe(true);
|
||
|
|
|
||
|
|
const successWrapper = mount(VCheckbox, {
|
||
|
|
props: {
|
||
|
|
label: 'Success Checkbox',
|
||
|
|
modelValue: true,
|
||
|
|
validMessage: 'Valid input'
|
||
|
|
},
|
||
|
|
global: globalConfig.global
|
||
|
|
});
|
||
|
|
expect(successWrapper.find('.p-checkbox.success').exists()).toBe(true);
|
||
|
|
});
|
||
|
|
});
|