feat: migrate history queries x module to composition api

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,13 @@
 </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 { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * A button that when is pressed, emits the
@@ -30,51 +28,59 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseEventButton },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class ClearHistoryQueries extends Vue {
-    /**
-     * The whole history queries.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * 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;
-    }
+  export default defineComponent({
+    name: 'ClearHistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseEventButton
+    },
+    setup() {
+      useRegisterXModule(historyQueriesXModule);
+
+      /**
+       * The whole history queries.
+       *
+       * @internal
+       */
+      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+
+      /**
+       * 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 => {
+        return {
+          '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">

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

@@ -3,64 +3,74 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { computed, ComputedRef, defineComponent } from 'vue';
   import { HistoryQuery } from '@empathyco/x-types';
   import BaseSwitch from '../../../components/base-switch.vue';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { historyQueriesXModule } from '../x-module';
   import { isArrayEmpty } from '../../../utils/array';
+  import { use$x } from '../../../composables/use-$x';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * History Queries Switch is a component to activate or deactivate the history queries.
    * This component emits events depending on the `isEnabled` value.
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(historyQueriesXModule)],
-    components: { BaseSwitch }
-  })
-  export default class HistoryQueriesSwitch extends Vue {
-    /**
-     * A boolean with the isEnabled value coming from the store state.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'isEnabled')
-    public isEnabled!: boolean;
-
-    /**
-     * The history queries from the state.
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * Checks if there are history queries.
-     *
-     * @returns True if there are history queries; false otherwise.
-     */
-    protected get hasHistoryQueries(): boolean {
-      return !isArrayEmpty(this.historyQueries);
-    }
+  export default defineComponent({
+    name: 'HistoryQueriesSwitch',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseSwitch
+    },
+    setup() {
+      useRegisterXModule(historyQueriesXModule);
+
+      const $x = use$x();
+
+      /**
+       * A boolean with the isEnabled value coming from the store state.
+       *
+       * @internal
+       */
+      const isEnabled = useState('historyQueries', ['isEnabled']).isEnabled;
+
+      /**
+       * The history queries from the state.
+       */
+      const historyQueries: ComputedRef<HistoryQuery[] | undefined> = useState('historyQueries', [
+        'historyQueries'
+      ]).historyQueries;
+
+      /**
+       * Checks if there are history queries.
+       *
+       * @returns True if there are history queries; false otherwise.
+       */
+      const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
+
+      /**
+       * Emits an event based on the switch state.
+       *
+       * @internal
+       */
+      const toggle = (): void => {
+        $x.emit(
+          isEnabled.value
+            ? hasHistoryQueries.value
+              ? 'UserClickedDisableHistoryQueries'
+              : 'UserClickedConfirmDisableHistoryQueries'
+            : 'UserClickedEnableHistoryQueries'
+        );
+      };
 
-    /**
-     * Emits an event based on the switch state.
-     *
-     * @internal
-     */
-    protected toggle(): void {
-      this.$x.emit(
-        this.isEnabled
-          ? this.hasHistoryQueries
-            ? 'UserClickedDisableHistoryQueries'
-            : 'UserClickedConfirmDisableHistoryQueries'
-          : 'UserClickedEnableHistoryQueries'
-      );
+      return {
+        toggle,
+        isEnabled
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">