chore: add related-tags to the playground

empathyco · Jun 12, 2024 · d730f6f · d730f6f
1 parent b4647cf
commit d730f6f
Show file tree

Hide file tree

Showing 9 changed files with 2,998 additions and 8,378 deletions.
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
@@ -16,7 +16,7 @@
     "@vueuse/core": "~10.7.1",
     "vue": "^3.4.22",
     "vue-router": "^4.3.0",
-    "vuex": "^4.1.0"
+    "vuex": "4.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
@@ -2,9 +2,16 @@ 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 { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tags-stubs.factory';
 import App from './App.vue';
 import router from './router';
-import { facetsXModule, nextQueriesXModule, scrollXModule, searchXModule } from './';
+import {
+  facetsXModule,
+  nextQueriesXModule,
+  scrollXModule,
+  searchXModule,
+  relatedTagsXModule
+} from './';
 
 // Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
 const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
@@ -26,7 +33,12 @@ if (VUE_COMPAT_MODE === 2) {
   });
 }
 
-const adapter = {} as XComponentsAdapter;
+const adapter = {
+  relatedTags: () =>
+    new Promise(resolve => {
+      resolve({ relatedTags: getRelatedTagsStub(10) });
+    })
+} as unknown as XComponentsAdapter;
 
 const store = createStore({});
 
@@ -40,7 +52,8 @@ createApp(App as Component)
       facets: facetsXModule,
       nextQueries: nextQueriesXModule,
       scroll: scrollXModule,
-      search: searchXModule
+      search: searchXModule,
+      relatedTags: relatedTagsXModule
     }
   })
   .mount('#app');
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
@@ -26,7 +26,8 @@ import {
   TestHighlight,
   TestBaseResultImages,
   TestBasePanel,
-  TestBaseKeyboardNavigation
+  TestBaseKeyboardNavigation,
+  TestRelatedTags
 } from './';
 
 const routes = [
@@ -164,6 +165,11 @@ const routes = [
     path: '/base-keyboard-navigation',
     name: 'TestBaseKeyboardNavigation',
     component: TestBaseKeyboardNavigation
+  },
+  {
+    path: '/related-tags',
+    name: 'RelatedTags',
+    component: TestRelatedTags
   }
 ];
 

diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -5,3 +5,4 @@ export * from './search';
 export * from './search-box';
 export { default as TestElementsList } from './test-elements-list.vue';
 export * from './scroll';
+export * from './related-tags';
diff --git a/packages/_vue3-migration-test/src/x-modules/related-tags/index.ts b/packages/_vue3-migration-test/src/x-modules/related-tags/index.ts
@@ -0,0 +1,2 @@
+export { default as TestRelatedTags } from './test-related-tags.vue';
+export * from './x-module';
diff --git a/packages/_vue3-migration-test/src/x-modules/related-tags/test-related-tags.vue b/packages/_vue3-migration-test/src/x-modules/related-tags/test-related-tags.vue
@@ -0,0 +1,14 @@
+<template>
+  <span>
+    Query:
+    <b>{{ query }}</b>
+  </span>
+  <RelatedTags />
+</template>
+
+<script setup>
+  import RelatedTags from '../../../../x-components/src/x-modules/related-tags/components/related-tags.vue';
+  import { useGetter } from '../../../../x-components/src/composables/use-getter';
+
+  const { query } = useGetter('relatedTags', ['query']);
+</script>
diff --git a/packages/_vue3-migration-test/src/x-modules/related-tags/x-module.ts b/packages/_vue3-migration-test/src/x-modules/related-tags/x-module.ts
@@ -0,0 +1,9 @@
+import { RelatedTagsXModule } from '../../../../x-components/src/x-modules/related-tags/x-module';
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
+export const relatedTagsXModule: PrivateXModuleOptions<RelatedTagsXModule> = {
+  storeModule: {
+    state: {
+      query: 'pistacho'
+    }
+  }
+};
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
@@ -50,7 +50,7 @@ describe('testing plugin alias', () => {
         popularSearches: undefined,
         querySuggestions: undefined,
         recommendations: undefined,
-        relatedTags: undefined,
+        relatedTags: 'initial', // It is already registered by the `relatedTagsXModule` import itself
         search: undefined
       },
       device: null,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as TestRelatedTags } from './test-related-tags.vue';
		export * from './x-module';