test: add test cases

src/instructor-toolbar/masquerade-widget/MasqueradeWidget.test.jsx

@@ -45,14 +45,13 @@ describe('Masquerade Widget Dropdown', () => {
     courseware = store.getState().courseware;
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     masqueradeUrl = `${getConfig().LMS_BASE_URL}/courses/${courseware.courseId}/masquerade`;
-  });
-
-  beforeEach(() => {
     mockData = {
       courseId: courseware.courseId,
       onError: () => {},
     };
+  });
 
+  beforeEach(() => {
     mockResponse = {
       success: true,
       active: {
@@ -111,4 +110,28 @@ describe('Masquerade Widget Dropdown', () => {
       });
     });
   });
+
+  it('handles the clicks with toggle', async () => {
+    const { container } = render(<MasqueradeWidget {...mockData} />);
+    await waitFor(() => expect(axiosMock.history.get).toHaveLength(1));
+
+    const dropdownToggle = container.querySelector('.dropdown-toggle');
+    await act(async () => {
+      await fireEvent.click(dropdownToggle);
+    });
+    const dropdownMenu = container.querySelector('.dropdown-menu');
+    const studentOption = getAllByRole(dropdownMenu, 'button', { hidden: true }).filter(
+      button => (button.textContent === 'Specific Student...'),
+    )[0];
+    await act(async () => {
+      await fireEvent.click(studentOption);
+    });
+    getAllByRole(dropdownMenu, 'button', { hidden: true }).forEach(button => {
+      if (button.textContent === 'Specific Student...') {
+        expect(button).toHaveClass('active');
+      } else {
+        expect(button).not.toHaveClass('active');
+      }
+    });
+  });
 });

src/instructor-toolbar/masquerade-widget/MasqueradeWidgetOption.test.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { getAllByRole } from '@testing-library/dom';
+import { act } from '@testing-library/react';
+import { getConfig } from '@edx/frontend-platform';
+import MasqueradeWidgetOption from './MasqueradeWidgetOption';
+import {
+  render, fireEvent, initializeTestStore,
+} from '../../setupTest';
+
+const originalConfig = jest.requireActual('@edx/frontend-platform').getConfig();
+jest.mock('@edx/frontend-platform', () => ({
+  ...jest.requireActual('@edx/frontend-platform'),
+  getConfig: jest.fn(),
+}));
+getConfig.mockImplementation(() => originalConfig);
+
+describe('Masquerade Widget Dropdown', () => {
+  let courseware;
+  let mockDataStaff;
+  let mockDataStudent;
+  let active;
+
+  beforeAll(async () => {
+    const store = await initializeTestStore();
+    courseware = store.getState().courseware;
+    active = {
+      courseKey: courseware.courseId,
+      groupId: null,
+      role: 'staff',
+      userName: null,
+      userPartitionId: null,
+      groupName: null,
+    };
+    mockDataStaff = {
+      groupId: null,
+      groupName: 'Staff',
+      key: 'Staff',
+      role: 'staff',
+      selected: active,
+      userName: null,
+      userPartitionId: null,
+      userNameInputToggle: () => {},
+      onSubmit: () => {},
+    };
+    mockDataStudent = {
+      groupId: null,
+      groupName: 'Specific Student...',
+      key: 'Specific Student...',
+      role: 'student',
+      selected: active,
+      userName: '',
+      userPartitionId: null,
+      userNameInputToggle: () => {},
+      onSubmit: () => {},
+    };
+    Object.defineProperty(global, 'location', {
+      configurable: true,
+      value: { reload: jest.fn() },
+    });
+  });
+
+  it('renders masquerade active option correctly', async () => {
+    const { container } = render(<MasqueradeWidgetOption {...mockDataStaff} />);
+    const button = getAllByRole(container, 'button', { hidden: true })[0];
+    expect(button).toHaveTextContent('Staff');
+    expect(button).toHaveClass('active');
+  });
+
+  it('renders masquerade inactive option correctly', async () => {
+    const { container } = render(<MasqueradeWidgetOption {...mockDataStudent} />);
+    const button = getAllByRole(container, 'button', { hidden: true })[0];
+    expect(button).toHaveTextContent('Specific Student...');
+    expect(button).not.toHaveClass('active');
+  });
+
+  it('handles the clicks regular option', () => {
+    const onSubmit = jest.fn().mockImplementation(() => Promise.resolve());
+    const { container } = render(<MasqueradeWidgetOption {...mockDataStaff} onSubmit={onSubmit} />);
+    const button = getAllByRole(container, 'button', { hidden: true })[0];
+    act(() => {
+      fireEvent.click(button);
+    });
+    expect(onSubmit).toHaveBeenCalled();
+  });
+
+  it('handles the clicks student option', () => {
+    const userNameInputToggle = jest.fn().mockImplementation(() => Promise.resolve());
+    const { container } = render(
+      <MasqueradeWidgetOption {...mockDataStudent} userNameInputToggle={userNameInputToggle} />,
+    );
+    const button = getAllByRole(container, 'button', { hidden: true })[0];
+    act(() => {
+      fireEvent.click(button);
+    });
+    expect(userNameInputToggle).toHaveBeenCalled();
+  });
+});