fix(query-suggestions): register query-suggestions x-module as soon a…

…s it is created

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

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

@@ -1,4 +1,4 @@
-import { XComponentsAdapter } from '@empathyco/x-types';
+import { QuerySuggestionsRequest, XComponentsAdapter } from '@empathyco/x-types';
 import { Component, configureCompat, createApp } from 'vue';
 import { createStore } from 'vuex';
 import { xPlugin } from '../../x-components/src/plugins/x-plugin';
@@ -28,11 +28,10 @@ if (VUE_COMPAT_MODE === 2) {
 }
 
 const adapter = {
-  querySuggestions: request => {
-    return new Promise(resolve => {
+  querySuggestions: (request: QuerySuggestionsRequest) =>
+    new Promise(resolve => {
       resolve({ suggestions: getQuerySuggestionsStub(request.query, 5) });
-    });
-  }
+    })
 } as XComponentsAdapter;
 
 const store = createStore({});

packages/_vue3-migration-test/src/x-modules/query-suggestions/components/test-query-suggestions.vue

@@ -4,6 +4,6 @@
 </template>
 
 <script setup>
-  import QuerySuggestions from '../../../../../x-components/src/x-modules/query-suggestions/components/query-suggestions.vue';
   import SearchInput from '../../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+  import QuerySuggestions from '../../../../../x-components/src/x-modules/query-suggestions/components/query-suggestions.vue';
 </script>

packages/x-components/src/x-modules/query-suggestions/components/__tests__/query-suggestion.spec.ts

@@ -1,6 +1,5 @@
-import { Suggestion } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
+import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
 import { createQuerySuggestion } from '../../../../__stubs__/query-suggestions-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
