chore: Added test coverage for ToggleXpertButton component

src/components/Sidebar/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, act } from '@testing-library/react';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { render as renderComponent, act } from '../../utils/utils.test';
+import { render as renderComponent } 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';

src/components/ToggleXpertButton/index.jsx

@@ -87,6 +87,7 @@ const ToggleXpert = ({
           `toggle position-fixed closed d-flex flex-column justify-content-end align-items-end mx-3 border-0
            ${chatMargin}`
         }
+        data-testid="xpert-toggle"
       >
         <div
           className="position-fixed learning-assistant-popup-modal mb-7"
@@ -133,6 +134,7 @@ const ToggleXpert = ({
               variant="light"
               className="dismiss-button mx-2 mt-1 bg-gray"
               size="sm"
+              data-testid="dismiss-button"
             />
             <button
               className="action-message open-negative-margin p-3 mb-4.5"

src/components/ToggleXpertButton/index.test.jsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { render as renderComponent } from '../../utils/utils.test';
+import { initialState } from '../../data/slice';
+import { PROMPT_EXPERIMENT_FLAG, PROMPT_EXPERIMENT_KEY } from '../../constants/experiments';
+
+import ToggleXpert from '.';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const mockedAuthenticatedUser = { userId: 123 };
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedUser: () => mockedAuthenticatedUser,
+}));
+
+const defaultProps = {
+  isOpen: false,
+  setIsOpen: jest.fn(),
+  courseId: 'some-course-id',
+  contentToolsEnabled: true,
+};
+
+const render = async (props = {}, sliceState = {}) => {
+  const componentProps = {
+    ...defaultProps,
+    ...props,
+  };
+
+  const initState = {
+    preloadedState: {
+      learningAssistant: {
+        ...initialState,
+        ...sliceState,
+      },
+    },
+  };
+  return renderComponent(
+    <ToggleXpert {...componentProps} />,
+    initState,
+  );
+};
+
+describe('<ToggleXpert />', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    jest.clearAllMocks();
+  });
+
+  describe('when it\'s closed', () => {
+    it('should render the component', () => {
+      render();
+      expect(screen.queryByTestId('xpert-toggle')).toBeInTheDocument();
+    });
+
+    it('should track the "Check it out" action', () => {
+      render();
+
+      screen.queryByTestId('check-button').click();
+
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.ui.lms.learning_assistant.launch',
+        {
+          course_id: defaultProps.courseId,
+          user_id: mockedAuthenticatedUser.userId,
+          source: 'cta',
+        },
+      );
+    });
+
+    it('should track the toggle action', () => {
+      render();
+
+      screen.queryByTestId('toggle-button').click();
+
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.ui.lms.learning_assistant.launch',
+        {
+          course_id: defaultProps.courseId,
+          user_id: mockedAuthenticatedUser.userId,
+          source: 'toggle',
+        },
+      );
+    });
+
+    it('should track the dismiss action', async () => {
+      render();
+
+      // Show CTA
+      await screen.queryByTestId('check-button').click();
+
+      await waitFor(() => expect(screen.queryByTestId('dismiss-button')).toBeInTheDocument());
+
+      // Dismiss it
+      await screen.queryByTestId('dismiss-button').click();
+
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.ui.lms.learning_assistant.dismiss_action_message',
+        {
+          course_id: defaultProps.courseId,
+        },
+      );
+    });
+  });
+
+  describe('when it\'s open', () => {
+    it('should not render', () => {
+      render({ isOpen: true });
+      expect(screen.queryByTestId('xpert-toggle')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('prompt experiment', () => {
+    const defaultState = {
+      experiments: {
+        [PROMPT_EXPERIMENT_FLAG]: {
+          enabled: true,
+          variationKey: PROMPT_EXPERIMENT_KEY,
+        },
+      },
+    };
+
+    it('should render the component', () => {
+      render();
+      expect(screen.queryByTestId('xpert-toggle')).toBeInTheDocument();
+    });
+
+    it('should track the "Check it out" action', () => {
+      render(undefined, defaultState);
+
+      screen.queryByTestId('check-button').click();
+
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.ui.lms.learning_assistant.launch',
+        {
+          course_id: defaultProps.courseId,
+          user_id: mockedAuthenticatedUser.userId,
+          source: 'cta',
+          experiment_name: PROMPT_EXPERIMENT_FLAG,
+          variation_key: PROMPT_EXPERIMENT_KEY,
+        },
+      );
+    });
+
+    it('should track the toggle action', () => {
+      render(undefined, defaultState);
+
+      screen.queryByTestId('toggle-button').click();
+
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.ui.lms.learning_assistant.launch',
+        {
+          course_id: defaultProps.courseId,
+          user_id: mockedAuthenticatedUser.userId,
+          source: 'toggle',
+          experiment_name: PROMPT_EXPERIMENT_FLAG,
+          variation_key: PROMPT_EXPERIMENT_KEY,
+        },
+      );
+    });
+
+    it('should track the dismiss action', async () => {
+      render(undefined, defaultState);
+
+      // Show CTA
+      await screen.queryByTestId('check-button').click();
+
+      await waitFor(() => expect(screen.queryByTestId('dismiss-button')).toBeInTheDocument());
+
+      // Dismiss it
+      await screen.queryByTestId('dismiss-button').click();
+
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.ui.lms.learning_assistant.dismiss_action_message',
+        {
+          course_id: defaultProps.courseId,
+          experiment_name: PROMPT_EXPERIMENT_FLAG,
+          variation_key: PROMPT_EXPERIMENT_KEY,
+        },
+      );
+    });
+  });
+});

src/utils/utils.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { render, act } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { configureStore } from '@reduxjs/toolkit';
 import { Provider } from 'react-redux';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -51,13 +51,4 @@ const createRandomResponseForTesting = () => {
   return { role: 'assistant', content: message.join(' ') };
 };
 
-// Helper, that is used to forcibly finalize all promises
-// in thunk before running matcher against state.
-const executeThunk = async (thunk, dispatch, getState) => {
-  await thunk(dispatch, getState);
-  await new Promise(setImmediate);
-};
-
-export {
-  renderWithProviders as render, act, createRandomResponseForTesting, executeThunk,
-};
+export { renderWithProviders as render, createRandomResponseForTesting };