diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue index c656fcb2f..26b79b1bc 100644 --- a/src/components/CreateNewPostcodeForm.vue +++ b/src/components/CreateNewPostcodeForm.vue @@ -55,13 +55,6 @@ async function setCountry(countryFk, data) { } // Province - -async function handleProvinces(data) { - provincesOptions.value = data; - if (postcodeFormData.countryFk) { - await fetchTowns(); - } -} async function setProvince(id, data) { if (data.provinceFk === id) return; const newProvince = provincesOptions.value.find((province) => province.id == id); diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue index 7fdb54bc4..940b72ff0 100644 --- a/src/components/CrudModel.vue +++ b/src/components/CrudModel.vue @@ -127,7 +127,7 @@ function resetData(data) { originalData.value = JSON.parse(JSON.stringify(data)); formData.value = JSON.parse(JSON.stringify(data)); - if (watchChanges.value) watchChanges.value(); //destoy watcher + if (watchChanges.value) watchChanges.value(); //destroy watcher watchChanges.value = watch(formData, () => (hasChanges.value = true), { deep: true }); } @@ -270,10 +270,8 @@ function getChanges() { function isEmpty(obj) { if (obj == null) return true; - if (obj === undefined) return true; - if (Object.keys(obj).length === 0) return true; - - if (obj.length > 0) return false; + if (Array.isArray(obj)) return !obj.length; + return !Object.keys(obj).length; } async function reload(params) { diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue index c569f2553..ea1ea53f2 100644 --- a/src/components/FormModel.vue +++ b/src/components/FormModel.vue @@ -1,7 +1,7 @@ + diff --git a/src/components/VnTable/__tests__/VnTable.spec.js b/src/components/VnTable/__tests__/VnTable.spec.js index 162df727d..74ba06987 100644 --- a/src/components/VnTable/__tests__/VnTable.spec.js +++ b/src/components/VnTable/__tests__/VnTable.spec.js @@ -1,4 +1,4 @@ -import { describe, expect, it, beforeAll, beforeEach } from 'vitest'; +import { describe, expect, it, beforeAll, beforeEach, vi } from 'vitest'; import { createWrapper } from 'app/test/vitest/helper'; import VnTable from 'src/components/VnTable/VnTable.vue'; @@ -13,6 +13,15 @@ describe('VnTable', () => { }, }); vm = wrapper.vm; + + vi.mock('src/composables/useFilterParams', () => { + return { + useFilterParams: vi.fn(() => ({ + params: {}, + orders: {}, + })), + }; + }); }); beforeEach(() => (vm.selected = [])); diff --git a/src/components/__tests__/CrudModel.spec.js b/src/components/__tests__/CrudModel.spec.js index 6ce93e59c..e0afd30ad 100644 --- a/src/components/__tests__/CrudModel.spec.js +++ b/src/components/__tests__/CrudModel.spec.js @@ -1,11 +1,13 @@ -import { createWrapper } from 'app/test/vitest/helper'; +import { createWrapper, axios } from 'app/test/vitest/helper'; import CrudModel from 'components/CrudModel.vue'; import { vi, afterEach, beforeEach, beforeAll, describe, expect, it } from 'vitest'; describe('CrudModel', () => { + let wrapper; let vm; + let data; beforeAll(() => { - vm = createWrapper(CrudModel, { + wrapper = createWrapper(CrudModel, { global: { stubs: [ 'vnPaginate', @@ -25,12 +27,16 @@ describe('CrudModel', () => { dataKey: 'crudModelKey', model: 'crudModel', url: 'crudModelUrl', + saveFn: '', }, - }).vm; + }); + wrapper=wrapper.wrapper; + vm=wrapper.vm; }); beforeEach(() => { vm.fetch([]); + vm.watchChanges = null; }); afterEach(() => { @@ -117,4 +123,126 @@ describe('CrudModel', () => { }); }); }); + + describe('isEmpty()', () => { + let dummyObj; + let dummyArray; + let result; + it('should return true if object si null', async () => { + dummyObj = null; + result = vm.isEmpty(dummyObj); + + expect(result).toBe(true); + }); + + it('should return true if object si undefined', async () => { + dummyObj = undefined; + result = vm.isEmpty(dummyObj); + + expect(result).toBe(true); + }); + + it('should return true if object is empty', async () => { + dummyObj ={}; + result = vm.isEmpty(dummyObj); + + expect(result).toBe(true); + }); + + it('should return false if object is not empty', async () => { + dummyObj = {a:1, b:2, c:3}; + result = vm.isEmpty(dummyObj); + + expect(result).toBe(false); + }); + + it('should return true if array is empty', async () => { + dummyArray = []; + result = vm.isEmpty(dummyArray); + + expect(result).toBe(true); + }); + + it('should return false if array is not empty', async () => { + dummyArray = [1,2,3]; + result = vm.isEmpty(dummyArray); + + expect(result).toBe(false); + }) + }); + + describe('resetData()', () => { + it('should add $index to elements in data[] and sets originalData and formData with data', async () => { + data = [{ + name: 'Tony', + lastName: 'Stark', + age: 42, + }]; + + vm.resetData(data); + + expect(vm.originalData).toEqual(data); + expect(vm.originalData[0].$index).toEqual(0); + expect(vm.formData).toEqual(data); + expect(vm.formData[0].$index).toEqual(0); + expect(vm.watchChanges).not.toBeNull(); + }); + + it('should dont do nothing if data is null', async () => { + vm.resetData(null); + + expect(vm.watchChanges).toBeNull(); + }); + + it('should set originalData and formatData with data and generate watchChanges', async () => { + data = { + name: 'Tony', + lastName: 'Stark', + age: 42, + }; + + vm.resetData(data); + + expect(vm.originalData).toEqual(data); + expect(vm.formData).toEqual(data); + expect(vm.watchChanges).not.toBeNull(); + }); + }); + + describe('saveChanges()', () => { + data = [{ + name: 'Tony', + lastName: 'Stark', + age: 42, + }]; + + it('should call saveFn if exists', async () => { + await wrapper.setProps({ saveFn: vi.fn() }); + + vm.saveChanges(data); + + expect(vm.saveFn).toHaveBeenCalledOnce(); + expect(vm.isLoading).toBe(false); + expect(vm.hasChanges).toBe(false); + + await wrapper.setProps({ saveFn: '' }); + }); + + it("should use default url if there's not saveFn", async () => { + const postMock =vi.spyOn(axios, 'post'); + + vm.formData = [{ + name: 'Bruce', + lastName: 'Wayne', + age: 45, + }] + + await vm.saveChanges(data); + + expect(postMock).toHaveBeenCalledWith(vm.url + '/crud', data); + expect(vm.isLoading).toBe(false); + expect(vm.hasChanges).toBe(false); + expect(vm.originalData).toEqual(JSON.parse(JSON.stringify(vm.formData))); + }); + }); }); diff --git a/src/components/__tests__/EditTableCellValueForm.spec.js b/src/components/__tests__/EditTableCellValueForm.spec.js new file mode 100644 index 000000000..fa47d8f73 --- /dev/null +++ b/src/components/__tests__/EditTableCellValueForm.spec.js @@ -0,0 +1,56 @@ +import { createWrapper, axios } from 'app/test/vitest/helper'; +import EditForm from 'components/EditTableCellValueForm.vue'; +import { vi, afterEach, beforeAll, describe, expect, it } from 'vitest'; + +const fieldA = 'fieldA'; +const fieldB = 'fieldB'; + +describe('EditForm', () => { + let vm; + const mockRows = [ + { id: 1, itemFk: 101 }, + { id: 2, itemFk: 102 }, + ]; + const mockFieldsOptions = [ + { label: 'Field A', field: fieldA, component: 'input', attrs: {} }, + { label: 'Field B', field: fieldB, component: 'date', attrs: {} }, + ]; + const editUrl = '/api/edit'; + + beforeAll(() => { + vi.spyOn(axios, 'post').mockResolvedValue({ status: 200 }); + vm = createWrapper(EditForm, { + props: { + rows: mockRows, + fieldsOptions: mockFieldsOptions, + editUrl, + }, + }).vm; + }); + + afterEach(() => { + vi.clearAllMocks(); + }); + + describe('onSubmit()', () => { + it('should call axios.post with the correct parameters in the payload', async () => { + const selectedField = { field: fieldA, component: 'input', attrs: {} }; + const newValue = 'Test Value'; + + vm.selectedField = selectedField; + vm.newValue = newValue; + + await vm.onSubmit(); + + const payload = axios.post.mock.calls[0][1]; + + expect(axios.post).toHaveBeenCalledWith(editUrl, expect.any(Object)); + expect(payload.field).toEqual(fieldA); + expect(payload.newValue).toEqual(newValue); + + expect(payload.lines).toEqual(expect.arrayContaining(mockRows)); + + expect(vm.isLoading).toEqual(false); + }); + }); +}); diff --git a/src/components/__tests__/FormModel.spec.js b/src/components/__tests__/FormModel.spec.js new file mode 100644 index 000000000..e35684bc3 --- /dev/null +++ b/src/components/__tests__/FormModel.spec.js @@ -0,0 +1,149 @@ +import { describe, expect, it, beforeAll, vi, afterAll } from 'vitest'; +import { createWrapper, axios } from 'app/test/vitest/helper'; +import FormModel from 'src/components/FormModel.vue'; + +describe('FormModel', () => { + const model = 'mockModel'; + const url = 'mockUrl'; + const formInitialData = { mockKey: 'mockVal' }; + + describe('modelValue', () => { + it('should use the provided model', () => { + const { vm } = mount({ propsData: { model } }); + expect(vm.modelValue).toBe(model); + }); + + it('should use the route meta title when model is not provided', () => { + const { vm } = mount({}); + expect(vm.modelValue).toBe('formModel_mockTitle'); + }); + }); + + describe('onMounted()', () => { + let mockGet; + + beforeAll(() => { + mockGet = vi.spyOn(axios, 'get').mockResolvedValue({ data: {} }); + }); + + afterAll(() => { + mockGet.mockRestore(); + }); + + it('should not fetch when has formInitialData', () => { + mount({ propsData: { url, model, autoLoad: true, formInitialData } }); + expect(mockGet).not.toHaveBeenCalled(); + }); + + it('should fetch when there is url and auto-load', () => { + mount({ propsData: { url, model, autoLoad: true } }); + expect(mockGet).toHaveBeenCalled(); + }); + + it('should not observe changes', () => { + const { vm } = mount({ + propsData: { url, model, observeFormChanges: false, formInitialData }, + }); + + expect(vm.hasChanges).toBe(true); + vm.reset(); + expect(vm.hasChanges).toBe(true); + }); + + it('should observe changes', async () => { + const { vm } = mount({ + propsData: { url, model, formInitialData }, + }); + vm.state.set(model, formInitialData); + expect(vm.hasChanges).toBe(false); + + vm.formData.mockKey = 'newVal'; + await vm.$nextTick(); + expect(vm.hasChanges).toBe(true); + vm.formData.mockKey = 'mockVal'; + }); + }); + + describe('trimData()', () => { + let vm; + beforeAll(() => { + vm = mount({}).vm; + }); + + it('should trim whitespace from string values', () => { + const data = { key1: ' value1 ', key2: ' value2 ' }; + const trimmedData = vm.trimData(data); + expect(trimmedData).toEqual({ key1: 'value1', key2: 'value2' }); + }); + + it('should not modify non-string values', () => { + const data = { key1: 123, key2: true, key3: null, key4: undefined }; + const trimmedData = vm.trimData(data); + expect(trimmedData).toEqual(data); + }); + }); + + describe('save()', async () => { + it('should not call if there are not changes', async () => { + const { vm } = mount({ propsData: { url, model } }); + + await vm.save(); + expect(vm.hasChanges).toBe(false); + }); + + it('should call axios.patch with the right data', async () => { + const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} }); + const { vm } = mount({ propsData: { url, model, formInitialData } }); + vm.formData.mockKey = 'newVal'; + await vm.$nextTick(); + await vm.save(); + expect(spy).toHaveBeenCalled(); + vm.formData.mockKey = 'mockVal'; + }); + + it('should call axios.post with the right data', async () => { + const spy = vi.spyOn(axios, 'post').mockResolvedValue({ data: {} }); + const { vm } = mount({ + propsData: { url, model, formInitialData, urlCreate: 'mockUrlCreate' }, + }); + vm.formData.mockKey = 'newVal'; + await vm.$nextTick(); + await vm.save(); + expect(spy).toHaveBeenCalled(); + vm.formData.mockKey = 'mockVal'; + }); + + it('should use the saveFn', async () => { + const { vm } = mount({ + propsData: { url, model, formInitialData, saveFn: () => {} }, + }); + const spyPatch = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} }); + const spySaveFn = vi.spyOn(vm.$props, 'saveFn'); + + vm.formData.mockKey = 'newVal'; + await vm.$nextTick(); + await vm.save(); + expect(spyPatch).not.toHaveBeenCalled(); + expect(spySaveFn).toHaveBeenCalled(); + vm.formData.mockKey = 'mockVal'; + }); + + it('should reload the data after save', async () => { + const { vm } = mount({ + propsData: { url, model, formInitialData, reload: true }, + }); + vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} }); + + vm.formData.mockKey = 'newVal'; + await vm.$nextTick(); + await vm.save(); + vm.formData.mockKey = 'mockVal'; + }); + }); +}); + +function mount({ propsData = {} }) { + return createWrapper(FormModel, { + propsData, + }); +} diff --git a/src/components/common/VnBreadcrumbs.vue b/src/components/common/VnBreadcrumbs.vue index 02226e497..334ab4d21 100644 --- a/src/components/common/VnBreadcrumbs.vue +++ b/src/components/common/VnBreadcrumbs.vue @@ -15,7 +15,7 @@ let root = ref(null); watchEffect(() => { matched.value = currentRoute.value.matched.filter( - (matched) => Object.keys(matched.meta).length + (matched) => !!matched?.meta?.title || !!matched?.meta?.icon ); breadcrumbs.value.length = 0; if (!matched.value[0]) return; diff --git a/src/components/common/VnCardBeta.vue b/src/components/common/VnCardBeta.vue new file mode 100644 index 000000000..349956be9 --- /dev/null +++ b/src/components/common/VnCardBeta.vue @@ -0,0 +1,67 @@ + + diff --git a/src/components/common/VnDateBadge.vue b/src/components/common/VnDateBadge.vue index fd6c9e8a4..83d39937a 100644 --- a/src/components/common/VnDateBadge.vue +++ b/src/components/common/VnDateBadge.vue @@ -11,9 +11,9 @@ function getBadgeAttrs(date) { let timeDiff = today - timeTicket; - if (timeDiff == 0) return { color: 'warning', 'text-color': 'black' }; - if (timeDiff < 0) return { color: 'success', 'text-color': 'black' }; - return { color: 'transparent', 'text-color': 'white' }; + if (timeDiff == 0) return { color: 'warning', class: 'black-text-color' }; + if (timeDiff < 0) return { color: 'success', class: 'black-text-color' }; + return { color: 'transparent', class: 'normal-text-color' }; } function formatShippedDate(date) { @@ -29,3 +29,11 @@ function formatShippedDate(date) { {{ formatShippedDate(date) }} + diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue index a8840f243..f58222187 100644 --- a/src/components/common/VnLocation.vue +++ b/src/components/common/VnLocation.vue @@ -26,7 +26,7 @@ const locationProperties = [ (obj) => obj.country?.name, ]; -const formatLocation = (obj, properties) => { +const formatLocation = (obj, properties = locationProperties) => { const parts = properties.map((prop) => { if (typeof prop === 'string') { return obj[prop]; diff --git a/src/components/common/VnSectionMain.vue b/src/components/common/VnModule.vue similarity index 52% rename from src/components/common/VnSectionMain.vue rename to src/components/common/VnModule.vue index 15be6ad9a..505b3a8b5 100644 --- a/src/components/common/VnSectionMain.vue +++ b/src/components/common/VnModule.vue @@ -1,8 +1,8 @@