fix: Updated Sidebar test and fixed warning

edx · Jul 11, 2024 · f4da8a6 · f4da8a6
1 parent bd16de8
commit f4da8a6
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 19 deletions.
diff --git a/src/components/Disclosure/index.jsx b/src/components/Disclosure/index.jsx
@@ -37,7 +37,7 @@ const Disclosure = ({ children }) => (
       Your personal data will be used as described in our&nbsp;
       <Hyperlink
         className="privacy-policy-link text-light-100"
-        destination={getConfig().PRIVACY_POLICY_URL}
+        destination={getConfig().PRIVACY_POLICY_URL ?? ''}
       >
         privacy policy
       </Hyperlink>

diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
@@ -9,16 +9,15 @@ import {
 } from '@openedx/paragon';
 import { Close } from '@openedx/paragon/icons';
 
+import { clearMessages } from '../../data/thunks';
+import { PROMPT_EXPERIMENT_FLAG, PROMPT_EXPERIMENT_KEY } from '../../constants/experiments';
+import { showControlSurvey, showVariationSurvey } from '../../utils/surveyMonkey';
+
 import APIError from '../APIError';
 import ChatBox from '../ChatBox';
 import Disclosure from '../Disclosure';
 import MessageForm from '../MessageForm';
 import './Sidebar.scss';
-import {
-  clearMessages,
-} from '../../data/thunks';
-import { PROMPT_EXPERIMENT_FLAG, PROMPT_EXPERIMENT_KEY } from '../../constants/experiments';
-import { showControlSurvey, showVariationSurvey } from '../../utils/surveyMonkey';
 
 const Sidebar = ({
   courseId,
@@ -126,6 +125,7 @@ const Sidebar = ({
           aria-label="clear"
           variant="primary"
           type="button"
+          data-testid="sidebar-clear-btn"
         >
           Clear
         </Button>

diff --git a/src/components/Sidebar/index.test.jsx b/src/components/Sidebar/index.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
-import { render, act } from '../../utils/utils.test';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { render as renderComponent, act } from '../../utils/utils.test';
 import { initialState } from '../../data/slice';
 import { PROMPT_EXPERIMENT_FLAG, PROMPT_EXPERIMENT_KEY } from '../../constants/experiments';
 import { showControlSurvey, showVariationSurvey } from '../../utils/surveyMonkey';
@@ -12,14 +13,29 @@ jest.mock('../../utils/surveyMonkey', () => ({
   showVariationSurvey: jest.fn(),
 }));
 
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockDispatch,
+}));
+
+const clearMessagesAction = 'clear-messages-action';
+jest.mock('../../data/thunks', () => ({
+  clearMessages: () => 'clear-messages-action',
+}));
+
 const defaultProps = {
   courseId: 'some-course-id',
   isOpen: true,
   setIsOpen: jest.fn(),
   unitId: 'some-unit-id',
 };
 
-const renderSidebar = async (props = {}, sliceState = {}) => {
+const render = async (props = {}, sliceState = {}) => {
   const componentProps = {
     ...defaultProps,
     ...props,
@@ -33,7 +49,7 @@ const renderSidebar = async (props = {}, sliceState = {}) => {
       },
     },
   };
-  return act(async () => render(
+  return act(async () => renderComponent(
     <Sidebar {...componentProps} />,
     initState,
   ));
@@ -46,24 +62,35 @@ describe('<Sidebar />', () => {
 
   describe('when it\'s open', () => {
     it('should render normally', () => {
-      renderSidebar();
+      render();
       expect(screen.queryByTestId('sidebar')).toBeInTheDocument();
     });
 
     it('should not render xpert if no disclosureAcknowledged', () => {
-      renderSidebar();
+      render();
       expect(screen.queryByTestId('sidebar-xpert')).not.toBeInTheDocument();
     });
 
     it('should render xpert if disclosureAcknowledged', () => {
-      renderSidebar(undefined, { disclosureAcknowledged: true });
+      render(undefined, { disclosureAcknowledged: true });
       expect(screen.queryByTestId('sidebar-xpert')).toBeInTheDocument();
     });
+
+    it('should dispatch clearMessages() and call sendTrackEvent() with the expected props on clear', () => {
+      render(undefined, { disclosureAcknowledged: true });
+
+      act(() => {
+        screen.queryByTestId('sidebar-clear-btn').click();
+      });
+
+      expect(mockDispatch).toHaveBeenCalledWith(clearMessagesAction);
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.learning_assistant.clear', { course_id: defaultProps.courseId });
+    });
   });
 
   describe('when it\'s not open', () => {
     it('should not render', () => {
-      renderSidebar({ isOpen: false });
+      render({ isOpen: false });
       expect(screen.queryByTestId('sidebar')).not.toBeInTheDocument();
     });
   });
@@ -87,29 +114,47 @@ describe('<Sidebar />', () => {
       },
     };
 
-    it('should call showVariationSurvey if experiment is active', async () => {
-      renderSidebar(undefined, defaultState);
+    it('should call showVariationSurvey if experiment is active', () => {
+      render(undefined, defaultState);
 
-      await act(() => {
+      act(() => {
         screen.queryByTestId('close-button').click();
       });
 
       expect(showVariationSurvey).toHaveBeenCalled();
       expect(showControlSurvey).not.toHaveBeenCalled();
     });
 
-    it('should call showControlSurvey if experiment is not active', async () => {
-      renderSidebar(undefined, {
+    it('should call showControlSurvey if experiment is not active', () => {
+      render(undefined, {
         ...defaultState,
         experiments: {},
       });
 
-      await act(() => {
+      act(() => {
         screen.queryByTestId('close-button').click();
       });
 
       expect(showControlSurvey).toHaveBeenCalled();
       expect(showVariationSurvey).not.toHaveBeenCalled();
     });
+
+    it('should dispatch clearMessages() and call sendTrackEvent() with the expected props on clear', () => {
+      render(undefined, {
+        ...defaultState,
+        disclosureAcknowledged: true,
+      });
+
+      act(() => {
+        screen.queryByTestId('sidebar-clear-btn').click();
+      });
+
+      expect(mockDispatch).toHaveBeenCalledWith(clearMessagesAction);
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.learning_assistant.clear', {
+        course_id: defaultProps.courseId,
+        experiment_name: PROMPT_EXPERIMENT_FLAG,
+        variation_key: PROMPT_EXPERIMENT_KEY,
+      });
+    });
   });
 });