@@ -15,50 +14,49 @@ import { resetXQuerySuggestionsStateWith } from './utils';
 function renderQuerySuggestion({
   suggestion = createQuerySuggestion('baileys'),
   query = '',
-  template = '<QuerySuggestion v-bind="$attrs"/>'
-}: RenderQuerySuggestionOptions = {}): RenderQuerySuggestionApi {
+  template = '<QuerySuggestion :suggestion="suggestion"/>'
+} = {}) {
   const localVue = createLocalVue();
   localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
+
   installNewXPlugin({ store, initialXModules: [querySuggestionsXModule] }, localVue);
   resetXQuerySuggestionsStateWith(store, { query });
 
   const wrapper = mount(
     {
       template,
-      inheritAttrs: false,
-      components: {
-        QuerySuggestion
-      }
+      components: { QuerySuggestion },
+      props: ['suggestion']
     },
     {
       localVue,
-      propsData: { suggestion },
-      store
+      store,
+      propsData: { suggestion }
     }
   );
 
   return {
     wrapper: wrapper.findComponent(QuerySuggestion),
     suggestion,
     emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
-    getMatchingPart() {
-      return wrapper.get(getDataTestSelector('matching-part'));
-    }
-  };
+    getMatchingPart: () => wrapper.get(getDataTestSelector('matching-part'))
+  } as const;
 }
 
 describe('testing query-suggestion component', () => {
   it('is an XComponent that belongs to the query suggestions', () => {
     const { wrapper } = renderQuerySuggestion();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
+
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('querySuggestions');
   });
 
   it('renders the suggestion received as prop', () => {
     const { wrapper } = renderQuerySuggestion({
       suggestion: createQuerySuggestion('milk')
     });
+
     expect(wrapper.text()).toEqual('milk');
   });
 
@@ -97,33 +95,12 @@ describe('testing query-suggestion component', () => {
     const { wrapper } = renderQuerySuggestion({
       suggestion: createQuerySuggestion('baileys'),
       template: `
-      <QuerySuggestion v-bind="$attrs" #default="{ suggestion }">
+      <QuerySuggestion :suggestion="suggestion" #default="{ suggestion }">
         <span>🔍</span>
         <span>{{ suggestion.query }}</span>
-      </QuerySuggestion>
-      `
+      </QuerySuggestion>`
     });
 
     expect(wrapper.text()).toEqual('🔍 baileys');
   });
 });
-
-interface RenderQuerySuggestionOptions {
-  /** The suggestion data to render. */
-  suggestion?: Suggestion;
-  /** The query that the suggestions belong to. */
-  query?: string;
-  /** The template to render. */
-  template?: string;
-}
-
-interface RenderQuerySuggestionApi {
-  /** Testing wrapper of the {@link QuerySuggestion} component. */
-  wrapper: Wrapper<Vue>;
-  /** Retrieves the wrapper that matches the query in the {@link QuerySuggestion} component. */
-  getMatchingPart: () => Wrapper<Vue>;
-  /** The {@link XBus.emit} spy. */
-  emitSpy: jest.SpyInstance;
-  /** Rendered {@link Suggestion} model data. */
-  suggestion: Suggestion;
-}

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

@@ -1,6 +1,5 @@
-import { Suggestion } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
+import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
 import { createQuerySuggestion } from '../../../../__stubs__/query-suggestions-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
@@ -16,54 +15,48 @@ function renderQuerySuggestions({
     createQuerySuggestion('milk chocolate'),
     createQuerySuggestion('chocolate milk')
   ],
-  maxItemsToRender,
+  maxItemsToRender = 5,
   template = '<QuerySuggestions v-bind="$attrs" />'
-}: RenderQuerySuggestionsOptions = {}): RenderQuerySuggestionsApi {
+} = {}) {
   const localVue = createLocalVue();
   localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
+
   installNewXPlugin({ store, initialXModules: [querySuggestionsXModule] }, localVue);
   resetXQuerySuggestionsStateWith(store, { suggestions });
 
   const wrapper = mount(
     {
       template,
       inheritAttrs: false,
-      components: {
-        QuerySuggestions
-      }
+      components: { QuerySuggestions }
     },
     {
       localVue,
       store,
-      propsData: {
-        maxItemsToRender
-      }
+      propsData: { maxItemsToRender }
     }
   );
 
   return {
     wrapper: wrapper.findComponent(QuerySuggestions),
     suggestions,
-    async setMaxItemsToRender(max) {
-      return await wrapper.setProps({ maxItemsToRender: max });
-    },
-    getSuggestionItemWrappers() {
-      return wrapper.findAll(getDataTestSelector('suggestion-item'));
-    }
+    getSuggestionItemWrappers: () => wrapper.findAll(getDataTestSelector('suggestion-item'))
   };
 }
 
 describe('testing Query Suggestions component', () => {
   it('is an XComponent that belongs to the query suggestions module', () => {
     const { wrapper } = renderQuerySuggestions();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
+
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('querySuggestions');
   });
 
   it('does not render anything when suggestions are empty', () => {
     const { wrapper } = renderQuerySuggestions({ suggestions: [] });
-    expect(wrapper.html()).toBe('');
+
+    expect(wrapper.html()).toEqual('');
   });
 
   it('renders the state list of suggestions', () => {
@@ -87,8 +80,7 @@ describe('testing Query Suggestions component', () => {
             <span>🔍</span>
             <span>{{ suggestion.query }}</span>
           </button>
-        </QuerySuggestions>
-      `
+        </QuerySuggestions>`
     });
 
     const suggestionItemWrappers = getSuggestionItemWrappers();
@@ -108,8 +100,7 @@ describe('testing Query Suggestions component', () => {
         <QuerySuggestions #suggestion-content="{ suggestion }">
           <span>🔍</span>
           <span>{{ suggestion.query }}</span>
-        </QuerySuggestions>
-      `
+        </QuerySuggestions>`
     });
 
     const suggestionItemWrappers = getSuggestionItemWrappers();
@@ -120,9 +111,8 @@ describe('testing Query Suggestions component', () => {
     });
   });
 
-  // eslint-disable-next-line max-len
   it('renders at most the number of QuerySuggestion defined by `maxItemsToRender` prop', async () => {
-    const { getSuggestionItemWrappers, setMaxItemsToRender, suggestions } = renderQuerySuggestions({
+    const { wrapper, getSuggestionItemWrappers, suggestions } = renderQuerySuggestions({
       suggestions: [
         createQuerySuggestion('shirt'),
         createQuerySuggestion('jeans'),
@@ -131,33 +121,13 @@ describe('testing Query Suggestions component', () => {
       ]
     });
 
-    await setMaxItemsToRender(suggestions.length - 1);
+    await wrapper.setProps({ maxItemsToRender: suggestions.length - 1 });
     expect(getSuggestionItemWrappers().wrappers).toHaveLength(suggestions.length - 1);
 
-    await setMaxItemsToRender(suggestions.length);
+    await wrapper.setProps({ maxItemsToRender: suggestions.length });
     expect(getSuggestionItemWrappers().wrappers).toHaveLength(suggestions.length);
 
-    await setMaxItemsToRender(suggestions.length + 1);
+    await wrapper.setProps({ maxItemsToRender: suggestions.length });
     expect(getSuggestionItemWrappers().wrappers).toHaveLength(suggestions.length);
   });
 });
-
-interface RenderQuerySuggestionsOptions {
-  /** The suggestions list to render. */
-  suggestions?: Suggestion[];
-  /** The maximum number of items to render. */
-  maxItemsToRender?: string;
-  /** The template to render. */
-  template?: string;
-}
-
-interface RenderQuerySuggestionsApi {
-  /** QuerySuggestions component testing wrapper. */
-  wrapper: Wrapper<Vue>;
-  /** Retrieves the list item of each suggestion. */
-  getSuggestionItemWrappers: () => WrapperArray<Vue>;
-  /** Updates the maximum number of items to render. */
-  setMaxItemsToRender: (max: number) => Promise<void>;
-  /** Rendered suggestions data. */
-  suggestions: Suggestion[];
-}

packages/x-components/src/x-modules/query-suggestions/components/query-suggestion.vue

@@ -21,7 +21,7 @@
   import { Suggestion } from '@empathyco/x-types';
   import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';
   import { querySuggestionsXModule } from '../x-module';
-  import { useGetter, useRegisterXModule } from '../../../composables';
+  import { useGetter } from '../../../composables';
 
   /**
    * This component renders a suggestion for a query. A query suggestion is a recommended query
@@ -32,34 +32,22 @@
    */
   export default defineComponent({
     name: 'QuerySuggestion',
-    components: { BaseSuggestion },
     xModule: querySuggestionsXModule.name,
+    components: { BaseSuggestion },
     props: {
-      /**
-       * The suggestion to render.
-       *
-       * @public
-       */
+      /** The suggestion to render. */
       suggestion: {
         type: Object as PropType<Suggestion>,
         required: true
       }
     },
-    setup: function (props) {
-      useRegisterXModule(querySuggestionsXModule);
-
-      /**
-       * The normalized query of the query-suggestions module.
-       *
-       * @internal
-       */
+    setup(props) {
+      /** The normalized query of the query-suggestions module. */
       const query = useGetter('querySuggestions', ['normalizedQuery']).normalizedQuery;
 
       /**
        * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as
        * payload when selecting the query suggestion.
-       *
-       * @internal
        */
       const suggestionSelectedEvents = {
         UserSelectedAQuerySuggestion: props.suggestion

packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseSuggestions
     v-bind="$attrs"
-    :suggestions="querySuggestions"
+    :suggestions="suggestions"
     class="x-query-suggestions"
     data-test="query-suggestions"
   >
@@ -34,8 +34,8 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
+  import { useGetter } from '../../../composables';
   import { querySuggestionsXModule } from '../x-module';
-  import { useGetter, useRegisterXModule } from '../../../composables';
   import QuerySuggestion from './query-suggestion.vue';
 
   /**
@@ -47,20 +47,14 @@
    */
   export default defineComponent({
     name: 'QuerySuggestions',
+    xModule: querySuggestionsXModule.name,
     components: { BaseSuggestions, QuerySuggestion },
     inheritAttrs: false,
-    xModule: querySuggestionsXModule.name,
-    setup: function () {
-      useRegisterXModule(querySuggestionsXModule);
-
-      /**
-       * The module's list of suggestions.
-       *
-       * @internal
-       */
+    setup() {
+      /** The module's list of suggestions. */
       const { querySuggestions } = useGetter('querySuggestions', ['querySuggestions']);
 
-      return { querySuggestions };
+      return { suggestions: querySuggestions };
     }
   });
 </script>

packages/x-components/src/x-modules/query-suggestions/x-module.ts

@@ -1,4 +1,4 @@
-// XModule
+import { XPlugin } from '../../plugins/x-plugin';
 import { XModule } from '../x-modules.types';
 import { querySuggestionsEmitters } from './store/emitters';
 import { querySuggestionsXStoreModule } from './store/module';
@@ -24,3 +24,5 @@ export const querySuggestionsXModule: QuerySuggestionsXModule = {
   storeEmitters: querySuggestionsEmitters,
   wiring: querySuggestionsWiring
 };
+
+XPlugin.registerXModule(querySuggestionsXModule);