102 lines
2.4 KiB
TypeScript
102 lines
2.4 KiB
TypeScript
|
import { describe, it, expect, vi } from 'vitest';
|
||
|
|
import { mount } from '@vue/test-utils';
|
||
|
|
import VSelect from '../src/components/select/VSelect.vue';
|
||
|
|
import Select from 'primevue/select';
|
||
|
|
|
||
|
|
// Mock global matchMedia
|
||
|
|
Object.defineProperty(window, 'matchMedia', {
|
||
|
|
writable: true,
|
||
|
|
value: vi.fn().mockImplementation((query) => ({
|
||
|
|
matches: false,
|
||
|
|
media: query,
|
||
|
|
onchange: null,
|
||
|
|
addListener: vi.fn(), // deprecated
|
||
|
|
removeListener: vi.fn(), // deprecated
|
||
|
|
addEventListener: vi.fn(),
|
||
|
|
removeEventListener: vi.fn(),
|
||
|
|
dispatchEvent: vi.fn(),
|
||
|
|
})),
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
const globalConfig = {
|
||
|
|
global: {
|
||
|
|
components: {
|
||
|
|
Checkbox: Select
|
||
|
|
},
|
||
|
|
mocks: {
|
||
|
|
$primevue: {
|
||
|
|
config: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
stubs: {
|
||
|
|
VLabel: false,
|
||
|
|
VHint: true,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
describe('VSelect.vue', () => {
|
||
|
|
const options = [
|
||
|
|
{ value: 'apple', text: 'Apple' },
|
||
|
|
{ value: 'banana', text: 'Banana' },
|
||
|
|
{ value: 'cherry', text: 'Cherry' }
|
||
|
|
];
|
||
|
|
|
||
|
|
it('renders with basic props', () => {
|
||
|
|
const wrapper = mount(VSelect, {
|
||
|
|
props: {
|
||
|
|
label: 'Fruits',
|
||
|
|
options,
|
||
|
|
modelValue: null
|
||
|
|
},
|
||
|
|
global: globalConfig.global
|
||
|
|
});
|
||
|
|
|
||
|
|
const label = wrapper.findComponent({ name: 'VLabel' });
|
||
|
|
expect(label.exists()).toBe(true);
|
||
|
|
expect(label.props('label')).toBe('Fruits');
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
it('emits update:modelValue and change when value is selected', async () => {
|
||
|
|
const wrapper = mount(VSelect, {
|
||
|
|
props: {
|
||
|
|
options,
|
||
|
|
modelValue: null
|
||
|
|
},
|
||
|
|
global: globalConfig.global
|
||
|
|
});
|
||
|
|
|
||
|
|
// Simule la sélection d'une option
|
||
|
|
wrapper.vm.$emit('update:modelValue', 'banana');
|
||
|
|
wrapper.vm.$emit('change', { value: 'banana' });
|
||
|
|
|
||
|
|
const emittedUpdate = wrapper.emitted('update:modelValue');
|
||
|
|
const emittedChange = wrapper.emitted('change');
|
||
|
|
|
||
|
|
expect(emittedUpdate).toBeTruthy();
|
||
|
|
expect(emittedUpdate![0]).toEqual(['banana']);
|
||
|
|
|
||
|
|
expect(emittedChange).toBeTruthy();
|
||
|
|
expect(emittedChange![0]).toEqual([{ value: 'banana' }]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('reacts to external modelValue changes', async () => {
|
||
|
|
const wrapper = mount(VSelect, {
|
||
|
|
props: {
|
||
|
|
options,
|
||
|
|
modelValue: 'apple'
|
||
|
|
},
|
||
|
|
global: globalConfig.global
|
||
|
|
});
|
||
|
|
|
||
|
|
await wrapper.setProps({ modelValue: 'cherry' });
|
||
|
|
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||
|
|
|
||
|
|
const select = wrapper.findComponent({ name: 'Select' });
|
||
|
|
expect(select.props('modelValue')).toBe('cherry');
|
||
|
|
|
||
|
|
});
|
||
|
|
});
|