feat: ✨ Tracking of search action ENT-4126 (#95)

* feat: ✨ Tracking of search action

When search button is clicked or search initiated, send tracking event with query string data

ENT-4126

* feat: ✨ Use trackingName from context if found

Only send tracking during search if context contains the trackingEvent string input value

ENT-4126

* test: use user-events instead of fireEvent

use user-events instead of fireEvent

ENT-4126

* feat: refine query_submitted event name

better naming of the query_submitted action as a event name under catalog_search

ENT-4126

.gitignore

@@ -1,3 +1,4 @@
+.vscode
 .idea
 coverage
 dist

.nvmrc

@@ -0,0 +1 @@
+12.10.0

package.json

@@ -45,6 +45,7 @@
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "11.2.6",
     "@testing-library/react-hooks": "3.4.2",
+    "@testing-library/user-event": "^13.1.5",
     "algoliasearch": "^4.8.5",
     "axios-mock-adapter": "1.19.0",
     "classnames": "^2.2.5",

src/course-search/SearchBox.jsx

@@ -4,19 +4,26 @@ import classNames from 'classnames';
 import { SearchField } from '@edx/paragon';
 import { connectSearchBox } from 'react-instantsearch-dom';
 
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
 import { deleteRefinementAction, setRefinementAction } from './data/actions';
 import { STYLE_VARIANTS } from '../constants';
 import { SearchContext } from './SearchContext';
 import { QUERY_PARAM_FOR_PAGE, QUERY_PARAM_FOR_SEARCH_QUERY } from './data/constants';
 
 export const searchText = 'Search courses';
+// this prefix will be combined with one of the SearchBox props to create a full tracking event name
+// only if event name prop is provided by user. In the absence of the tracking name prop,
+// no tracking event will be sent.
+export const SEARCH_EVENT_NAME_PREFIX = 'edx.enterprise';
+export const QUERY_SUBMITTED_EVENT = 'catalog_search.query_submitted';
 
 export const SearchBoxBase = ({
   className,
   defaultRefinement,
   variant,
 }) => {
-  const { dispatch } = useContext(SearchContext);
+  const { dispatch, trackingName } = useContext(SearchContext);
 
   /**
    * Handles when a search is submitted by adding the user's search
@@ -26,6 +33,11 @@ export const SearchBoxBase = ({
   const handleSubmit = (searchQuery) => {
     dispatch(setRefinementAction(QUERY_PARAM_FOR_SEARCH_QUERY, searchQuery));
     dispatch(deleteRefinementAction(QUERY_PARAM_FOR_PAGE));
+    if (trackingName) {
+      sendTrackEvent(`${SEARCH_EVENT_NAME_PREFIX}.${trackingName}.${QUERY_SUBMITTED_EVENT}`, {
+        query: searchQuery,
+      });
+    }
   };
 
   /**

src/course-search/SearchContext.jsx

@@ -27,7 +27,7 @@ export const getRefinementsToSet = (queryParams, activeFacetAttributes) => {
   return refinementsToSet;
 };
 
-const SearchData = ({ children, searchFacetFilters }) => {
+const SearchData = ({ children, searchFacetFilters, trackingName }) => {
   const [refinementsFromQueryParams, dispatch] = useReducer(
     refinementsReducer,
     {},
@@ -61,8 +61,9 @@ const SearchData = ({ children, searchFacetFilters }) => {
       refinementsFromQueryParams,
       dispatch,
       searchFacetFilters,
+      trackingName,
     }),
-    [refinementsFromQueryParams, dispatch, searchFacetFilters],
+    [refinementsFromQueryParams, dispatch, searchFacetFilters, trackingName],
   );
 
   return (
@@ -72,6 +73,7 @@ const SearchData = ({ children, searchFacetFilters }) => {
 
 SearchData.defaultProps = {
   searchFacetFilters: SEARCH_FACET_FILTERS,
+  trackingName: null,
 };
 
 SearchData.propTypes = {
@@ -81,6 +83,7 @@ SearchData.propTypes = {
     title: PropTypes.string.isRequired,
     isSortedAlphabetical: PropTypes.bool,
   })),
+  trackingName: PropTypes.string,
 };
 
 export default SearchData;

src/course-search/tests/SearchBox.test.jsx

@@ -1,9 +1,19 @@
 import React from 'react';
-import { screen, fireEvent } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 
-import { SearchBoxBase, searchText } from '../SearchBox';
-import { renderWithSearchContext } from '../../utils/tests';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+import {
+  SearchBoxBase,
+  searchText,
+  SEARCH_EVENT_NAME_PREFIX,
+  QUERY_SUBMITTED_EVENT,
+} from '../SearchBox';
+import { renderWithSearchContext, renderWithSearchContextAndTracking } from '../../utils/tests';
+
+jest.mock('@edx/frontend-platform/analytics');
 
 const TEST_QUERY = 'test query';
 
@@ -30,18 +40,33 @@ describe('<SearchBox />', () => {
     const { history } = renderWithSearchContext(<SearchBoxBase />);
 
     // fill in search input and submit the search
-    fireEvent.change(screen.getByRole('searchbox'), { target: { value: TEST_QUERY } });
-    fireEvent.click(screen.getByText('submit search'));
+    userEvent.type(screen.getByRole('searchbox'), TEST_QUERY);
+    userEvent.click(screen.getByText('submit search'));
 
     // assert url is updated with the query
     expect(history).toHaveLength(2);
     expect(history.location.search).toEqual('?q=test%20query');
+    // check tracking is not invoked due to absent trackingName in context
+    expect(sendTrackEvent).not.toHaveBeenCalled();
 
     // clear the input
-    fireEvent.click(screen.getByText('clear search'));
+    userEvent.click(screen.getByText('clear search'));
 
     // assert query no longer exists in url
     expect(history).toHaveLength(3);
     expect(history.location.search).toEqual('');
   });
+  test('tracking event when search initiated with trackingName present in context', () => {
+    renderWithSearchContextAndTracking(<SearchBoxBase />, 'aProduct');
+
+    // fill in search input and submit the search
+    userEvent.type(screen.getByRole('searchbox'), TEST_QUERY);
+    userEvent.click(screen.getByText('submit search'));
+
+    // check tracking is invoked due to trackingName in context
+    expect(sendTrackEvent).toHaveBeenCalledWith(
+      `${SEARCH_EVENT_NAME_PREFIX}.aProduct.${QUERY_SUBMITTED_EVENT}`,
+      { query: TEST_QUERY },
+    );
+  });
 });

src/utils/tests.jsx

@@ -29,3 +29,9 @@ export const renderWithSearchContext = (children) => renderWithRouter(
     {children}
   </SearchData>,
 );
+
+export const renderWithSearchContextAndTracking = (children, trackingName) => renderWithRouter(
+  <SearchData trackingName={trackingName}>
+    {children}
+  </SearchData>,
+);