Feat: Migrate semantics queries module to composition api

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

@@ -6,7 +6,14 @@ import { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tag
 import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
 import App from './App.vue';
 import router from './router';
-import { facetsXModule, nextQueriesXModule, scrollXModule, searchXModule } from './';
+import {
+  facetsXModule,
+  nextQueriesXModule,
+  queriesPreviewXModule,
+  scrollXModule,
+  searchXModule,
+  semanticQueriesXModule
+} 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);
@@ -51,7 +58,9 @@ createApp(App as Component)
       facets: facetsXModule,
       nextQueries: nextQueriesXModule,
       scroll: scrollXModule,
-      search: searchXModule
+      search: searchXModule,
+      queriesPreview: queriesPreviewXModule,
+      semanticQueries: semanticQueriesXModule
     }
   })
   .mount('#app');

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

@@ -33,7 +33,8 @@ import {
   TestPartialResultsList,
   TestBaseEventsModal,
   TestBaseIdModal,
-  TestQuerySuggestions
+  TestQuerySuggestions,
+  TestSemanticQueries
 } from './';
 
 const routes = [
@@ -144,7 +145,7 @@ const routes = [
   },
   {
     path: '/test-use-layouts',
-    name: 'TestUseLayouts',
+    name: 'UseLayouts',
     component: TestUseLayouts
   },
   {
@@ -174,12 +175,12 @@ const routes = [
   },
   {
     path: '/test-base-panel',
-    name: 'TestBasePanel',
+    name: 'BasePanel',
     component: TestBasePanel
   },
   {
     path: '/base-keyboard-navigation',
-    name: 'TestBaseKeyboardNavigation',
+    name: 'BaseKeyboardNavigation',
     component: TestBaseKeyboardNavigation
   },
   {
@@ -199,13 +200,18 @@ const routes = [
   },
   {
     path: '/test-base-id-modal',
-    name: 'TestBaseIdModal',
+    name: 'BaseIdModal',
     component: TestBaseIdModal
   },
   {
     path: '/query-suggestions',
     name: 'QuerySuggestions',
     component: TestQuerySuggestions
+  },
+  {
+    path: '/test-semantic-queries',
+    name: 'SemanticQueries',
+    component: TestSemanticQueries
   }
 ];
 

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

@@ -8,3 +8,4 @@ export * from './scroll';
 export * from './related-tags';
 export * from './history-queries';
 export * from './query-suggestions';
+export * from './semantic-queries';

packages/_vue3-migration-test/src/x-modules/semantic-queries/components/test-semantic-queries.vue

@@ -0,0 +1,23 @@
+<template>
+  <SemanticQueries #default="{ suggestions, findSemanticQuery }">
+    <QueryPreviewList
+      :queriesPreviewInfo="suggestions"
+      #default="{ queryPreviewInfo: { query }, totalResults, results }"
+    >
+      <div>
+        <SemanticQuery :suggestion="findSemanticQuery(query)">
+          <span>{{ query }} ({{ totalResults }})</span>
+        </SemanticQuery>
+        <ul v-for="result in results" :key="result.id">
+          <li>{{ result.id }}</li>
+        </ul>
+      </div>
+    </QueryPreviewList>
+  </SemanticQueries>
+</template>
+
+<script setup>
+  import SemanticQueries from '../../../../../x-components/src/x-modules/semantic-queries/components/semantic-queries.vue';
+  import QueryPreviewList from '../../../../../x-components/src/x-modules/queries-preview/components/query-preview-list.vue';
+  import SemanticQuery from '../../../../../x-components/src/x-modules/semantic-queries/components/semantic-query.vue';
+</script>

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

@@ -0,0 +1,2 @@
+export { default as TestSemanticQueries } from './components/test-semantic-queries.vue';
+export * from './x-module';

packages/_vue3-migration-test/src/x-modules/semantic-queries/x-module.ts

@@ -0,0 +1,31 @@
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
+import { SemanticQueriesXModule } from '../../../../x-components/src/x-modules/semantic-queries/x-module';
+import { QueriesPreviewXModule } from '../../../../x-components/src/x-modules/queries-preview/x-module';
+import { getResultsStub } from '../../../../x-components/src/__stubs__/results-stubs.factory';
+
+export const semanticQueriesXModule: PrivateXModuleOptions<SemanticQueriesXModule> = {
+  storeModule: {
+    state: {
+      config: { threshold: 5 },
+      semanticQueries: [{ query: 'prueba', distance: 0 }],
+      query: 'jeans',
+      totalResults: 4
+    }
+  }
+};
+
+export const queriesPreviewXModule: PrivateXModuleOptions<QueriesPreviewXModule> = {
+  storeModule: {
+    state: {
+      queriesPreview: {
+        c893bad68927b457dbed39460e6afd62: {
+          request: { query: 'prueba' },
+          results: getResultsStub(4),
+          status: 'success',
+          instances: 1,
+          totalResults: 4
+        }
+      }
+    }
+  }
+};

packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-queries.spec.ts

@@ -1,8 +1,6 @@
-import { Wrapper, mount, createLocalVue } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
 import { DeepPartial } from '@empathyco/x-utils/src/types/utils.types';
-import { SemanticQuery } from '@empathyco/x-types';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import SemanticQueries from '../semantic-queries.vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
@@ -11,30 +9,23 @@ import { createSemanticQuery } from '../../../../__stubs__/semantic-queries-stub
 import { resetSemanticQueriesStateWith } from './utils';
 
 function renderSemanticQueriesList({
-  template = `
-    <SemanticQueries v-bind="$attrs"/>
-  `,
+  template = `<SemanticQueries v-bind="$attrs"/>`,
   semanticQueries = [
     createSemanticQuery({ query: 'test', distance: 1 }),
     createSemanticQuery({ query: 'test 2', distance: 2 })
   ],
   threshold = 5,
-  maxItemsToRender
-}: RenderSemanticQueriesListOptions = {}): RenderSemanticQueriesListAPI {
+  maxItemsToRender = 5
+} = {}) {
   const localVue = createLocalVue();
   localVue.use(Vuex);
-
   const store = new Store<DeepPartial<RootXStoreState>>({});
 
   installNewXPlugin(
     {
       store,
       xModules: {
-        semanticQueries: {
-          config: {
-            threshold
-          }
-        }
+        semanticQueries: { config: { threshold } }
       }
     },
     localVue
@@ -44,9 +35,7 @@ function renderSemanticQueriesList({
   const wrapper = mount(
     {
       template,
-      components: {
-        SemanticQueries
-      }
+      components: { SemanticQueries }
     },
     {
       localVue,
@@ -55,13 +44,14 @@ function renderSemanticQueriesList({
     }
   );
 
-  return { wrapper: wrapper.findComponent(SemanticQueries) };
+  return { wrapper: wrapper.findComponent(SemanticQueries) } as const;
 }
 
 describe('testing SemanticQueries', () => {
   it('is an X Component that belongs to the semantic queries module', () => {
     const { wrapper } = renderSemanticQueriesList();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
+
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('semanticQueries');
   });
 
@@ -131,7 +121,6 @@ describe('testing SemanticQueries', () => {
     expect(wrappers.at(1)?.text()).toEqual('test 2 - 1');
   });
 
-  // eslint-disable-next-line max-len
   it('exposes an array of queries and a method to find the semantic query in its default slot', () => {
     const { wrapper } = renderSemanticQueriesList({
       template: `
@@ -177,8 +166,7 @@ describe('testing SemanticQueries', () => {
           <span data-test="semantic-query-item-content">
             {{ suggestion.query }} - {{ suggestion.distance }}
           </span>
-        </SemanticQueries>
-      `,
+        </SemanticQueries>`,
       semanticQueries: [
         createSemanticQuery({ query: 'test 1', distance: 1 }),
         createSemanticQuery({ query: 'test 2', distance: 2 })
@@ -192,25 +180,3 @@ describe('testing SemanticQueries', () => {
     expect(wrappers.at(1)?.text()).toEqual('test 2 - 2');
   });
 });
-
-/**
- * The options to render the {@link SemanticQueries} component.
- */
-interface RenderSemanticQueriesListOptions {
-  /* The template to render the component. */
-  template?: string;
-  /* The semantic queries to render. */
-  semanticQueries?: SemanticQuery[];
-  /* The max number of results to show the semantic queries. */
-  threshold?: number;
-  /* The max number of semantic queries to render. */
-  maxItemsToRender?: number;
-}
-
-/**
- * The API to test the {@link SemanticQueries} component.
- */
-interface RenderSemanticQueriesListAPI {
-  /* The testing wrapper of the {@link SemanticQueries) component. */
-  wrapper: Wrapper<Vue>;
-}

packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-query.spec.ts

@@ -1,6 +1,4 @@
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { SemanticQuery as SemanticQueryModel } from '@empathyco/x-types';
+import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
 import { DeepPartial } from '@empathyco/x-utils';
 import SemanticQuery from '../semantic-query.vue';
@@ -12,47 +10,43 @@ import { RootXStoreState } from '../../../../store/store.types';
 import { semanticQueriesXModule } from '../../x-module';
 import { resetSemanticQueriesStateWith } from './utils';
 
-describe('semantic queries component', () => {
-  function renderSemanticQuery({
-    template = '<SemanticQuery :suggestion="suggestion" v-bind="$attrs"/>',
-    suggestion = createSemanticQuery({ query: 'jeans' }),
-    query = ''
-  }: RenderSemanticQueryOptions = {}): RenderSemanticQueryAPI {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-
-    const store = new Store<DeepPartial<RootXStoreState>>({});
+function renderSemanticQuery({
+  template = '<SemanticQuery :suggestion="suggestion" v-bind="$attrs"/>',
+  suggestion = createSemanticQuery({ query: 'jeans' }),
+  query = ''
+} = {}) {
+  const localVue = createLocalVue();
+  localVue.use(Vuex);
+  const store = new Store<DeepPartial<RootXStoreState>>({});
 
-    installNewXPlugin({ store, initialXModules: [semanticQueriesXModule] }, localVue);
-    resetSemanticQueriesStateWith(store, { query });
+  installNewXPlugin({ store, initialXModules: [semanticQueriesXModule] }, localVue);
+  resetSemanticQueriesStateWith(store, { query });
 
-    const wrapper = mount(
-      {
-        template,
-        components: { SemanticQuery }
-      },
-      {
-        localVue,
-        store,
-        data() {
-          return {
-            suggestion
-          };
-        }
-      }
-    );
+  const wrapper = mount(
+    {
+      template,
+      components: { SemanticQuery }
+    },
+    {
+      localVue,
+      store,
+      data: () => ({ suggestion })
+    }
+  );
 
-    return {
-      wrapper: wrapper.findComponent(SemanticQuery),
-      emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
-      suggestion
-    };
-  }
+  return {
+    wrapper: wrapper.findComponent(SemanticQuery),
+    emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
+    suggestion
+  } as const;
+}
 
+describe('semantic queries component', () => {
   it('is an X Component of the Semantic Queries XModule', () => {
     const { wrapper } = renderSemanticQuery();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-    expect(getXComponentXModuleName(wrapper.vm)).toBe('semanticQueries');
+
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
+    expect(getXComponentXModuleName(wrapper.vm)).toEqual('semanticQueries');
   });
 
   it('renders the SemanticQuery passed by prop', () => {
@@ -71,8 +65,7 @@ describe('semantic queries component', () => {
         <SemanticQuery :suggestion="suggestion" #default="{ suggestion, query }">
           <span data-test="state-query">{{ query }}</span>
           <span data-test="semantic-query-content">{{ suggestion.query }}</span>
-        </SemanticQuery>
-      `,
+        </SemanticQuery>`,
       suggestion: createSemanticQuery({ query: 'blazer' }),
       query: 'jacket'
     });
@@ -109,27 +102,3 @@ describe('semantic queries component', () => {
     );
   });
 });
-
-/**
- * The options to render the {@link SemanticQuery} component.
- */
-interface RenderSemanticQueryOptions {
-  /* The template to render the component. */
-  template?: string;
-  /* The semantic query to render. */
-  suggestion?: SemanticQueryModel;
-  /* The query from the semantic queries state. */
-  query?: string;
-}
-
-/**
- * The API to test the {@link SemanticQuery} component.
- */
-interface RenderSemanticQueryAPI {
-  /* The testing wrapper of the {@link SemanticQuery} component. */
-  wrapper: Wrapper<Vue>;
-  /* A jest spy of the X emit method. */
-  emitSpy: ReturnType<typeof jest.spyOn>;
-  /* The rendered semantic query. */
-  suggestion: SemanticQueryModel;
-}