test: refs #8061 #8061 updates

test/vitest/__tests__/components/common/CreateNewCityForm.spec.js

@@ -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');
+    });
+});

test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js

@@ -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),
+                },
+            },
+        });
+    });
+});

test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js

@@ -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');
+    });
+});

test/vitest/__tests__/components/common/VnSelectProvince.spec.js

@@ -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);
+    });
+});