diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.test.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.test.jsx index 23bf85e2f2..b7604c0991 100644 --- a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.test.jsx +++ b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.test.jsx @@ -1,11 +1,13 @@ import React from 'react'; -import MasqueradeWidget from './MasqueradeWidget'; -import { - render, screen, fireEvent, initializeTestStore, initializeTestStore, render, screen, waitFor, getByText, logUnhandledRequests, -} from '../../setupTest'; +import { getAllByRole } from '@testing-library/dom'; +import { act } from '@testing-library/react'; import { getConfig } from '@edx/frontend-platform'; import MockAdapter from 'axios-mock-adapter'; import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; +import MasqueradeWidget from './MasqueradeWidget'; +import { + render, screen, fireEvent, initializeTestStore, waitFor, logUnhandledRequests, +} from '../../setupTest'; const originalConfig = jest.requireActual('@edx/frontend-platform').getConfig(); jest.mock('@edx/frontend-platform', () => ({ @@ -17,47 +19,30 @@ getConfig.mockImplementation(() => originalConfig); describe('Masquerade Widget Dropdown', () => { let mockData; let courseware; - let models; + let mockResponse; let axiosMock; let masqueradeUrl; + const masqueradeOptions = [ + { + name: 'Staff', + role: 'staff', + }, + { + name: 'Specific Student...', + role: 'student', + user_name: '', + }, + { + group_id: 1, + name: 'Audit', + role: 'student', + user_partition_id: 50, + }, + ]; + beforeAll(async () => { const store = await initializeTestStore(); courseware = store.getState().courseware; - - mockData = { - courseId: courseware.courseId, - onError: () => {}, - }; - - mockResponse = { - success: true, - active: { - course_key: courseware.courseId, - group_id: null, - role: staff, - user_name: null, - user_partition_id: null, - group_name: null, - }, - available: [ - { - name: "Staff", - role: "staff", - }, - { - name: "Specific Student...", - role: "student", - user_name: "", - }, - { - group_id: 1, - name: "Audit", - role: "student", - user_partition_id: 50, - } - ], - } - axiosMock = new MockAdapter(getAuthenticatedHttpClient()); masqueradeUrl = `${getConfig().LMS_BASE_URL}/courses/${courseware.courseId}/masquerade`; }); @@ -65,16 +50,65 @@ describe('Masquerade Widget Dropdown', () => { beforeEach(() => { mockData = { courseId: courseware.courseId, - unitId: Object.values(models.units)[0].id, + onError: () => {}, + }; + + mockResponse = { + success: true, + active: { + course_key: courseware.courseId, + group_id: null, + role: 'staff', + user_name: null, + user_partition_id: null, + group_name: null, + }, + available: masqueradeOptions, }; axiosMock.reset(); axiosMock.onGet(masqueradeUrl).reply(200, mockResponse); logUnhandledRequests(axiosMock); }); - it('renders masquerade name correctly', () => { + it('renders masquerade name correctly', async () => { render(); + await waitFor(() => expect(axiosMock.history.get).toHaveLength(1)); expect(screen.getByRole('button')).toHaveTextContent('Staff'); }); + masqueradeOptions.forEach((option) => { + it(`marks role ${option.role} as active`, async () => { + const active = { + course_key: courseware.courseId, + group_id: option.group_id ?? null, + role: option.role, + user_name: option.user_name ?? null, + user_partition_id: option.user_partition_id ?? null, + group_name: null, + }; + + mockResponse = { + success: true, + active, + available: masqueradeOptions, + }; + + axiosMock.reset(); + axiosMock.onGet(masqueradeUrl).reply(200, mockResponse); + + const { container } = render(); + const dropdownToggle = container.querySelector('.dropdown-toggle'); + await act(async () => { + await fireEvent.click(dropdownToggle); + }); + const dropdownMenu = container.querySelector('.dropdown-menu'); + getAllByRole(dropdownMenu, 'button', { hidden: true }).forEach(button => { + if (button.textContent === option.name) { + expect(button).toHaveClass('active'); + } else { + expect(button).not.toHaveClass('active'); + } + }); + }); + }); });