feat(components): add filters to base-suggestions

packages/x-components/src/__stubs__/base-suggestion-stubs.factory.ts

@@ -0,0 +1,102 @@
+import { BooleanFilter, Facet, Suggestion } from '@empathyco/x-types';
+
+/**
+ * Creates a base suggestion with facets.
+ *
+ * @param query - Sets a query to test.
+ * @param key - Sets suggestion key.
+ * @param modelName - Sets suggestion modelName.
+ * @returns A base suggestion with facets.
+ *
+ * @internal
+ */
+export function createSuggestionWithFacets(
+  query: string,
+  key: string,
+  modelName: string | any
+): Suggestion[] {
+  return [
+    {
+      facets: createSuggestionFacets(),
+      key: key,
+      query: query,
+      totalResults: 10,
+      results: [],
+      modelName: modelName
+    }
+  ];
+}
+
+/**
+ * Returns an array containing Facets.
+ *
+ * @returns An array of facets.
+ */
+export function createSuggestionFacets(): Facet[] {
+  return [
+    {
+      id: 'rootCategories',
+      label: 'rootCategories',
+      modelName: 'SimpleFacet',
+      filters: <Array<BooleanFilter>>[
+        {
+          facetId: 'rootCategories',
+          id: '{!tag=rootFilter}rootCategories_60361120_64009600:"DORMIR"',
+          label: 'DORMIR',
+          selected: false,
+          totalResults: 60,
+          modelName: 'SimpleFilter'
+        },
+        {
+          facetId: 'rootCategories',
+          id: '{!tag=rootFilter}rootCategories_60361120_64009600:"SPECIAL PRICES"',
+          label: 'SPECIAL PRICES',
+          selected: false,
+          totalResults: 24,
+          modelName: 'SimpleFilter'
+        }
+      ]
+    },
+    {
+      id: 'exampleFacet',
+      label: 'exampleFacet',
+      modelName: 'SimpleFacet',
+      filters: <Array<BooleanFilter>>[
+        {
+          facetId: 'exampleFacet',
+          id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:"EXAMPLE"',
+          label: 'EXAMPLE',
+          selected: false,
+          totalResults: 60,
+          modelName: 'SimpleFilter'
+        }
+      ]
+    }
+  ];
+}
+
+/**
+ * Returns a facet with a filter.
+ *
+ * @param filterLabel - Label of the filter.
+ * @returns A Facet with a filter.
+ */
+export function createFacetWithAFilter(filterLabel = 'EXAMPLE'): Facet[] {
+  return [
+    {
+      id: 'exampleFacet',
+      label: 'exampleFacet',
+      modelName: 'SimpleFacet',
+      filters: <Array<BooleanFilter>>[
+        {
+          facetId: 'exampleFacet',
+          id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:"EXAMPLE"',
+          label: filterLabel,
+          selected: false,
+          totalResults: 60,
+          modelName: 'SimpleFilter'
+        }
+      ]
+    }
+  ];
+}

packages/x-components/src/__stubs__/next-queries-stubs.factory.ts

