forked from verdnatura/salix-front
parent
703aaa1f38
commit
c7c9c13944
|
@ -0,0 +1,64 @@
|
||||||
|
// tests/CreateNewCityForm.spec.js
|
||||||
|
import { mount } from '@vue/test-utils';
|
||||||
|
import { describe, it, expect, vi } from 'vitest';
|
||||||
|
import CreateNewCityForm from 'path/to/CreateNewCityForm.vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { Quasar } from 'quasar';
|
||||||
|
import { createTestingPinia } from '@pinia/testing';
|
||||||
|
|
||||||
|
vi.mock('vue-i18n', () => ({
|
||||||
|
useI18n: () => ({
|
||||||
|
t: (key) => key,
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('CreateNewCityForm.vue', () => {
|
||||||
|
it('renders the form correctly', () => {
|
||||||
|
const wrapper = mount(CreateNewCityForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.find('form').exists()).toBe(true);
|
||||||
|
expect(wrapper.find('input[name="cityName"]').exists()).toBe(true);
|
||||||
|
expect(wrapper.find('select[name="province"]').exists()).toBe(true);
|
||||||
|
expect(wrapper.find('select[name="country"]').exists()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('emits onDataSaved when form is submitted', async () => {
|
||||||
|
const wrapper = mount(CreateNewCityForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const form = wrapper.find('form');
|
||||||
|
await form.trigger('submit.prevent');
|
||||||
|
|
||||||
|
expect(wrapper.emitted().onDataSaved).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('calls t function from useI18n', () => {
|
||||||
|
const wrapper = mount(CreateNewCityForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.vm.t).toBeDefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('updates city data correctly', async () => {
|
||||||
|
const wrapper = mount(CreateNewCityForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const cityNameInput = wrapper.find('input[name="cityName"]');
|
||||||
|
await cityNameInput.setValue('New City');
|
||||||
|
|
||||||
|
expect(wrapper.vm.cityName).toBe('New City');
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,79 @@
|
||||||
|
// tests/CreateNewPostcodeForm.spec.js
|
||||||
|
import { mount } from '@vue/test-utils';
|
||||||
|
import { describe, it, expect, vi } from 'vitest';
|
||||||
|
import CreateNewPostcodeForm from 'path/to/CreateNewPostcodeForm.vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { Quasar } from 'quasar';
|
||||||
|
import { createTestingPinia } from '@pinia/testing';
|
||||||
|
|
||||||
|
vi.mock('vue-i18n', () => ({
|
||||||
|
useI18n: () => ({
|
||||||
|
t: (key) => key,
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('CreateNewPostcodeForm.vue', () => {
|
||||||
|
it('renders the form correctly', () => {
|
||||||
|
const wrapper = mount(CreateNewPostcodeForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.find('form').exists()).toBe(true);
|
||||||
|
expect(wrapper.find('input[label="Postcode"]').exists()).toBe(true);
|
||||||
|
expect(wrapper.find('select[label="City"]').exists()).toBe(true);
|
||||||
|
expect(wrapper.find('select[label="Province"]').exists()).toBe(true);
|
||||||
|
expect(wrapper.find('select[label="Country"]').exists()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('calls onDataSaved when form is submitted', async () => {
|
||||||
|
const wrapper = mount(CreateNewPostcodeForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const formModelPopup = wrapper.findComponent({ name: 'FormModelPopup' });
|
||||||
|
await formModelPopup.vm.$emit('onDataSaved', { code: '12345' });
|
||||||
|
|
||||||
|
expect(wrapper.emitted().onDataSaved).toBeTruthy();
|
||||||
|
expect(wrapper.emitted().onDataSaved[0]).toEqual([{ code: '12345' }]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('updates town when a new city is created', async () => {
|
||||||
|
const wrapper = mount(CreateNewPostcodeForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const createNewCityForm = wrapper.findComponent({ name: 'CreateNewCityForm' });
|
||||||
|
const newTown = { id: 1, name: 'New Town', provinceFk: 2 };
|
||||||
|
await createNewCityForm.vm.$emit('onDataSaved', newTown, {});
|
||||||
|
|
||||||
|
expect(wrapper.vm.town).toEqual(newTown);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('fetches provinces and towns when country changes', async () => {
|
||||||
|
const wrapper = mount(CreateNewPostcodeForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.vm.postcodeFormData.countryFk = 1;
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
|
||||||
|
expect(wrapper.vm.provincesFetchDataRef.fetch).toHaveBeenCalledWith({
|
||||||
|
where: { countryFk: 1 },
|
||||||
|
});
|
||||||
|
expect(wrapper.vm.townsFetchDataRef.fetch).toHaveBeenCalledWith({
|
||||||
|
where: {
|
||||||
|
provinceFk: {
|
||||||
|
inq: wrapper.vm.provincesOptions.map(({ id }) => id),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,64 @@
|
||||||
|
// tests/CreateNewProvinceForm.spec.js
|
||||||
|
import { mount } from '@vue/test-utils';
|
||||||
|
import { describe, it, expect, vi } from 'vitest';
|
||||||
|
import CreateNewProvinceForm from 'path/to/CreateNewProvinceForm.vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { Quasar } from 'quasar';
|
||||||
|
import { createTestingPinia } from '@pinia/testing';
|
||||||
|
|
||||||
|
vi.mock('vue-i18n', () => ({
|
||||||
|
useI18n: () => ({
|
||||||
|
t: (key) => key,
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('CreateNewProvinceForm.vue', () => {
|
||||||
|
it('renders the form correctly', () => {
|
||||||
|
const wrapper = mount(CreateNewProvinceForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.find('form').exists()).toBe(true);
|
||||||
|
expect(wrapper.findComponent({ name: 'VnInput' }).exists()).toBe(true);
|
||||||
|
expect(wrapper.findComponent({ name: 'VnSelect' }).exists()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('emits onDataSaved when form is submitted', async () => {
|
||||||
|
const wrapper = mount(CreateNewProvinceForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const formModelPopup = wrapper.findComponent({ name: 'FormModelPopup' });
|
||||||
|
await formModelPopup.vm.$emit('onDataSaved', { name: 'New Province' });
|
||||||
|
|
||||||
|
expect(wrapper.emitted().onDataSaved).toBeTruthy();
|
||||||
|
expect(wrapper.emitted().onDataSaved[0]).toEqual([{ name: 'New Province' }]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('calls t function from useI18n', () => {
|
||||||
|
const wrapper = mount(CreateNewProvinceForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.vm.t).toBeDefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('updates province data correctly', async () => {
|
||||||
|
const wrapper = mount(CreateNewProvinceForm, {
|
||||||
|
global: {
|
||||||
|
plugins: [Quasar, createTestingPinia()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const provinceNameInput = wrapper.findComponent({ name: 'VnInput' });
|
||||||
|
await provinceNameInput.setValue('New Province');
|
||||||
|
|
||||||
|
expect(wrapper.vm.provinceFormData.name).toBe('New Province');
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,85 @@
|
||||||
|
import { mount } from '@vue/test-utils';
|
||||||
|
import { describe, it, expect, vi } from 'vitest';
|
||||||
|
import VnSelectProvince from './VnSelectProvince.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
|
||||||
|
import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
|
||||||
|
|
||||||
|
vi.mock('components/FetchData.vue', () => ({
|
||||||
|
default: {
|
||||||
|
name: 'FetchData',
|
||||||
|
template: '<div><slot></slot></div>',
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('components/common/VnSelectDialog.vue', () => ({
|
||||||
|
default: {
|
||||||
|
name: 'VnSelectDialog',
|
||||||
|
template: '<div><slot></slot><slot name="form"></slot></div>',
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('./CreateNewProvinceForm.vue', () => ({
|
||||||
|
default: {
|
||||||
|
name: 'CreateNewProvinceForm',
|
||||||
|
template: '<div></div>',
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('VnSelectProvince.vue', () => {
|
||||||
|
it('renders correctly with default props', () => {
|
||||||
|
const wrapper = mount(VnSelectProvince, {
|
||||||
|
props: {
|
||||||
|
countryFk: 1,
|
||||||
|
provinceSelected: 2,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
expect(wrapper.exists()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('calls fetch method on countryFk change', async () => {
|
||||||
|
const fetchMock = vi.fn();
|
||||||
|
const wrapper = mount(VnSelectProvince, {
|
||||||
|
props: {
|
||||||
|
countryFk: 1,
|
||||||
|
provinceSelected: 2,
|
||||||
|
},
|
||||||
|
global: {
|
||||||
|
mocks: {
|
||||||
|
provincesFetchDataRef: {
|
||||||
|
fetch: fetchMock,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await wrapper.setProps({ countryFk: 2 });
|
||||||
|
expect(fetchMock).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('emits onProvinceCreated event when a new province is created', async () => {
|
||||||
|
const wrapper = mount(VnSelectProvince, {
|
||||||
|
props: {
|
||||||
|
countryFk: 1,
|
||||||
|
provinceSelected: 2,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await wrapper.vm.onProvinceCreated(null, { id: 3 });
|
||||||
|
expect(wrapper.emitted().onProvinceCreated).toBeTruthy();
|
||||||
|
expect(wrapper.emitted().onProvinceCreated[0]).toEqual([{ id: 3 }]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('updates provincesOptions when handleProvinces is called', async () => {
|
||||||
|
const wrapper = mount(VnSelectProvince, {
|
||||||
|
props: {
|
||||||
|
countryFk: 1,
|
||||||
|
provinceSelected: 2,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = [{ id: 1, name: 'Province 1' }];
|
||||||
|
await wrapper.vm.handleProvinces(data);
|
||||||
|
expect(wrapper.vm.provincesOptions).toEqual(data);
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue