From f4da8a626e666d276b0c40fa29b463ebe9c8baf6 Mon Sep 17 00:00:00 2001 From: Marcos Date: Thu, 11 Jul 2024 10:50:36 -0300 Subject: [PATCH] fix: Updated Sidebar test and fixed warning --- src/components/Disclosure/index.jsx | 2 +- src/components/Sidebar/index.jsx | 10 ++-- src/components/Sidebar/index.test.jsx | 71 ++++++++++++++++++++++----- 3 files changed, 64 insertions(+), 19 deletions(-) diff --git a/src/components/Disclosure/index.jsx b/src/components/Disclosure/index.jsx index cdb383bb..e4f42242 100644 --- 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  privacy policy diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx index a7fbd52f..8d0b7312 100644 --- 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 diff --git a/src/components/Sidebar/index.test.jsx b/src/components/Sidebar/index.test.jsx index 04b59f34..cc7147d7 100644 --- 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,6 +13,21 @@ 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, @@ -19,7 +35,7 @@ const defaultProps = { 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( , initState, )); @@ -46,24 +62,35 @@ describe('', () => { 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,10 +114,10 @@ describe('', () => { }, }; - 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(); }); @@ -98,18 +125,36 @@ describe('', () => { 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, + }); + }); }); });