feat(filters): update preselected filters component so it reacts to s…

…nippetConfig changes (#1404) --------- Co-authored-by: Guillermo Cacheda <[email protected]>
empathyco · Feb 21, 2024 · 05983f3 · 05983f3
1 parent fb1f2f2
commit 05983f3
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 12 deletions.
diff --git a/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
@@ -1,4 +1,7 @@
-import { mount } from '@vue/test-utils';
+import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
+import Vue 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';
@@ -8,20 +11,34 @@ function renderPreselectedFilters({
   snippetFilters
 }: RenderPreselectedFiltersOptions = {}): RenderPreselectedFiltersAPI {
   const emit = jest.fn();
-  mount(PreselectedFilters, {
+  const localVue = createLocalVue();
+  const snippetConfig = Vue.observable({ ...baseSnippetConfig, filters: snippetFilters });
+  localVue.use(Vuex);
+
+  const wrapper = mount(PreselectedFilters, {
     provide: {
-      snippetConfig: { ...baseSnippetConfig, filters: snippetFilters }
+      snippetConfig: snippetConfig
+    },
+    propsData: {
+      filters
     },
-    propsData: { filters },
+    localVue,
     mocks: {
       $x: {
         emit
       }
     }
   });
 
+  function setSnippetConfig(newValue: Dictionary<unknown>): Promise<void> {
+    Object.assign(snippetConfig, newValue);
+    return localVue.nextTick();
+  }
+
   return {
-    emit
+    wrapper,
+    emit,
+    setSnippetConfig
   };
 }
 
@@ -79,6 +96,50 @@ describe('testing Preselected filters component', () => {
       createRawFilters(snippetFilters)
     );
   });
+
+  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({
+      filters
+    });
+
+    expect(wrapper.props()).toEqual({ filters: filters });
+    expect(emit).toHaveBeenCalledTimes(1);
+    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(filters));
+
+    await wrapper.setProps({ filters: newFilters });
+
+    expect(wrapper.props()).toEqual({ filters: newFilters });
+    expect(emit).toHaveBeenCalledTimes(2);
+    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(newFilters));
+  });
+
+  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({
+      filters
+    });
+
+    expect(wrapper.props()).toEqual({ filters: filters });
+    expect(emit).toHaveBeenCalledTimes(1);
+    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(filters));
+
+    await setSnippetConfig({ filters: newFilters });
+
+    // Prop filters remains the same while the provided SnippetConfig is updated with new filters
+    expect(wrapper.props()).toEqual({ filters: filters });
+    expect(wrapper.vm.$options.provide).toEqual({
+      snippetConfig: { ...baseSnippetConfig, filters: newFilters }
+    });
+
+    // The event is called again with the newFilters provided
+    expect(emit).toHaveBeenCalledTimes(2);
+    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(newFilters));
+  });
 });
 
 /**
@@ -97,4 +158,8 @@ interface RenderPreselectedFiltersOptions {
 interface RenderPreselectedFiltersAPI {
   /** Mock of the {@link XBus.emit} function. */
   emit: jest.Mock;
+  /** The wrapper of the container element.*/
+  wrapper: Wrapper<Vue>;
+  /** Helper method to change the snippet config. */
+  setSnippetConfig: (newSnippetConfig: Dictionary<unknown>) => void | Promise<void>;
 }
diff --git a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Component, Inject, Prop } from 'vue-property-decorator';
+  import { Component, Inject, Prop, Watch } from 'vue-property-decorator';
   import Vue from 'vue';
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
@@ -18,7 +18,7 @@
      *
      * @internal
      */
-    @Inject()
+    @Inject('snippetConfig')
     public snippetConfig?: SnippetConfig;
 
     /**
@@ -33,16 +33,34 @@
     public filters!: string[];
 
     /**
-     * Emits the provided preselected filters prioritizing the {@link SnippetConfig} over the
+     * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the
      * filters prop.
+     *
+     * @returns An array of filter's ids.
      */
-    created(): void {
-      const preselectedFilters = this.snippetConfig?.filters ?? this.filters;
-      if (!isArrayEmpty(preselectedFilters)) {
-        this.$x.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters));
+    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));
       }
     }
 
+    /**
+     * 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 {}
   }