@@ -4,9 +4,7 @@ import { NextQuery } from '@empathyco/x-types';
  * Creates a {@link @empathyco/x-types#NextQuery | next queries} stub.
  *
  * @param amount - Number of stubbed next queries to create.
- *
  * @returns Array of next queries stub.
- *
  * @internal
  */
 export function getNextQueriesStub(amount = 3): NextQuery[] {
@@ -21,7 +19,6 @@ export function getNextQueriesStub(amount = 3): NextQuery[] {
  *
  * @param query - The query of the next query.
  * @param nextQuery - An optional object with fields to override the next query.
- *
  * @returns A next query.
  */
 export function createNextQueryStub(query: string, nextQuery?: Partial<NextQuery>): NextQuery {
@@ -31,6 +28,7 @@ export function createNextQueryStub(query: string, nextQuery?: Partial<NextQuery
     totalResults: 10,
     results: [],
     modelName: 'NextQuery',
+    isCurated: false,
     ...nextQuery
   };
 }

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

@@ -1,64 +1,98 @@
-import { Suggestion } from '@empathyco/x-types';
+import { BooleanFilter, Facet, Suggestion } from '@empathyco/x-types';
 import { mount, Wrapper } from '@vue/test-utils';
 import Vue from 'vue';
 import { XPlugin } from '../../../plugins/x-plugin';
 import { normalizeString } from '../../../utils/normalize';
+import { createSuggestionWithFacets } from '../../../__stubs__/base-suggestion-stubs.factory';
 import { XEventsTypes } from '../../../wiring/events.types';
-import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { WireMetadata } from '../../../wiring/wiring.types';
+import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseSuggestion from '../base-suggestion.vue';
 
-describe('testing Base Suggestion component', () => {
+function renderBaseSuggestion({
+  query = normalizeString('(b<ebé>)'),
+  suggestion = createSuggestionWithFacets('(b<ebé>) lloron', 'bebe lloron', 'QuerySuggestion')[0],
+  suggestionFacets
+}: BaseSuggestionOptions = {}): BaseSuggestionAPI {
   const [, localVue] = installNewXPlugin();
 
-  const query = normalizeString('(b<ebé>)');
-  const suggestion: Suggestion = {
-    query: '(b<ebé>) lloron',
-    facets: [],
-    key: 'bebe lloron',
-    modelName: 'QuerySuggestion'
-  };
+  if (suggestionFacets !== undefined) {
+    suggestion.facets = suggestionFacets;
+  }
+
   const suggestionSelectedEvents: Partial<XEventsTypes> = {
     UserSelectedAQuerySuggestion: suggestion,
     UserTalked: 'belt'
   };
-  let component: Wrapper<Vue>;
 
-  beforeEach(() => {
-    component = mount(BaseSuggestion, {
-      localVue,
-      propsData: { query, suggestion, suggestionSelectedEvents }
-    });
+  const wrapper = mount(BaseSuggestion, {
+    localVue,
+    propsData: {
+      query,
+      suggestion,
+      suggestionSelectedEvents
+    }
+  });
+
+  const wireMetadataObject = expect.objectContaining<Partial<WireMetadata>>({
+    target: wrapper.element
   });
 
+  return {
+    wrapper,
+    suggestion,
+    query,
+    localVue,
+    wireMetadataObject
+  };
+}
+
+describe('testing Base Suggestion component', () => {
   it('passes the prop suggestion to the default slot', () => {
-    expect(component.element.textContent).toContain(suggestion.query);
+    const { wrapper, suggestion } = renderBaseSuggestion();
+
+    expect(wrapper.element.textContent).toContain(suggestion.query);
+  });
+
+  it('passes the prop filter to the default slot', () => {
+    const { wrapper, suggestion } = renderBaseSuggestion();
+
+    expect(wrapper.element.textContent).toContain(
+      (<BooleanFilter>suggestion.facets[0].filters[0]).label
+    );
   });
 
   it('has suggestion query parts matching query passed as prop retaining accent marks', () => {
-    const matchingPart = component.find(getDataTestSelector('matching-part')).text();
+    const { wrapper, suggestion, query } = renderBaseSuggestion();
+    const matchingPart = wrapper.find(getDataTestSelector('matching-part')).text();
 
     expect(normalizeString(matchingPart)).toEqual(query);
     expect(suggestion.query).toContain(matchingPart);
   });
 
   it('sanitizes the matching part of the suggestion query', () => {
-    const matchingPartHTML = component.find(getDataTestSelector('matching-part')).element.innerHTML;
+    const { wrapper } = renderBaseSuggestion();
+    const matchingPartHTML = wrapper.find(getDataTestSelector('matching-part')).element.innerHTML;
 
     expect(matchingPartHTML).toBe('(b&lt;ebé&gt;)');
   });
 
   it('does not have matched query if the query prop is empty', () => {
-    component.setProps({ query: '' });
-    const hasMatchingQuery = (component.vm as any).hasMatchingQuery;
+    const { wrapper } = renderBaseSuggestion({ query: '' });
+    const hasMatchingQuery = (wrapper.vm as any).hasMatchingQuery;
 
     expect(hasMatchingQuery).toBe(false);
   });
 
+  it('does not have a filter label if the suggestion has no facets', () => {
+    const { wrapper, suggestion } = renderBaseSuggestion({ suggestionFacets: [] });
+    expect(wrapper.element.textContent!.trim()).toBe(suggestion.query);
+  });
+
   it('emits suggestionSelectedEvent and the default events onclick', async () => {
-    const target = expect.objectContaining<Partial<WireMetadata>>({ target: component.element });
+    const { wrapper, suggestion, localVue, wireMetadataObject: target } = renderBaseSuggestion();
     const spyOn = jest.spyOn(XPlugin.bus, 'emit');
-    component.trigger('click');
+    wrapper.trigger('click');
 
     await localVue.nextTick();
 
@@ -67,4 +101,61 @@ describe('testing Base Suggestion component', () => {
     expect(spyOn).toHaveBeenNthCalledWith(3, 'UserSelectedAQuerySuggestion', suggestion, target);
     expect(spyOn).toHaveBeenNthCalledWith(4, 'UserTalked', 'belt', target);
   });
+
+  it('emits UserClickedAFilter if the suggestion has a filter', async () => {
+    const { wrapper, wireMetadataObject: target, localVue, suggestion } = renderBaseSuggestion();
+    const spyOn = jest.spyOn(XPlugin.bus, 'emit');
+    wrapper.trigger('click');
+
+    await localVue.nextTick();
+
+    expect(spyOn).toHaveBeenCalledWith(
+      'UserClickedAFilter',
+      suggestion.facets[0].filters[0],
+      target
+    );
+  });
+
+  it('does not emit UserClickedAFilter if there is no filter', async () => {
+    const { wrapper, suggestion, localVue, wireMetadataObject: target } = renderBaseSuggestion();
+    await wrapper.setProps({ suggestion: { ...suggestion, facets: [] } });
+    const spyOn = jest.spyOn(XPlugin.bus, 'emit');
+    wrapper.trigger('click');
+
+    await localVue.nextTick();
+
+    expect(spyOn).not.toHaveBeenCalledWith(
+      'UserClickedAFilter',
+      suggestion.facets[0].filters[0],
+      target
+    );
+  });
 });
+
+/**
+ * The options to render the {@link BaseSuggestion} component.
+ */
+interface BaseSuggestionOptions {
+  /** The query introduced to find the suggestion. */
+  query?: string;
+  /** The suggestion to be rendered. By default, a suggestion with facets is used. */
+  suggestion?: Suggestion;
+  /** An array with facets to overwrite the suggestion ones. */
+  suggestionFacets?: Facet[];
+}
+
+/**
+ * Test API for the {@link BaseSuggestion} component.
+ */
+interface BaseSuggestionAPI {
+  /** The wrapper for base suggestion component. */
+  wrapper: Wrapper<Vue>;
+  /** The rendered suggestion. */
+  suggestion: Suggestion;
+  /** The query introduced to find the suggestion. */
+  query: string;
+  /** The test Vue instance. */
+  localVue: typeof Vue;
+  /** Metadata object used to keep track of the events fired to the bus. */
+  wireMetadataObject: Partial<WireMetadata>;
+}