diff --git a/packages/_vue3-migration-test/.eslintrc.js b/packages/_vue3-migration-test/.eslintrc.js index 8c04822bcb..067d170b77 100644 --- a/packages/_vue3-migration-test/.eslintrc.js +++ b/packages/_vue3-migration-test/.eslintrc.js @@ -3,5 +3,8 @@ module.exports = { parserOptions: { tsconfigRootDir: __dirname, project: 'tsconfig.eslint.json' + }, + rules: { + 'max-len': 'off' } }; diff --git a/packages/_vue3-migration-test/src/components/column-picker/test-base-column-picker-dropdown.vue b/packages/_vue3-migration-test/src/components/column-picker/test-base-column-picker-dropdown.vue new file mode 100644 index 0000000000..a581f73958 --- /dev/null +++ b/packages/_vue3-migration-test/src/components/column-picker/test-base-column-picker-dropdown.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/_vue3-migration-test/src/components/column-picker/test-base-column-picker-list.vue b/packages/_vue3-migration-test/src/components/column-picker/test-base-column-picker-list.vue new file mode 100644 index 0000000000..11fa87ff4d --- /dev/null +++ b/packages/_vue3-migration-test/src/components/column-picker/test-base-column-picker-list.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts index 6963ae0ed9..f07a2bc521 100644 --- a/packages/_vue3-migration-test/src/components/index.ts +++ b/packages/_vue3-migration-test/src/components/index.ts @@ -1,3 +1,5 @@ export * from './animations'; +export { default as TestBaseColumnPickerDropdown } from './column-picker/test-base-column-picker-dropdown.vue'; +export { default as TestBaseColumnPickerList } from './column-picker/test-base-column-picker-list.vue'; export { default as TestBaseDropdown } from './test-base-dropdown.vue'; export { default as TestBaseEventButton } from './test-base-event-button.vue'; diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts index 2313659330..436788fafc 100644 --- a/packages/_vue3-migration-test/src/router.ts +++ b/packages/_vue3-migration-test/src/router.ts @@ -1,12 +1,14 @@ import { createRouter, createWebHistory } from 'vue-router'; import { TestAnimateWidth, + TestBaseColumnPickerList, TestBaseDropdown, TestBaseEventButton, TestFade, TestSortDropdown, TestSortList, - TestSortPickerList + TestSortPickerList, + TestBaseColumnPickerDropdown } from './'; const routes = [ @@ -30,6 +32,16 @@ const routes = [ name: 'BaseEventButton', component: TestBaseEventButton }, + { + path: '/base-column-picker-dropdown', + name: 'BaseColumnPickerDropdown', + component: TestBaseColumnPickerDropdown + }, + { + path: '/base-column-picker-list', + name: 'BaseColumnPickerList', + component: TestBaseColumnPickerList + }, { path: '/sort-dropdown', name: 'SortDropdown', diff --git a/packages/x-components/jest.config.js b/packages/x-components/jest.config.js index 633ce01c6a..ceb4f32f37 100644 --- a/packages/x-components/jest.config.js +++ b/packages/x-components/jest.config.js @@ -1,7 +1,7 @@ module.exports = { preset: 'ts-jest', transform: { - '^.+\\.vue$': require.resolve('./vue-preprocessor'), + '^.+\\.vue$': '@vue/vue2-jest', '^.+\\.scss$': 'jest-scss-transform' }, testMatch: ['/src/**/*.spec.ts'], diff --git a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts index 4c08e7863a..9333b07a2e 100644 --- a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts +++ b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts @@ -1,176 +1,160 @@ -import { mount, Wrapper } from '@vue/test-utils'; -import Vue from 'vue'; +import { mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils'; +import { XPlugin } from '../../../plugins/x-plugin'; import BaseColumnPickerDropdown from '../base-column-picker-dropdown.vue'; -function renderBaseColumnPickerDropdownComponent({ +function render({ selectedColumns, - columns, + columns = [2, 4, 6], template = ` - + - - ` -}: BaseColumnPickerDropdownRenderOptions = {}): BaseColumnPickerDropdownComponentAPI { + ` +}: { selectedColumns?: number; columns?: number[]; template?: string } = {}) { const [, localVue] = installNewXPlugin(); - const wrapper = mountComponent(); - - const componentWrapper = wrapper.findComponent(BaseColumnPickerDropdown); - const toggleWrapper = componentWrapper.find(getDataTestSelector('dropdown-toggle')); - - function mountComponent(options: { selectedColumns?: number } = {}): Wrapper { - return mount( + const mountComponent = (options: { selectedColumns?: number } = {}) => + mount( { - components: { - BaseColumnPickerDropdown - }, - data() { - return { selectedColumns: options.selectedColumns ?? selectedColumns }; - }, - props: ['columns'], - template + components: { BaseColumnPickerDropdown }, + template, + data: () => ({ + columns, + selectedColumns: options.selectedColumns ?? selectedColumns + }) }, { - propsData: { - columns - }, + propsData: { columns }, localVue } ); - } - function toggleDropdown(): Promise { - componentWrapper.find(getDataTestSelector('dropdown-toggle')).trigger('click'); - return localVue.nextTick(); - } + const columnPickerDropdownWrapper = mountComponent(); + const wrapper = columnPickerDropdownWrapper.findComponent(BaseColumnPickerDropdown); + const toggleWrapper = wrapper.find(getDataTestSelector('dropdown-toggle')); + const toggleDropdown = async () => await toggleWrapper.trigger('click'); return { wrapper, - componentWrapper, toggleWrapper, - mountComponent, + mountComponent: async (options: { selectedColumns?: number } = {}) => { + const component = mountComponent(options); + await nextTick(); + return component; + }, toggleDropdown, - async setWrapperSelectedColumns(column: number): Promise { + setWrapperSelectedColumns: async (column: number) => { await wrapper.setData({ selectedColumns: column }); - await localVue.nextTick(); + await nextTick(); }, - async clickNthItem(nth: number): Promise { + clickNthItem: async (nth: number) => { await toggleDropdown(); - await componentWrapper.findAll(getDataTestSelector('dropdown-item')).at(nth).trigger('click'); + await wrapper.findAll(getDataTestSelector('dropdown-item')).at(nth).trigger('click'); + await nextTick(); } - }; + } as const; } -describe('testing BaseColumnPickerDropdown', () => { +describe('testing BaseColumnPickerDropdown component', () => { it('emits ColumnsNumberProvided event with the column number on init', () => { - const columns = [1, 3, 6]; - const index = 1; - const value = columns[index]; - const { wrapper } = renderBaseColumnPickerDropdownComponent({ - columns, - template: `` - }); + render(); + const listenerColumnPicker = jest.fn(); - wrapper.vm.$x.on('ColumnsNumberProvided', true).subscribe(listenerColumnPicker); + XPlugin.bus.on('ColumnsNumberProvided', true).subscribe(listenerColumnPicker); + expect(listenerColumnPicker).toHaveBeenCalledTimes(1); expect(listenerColumnPicker).toHaveBeenNthCalledWith(1, { - eventPayload: 3, + eventPayload: 2, metadata: { moduleName: null, - location: undefined, + location: 'none', replaceable: true } }); }); it('sets value prop as initial selectedColumns', () => { - const { toggleWrapper } = renderBaseColumnPickerDropdownComponent({ - selectedColumns: 4, - columns: [2, 4, 6] - }); - expect(toggleWrapper.text()).toBe('4'); + const { toggleWrapper } = render({ selectedColumns: 4 }); + + expect(toggleWrapper.text()).toEqual('4'); }); it('sets first columns item as initial selectedColumns if no value is provided', () => { - const { toggleWrapper } = renderBaseColumnPickerDropdownComponent({ - selectedColumns: undefined, - columns: [2, 4, 6] - }); - expect(toggleWrapper.text()).toBe('2'); + const { toggleWrapper } = render(); + + expect(toggleWrapper.text()).toEqual('2'); }); - // eslint-disable-next-line max-len it('sets selectedColumns and emits "ColumnsNumberProvided" X Event with the column as payload on value change', async () => { - const { wrapper, toggleWrapper, setWrapperSelectedColumns } = - renderBaseColumnPickerDropdownComponent({ - selectedColumns: undefined, - columns: [2, 4, 6] - }); + const { toggleWrapper, setWrapperSelectedColumns } = render(); const listener = jest.fn(); - wrapper.vm.$x.on('ColumnsNumberProvided').subscribe(listener); - expect(toggleWrapper.text()).toBe('2'); + XPlugin.bus.on('ColumnsNumberProvided').subscribe(listener); + + expect(toggleWrapper.text()).toEqual('2'); expect(listener).toHaveBeenCalledTimes(1); expect(listener).toHaveBeenNthCalledWith(1, 2); await setWrapperSelectedColumns(4); + expect(listener).toHaveBeenCalledTimes(2); expect(listener).toHaveBeenNthCalledWith(2, 4); - expect(toggleWrapper.text()).toBe('4'); + expect(toggleWrapper.text()).toEqual('4'); }); - // eslint-disable-next-line max-len - it('sets selectedColumns and emits "change" event with the payload of "UserClickedColumnPicker" X Event received', async () => { - const { wrapper, componentWrapper, toggleWrapper } = renderBaseColumnPickerDropdownComponent({ - selectedColumns: 2, - columns: [2, 4, 6] - }); - wrapper.vm.$x.emit('ColumnsNumberProvided', 4); - await wrapper.vm.$nextTick(); - expect(componentWrapper.emitted('change')).toEqual([[4]]); - expect(toggleWrapper.text()).toBe('4'); + it('sets selectedColumns and emits "update:modelValue" event with the payload of "UserClickedColumnPicker" X Event received', async () => { + const { wrapper, toggleWrapper } = render(); + + await XPlugin.bus.emit('ColumnsNumberProvided', 4); + await nextTick(); + + expect(wrapper.emitted('update:modelValue')).toEqual([[4]]); + expect(toggleWrapper.text()).toEqual('4'); }); - // eslint-disable-next-line max-len it('emits "UserClickedColumnPicker" when clicking a item dropdown, changing its own selectedColumns value', async () => { - const { clickNthItem, toggleWrapper, wrapper } = renderBaseColumnPickerDropdownComponent({ - selectedColumns: 2, - columns: [2, 4, 6] - }); + const { clickNthItem, toggleWrapper } = render(); + const listener = jest.fn(); - wrapper.vm.$x.on('UserClickedColumnPicker').subscribe(listener); + XPlugin.bus.on('UserClickedColumnPicker').subscribe(listener); - expect(toggleWrapper.text()).toBe('2'); + expect(toggleWrapper.text()).toEqual('2'); await clickNthItem(2); - expect(toggleWrapper.text()).toBe('6'); - + expect(toggleWrapper.text()).toEqual('6'); expect(listener).toHaveBeenNthCalledWith(1, 6); expect(listener).toHaveBeenCalledTimes(1); }); it('provides slots to customize the toggle button and the items', async () => { - const { wrapper, toggleWrapper, toggleDropdown } = renderBaseColumnPickerDropdownComponent({ + const { wrapper, toggleWrapper, toggleDropdown } = render({ template: ` - - - - - `, - selectedColumns: 2, - columns: [2, 4, 6] + + + + + `, + selectedColumns: 2 }); expect(toggleWrapper.text()).toEqual('Selected: 2'); @@ -179,93 +163,57 @@ describe('testing BaseColumnPickerDropdown', () => { const itemWrapperArray = wrapper.findAll(getDataTestSelector('dropdown-item')); - expect(itemWrapperArray.at(0).text()).toBe('🟢 ✅ 2'); - expect(itemWrapperArray.at(1).text()).toBe('4'); - expect(itemWrapperArray.at(2).text()).toBe('6'); + expect(itemWrapperArray.at(0).text()).toEqual('🟢 ✅ 2'); + expect(itemWrapperArray.at(1).text()).toEqual('4'); + expect(itemWrapperArray.at(2).text()).toEqual('6'); }); it('renders the item slot as toggle when its slot is not defined', () => { - const { toggleWrapper } = renderBaseColumnPickerDropdownComponent({ + const { toggleWrapper } = render({ template: ` - - - - `, - selectedColumns: 2, - columns: [2, 4, 6] + + + + ` }); - expect(toggleWrapper.text()).toBe('2'); + + expect(toggleWrapper.text()).toEqual('2'); }); it('updates selected value on fresh mounts correctly', async () => { - const { wrapper, mountComponent, clickNthItem, setWrapperSelectedColumns } = - renderBaseColumnPickerDropdownComponent({ columns: [4, 6, 0] }); + const { wrapper, mountComponent, clickNthItem, setWrapperSelectedColumns } = render({ + columns: [4, 6, 0] + }); + const wrappers = [wrapper]; - expect(wrapper.text().slice(0, 1)).toBe('4'); + expect(wrapper.text().slice(0, 1)).toEqual('4'); // Mounting another component does not change selected value - const wrapper2 = mountComponent(); - await wrapper.vm.$nextTick(); - expect(wrapper.text().slice(0, 1)).toBe('4'); - expect(wrapper2.text().slice(0, 1)).toBe('4'); + wrappers.push(await mountComponent()); + wrappers.forEach(wrapper => expect(wrapper.text().slice(0, 1)).toEqual('4')); // Clicking the first item updates the selected value in both items await clickNthItem(1); - await wrapper.vm.$nextTick(); - expect(wrapper.text().slice(0, 1)).toBe('6'); - expect(wrapper2.text().slice(0, 1)).toBe('6'); + await nextTick(); + wrappers.forEach(wrapper => expect(wrapper.text().slice(0, 1)).toEqual('6')); // Mounting a new component receives the updated selected value - const wrapper3 = mountComponent(); - await wrapper.vm.$nextTick(); - expect(wrapper.text().slice(0, 1)).toBe('6'); - expect(wrapper2.text().slice(0, 1)).toBe('6'); - expect(wrapper3.text().slice(0, 1)).toBe('6'); + wrappers.push(await mountComponent()); + wrappers.forEach(wrapper => expect(wrapper.text().slice(0, 1)).toEqual('6')); // Changing the value using v-model in one components updates all of them await setWrapperSelectedColumns(0); - const wrapper4 = mountComponent(); - await wrapper.vm.$nextTick(); - expect(wrapper.text().slice(0, 1)).toBe('0'); - expect(wrapper2.text().slice(0, 1)).toBe('0'); - expect(wrapper3.text().slice(0, 1)).toBe('0'); - expect(wrapper4.text().slice(0, 1)).toBe('0'); + wrappers.push(await mountComponent()); + wrappers.forEach(wrapper => expect(wrapper.text().slice(0, 1)).toEqual('0')); // New component instances initial value is ignored - const wrapper5 = mountComponent({ selectedColumns: 6 }); - await wrapper.vm.$nextTick(); - expect(wrapper.text().slice(0, 1)).toBe('0'); - expect(wrapper2.text().slice(0, 1)).toBe('0'); - expect(wrapper3.text().slice(0, 1)).toBe('0'); - expect(wrapper4.text().slice(0, 1)).toBe('0'); - expect(wrapper5.text().slice(0, 1)).toBe('0'); + wrappers.push(await mountComponent()); + wrappers.forEach(wrapper => expect(wrapper.text().slice(0, 1)).toEqual('0')); }); }); - -interface BaseColumnPickerDropdownRenderOptions { - /** The number of columns to be rendered. */ - columns?: number[]; - /** The selected column value. */ - selectedColumns?: number | null; - /** The template to be rendered. */ - template?: string; -} - -interface BaseColumnPickerDropdownComponentAPI { - /** The wrapper of the container element.*/ - wrapper: Wrapper; - /** The wrapper of the component. */ - componentWrapper: Wrapper; - /** The wrapper of the toggle. */ - toggleWrapper: Wrapper; - /** Mounts a new component. */ - mountComponent: (options?: { selectedColumns?: number }) => Wrapper; - /** Toggles dropdown. */ - toggleDropdown: () => Promise; - /** Changes parent wrapper selected columns to simulate v-model change. */ - setWrapperSelectedColumns: (column: number) => Promise; - /** Clicks nth item. */ - clickNthItem: (item: number) => Promise; -} diff --git a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts index dcb1fcef2a..9c852c1936 100644 --- a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts +++ b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts @@ -1,39 +1,42 @@ import { mount, Wrapper } from '@vue/test-utils'; -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils'; +import { XPlugin } from '../../../plugins/x-plugin'; import BaseColumnPickerList from '../base-column-picker-list.vue'; -function renderBaseColumnPickerListComponent({ - columns, +function render({ selectedColumns, + columns, buttonClass, customItemSlot = ` `, template = ` - + ${customItemSlot ?? ''} ` -}: BaseColumnPickerListRenderOptions = {}): BaseColumnPickerListComponentAPI { +}: BaseColumnPickerListRenderOptions = {}) { const [, localVue] = installNewXPlugin(); - function mountComponent(options: { selectedColumns?: number } = {}): Wrapper { + function mountComponent(options: { selectedColumns?: number } = {}) { return mount( { - components: { - BaseColumnPickerList - }, + components: { BaseColumnPickerList }, template, - data() { - return { selectedColumns: options.selectedColumns ?? selectedColumns }; - } - }, - { - propsData: { + data: () => ({ columns, + selectedColumns: options.selectedColumns ?? selectedColumns, buttonClass - }, + }) + }, + { + propsData: { columns, buttonClass }, localVue } ); @@ -44,36 +47,36 @@ function renderBaseColumnPickerListComponent({ return { wrapper, - mountComponent, - async clickNthItem(nth: number) { - await wrapper.findAll(getDataTestSelector('column-picker-button')).at(nth).trigger('click'); + mountComponent: async (options: { selectedColumns?: number } = {}) => { + const component = mountComponent(options); + await nextTick(); + return component; }, - async setWrapperSelectedColumns(column: number): Promise { - await wrapper.setData({ selectedColumns: column }); + setWrapperSelectedColumns: async (column: number) => { + await columnPickerListWrapper.setData({ selectedColumns: column }); + await nextTick(); }, - getSelectedItem() { - return wrapper.find('[aria-pressed=true]'); - } - }; + clickNthItem: async (nth: number) => { + await wrapper.findAll(getDataTestSelector('column-picker-button')).at(nth).trigger('click'); + await nextTick(); + }, + getSelectedItem: () => wrapper.find('[aria-pressed=true]') + } as const; } -describe('testing Base Column Picker List', () => { +describe('testing BaseColumnPickerList component', () => { it('emits ColumnsNumberProvided event with the column number on init', () => { - const columns = [1, 3, 6]; - const index = 1; - const value = columns[index]; - const { wrapper } = renderBaseColumnPickerListComponent({ - columns, - template: `` - }); + render({ columns: [1, 3, 6] }); + const listenerColumnPicker = jest.fn(); - wrapper.vm.$x.on('ColumnsNumberProvided', true).subscribe(listenerColumnPicker); + XPlugin.bus.on('ColumnsNumberProvided', true).subscribe(listenerColumnPicker); + expect(listenerColumnPicker).toHaveBeenCalledTimes(1); expect(listenerColumnPicker).toHaveBeenNthCalledWith(1, { - eventPayload: 3, + eventPayload: 1, metadata: { moduleName: null, - location: undefined, + location: 'none', replaceable: true } }); @@ -82,15 +85,16 @@ describe('testing Base Column Picker List', () => { it('emits XEvents & a Vue event when the user selects a value', async () => { const columns = [1, 3, 6]; const index = 1; - const { wrapper, clickNthItem } = renderBaseColumnPickerListComponent({ columns }); + const { wrapper, clickNthItem } = render({ columns }); + const userClickedColumnPickerListener = jest.fn(); const columnsNumberProvidedListener = jest.fn(); - wrapper.vm.$x.on('UserClickedColumnPicker', true).subscribe(userClickedColumnPickerListener); - wrapper.vm.$x.on('ColumnsNumberProvided', true).subscribe(columnsNumberProvidedListener); + XPlugin.bus.on('UserClickedColumnPicker', true).subscribe(userClickedColumnPickerListener); + XPlugin.bus.on('ColumnsNumberProvided', true).subscribe(columnsNumberProvidedListener); await clickNthItem(index); - expect(wrapper.emitted('change')).toEqual([[columns[index]]]); + expect(wrapper.emitted('update:modelValue')).toEqual([[columns[index]]]); expect(userClickedColumnPickerListener).toHaveBeenCalledTimes(1); expect(userClickedColumnPickerListener).toHaveBeenNthCalledWith(1, { eventPayload: columns[index], @@ -101,6 +105,7 @@ describe('testing Base Column Picker List', () => { replaceable: true } }); + /* 1st event is to sync the initial value * 2nd event is the clicked one * 3rd one is to sync the prop value */ @@ -118,8 +123,9 @@ describe('testing Base Column Picker List', () => { it('allows configuring the number of columns and updates the css class accordingly', () => { const columns = [1, 3, 6]; - const { wrapper } = renderBaseColumnPickerListComponent({ columns }); + const { wrapper } = render({ columns }); const columnPickerListWrapper = wrapper.findAll(getDataTestSelector('column-picker-button')); + columns.forEach((column, index) => { expect(columnPickerListWrapper.at(index).classes()).toContain( `x-column-picker-list__button--${column}-cols` @@ -133,11 +139,9 @@ describe('testing Base Column Picker List', () => { `; - const { wrapper } = renderBaseColumnPickerListComponent({ - columns, - customItemSlot - }); + const { wrapper } = render({ columns, customItemSlot }); const columnsSlots = wrapper.findAll(getDataTestSelector('custom-column-slot')); + expect(columnsSlots).toHaveLength(columns.length); columns.forEach((column, index) => { expect(columnsSlots.at(index).text()).toEqual(column.toString()); @@ -146,9 +150,7 @@ describe('testing Base Column Picker List', () => { it('by default there are no divider elements between column picker buttons', () => { const columns = [1, 3, 6]; - const { wrapper } = renderBaseColumnPickerListComponent({ - columns - }); + const { wrapper } = render({ columns }); const rootChildren = wrapper.element.children; expect(rootChildren).toHaveLength(columns.length); @@ -164,69 +166,46 @@ describe('testing Base Column Picker List', () => { - `; - const { wrapper } = renderBaseColumnPickerListComponent({ - columns, - customItemSlot - }); + const { wrapper } = render({ columns, customItemSlot }); const dividerSlots = wrapper.findAll(getDataTestSelector('custom-divider-slot')); expect(dividerSlots).toHaveLength(columns.length - 1); - - dividerSlots.wrappers.forEach(dividerWrapper => { - const nextSibling = dividerWrapper.element.nextSibling! as HTMLElement; - expect(nextSibling.getAttribute('data-test')).toBe('column-picker-button'); - }); }); it('updates selected value on fresh mounts correctly', async () => { const getSelectedItem = (wrapper: Wrapper): string => wrapper.get('[aria-pressed=true]').text(); - const { wrapper, mountComponent, clickNthItem, setWrapperSelectedColumns } = - renderBaseColumnPickerListComponent({ - columns: [4, 6, 0] - }); + const { wrapper, mountComponent, clickNthItem, setWrapperSelectedColumns } = render({ + columns: [4, 6, 0] + }); + const wrappers = [wrapper]; - expect(getSelectedItem(wrapper)).toBe('4'); + expect(wrapper.text().slice(0, 1)).toEqual('4'); // Mounting another component does not change selected value - const wrapper2 = mountComponent(); - await wrapper.vm.$nextTick(); - expect(getSelectedItem(wrapper)).toBe('4'); - expect(getSelectedItem(wrapper2)).toBe('4'); + wrappers.push(await mountComponent()); + wrappers.forEach(wrapper => expect(getSelectedItem(wrapper)).toEqual('4')); + // Clicking the first item updates the selected value in both items await clickNthItem(1); - await wrapper.vm.$nextTick(); - expect(getSelectedItem(wrapper)).toBe('6'); - expect(getSelectedItem(wrapper2)).toBe('6'); + wrappers.forEach(wrapper => expect(getSelectedItem(wrapper)).toEqual('6')); // Mounting a new component receives the updated selected value - const wrapper3 = mountComponent(); - await wrapper.vm.$nextTick(); - expect(getSelectedItem(wrapper)).toBe('6'); - expect(getSelectedItem(wrapper2)).toBe('6'); - expect(getSelectedItem(wrapper3)).toBe('6'); + wrappers.push(await mountComponent()); + wrappers.forEach(wrapper => expect(getSelectedItem(wrapper)).toEqual('6')); // Changing the value using v-model in one components updates all of them await setWrapperSelectedColumns(0); - await wrapper.vm.$nextTick(); - const wrapper4 = mountComponent(); - expect(getSelectedItem(wrapper)).toBe('0'); - expect(getSelectedItem(wrapper2)).toBe('0'); - expect(getSelectedItem(wrapper3)).toBe('0'); - expect(getSelectedItem(wrapper4)).toBe('0'); + wrappers.push(await mountComponent()); + wrappers.forEach(wrapper => expect(getSelectedItem(wrapper)).toEqual('0')); // New component instances initial value is ignored - const wrapper5 = mountComponent({ selectedColumns: 6 }); - await wrapper.vm.$nextTick(); - expect(getSelectedItem(wrapper)).toBe('0'); - expect(getSelectedItem(wrapper2)).toBe('0'); - expect(getSelectedItem(wrapper3)).toBe('0'); - expect(getSelectedItem(wrapper4)).toBe('0'); - expect(getSelectedItem(wrapper5)).toBe('0'); + wrappers.push(await mountComponent()); + wrappers.forEach(wrapper => expect(getSelectedItem(wrapper)).toEqual('0')); }); it('allows adding CSS class to the buttons', () => { - const { wrapper } = renderBaseColumnPickerListComponent({ + const { wrapper } = render({ columns: [1, 3, 6], buttonClass: 'custom-class' }); @@ -249,16 +228,3 @@ interface BaseColumnPickerListRenderOptions { /** The template to be rendered. */ template?: string; } - -interface BaseColumnPickerListComponentAPI { - /** Clicks the event button and waits for the view to update. */ - clickNthItem: (index: number) => Promise; - /** Gets the selected item. */ - getSelectedItem: () => Wrapper; - /** Mounts a new component. */ - mountComponent: (options?: { selectedColumns?: number }) => Wrapper; - /** Changes parent wrapper selected column to simulate v-model change. */ - setWrapperSelectedColumns: (column: number) => Promise; - /** The wrapper of the container element.*/ - wrapper: Wrapper; -} diff --git a/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue b/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue index fc17a32f56..662312df60 100644 --- a/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue +++ b/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue @@ -1,12 +1,12 @@