feat(components): add filters to base-suggestions

packages/search-types/src/schemas/suggestion.schema.ts

@@ -7,7 +7,6 @@ import { Suggestion } from '../suggestion.model';
  */
 export const SuggestionSchema: Suggestion = {
   modelName: expect.any(String),
-  facets: expect.any(Array),
   key: expect.any(String),
   query: expect.any(String)
 };

packages/search-types/src/suggestion.model.ts

@@ -1,4 +1,3 @@
-import { Facet } from './facet/facet.model';
 import { NamedModel } from './named-model.model';
 import { Previewable } from './previewable.model';
 
@@ -9,9 +8,6 @@ import { Previewable } from './previewable.model';
  * @public
  */
 export interface Suggestion extends NamedModel<'QuerySuggestion' | 'PopularSearch'>, Previewable {
-  // eslint-disable-next-line jsdoc/require-description-complete-sentence
-  /** {@inheritDoc Previewable.facets} */
-  facets: Facet[];
   /** If it's a curated suggestion. */
   isCurated?: boolean;
   /**

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

@@ -4,67 +4,148 @@ import Vue from 'vue';
 import { XPlugin } from '../../../plugins/x-plugin';
 import { normalizeString } from '../../../utils/normalize';
 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';
+import { createSimpleFacetStub } from '../../../__stubs__/facets-stubs.factory';
+import { createPopularSearch } from '../../../__stubs__/popular-searches-stubs.factory';
 
-describe('testing Base Suggestion component', () => {
+function renderBaseSuggestion({
+  query = 'bebe',
+  suggestion = createPopularSearch('bebe lloron'),
+  suggestionSelectedEvents = {}
+}: BaseSuggestionOptions = {}): BaseSuggestionAPI {
   const [, localVue] = installNewXPlugin();
+  const emit = jest.spyOn(XPlugin.bus, 'emit');
+  const wrapper = mount(BaseSuggestion, {
+    localVue,
+    propsData: {
+      query,
+      suggestion,
+      suggestionSelectedEvents
+    }
+  });
 
-  const query = normalizeString('(b<ebé>)');
-  const suggestion: Suggestion = {
-    query: '(b<ebé>) lloron',
-    facets: [],
-    key: 'bebe lloron',
-    modelName: 'QuerySuggestion'
-  };
-  const suggestionSelectedEvents: Partial<XEventsTypes> = {
-    UserSelectedAQuerySuggestion: suggestion,
-    UserTalked: 'belt'
+  const wireMetadata = expect.objectContaining<Partial<WireMetadata>>({
+    target: wrapper.element
+  });
+
+  return {
+    wrapper,
+    suggestion,
+    query,
+    wireMetadata,
+    emit
   };
-  let component: Wrapper<Vue>;
+}
 
-  beforeEach(() => {
-    component = mount(BaseSuggestion, {
-      localVue,
-      propsData: { query, suggestion, suggestionSelectedEvents }
+describe('testing Base Suggestion component', () => {
+  it('renders a basic suggestion', () => {
+    const { wrapper } = renderBaseSuggestion({
+      suggestion: createPopularSearch('milk')
     });
+
+    expect(wrapper.text()).toEqual('milk');
   });
 
-  it('passes the prop suggestion to the default slot', () => {
-    expect(component.element.textContent).toContain(suggestion.query);
+  it('renders a suggestion with a filter', () => {
+    const { wrapper } = renderBaseSuggestion({
+      suggestion: createPopularSearch('t-shirt', {
+        facets: [createSimpleFacetStub('category', createFilter => [createFilter('woman')])]
+      })
+    });
+
+    expect(wrapper.text()).toEqual('t-shirt woman');
   });
 
   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({
+      suggestion: createPopularSearch('bebé lloron')
+    });
+    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({
+      query: '(b<ebe>)',
+      suggestion: createPopularSearch('(b<ebé>) lloron')
+    });
+    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;
+  it('emits suggestionSelectedEvent and the default events onclick', () => {
+    const customSuggestion = createPopularSearch('bebe lloron');
+    const { emit, wrapper, suggestion, wireMetadata } = renderBaseSuggestion({
+      suggestion: customSuggestion,
+      suggestionSelectedEvents: {
+        UserSelectedAQuerySuggestion: customSuggestion
+      }
+    });
+    wrapper.trigger('click');
 
-    expect(hasMatchingQuery).toBe(false);
+    expect(emit).toHaveBeenCalledTimes(3);
+    expect(emit).toHaveBeenNthCalledWith(1, 'UserAcceptedAQuery', suggestion.query, wireMetadata);
+    expect(emit).toHaveBeenNthCalledWith(2, 'UserSelectedASuggestion', suggestion, wireMetadata);
+    expect(emit).toHaveBeenNthCalledWith(
+      3,
+      'UserSelectedAQuerySuggestion',
+      suggestion,
+      wireMetadata
+    );
   });
 
-  it('emits suggestionSelectedEvent and the default events onclick', async () => {
-    const target = expect.objectContaining<Partial<WireMetadata>>({ target: component.element });
-    const spyOn = jest.spyOn(XPlugin.bus, 'emit');
-    component.trigger('click');
-
-    await localVue.nextTick();
+  it('emits UserClickedAFilter if the suggestion has a filter', () => {
+    const { emit, wrapper, wireMetadata, suggestion } = renderBaseSuggestion({
+      suggestion: createPopularSearch('(b<ebé>) lloron', {
+        facets: [
+          createSimpleFacetStub('rootCategories', createFilter => [
+            createFilter('DORMIR'),
+            createFilter('SPECIAL PRICES')
+          ]),
+          createSimpleFacetStub('exampleFacet', createFilter => [createFilter('EXAMPLE')])
+        ]
+      })
+    });
+    wrapper.trigger('click');
 
-    expect(spyOn).toHaveBeenNthCalledWith(1, 'UserAcceptedAQuery', suggestion.query, target);
-    expect(spyOn).toHaveBeenNthCalledWith(2, 'UserSelectedASuggestion', suggestion, target);
-    expect(spyOn).toHaveBeenNthCalledWith(3, 'UserSelectedAQuerySuggestion', suggestion, target);
-    expect(spyOn).toHaveBeenNthCalledWith(4, 'UserTalked', 'belt', target);
+    expect(emit).toHaveBeenCalledTimes(3);
+    expect(emit).toHaveBeenCalledWith(
+      'UserClickedAFilter',
+      suggestion.facets?.[0].filters?.[0],
+      wireMetadata
+    );
   });
 });
+
+/**
+ * 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;
+  /** The events to emit when selecting a suggestion. */
+  suggestionSelectedEvents?: Partial<XEventsTypes>;
+}
+
+/**
+ * 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;
+  /** Metadata used to keep track of the events fired to the bus. */
+  wireMetadata: Partial<WireMetadata>;
+  /** Mock for the `$x.emit` function. Can be used to check the emitted events. */
+  emit: jest.SpyInstance;
+}