From 7ccffb084cdf6521c57977eca4d19d93f6586a2d Mon Sep 17 00:00:00 2001 From: alvarodE <72568818+alvarodE@users.noreply.github.com> Date: Wed, 1 May 2024 16:56:38 +0200 Subject: [PATCH] test: add Sort components to Vue 3 migration test (#1454) --- packages/_vue3-migration-test/package.json | 3 ++- .../src/components/test-base-event-button.vue | 6 +++-- packages/_vue3-migration-test/src/index.ts | 1 + packages/_vue3-migration-test/src/main.ts | 12 ++++++++- packages/_vue3-migration-test/src/router.ts | 25 ++++++++++++++++++- .../src/x-modules/index.ts | 1 + .../src/x-modules/search/components/index.ts | 3 +++ .../search/components/test-sort-dropdown.vue | 17 +++++++++++++ .../search/components/test-sort-list.vue | 14 +++++++++++ .../components/test-sort-picker-list.vue | 15 +++++++++++ .../src/x-modules/search/index.ts | 1 + packages/_vue3-migration-test/vite.config.ts | 3 ++- .../search/components/sort-picker-list.vue | 2 +- pnpm-lock.yaml | 15 +++++++++++ 14 files changed, 111 insertions(+), 7 deletions(-) create mode 100644 packages/_vue3-migration-test/src/x-modules/index.ts create mode 100644 packages/_vue3-migration-test/src/x-modules/search/components/index.ts create mode 100644 packages/_vue3-migration-test/src/x-modules/search/components/test-sort-dropdown.vue create mode 100644 packages/_vue3-migration-test/src/x-modules/search/components/test-sort-list.vue create mode 100644 packages/_vue3-migration-test/src/x-modules/search/components/test-sort-picker-list.vue create mode 100644 packages/_vue3-migration-test/src/x-modules/search/index.ts diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json index 03bf68d1fd..d628b28f38 100644 --- a/packages/_vue3-migration-test/package.json +++ b/packages/_vue3-migration-test/package.json @@ -15,7 +15,8 @@ "@vue/compat": "^3.4.22", "@vueuse/core": "~10.7.1", "vue": "^3.4.22", - "vue-router": "^4.3.0" + "vue-router": "^4.3.0", + "vuex": "^4.1.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.4", diff --git a/packages/_vue3-migration-test/src/components/test-base-event-button.vue b/packages/_vue3-migration-test/src/components/test-base-event-button.vue index f870565d78..a3e1cadcbd 100644 --- a/packages/_vue3-migration-test/src/components/test-base-event-button.vue +++ b/packages/_vue3-migration-test/src/components/test-base-event-button.vue @@ -9,7 +9,9 @@ import { use$x } from '../../../x-components/src/composables/use-$x'; import { XEvent, XEventsTypes } from '../../../x-components/src/wiring/events.types'; - const $x = use$x(); + // eslint-disable-next-line max-len + // TODO `$x` name cannot be used while XPlugin defines its own `this.$x` in the mixin: https://github.com/empathyco/x/blob/main/packages/x-components/src/plugins/x-plugin.mixin.ts#L55 + const _$x = use$x(); const events: Partial = { UserClickedASort: 'price asc', @@ -18,7 +20,7 @@ Object.entries(events).forEach(([event]) => // eslint-disable-next-line no-console - $x.on(event as XEvent, true).subscribe(args => console.log('BaseEventButton emission:', args)) + _$x.on(event as XEvent, true).subscribe(args => console.log('BaseEventButton emission:', args)) ); // eslint-disable-next-line no-console const onFocusin = (): void => console.log('$listeners working on Vue3!'); diff --git a/packages/_vue3-migration-test/src/index.ts b/packages/_vue3-migration-test/src/index.ts index 07635cbbc8..ea54b7e21f 100644 --- a/packages/_vue3-migration-test/src/index.ts +++ b/packages/_vue3-migration-test/src/index.ts @@ -1 +1,2 @@ export * from './components'; +export * from './x-modules'; diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts index 6c8dae9c34..58fdfd9f62 100644 --- a/packages/_vue3-migration-test/src/main.ts +++ b/packages/_vue3-migration-test/src/main.ts @@ -1,4 +1,7 @@ +import { XComponentsAdapter } from '@empathyco/x-types'; import { Component, configureCompat, createApp } from 'vue'; +import { createStore } from 'vuex'; +import { xPlugin } from '../../x-components/src/plugins/x-plugin'; import App from './App.vue'; import router from './router'; @@ -15,10 +18,17 @@ if (VUE_COMPAT_MODE === 2) { */ INSTANCE_LISTENERS: 'suppress-warning', RENDER_FUNCTION: false, - COMPONENT_V_MODEL: false + COMPONENT_V_MODEL: false, + WATCH_ARRAY: false }); } +const adapter = {} as XComponentsAdapter; + +const store = createStore({}); + createApp(App as Component) .use(router) + .use(store) + .use(xPlugin, { adapter, store }) .mount('#app'); diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts index af0e5821f2..2313659330 100644 --- a/packages/_vue3-migration-test/src/router.ts +++ b/packages/_vue3-migration-test/src/router.ts @@ -1,5 +1,13 @@ import { createRouter, createWebHistory } from 'vue-router'; -import { TestAnimateWidth, TestBaseDropdown, TestBaseEventButton, TestFade } from './'; +import { + TestAnimateWidth, + TestBaseDropdown, + TestBaseEventButton, + TestFade, + TestSortDropdown, + TestSortList, + TestSortPickerList +} from './'; const routes = [ { @@ -21,6 +29,21 @@ const routes = [ path: '/base-event-button', name: 'BaseEventButton', component: TestBaseEventButton + }, + { + path: '/sort-dropdown', + name: 'SortDropdown', + component: TestSortDropdown + }, + { + path: '/sort-list', + name: 'SortList', + component: TestSortList + }, + { + path: '/sort-picker-list', + name: 'SortPickerList', + component: TestSortPickerList } ]; diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts new file mode 100644 index 0000000000..5a2bdeb5b8 --- /dev/null +++ b/packages/_vue3-migration-test/src/x-modules/index.ts @@ -0,0 +1 @@ +export * from './search'; diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/index.ts b/packages/_vue3-migration-test/src/x-modules/search/components/index.ts new file mode 100644 index 0000000000..32ee402482 --- /dev/null +++ b/packages/_vue3-migration-test/src/x-modules/search/components/index.ts @@ -0,0 +1,3 @@ +export { default as TestSortDropdown } from './test-sort-dropdown.vue'; +export { default as TestSortList } from './test-sort-list.vue'; +export { default as TestSortPickerList } from './test-sort-picker-list.vue'; diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-dropdown.vue b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-dropdown.vue new file mode 100644 index 0000000000..80f051c8b9 --- /dev/null +++ b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-dropdown.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-list.vue b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-list.vue new file mode 100644 index 0000000000..3942e806ec --- /dev/null +++ b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-list.vue @@ -0,0 +1,14 @@ + + + diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-picker-list.vue b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-picker-list.vue new file mode 100644 index 0000000000..867190896f --- /dev/null +++ b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-picker-list.vue @@ -0,0 +1,15 @@ + + + diff --git a/packages/_vue3-migration-test/src/x-modules/search/index.ts b/packages/_vue3-migration-test/src/x-modules/search/index.ts new file mode 100644 index 0000000000..07635cbbc8 --- /dev/null +++ b/packages/_vue3-migration-test/src/x-modules/search/index.ts @@ -0,0 +1 @@ +export * from './components'; diff --git a/packages/_vue3-migration-test/vite.config.ts b/packages/_vue3-migration-test/vite.config.ts index f369e93a29..bb5c4cb64d 100644 --- a/packages/_vue3-migration-test/vite.config.ts +++ b/packages/_vue3-migration-test/vite.config.ts @@ -28,7 +28,8 @@ export default defineConfig(({ mode }) => { resolve: { alias: { '@vueuse/core': resolve(__dirname, 'node_modules/@vueuse/core'), - vue: resolve(__dirname, 'node_modules/@vue/compat') + vue: resolve(__dirname, 'node_modules/@vue/compat'), + vuex: resolve(__dirname, 'node_modules/vuex') } }, optimizeDeps: { diff --git a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue index 20b4ed2962..25abd48145 100644 --- a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue +++ b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue @@ -12,7 +12,7 @@ :class="[cssClasses, buttonClass]" data-test="sort-picker-button" :events="event" - :aria-pressed="item === selectedSort" + :aria-pressed="item === selectedSort || null" role="listitem" > diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 972a693684..05d06088c4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,6 +60,9 @@ importers: vue-router: specifier: ^4.3.0 version: 4.3.0(vue@3.4.22) + vuex: + specifier: ^4.1.0 + version: 4.1.0(vue@3.4.22) devDependencies: '@vitejs/plugin-vue': specifier: ^5.0.4 @@ -21168,6 +21171,18 @@ packages: vue: 2.7.14 dev: true + /vuex@4.1.0(vue@3.4.22): + resolution: + { + integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ== + } + peerDependencies: + vue: ^3.2.0 + dependencies: + '@vue/devtools-api': 6.5.1 + vue: 3.4.22(typescript@4.9.4) + dev: false + /w3c-hr-time@1.0.2: resolution: {