refactor: Migrate preselected filters component

packages/x-components/src/composables/use-x-bus.ts

@@ -14,7 +14,7 @@ import { PropsWithType } from '../utils/index';
  * @returns An object with the `on` and `emit` functions.
  */
 export function useXBus(): UseXBusAPI {
-  const location = inject<FeatureLocation>('location');
+  const location = inject<FeatureLocation>('location', 'none');
 
   const currentComponent: PrivateExtendedVueComponent | undefined | null =
     getCurrentInstance()?.proxy;

packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts

@@ -1,21 +1,22 @@
 import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { ComponentOptions } from 'vue';
 import Vuex from 'vuex';
 import { Dictionary } from '@empathyco/x-utils';
 import { createRawFilters } from '../../../../utils/filters';
 import { baseSnippetConfig } from '../../../../views/base-config';
 import PreselectedFilters from '../preselected-filters.vue';
+import { bus } from '../../../../plugins/index';
 
 function renderPreselectedFilters({
   filters,
   snippetFilters
 }: RenderPreselectedFiltersOptions = {}): RenderPreselectedFiltersAPI {
-  const emit = jest.fn();
+  const emit = jest.spyOn(bus, 'emit');
   const localVue = createLocalVue();
   const snippetConfig = Vue.observable({ ...baseSnippetConfig, filters: snippetFilters });
   localVue.use(Vuex);
 
-  const wrapper = mount(PreselectedFilters, {
+  const wrapper = mount(PreselectedFilters as ComponentOptions<Vue>, {
     provide: {
       snippetConfig: snippetConfig
     },
@@ -24,12 +25,18 @@ function renderPreselectedFilters({
     },
     localVue,
     mocks: {
-      $x: {
+      emit: {
         emit
       }
     }
   });
 
+  const eventMetadata = {
+    moduleName: null,
+    location: 'none',
+    replaceable: true
+  };
+
   function setSnippetConfig(newValue: Dictionary<unknown>): Promise<void> {
     Object.assign(snippetConfig, newValue);
     return localVue.nextTick();
@@ -38,7 +45,8 @@ function renderPreselectedFilters({
   return {
     wrapper,
     emit,
-    setSnippetConfig
+    setSnippetConfig,
+    eventMetadata
   };
 }
 
@@ -49,7 +57,6 @@ describe('testing Preselected filters component', () => {
 
   it('does not emit the event when neither filters nor snippet config filters are provided', () => {
     const { emit } = renderPreselectedFilters();
-
     expect(emit).not.toHaveBeenCalled();
   });
 
@@ -58,25 +65,30 @@ describe('testing Preselected filters component', () => {
       '{!tag=brand_facet}brand_facet:"Lego"',
       '{!tag=age_facet}age_facet:"toddler"'
     ];
-    const { emit } = renderPreselectedFilters({
+    const { emit, eventMetadata } = renderPreselectedFilters({
       snippetFilters
     });
 
     expect(emit).toHaveBeenCalledTimes(1);
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
-      createRawFilters(snippetFilters)
+      createRawFilters(snippetFilters),
+      eventMetadata
     );
   });
 
   it('emits the event when filters are provided by the prop', () => {
     const filters = ['{!tag=brand_facet}brand_facet:"Lego"', '{!tag=age_facet}age_facet:"toddler"'];
-    const { emit } = renderPreselectedFilters({
+    const { emit, eventMetadata } = renderPreselectedFilters({
       filters
     });
 
     expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(filters));
+    expect(emit).toHaveBeenCalledWith(
+      'PreselectedFiltersProvided',
+      createRawFilters(filters),
+      eventMetadata
+    );
   });
 
   it('emits the event using the snippet config filters as payload when both are provided', () => {
@@ -85,48 +97,61 @@ describe('testing Preselected filters component', () => {
       '{!tag=brand_facet}brand_facet:"Nintendo"',
       '{!tag=age_facet}age_facet:"kids"'
     ];
-    const { emit } = renderPreselectedFilters({
+    const { emit, eventMetadata } = renderPreselectedFilters({
       filters,
       snippetFilters
     });
 
     expect(emit).toHaveBeenCalledTimes(1);
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
-      createRawFilters(snippetFilters)
+      createRawFilters(snippetFilters),
+      eventMetadata
     );
   });
 
   it('emits the event when the prop filters change', async () => {
     const filters = ['{!tag=brand_facet}brand_facet:"Lego"'];
     const newFilters = ['{!tag=brand_facet}brand_facet:"Playmobil"'];
 
-    const { emit, wrapper } = renderPreselectedFilters({
+    const { emit, eventMetadata, wrapper } = renderPreselectedFilters({
       filters
     });
 
     expect(wrapper.props()).toEqual({ filters: filters });
     expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(filters));
+    expect(emit).toHaveBeenCalledWith(
+      'PreselectedFiltersProvided',
+      createRawFilters(filters),
+      eventMetadata
+    );
 
     await wrapper.setProps({ filters: newFilters });
 
     expect(wrapper.props()).toEqual({ filters: newFilters });
     expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(newFilters));
+    expect(emit).toHaveBeenCalledWith(
+      'PreselectedFiltersProvided',
+      createRawFilters(newFilters),
+      eventMetadata
+    );
   });
 
   it('emits the event when the snippetConfig filters change', async () => {
     const filters = ['{!tag=brand_facet}brand_facet:"Chorizo"'];
     const newFilters = ['{!tag=brand_facet}brand_facet:"Chistorra"'];
 
-    const { emit, wrapper, setSnippetConfig } = renderPreselectedFilters({
+    const { emit, eventMetadata, wrapper, setSnippetConfig } = renderPreselectedFilters({
       filters
     });
 
     expect(wrapper.props()).toEqual({ filters: filters });
     expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(filters));
+    expect(emit).toHaveBeenCalledWith(
+      'PreselectedFiltersProvided',
+      createRawFilters(filters),
+      eventMetadata
+    );
 
     await setSnippetConfig({ filters: newFilters });
 
@@ -138,7 +163,11 @@ describe('testing Preselected filters component', () => {
 
     // The event is called again with the newFilters provided
     expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(newFilters));
+    expect(emit).toHaveBeenCalledWith(
+      'PreselectedFiltersProvided',
+      createRawFilters(newFilters),
+      eventMetadata
+    );
   });
 });
 
@@ -157,9 +186,11 @@ interface RenderPreselectedFiltersOptions {
  */
 interface RenderPreselectedFiltersAPI {
   /** Mock of the {@link XBus.emit} function. */
-  emit: jest.Mock;
+  emit: jest.SpyInstance;
   /** The wrapper of the container element.*/
   wrapper: Wrapper<Vue>;
   /** Helper method to change the snippet config. */
   setSnippetConfig: (newSnippetConfig: Dictionary<unknown>) => void | Promise<void>;
+  /** Metadata object returned by the {@link XBus.emit} function. */
+  eventMetadata: Dictionary<unknown>;
 }

packages/x-components/src/x-modules/facets/components/preselected-filters.vue

@@ -1,69 +1,83 @@
 <script lang="ts">
-  import { Component, Inject, Prop, Watch } from 'vue-property-decorator';
-  import Vue from 'vue';
+  import { defineComponent, PropType, onMounted, watch, computed, ref, ComputedRef } from 'vue';
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
+  import { useXBus } from '../../../composables/use-x-bus';
+  import { useHybridInject, useNoElementRender } from '../../../composables';
+  import { baseSnippetConfig } from '../../../views/base-config';
 
   /**
    * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter
    * is set in the snippet config or by using the prop of the component.
    *
    * @public
    */
-  @Component
-  export default class PreselectedFilters extends Vue {
-    /**
-     * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
-     *
-     * @internal
-     */
-    @Inject('snippetConfig')
-    public snippetConfig?: SnippetConfig;
-
-    /**
-     * A list of filters to preselect.
-     *
-     * @remarks Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
-     * component is created.
-     *
-     * @public
-     */
-    @Prop({ default: () => [] })
-    public filters!: string[];
-
-    /**
-     * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the
-     * filters prop.
-     *
-     * @returns An array of filter's ids.
-     */
-    protected get preselectedFilters(): string[] {
-      return this.snippetConfig?.filters ?? this.filters;
-    }
-
-    /**
-     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save
-     * the provided filters in the state.
-     */
-    @Watch('preselectedFilters')
-    protected emitPreselectedFilters(): void {
-      if (!isArrayEmpty(this.preselectedFilters)) {
-        this.$x.emit('PreselectedFiltersProvided', createRawFilters(this.preselectedFilters));
+  export default defineComponent({
+    name: 'PreselectedFilters',
+    props: {
+      /**
+       * A list of filters to preselect.
+       *
+       * @remarks Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
+       * component is created.
+       *
+       * @public
+       */
+      filters: {
+        type: Array as PropType<string[]>,
+        default: () => []
       }
+    },
+    setup(props, { slots }) {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      const { emit } = useXBus();
+
+      /**
+       * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig
+       * and sets is as a ref to get synced when it changes.
+       *
+       * @internal
+       */
+      const snippetConfig = ref(useHybridInject<SnippetConfig>('snippetConfig', baseSnippetConfig));
+
+      /**
+       * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the
+       * filters prop.
+       *
+       * @returns An array of filter's ids.
+       */
+      const preselectedFilters: ComputedRef<string[]> = computed(() => {
+        return snippetConfig.value?.filters ?? props.filters;
+      });
+
+      /**
+       * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save
+       * the provided filters in the state.
+       */
+      const emitPreselectedFilters = (): void => {
+        if (!isArrayEmpty(preselectedFilters.value)) {
+          emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters.value));
+        }
+      };
+
+      /**
+       * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
+       * computed prop changes.
+       */
+      watch(preselectedFilters, emitPreselectedFilters);
+
+      /**
+       * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
+       * component is mounted.
+       */
+      onMounted(() => {
+        emitPreselectedFilters();
+      });
+
+      return () => useNoElementRender(slots);
     }
-
-    /**
-     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
-     * component is created.
-     */
-    created(): void {
-      this.emitPreselectedFilters();
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
+  });
 </script>
 
 <docs lang="mdx">