Add defensive code against bad configuration in standalone recommenda…

…tion component (#413)

https://coveord.atlassian.net/browse/JSUI-1509

lib/coveoanalytics/index.d.ts

@@ -114,6 +114,8 @@ declare namespace CoveoAnalytics {
 
     setHistory(history: HistoryElement[]): void;
     clear(): void;
+
+    getMostRecentElement(): HistoryElement;
   }
 
   interface History {

src/ui/Base/Initialization.ts

@@ -152,8 +152,13 @@ export class Initialization {
 
     if (searchInterface.options.autoTriggerQuery) {
       Initialization.logFirstQueryCause(searchInterface);
+      let shouldLogInActionHistory = true;
+      // We should not log an action history if the interface is a standalone recommendation component.
+      if (Coveo['Recommendation']) {
+        shouldLogInActionHistory = !(searchInterface instanceof Coveo['Recommendation']);
+      }
       (<QueryController>Component.get(element, QueryController)).executeQuery({
-        logInActionsHistory: Coveo['Recommendation'] && searchInterface instanceof Coveo['Recommendation'],
+        logInActionsHistory: shouldLogInActionHistory,
         isFirstQuery: true
       });
     }

src/ui/Recommendation/Recommendation.ts

@@ -22,6 +22,7 @@ import { get } from '../Base/RegisteredNamedMethods';
 import { InitializationEvents } from '../../events/InitializationEvents';
 import { ComponentOptionsModel } from '../../models/ComponentOptionsModel';
 import _ = require('underscore');
+import HistoryQueryElement = CoveoAnalytics.HistoryQueryElement;
 
 export interface IRecommendationOptions extends ISearchInterfaceOptions {
   mainSearchInterface?: HTMLElement;
@@ -209,6 +210,10 @@ export class Recommendation extends SearchInterface implements IComponentBinding
 
 
     this.historyStore = new history.HistoryStore();
+    if (!this.options.mainSearchInterface) {
+      // When the recommendation component is "standalone", we add additional safeguard against bad config.
+      this.ensureCurrentPageViewExistsInStore();
+    }
     ResponsiveRecommendation.init(this.root, this, options);
   }
 
@@ -240,6 +245,21 @@ export class Recommendation extends SearchInterface implements IComponentBinding
     this.element.style.display = this.displayStyle;
   }
 
+  private ensureCurrentPageViewExistsInStore() {
+    // It's not 100% sure that the element will actually be added in the store.
+    // It's possible that an external script configured by the end user to log the page view already did that.
+    // So we *could* end up with duplicate values in the store :
+    // We rely on the fact that the coveo.analytics lib has defensive code against consecutive page view that are identical.
+    // This is mainly done if the recommendation component is being initialized before the page view could be logged correctly by the coveo.analytics externa lib.
+    const historyElement = {
+      name: 'PageView',
+      value: document.location.toString(),
+      time: JSON.stringify(new Date()),
+      title: document.title
+    };
+    this.historyStore.addElement(historyElement);
+  }
+
   private bindToMainSearchInterface() {
     this.bindComponentOptionsModelToMainSearchInterface();
     this.bindQueryEventsToMainSearchInterface();
@@ -380,6 +400,6 @@ export class Recommendation extends SearchInterface implements IComponentBinding
     Recommendation.NEXT_ID++;
     this.options.id = id;
   }
-
 }
+
 // We do not register the Recommendation component since it is done with .coveo('initRecommendation')

test/Simulate.ts

@@ -166,6 +166,23 @@ export class Simulate {
     return modalBox;
   }
 
+  static analyticsStoreModule(actionsHistory = []) {
+    return {
+      addElement: (query: IQuery) => {
+      },
+      getHistory: () => {
+        return actionsHistory;
+      },
+      setHistory: (history: any[]) => {
+      },
+      clear: () => {
+      },
+      getMostRecentElement: () => {
+        return null;
+      }
+    };
+  }
+
   static omnibox(env: IMockEnvironment, options?): IOmniboxData {
     let expression = {
       word: 'foo',

test/controllers/QueryControllerTest.ts

@@ -3,8 +3,8 @@ import { QueryController } from '../../src/controllers/QueryController';
 import { $$ } from '../../src/utils/Dom';
 import { FakeResults } from '../Fake';
 import { QueryBuilder } from '../../src/ui/Base/QueryBuilder';
-import { IQuery } from '../../src/rest/Query';
 import { QueryEvents, IBuildingQueryEventArgs } from '../../src/events/QueryEvents';
+import { Simulate } from '../Simulate';
 
 export function QueryControllerTest() {
   describe('QueryController', function () {
@@ -217,18 +217,7 @@ export function QueryControllerTest() {
       let store: CoveoAnalytics.HistoryStore;
 
       beforeEach(function () {
-        store = {
-          addElement: (query: IQuery) => {
-          },
-          getHistory: () => {
-            return [];
-          },
-          setHistory: (history: any[]) => {
-          },
-          clear: () => {
-          }
-        };
-
+        store = Simulate.analyticsStoreModule();
         test.cmp.historyStore = store;
         spyOn(store, 'addElement');
       });

test/ui/InitializationTest.ts

@@ -8,7 +8,6 @@ import { Facet } from '../../src/ui/Facet/Facet';
 import { Pager } from '../../src/ui/Pager/Pager';
 import { ResultList } from '../../src/ui/ResultList/ResultList';
 import { Simulate } from '../Simulate';
-declare let coveoanalytics;
 declare let $;
 
 export function InitializationTest() {
@@ -192,6 +191,32 @@ export function InitializationTest() {
       Simulate.removeJQuery();
     });
 
+    it('will trigger a query automatically by default', () => {
+      Initialization.initializeFramework(root, searchInterfaceOptions, () => {
+        Initialization.initSearchInterface(root, searchInterfaceOptions);
+      });
+      expect(endpoint.search).toHaveBeenCalled();
+    });
+
+    it('will not trigger a query automatically if specified', () => {
+      searchInterfaceOptions['SearchInterface'].autoTriggerQuery = false;
+      Initialization.initializeFramework(root, searchInterfaceOptions, () => {
+        Initialization.initSearchInterface(root, searchInterfaceOptions);
+      });
+      expect(endpoint.search).not.toHaveBeenCalled();
+    });
+
+    it('will send action history on automatic query', () => {
+      localStorage.removeItem('__coveo.analytics.history');
+      expect(localStorage.getItem('__coveo.analytics.history')).toBeNull();
+      Initialization.initializeFramework(root, searchInterfaceOptions, () => {
+        Initialization.initSearchInterface(root, searchInterfaceOptions);
+      });
+      const actionHistory = localStorage.getItem('__coveo.analytics.history');
+      expect(actionHistory).not.toBeNull();
+      expect(JSON.parse(actionHistory)[0].name).toEqual('Query');
+    });
+
     describe('when initializing recommendation interface', function () {
       let options;
       beforeEach(function () {
@@ -207,14 +232,21 @@ export function InitializationTest() {
 
       afterEach(function () {
         options = null;
-        coveoanalytics = undefined;
       });
 
       it('should be able to generate to components', function () {
         expect(Component.get(queryBox) instanceof Querybox).toBe(false);
         Initialization.initRecommendationInterface(root, options);
         expect(Component.get(queryBox) instanceof Querybox).toBe(true);
       });
+
+      it('should not send action history on automatic query', () => {
+        localStorage.removeItem('__coveo.analytics.history');
+        expect(localStorage.getItem('__coveo.analytics.history')).toBeNull();
+        Initialization.initRecommendationInterface(root, options);
+        const actionHistory = localStorage.getItem('__coveo.analytics.history');
+        expect(actionHistory).toBeNull();
+      });
     });
   });
 }

test/ui/RecommendationTest.ts

@@ -2,7 +2,6 @@ import * as Mock from '../MockEnvironment';
 import { SearchInterface } from '../../src/ui/SearchInterface/SearchInterface';
 import { Recommendation } from '../../src/ui/Recommendation/Recommendation';
 import { IRecommendationOptions } from '../../src/ui/Recommendation/Recommendation';
-import { IQuery } from '../../src/rest/Query';
 import { Simulate } from '../Simulate';
 import { QueryBuilder } from '../../src/ui/Base/QueryBuilder';
 import { FakeResults } from '../Fake';
@@ -25,12 +24,7 @@ export function RecommendationTest() {
           user_id: userId
         })
       };
-      store = {
-        addElement: (query: IQuery) => { },
-        getHistory: () => { return actionsHistory; },
-        setHistory: (history: any[]) => { },
-        clear: () => { }
-      };
+      store = Simulate.analyticsStoreModule(actionsHistory);
       test = Mock.optionsSearchInterfaceSetup<Recommendation, IRecommendationOptions>(Recommendation, options);
       test.cmp.historyStore = store;
     });