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/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md index beec04a9db..ed6684f43c 100644 --- a/packages/_vue3-migration-test/CHANGELOG.md +++ b/packages/_vue3-migration-test/CHANGELOG.md @@ -3,6 +3,33 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.0-alpha.4](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.3...vue3-migration-test@1.0.0-alpha.4) (2024-05-06) + + +### ⚠ BREAKING CHANGES + +* **ColumnPickerMixin:** `BaseColumnPickerDropdown` component will no longer emit the `change` event, use `update:modelValue` instead. +`BaseColumnPickerDropdown` prop for the selected columns was renamed from `value` to `modelValue`. + +`BaseColumnPickerList` component will no longer emit the `change` event, use `update:modelValue` instead. +`BaseColumnPickerList` prop for the selected columns was renamed from `value` to `modelValue`. + +`ColumnPickerMixin` has been removed. + +### Code Refactoring + +* **ColumnPickerMixin:** get rid of `ColumnPickerMixin` and refactor components which use it (#1461) ([c5b84da](https://github.com/empathyco/x/commit/c5b84da32b75a37d028e91b64220016a2cfb3037)) + + + +## [1.0.0-alpha.3](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.2...vue3-migration-test@1.0.0-alpha.3) (2024-05-03) + +**Note:** Version bump only for package vue3-migration-test + + + + + ## [1.0.0-alpha.2](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.1...vue3-migration-test@1.0.0-alpha.2) (2024-05-01) diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json index fddbafd310..3a69593937 100644 --- a/packages/_vue3-migration-test/package.json +++ b/packages/_vue3-migration-test/package.json @@ -1,7 +1,7 @@ { "name": "vue3-migration-test", "private": "true", - "version": "1.0.0-alpha.2", + "version": "1.0.0-alpha.4", "scripts": { "dev": "vite", "preview": "vite preview", @@ -10,7 +10,7 @@ }, "dependencies": { "@empathyco/x-bus": "^1.0.3-alpha.1", - "@empathyco/x-types": "^10.1.0-alpha.2", + "@empathyco/x-types": "^10.1.0-alpha.3", "@empathyco/x-utils": "^1.0.3-alpha.1", "@vue/compat": "^3.4.22", "@vueuse/core": "~10.7.1", 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 97f6f6a19c..42d0a89bbb 100644 --- a/packages/_vue3-migration-test/src/components/index.ts +++ b/packages/_vue3-migration-test/src/components/index.ts @@ -1,4 +1,6 @@ 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 * from './scroll'; 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 4c25eddfa6..a19f19f3a4 100644 --- a/packages/_vue3-migration-test/src/router.ts +++ b/packages/_vue3-migration-test/src/router.ts @@ -1,13 +1,15 @@ import { createRouter, createWebHistory } from 'vue-router'; import { TestAnimateWidth, + TestBaseColumnPickerList, TestBaseDropdown, TestBaseEventButton, TestFade, TestSortDropdown, TestSortList, TestSortPickerList, - TestScroll + TestScroll, + TestBaseColumnPickerDropdown } from './'; const routes = [ @@ -36,6 +38,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-adapter-platform/CHANGELOG.md b/packages/x-adapter-platform/CHANGELOG.md index 1ca29d3f97..efddb5f2b5 100644 --- a/packages/x-adapter-platform/CHANGELOG.md +++ b/packages/x-adapter-platform/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.1.0-alpha.2](https://github.com/empathyco/x/compare/@empathyco/x-adapter-platform@1.1.0-alpha.1...@empathyco/x-adapter-platform@1.1.0-alpha.2) (2024-05-03) + +**Note:** Version bump only for package @empathyco/x-adapter-platform + + + + + ## [1.1.0-alpha.1](https://github.com/empathyco/x/compare/@empathyco/x-adapter-platform@1.1.0-alpha.0...@empathyco/x-adapter-platform@1.1.0-alpha.1) (2024-02-05) **Note:** Version bump only for package @empathyco/x-adapter-platform diff --git a/packages/x-adapter-platform/package.json b/packages/x-adapter-platform/package.json index 4d888dc18d..bb921df3ca 100644 --- a/packages/x-adapter-platform/package.json +++ b/packages/x-adapter-platform/package.json @@ -1,6 +1,6 @@ { "name": "@empathyco/x-adapter-platform", - "version": "1.1.0-alpha.1", + "version": "1.1.0-alpha.2", "description": "A search client for the Empathy Platform API", "author": "Empathy Systems Corporation S.L.", "license": "Apache-2.0", @@ -41,8 +41,8 @@ "prepublishOnly": "pnpm run build" }, "dependencies": { - "@empathyco/x-adapter": "^8.0.3-alpha.1", - "@empathyco/x-types": "^10.1.0-alpha.2", + "@empathyco/x-adapter": "^8.1.0-alpha.0", + "@empathyco/x-types": "^10.1.0-alpha.3", "@empathyco/x-utils": "^1.0.3-alpha.1", "tslib": "~2.6.0" }, diff --git a/packages/x-adapter/CHANGELOG.md b/packages/x-adapter/CHANGELOG.md index 39a9df5b96..61a3386960 100644 --- a/packages/x-adapter/CHANGELOG.md +++ b/packages/x-adapter/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.1.0-alpha.0](https://github.com/empathyco/x/compare/@empathyco/x-adapter@8.0.3-alpha.1...@empathyco/x-adapter@8.1.0-alpha.0) (2024-05-03) + + +### Features + +* support empty params on adapter's requests (#1459) ([11a2efc](https://github.com/empathyco/x/commit/11a2efc2d0efe5ef7e34f8feb9e1bcc389bf847a)) + + + ## [8.0.3-alpha.1](https://github.com/empathyco/x/compare/@empathyco/x-adapter@8.0.3-alpha.0...@empathyco/x-adapter@8.0.3-alpha.1) (2024-02-05) **Note:** Version bump only for package @empathyco/x-adapter diff --git a/packages/x-adapter/package.json b/packages/x-adapter/package.json index 7f4e3bed2c..3286afe892 100644 --- a/packages/x-adapter/package.json +++ b/packages/x-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@empathyco/x-adapter", - "version": "8.0.3-alpha.1", + "version": "8.1.0-alpha.0", "description": "A utils library to create a client for any API", "author": "Empathy Systems Corporation S.L.", "license": "Apache-2.0", diff --git a/packages/x-adapter/src/http-clients/__tests__/fetch.http-client.spec.ts b/packages/x-adapter/src/http-clients/__tests__/fetch.http-client.spec.ts index 67b7860dbb..bf21b575b0 100644 --- a/packages/x-adapter/src/http-clients/__tests__/fetch.http-client.spec.ts +++ b/packages/x-adapter/src/http-clients/__tests__/fetch.http-client.spec.ts @@ -59,6 +59,20 @@ describe('fetch httpClient testing', () => { expectFetchCallWith(endpoint); }); + it('maps empty values if configured to do so', async () => { + await fetchHttpClient(endpoint, { + sendEmptyParams: true, + parameters: { + q: undefined, + r: '', + s: null, + t: [], + u: {} + } + }); + expectFetchCallWith(`${endpoint}?r=&s=null`); + }); + it('cancels equal endpoint requests if no requestId parameter is passed', async () => { await Promise.all([ expect( @@ -186,6 +200,43 @@ describe('fetch httpClient testing', () => { }) }); }); + + it('sends empty values in the body if configured to do so', async () => { + await fetchHttpClient(endpoint, { + sendParamsInBody: true, + sendEmptyParams: true, + parameters: { + q: 'shirt', + a: undefined, + b: null, + c: '', + d: [], + extraParams: { + lang: 'en', + e: undefined, + f: null, + g: '', + h: [], + i: {} + } + } + }); + expectFetchCallWith(endpoint, { + body: JSON.stringify({ + q: 'shirt', + b: null, + c: '', + d: [], + extraParams: { + lang: 'en', + f: null, + g: '', + h: [], + i: {} + } + }) + }); + }); }); }); diff --git a/packages/x-adapter/src/http-clients/fetch.http-client.ts b/packages/x-adapter/src/http-clients/fetch.http-client.ts index bee015d17a..75ea20dac5 100644 --- a/packages/x-adapter/src/http-clients/fetch.http-client.ts +++ b/packages/x-adapter/src/http-clients/fetch.http-client.ts @@ -14,12 +14,22 @@ import { buildUrl, toJson } from './utils'; */ export const fetchHttpClient: HttpClient = ( endpoint, - { id = endpoint, cancelable = true, parameters = {}, properties, sendParamsInBody = false } = {} + { + id = endpoint, + cancelable = true, + parameters = {}, + properties, + sendParamsInBody = false, + sendEmptyParams = false + } = {} ) => { const signal = cancelable ? { signal: abortAndGetNewAbortSignal(id) } : {}; + if (!sendEmptyParams) { + parameters = cleanEmpty(parameters); + } const flatParameters = flatObject(parameters); - const url = sendParamsInBody ? endpoint : buildUrl(endpoint, cleanEmpty(flatParameters)); - const bodyParameters = sendParamsInBody ? { body: JSON.stringify(cleanEmpty(parameters)) } : {}; + const url = sendParamsInBody ? endpoint : buildUrl(endpoint, flatParameters); + const bodyParameters = sendParamsInBody ? { body: JSON.stringify(parameters) } : {}; return fetch(url, { ...properties, diff --git a/packages/x-adapter/src/http-clients/types.ts b/packages/x-adapter/src/http-clients/types.ts index b578ca8117..b218531dda 100644 --- a/packages/x-adapter/src/http-clients/types.ts +++ b/packages/x-adapter/src/http-clients/types.ts @@ -31,6 +31,10 @@ export interface RequestOptions { * A flag to send parameters in the body if true or in the url QueryString if false. */ sendParamsInBody?: boolean; + /** + * A flag to always send the parameters even if their values are empty. + */ + sendEmptyParams?: boolean; /** * A list of parameters to send to the API. */ diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md index 430faaaddd..26f48ceeb2 100644 --- a/packages/x-components/CHANGELOG.md +++ b/packages/x-components/CHANGELOG.md @@ -3,6 +3,33 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.0.0-alpha.7](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.6...@empathyco/x-components@5.0.0-alpha.7) (2024-05-06) + + +### ⚠ BREAKING CHANGES + +* **ColumnPickerMixin:** `BaseColumnPickerDropdown` component will no longer emit the `change` event, use `update:modelValue` instead. +`BaseColumnPickerDropdown` prop for the selected columns was renamed from `value` to `modelValue`. + +`BaseColumnPickerList` component will no longer emit the `change` event, use `update:modelValue` instead. +`BaseColumnPickerList` prop for the selected columns was renamed from `value` to `modelValue`. + +`ColumnPickerMixin` has been removed. + +### Code Refactoring + +* **ColumnPickerMixin:** get rid of `ColumnPickerMixin` and refactor components which use it (#1461) ([c5b84da](https://github.com/empathyco/x/commit/c5b84da32b75a37d028e91b64220016a2cfb3037)) + + + +## [5.0.0-alpha.6](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.5...@empathyco/x-components@5.0.0-alpha.6) (2024-05-03) + +**Note:** Version bump only for package @empathyco/x-components + + + + + ## [5.0.0-alpha.5](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.4...@empathyco/x-components@5.0.0-alpha.5) (2024-05-01) 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/package.json b/packages/x-components/package.json index feac54878b..a1db541388 100644 --- a/packages/x-components/package.json +++ b/packages/x-components/package.json @@ -1,6 +1,6 @@ { "name": "@empathyco/x-components", - "version": "5.0.0-alpha.5", + "version": "5.0.0-alpha.7", "description": "Empathy X Components", "author": "Empathy Systems Corporation S.L.", "license": "Apache-2.0", @@ -69,13 +69,13 @@ "prepublishOnly": "pnpm run build" }, "dependencies": { - "@empathyco/x-adapter": "^8.0.3-alpha.1", - "@empathyco/x-adapter-platform": "^1.1.0-alpha.1", + "@empathyco/x-adapter": "^8.1.0-alpha.0", + "@empathyco/x-adapter-platform": "^1.1.0-alpha.2", "@empathyco/x-bus": "^1.0.3-alpha.1", "@empathyco/x-deep-merge": "^2.0.3-alpha.1", "@empathyco/x-logger": "^1.2.0-alpha.11", "@empathyco/x-storage-service": "^2.0.3-alpha.0", - "@empathyco/x-types": "^10.1.0-alpha.2", + "@empathyco/x-types": "^10.1.0-alpha.3", "@empathyco/x-utils": "^1.0.3-alpha.1", "@vue/devtools-api": "~6.5.0", "@vueuse/core": "~10.7.1", 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 @@