From c7c9c139441c99f389ddc118ff2a75382c9d2f0f Mon Sep 17 00:00:00 2001 From: Javier Segarra Date: Fri, 15 Nov 2024 10:28:52 +0100 Subject: [PATCH] test: refs #8061 #8061 updates --- .../common/CreateNewCityForm.spec.js | 64 ++++++++++++++ .../common/CreateNewPostcodeForm.spec.js | 79 +++++++++++++++++ .../common/CreateNewProvinceForm.spec.js | 64 ++++++++++++++ .../common/VnSelectProvince.spec.js | 85 +++++++++++++++++++ 4 files changed, 292 insertions(+) create mode 100644 test/vitest/__tests__/components/common/CreateNewCityForm.spec.js create mode 100644 test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js create mode 100644 test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js create mode 100644 test/vitest/__tests__/components/common/VnSelectProvince.spec.js diff --git a/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js b/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js new file mode 100644 index 000000000..afa8466d0 --- /dev/null +++ b/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'); + }); +}); diff --git a/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js b/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js new file mode 100644 index 000000000..4f1f03554 --- /dev/null +++ b/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), + }, + }, + }); + }); +}); diff --git a/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js b/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js new file mode 100644 index 000000000..785bd9bca --- /dev/null +++ b/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'); + }); +}); diff --git a/test/vitest/__tests__/components/common/VnSelectProvince.spec.js b/test/vitest/__tests__/components/common/VnSelectProvince.spec.js new file mode 100644 index 000000000..7d708a074 --- /dev/null +++ b/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: '
', + }, +})); + +vi.mock('components/common/VnSelectDialog.vue', () => ({ + default: { + name: 'VnSelectDialog', + template: '
', + }, +})); + +vi.mock('./CreateNewProvinceForm.vue', () => ({ + default: { + name: 'CreateNewProvinceForm', + template: '
', + }, +})); + +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); + }); +});