feat: migrate history queries x module to composition api (#1494)

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

@@ -24,6 +24,8 @@ import {
   TestSlidingPanel,
   TestBaseSuggestions,
   TestHighlight,
+  TestHistoryQueries,
+  TestMyHistory,
   TestBaseResultImages,
   TestBasePanel,
   TestBaseKeyboardNavigation,
@@ -153,6 +155,16 @@ const routes = [
     name: 'Highlight',
     component: TestHighlight
   },
+  {
+    path: '/history-queries',
+    name: 'HistoryQueries',
+    component: TestHistoryQueries
+  },
+  {
+    path: '/my-history',
+    name: 'MyHistory',
+    component: TestMyHistory
+  },
   {
     path: '/base-result-images',
     name: 'BaseResultImages',

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

@@ -0,0 +1,2 @@
+export { default as TestHistoryQueries } from './test-history-queries.vue';
+export { default as TestMyHistory } from './test-my-history.vue';

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

@@ -0,0 +1,16 @@
+<template>
+  <SearchInput :maxLength="10" />
+  <ClearSearchInput />
+
+  <HistoryQueries :maxItemsToRender="5" />
+  <ClearHistoryQueries class="x-button--ghost x-button--ghost-start">
+    <span>Clear previous searches</span>
+  </ClearHistoryQueries>
+</template>
+
+<script setup>
+  import HistoryQueries from '../../../../../x-components/src/x-modules/history-queries/components/history-queries.vue';
+  import ClearHistoryQueries from '../../../../../x-components/src/x-modules/history-queries/components/clear-history-queries.vue';
+  import ClearSearchInput from '../../../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+  import SearchInput from '../../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+  <MyHistory v-if="_$x.isHistoryQueriesEnabled && _$x.fullHistoryQueries.length">
+    <template #date="{ date }">
+      <div>{{ date }}</div>
+    </template>
+
+    <template #suggestion="{ suggestion, formatTime }">
+      <HistoryQuery data-test="my-history-query" :suggestion="suggestion">
+        <div class="flex flex-row gap-8">
+          <p>{{ suggestion.query }}</p>
+
+          <p>
+            {{ formatTime(suggestion.timestamp) }}
+          </p>
+        </div>
+
+        <template #remove-button-content>
+          <span>x</span>
+        </template>
+      </HistoryQuery>
+    </template>
+  </MyHistory>
+</template>
+
+<script setup>
+  import HistoryQuery from '../../../../../x-components/src/x-modules/history-queries/components/history-query.vue';
+  import MyHistory from '../../../../../x-components/src/x-modules/history-queries/components/my-history.vue';
+  import { use$x } from '../../../../../x-components/src/composables/use-$x';
+
+  const _$x = use$x();
+</script>
+
+<style scoped></style>

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

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

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 './history-queries';

packages/x-components/src/composables/__tests__/use-getter.spec.ts

@@ -1,72 +1,49 @@
-import { ComputedRef, defineComponent } from 'vue';
-import Vuex, { Store } from 'vuex';
-import { createLocalVue, mount } from '@vue/test-utils';
-import { Dictionary } from '@empathyco/x-utils';
+import { defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../__tests__/utils';
 import { useGetter } from '../use-getter';
-import { historyQueriesXStoreModule } from '../../x-modules/history-queries';
-import { AnyXStoreModule } from '../../store/index';
+import { useRegisterXModule } from '../use-register-x-module';
 import { ExtractGetters } from '../../x-modules/x-modules.types';
-
-const renderUseGetterTest = (getters: string[]): renderUseGetterTestAPI => {
-  const testComponent = defineComponent({
-    setup() {
-      const historyQueriesGetter = useGetter(
-        'historyQueries',
-        getters as (keyof ExtractGetters<'historyQueries'>)[]
-      );
-      return {
-        historyQueriesGetter
-      };
-    }
-  });
-
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
-  const store = new Store({
-    modules: {
-      x: {
-        namespaced: true,
-        modules: {
-          historyQueries: { namespaced: true, ...historyQueriesXStoreModule } as AnyXStoreModule
-        }
-      }
-    }
+import { useStore } from '../use-store';
+import { XPlugin } from '../../plugins';
+import { historyQueriesXModule } from '../../x-modules/history-queries/x-module';
+
+jest.mock('../use-store');
+
+function render(modulePaths: (keyof ExtractGetters<'historyQueries'>)[]) {
+  installNewXPlugin();
+  (useStore as jest.Mock).mockReturnValue(XPlugin.store);
+
+  const component = defineComponent({
+    xModule: 'historyQueries',
+    setup: () => {
+      useRegisterXModule(historyQueriesXModule);
+      const historyQueriesGetter = useGetter('historyQueries', modulePaths);
+      return { historyQueriesGetter };
+    },
+    template: `<div/>`
   });
-  installNewXPlugin({ store }, localVue);
 
-  const wrapper = mount(testComponent, {
-    localVue,
-    store
-  });
+  const wrapper = mount(component);
 
-  return {
-    store,
-    historyQueriesGetter: (wrapper.vm as any).historyQueriesGetter
-  };
-};
+  return (wrapper as any).vm.historyQueriesGetter;
+}
 
 describe('testing useGetter composable', () => {
   it('maps store getters', () => {
-    const { historyQueriesGetter, store } = renderUseGetterTest(['storageKey', 'historyQueries']);
-    expect(historyQueriesGetter.storageKey.value).toEqual('history-queries');
-    expect(historyQueriesGetter.historyQueries.value).toHaveLength(0);
+    const { storageKey, historyQueries } = render(['storageKey', 'historyQueries']);
+    expect(storageKey.value).toEqual('history-queries');
+    expect(historyQueries.value).toHaveLength(0);
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    store.dispatch('x/historyQueries/addQueryToHistory', 'chorizo');
+    XPlugin.store.dispatch('x/historyQueries/addQueryToHistory', 'chorizo');
 
-    expect(historyQueriesGetter.historyQueries.value).toHaveLength(1);
+    expect(historyQueries.value).toHaveLength(1);
   });
 
   it('does not return not requested getters', () => {
-    const { historyQueriesGetter } = renderUseGetterTest(['storageKey']);
-    expect(historyQueriesGetter.storageKey).toBeDefined();
-    expect(historyQueriesGetter.historyQueries).toBeUndefined();
+    const { storageKey, historyQueries } = render(['storageKey']);
+    expect(storageKey).toBeDefined();
+    expect(historyQueries).toBeUndefined();
   });
 });
-
-type renderUseGetterTestAPI = {
-  historyQueriesGetter: Dictionary<ComputedRef<string[]>>;
-  store: Store<any>;
-};

packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue

@@ -13,15 +13,12 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { State } from '../../../components/decorators/store.decorators';
+  import { computed, defineComponent } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { VueCSSClasses } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * A button that when is pressed, emits the
@@ -30,51 +27,57 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseEventButton },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class ClearHistoryQueries extends Vue {
-    /**
-     * The whole history queries.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
+  export default defineComponent({
+    name: 'ClearHistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseEventButton
+    },
+    setup() {
+      /**
+       * The whole history queries.
+       *
+       * @internal
+       */
+      const { historyQueries } = useState('historyQueries', ['historyQueries']);
 
-    /**
-     * Returns if the array of history queries is empty.
-     *
-     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
-     * @internal
-     */
-    protected get isHistoryQueriesEmpty(): boolean {
-      return this.historyQueries.length === 0;
-    }
+      /**
+       * Returns if the array of history queries is empty.
+       *
+       * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
+       * @internal
+       */
+      const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0);
+
+      /**
+       * Dynamic CSS classes to add to the root element of this component.
+       *
+       * @returns A booleans dictionary where each key is the class name to add, and the boolean value
+       * tells if it should be added or not.
+       * @internal
+       */
+      const dynamicClasses = computed(
+        (): VueCSSClasses => ({
+          'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value
+        })
+      );
+
+      /**
+       * The list of events that are going to be emitted when the button is pressed.
+       *
+       * @internal
+       */
+      const clearHistoryQueriesEvents: Partial<XEventsTypes> = {
+        UserPressedClearHistoryQueries: undefined
+      };
 
-    /**
-     * Dynamic CSS classes to add to the root element of this component.
-     *
-     * @returns A booleans dictionary where each key is the class name to add, and the boolean value
-     * tells if it should be added or not.
-     * @internal
-     */
-    protected get dynamicClasses(): VueCSSClasses {
       return {
-        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty
+        dynamicClasses,
+        clearHistoryQueriesEvents,
+        isHistoryQueriesEmpty
       };
     }
-
-    /**
-     * The list of events that are going to be emitted when the button is pressed.
-     *
-     * @internal
-     */
-    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {
-      UserPressedClearHistoryQueries: undefined
-    };
-  }
+  });
 </script>
 
 <docs lang="mdx">