diff --git a/src/components/TabulatorComponent.vue b/src/components/TabulatorComponent.vue index 5e3bb2c..7b36f81 100644 --- a/src/components/TabulatorComponent.vue +++ b/src/components/TabulatorComponent.vue @@ -55,7 +55,7 @@ export default class TabulatorComponent extends Vue { @Watch('options', { deep: true }) private updateOptions() { this.resolvedOptions = { - ...mergeWith(this.eventOptions, this.options, merge), + ...mergeWith({}, this.eventOptions, this.options, merge), data: this.tableData, }; diff --git a/tests/unit/TabulatorComponent-IntegrationModule.spec.ts b/tests/unit/TabulatorComponent-IntegrationModule.spec.ts index d59b6ab..946826a 100644 --- a/tests/unit/TabulatorComponent-IntegrationModule.spec.ts +++ b/tests/unit/TabulatorComponent-IntegrationModule.spec.ts @@ -1,6 +1,7 @@ import { shallowMount, mount } from '@vue/test-utils'; import TabulatorComponent from '@/components/TabulatorComponent.vue'; import { UpdateStrategy } from '@/types'; +import Vue from 'vue'; const mockSetData = jest.fn(); const mockReplaceData = jest.fn(); @@ -35,7 +36,7 @@ describe('TabulatorComponent.vue | Integration Module', () => { }); describe('Watchers', () => { - test('update the v-model should use UpdateStrategy.DATA for default', () => { + test('update the v-model should use UpdateStrategy.DATA for default', async () => { const wrapper = mount(TabulatorComponent, { propsData: { options, @@ -47,10 +48,11 @@ describe('TabulatorComponent.vue | Integration Module', () => { tableData: [], }); + await Vue.nextTick(); expect(mockSetData).toHaveBeenCalled(); }); - test('update the v-model should use UpdateStrategy.REPLACE', () => { + test('update the v-model should use UpdateStrategy.REPLACE', async () => { const wrapper = mount(TabulatorComponent, { propsData: { tableData: [{ name: 'Pi' }], @@ -66,11 +68,12 @@ describe('TabulatorComponent.vue | Integration Module', () => { tableData: [], }); + await Vue.nextTick(); expect(mockSetData).not.toHaveBeenCalled(); expect(mockReplaceData).toHaveBeenCalled(); }); - test('update de v-model should use UpdateStrategy.UPDATE', () => { + test('update de v-model should use UpdateStrategy.UPDATE', async () => { const wrapper = mount(TabulatorComponent, { propsData: { tableData: [{ id: 1, name: 'Someone to update' }], @@ -85,6 +88,7 @@ describe('TabulatorComponent.vue | Integration Module', () => { tableData: [{ id: 1, name: 'Someone updated' }], }); + await Vue.nextTick(); expect(mockSetData).not.toHaveBeenCalled(); expect(mockReplaceData).not.toHaveBeenCalled(); expect(mockUpdateData).toHaveBeenCalled(); diff --git a/tests/unit/TabulatorComponent.spec.ts b/tests/unit/TabulatorComponent.spec.ts index 0fd73fb..ad38b7a 100644 --- a/tests/unit/TabulatorComponent.spec.ts +++ b/tests/unit/TabulatorComponent.spec.ts @@ -1,5 +1,6 @@ import { shallowMount, mount } from '@vue/test-utils'; import TabulatorComponent from '@/components/TabulatorComponent.vue'; +import Vue from 'vue'; import { getInstance } from './helpers'; describe('TabulatorComponent.vue', () => { @@ -29,7 +30,7 @@ describe('TabulatorComponent.vue', () => { }); }); describe('Watchers', () => { - test('update the config should recreate the table', () => { + test('update the config should recreate the table', async () => { const options : Tabulator.Options = { columns: [ { @@ -60,11 +61,56 @@ describe('TabulatorComponent.vue', () => { ], }, }); + await Vue.nextTick(); const currentInstance = getInstance(wrapper); expect(oldInstance).not.toBe(currentInstance); }); + test('update the config should remove the old column the table', async () => { + const columns : Tabulator.ColumnDefinition[] = [ + { + title: 'Name', + field: 'name', + sorter: 'string', + width: 200, + editor: true, + }, + { + title: 'Age', + field: 'age', + sorter: 'string', + width: 200, + editor: true, + }, + ]; + const options : Tabulator.Options = { + columns, + }; + + const wrapper = mount(TabulatorComponent, { + propsData: { + options, + }, + }); + + + const oldInstance = getInstance(wrapper); + wrapper.setProps({ + options: { + columns: [columns[0]], + }, + }); + await Vue.nextTick(); + const currentInstance = getInstance(wrapper); + + + expect(oldInstance.getColumns()).not.toBe(currentInstance.getColumns()); + + expect(currentInstance.getColumns().length).toBe(1); + expect(currentInstance.getColumns()[0].getDefinition().title).toBe('Name'); + }); + test('update the v-model not should recreate the table', () => { const options : Tabulator.Options = { columns: [ diff --git a/tests/unit/__snapshots__/TabulatorComponent.spec.ts.snap b/tests/unit/__snapshots__/TabulatorComponent.spec.ts.snap index 24caf59..7e9e157 100644 --- a/tests/unit/__snapshots__/TabulatorComponent.spec.ts.snap +++ b/tests/unit/__snapshots__/TabulatorComponent.spec.ts.snap @@ -15,7 +15,7 @@ exports[`TabulatorComponent.vue Init table renders correct based in the options
-
+