test: add Sort components to Vue 3 migration test (#1454)

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",

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<XEventsTypes> = {
     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!');

packages/_vue3-migration-test/src/index.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './x-modules';

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');

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
   }
 ];
 

packages/_vue3-migration-test/src/x-modules/index.ts

@@ -0,0 +1 @@
+export * from './search';

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';

packages/_vue3-migration-test/src/x-modules/search/components/test-sort-dropdown.vue

@@ -0,0 +1,17 @@
+<template>
+  <SortDropdown :items="sortValues">
+    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>
+    <template #item="{ item, isHighlighted, isSelected }">
+      <span v-if="isSelected">✅</span>
+      <span v-if="isHighlighted">🟢</span>
+      {{ item }}
+    </template>
+  </SortDropdown>
+</template>
+
+<script setup lang="ts">
+  // eslint-disable-next-line max-len
+  import SortDropdown from '../../../../../x-components/src/x-modules/search/components/sort-dropdown.vue';
+
+  const sortValues = ['Relevance', 'Price asc', 'Price desc'];
+</script>

packages/_vue3-migration-test/src/x-modules/search/components/test-sort-list.vue

@@ -0,0 +1,14 @@
+<template>
+  <SortList :items="sortValues">
+    <template #default="{ item, isSelected }">
+      <span v-if="isSelected">✅</span>
+      {{ item }}
+    </template>
+  </SortList>
+</template>
+
+<script setup lang="ts">
+  import SortList from '../../../../../x-components/src/x-modules/search/components/sort-list.vue';
+
+  const sortValues = ['Relevance', 'Price asc', 'Price desc'];
+</script>

packages/_vue3-migration-test/src/x-modules/search/components/test-sort-picker-list.vue

@@ -0,0 +1,15 @@
+<template>
+  <SortPickerList :items="sortValues">
+    <template #default="{ item, isSelected }">
+      <span v-if="isSelected">✅</span>
+      {{ item }}
+    </template>
+  </SortPickerList>
+</template>
+
+<script setup lang="ts">
+  // eslint-disable-next-line max-len
+  import SortPickerList from '../../../../../x-components/src/x-modules/search/components/sort-picker-list.vue';
+
+  const sortValues = ['Relevance', 'Price asc', 'Price desc'];
+</script>

packages/_vue3-migration-test/src/x-modules/search/index.ts

@@ -0,0 +1 @@
+export * from './components';

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: {

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"
     >
       <slot v-bind="{ item, isSelected: item === selectedSort }">