Skip to content

Commit 4a925f9

Browse files
bradenmacdonaldbradenmacdonald
authored
refactor: convert masquerade UI widgets to Function Components + TypeScript (#1513)
* refactor: convert masquerade UI widgets to TypeScript * test: improve test coverage * chore: upgrade @testing-library/user-event to v14 * test: improve test coverage * test: improve test coverage
1 parent f5b6243 commit 4a925f9

22 files changed

Lines changed: 562 additions & 519 deletions

‎package-lock.json‎

Lines changed: 5 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
"@testing-library/jest-dom": "5.17.0",
8484
"@testing-library/react": "12.1.5",
8585
"@testing-library/react-hooks": "^8.0.1",
86-
"@testing-library/user-event": "13.5.0",
86+
"@testing-library/user-event": "14.5.2",
8787
"axios-mock-adapter": "2.1.0",
8888
"bundlewatch": "^0.4.0",
8989
"eslint-import-resolver-webpack": "^0.13.9",

‎src/course-home/dates-tab/DatesTab.test.jsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -135,17 +135,20 @@ describe('DatesTab', () => {
135135
});
136136

137137
it('shows extra info', async () => {
138+
const user = userEvent.setup();
138139
const { items } = await getDay('Sat, Aug 17, 2030');
139140
expect(items).toHaveLength(3);
140141

141142
const tipIcon = within(items[2]).getByTestId('dates-extra-info');
142143
const tipText = "ORA Dates are set by the instructor, and can't be changed";
143144

144145
expect(screen.queryByText(tipText)).toBeNull(); // tooltip does not start in DOM
145-
userEvent.hover(tipIcon);
146-
const tooltip = screen.getByText(tipText); // now it's there
147-
userEvent.unhover(tipIcon);
148-
await waitForElementToBeRemoved(tooltip); // and it's gone again
146+
await user.hover(tipIcon);
147+
screen.getByText(tipText); // now it's there
148+
await user.unhover(tipIcon);
149+
await waitFor(() => {
150+
expect(screen.queryByText(tipText)).toBeNull(); // and it's gone again
151+
});
149152
});
150153
});
151154

‎src/course-home/outline-tab/OutlineTab.test.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ describe('Outline Tab', () => {
143143
});
144144

145145
it('handles expand/collapse all button click', async () => {
146+
const user = userEvent.setup();
146147
await fetchAndRender();
147148
// Button renders as "Expand All"
148149
const expandButton = screen.getByRole('button', { name: 'Expand all' });
@@ -153,11 +154,11 @@ describe('Outline Tab', () => {
153154
expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false');
154155

155156
// Click to expand section
156-
userEvent.click(expandButton);
157+
await user.click(expandButton);
157158
await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'true'));
158159

159160
// Click to collapse section
160-
userEvent.click(expandButton);
161+
await user.click(expandButton);
161162
await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false'));
162163
});
163164

@@ -275,16 +276,17 @@ describe('Outline Tab', () => {
275276
});
276277

277278
it('renders show more/less button and handles click', async () => {
279+
const user = userEvent.setup();
278280
expect(screen.getByTestId('alert-container-welcome')).toBeInTheDocument();
279281
let showMoreButton = screen.getByRole('button', { name: 'Show More' });
280282
expect(showMoreButton).toBeInTheDocument();
281283

282-
userEvent.click(showMoreButton);
284+
await user.click(showMoreButton);
283285
let showLessButton = screen.getByRole('button', { name: 'Show Less' });
284286
expect(showLessButton).toBeInTheDocument();
285287
expect(screen.getByTestId('long-welcome-message-iframe')).toBeInTheDocument();
286288

287-
userEvent.click(showLessButton);
289+
await user.click(showLessButton);
288290
showLessButton = screen.queryByRole('button', { name: 'Show Less' });
289291
expect(showLessButton).not.toBeInTheDocument();
290292
showMoreButton = screen.getByRole('button', { name: 'Show More' });

‎src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ describe('<CourseOutlineTray />', () => {
8585
});
8686

8787
it('collapses sidebar correctly when toggle button is clicked', async () => {
88+
const user = userEvent.setup();
8889
const mockToggleSidebar = jest.fn();
8990
await initTestStore();
9091
renderWithProvider({ toggleSidebar: mockToggleSidebar });
@@ -94,45 +95,48 @@ describe('<CourseOutlineTray />', () => {
9495
expect(sidebarBackBtn).toBeInTheDocument();
9596
expect(collapseBtn).toBeInTheDocument();
9697

97-
userEvent.click(collapseBtn);
98+
await user.click(collapseBtn);
9899
expect(mockToggleSidebar).toHaveBeenCalledWith(null);
99100
});
100101

101102
it('toggles openSequenceId correctly when a sequence is clicked', async () => {
103+
const user = userEvent.setup();
102104
await initTestStore();
103105
renderWithProvider();
104106
const sequenceButton = screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` });
105107
expect(sequenceButton).toBeInTheDocument();
106-
userEvent.click(sequenceButton);
108+
await user.click(sequenceButton);
107109
expect(screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` })).toHaveAttribute('aria-expanded', 'true');
108-
userEvent.click(sequenceButton);
110+
await user.click(sequenceButton);
109111
expect(screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` })).toHaveAttribute('aria-expanded', 'false');
110112
});
111113

112114
it('updates setOpenSequenceId correctly when toggling sequences', async () => {
115+
const user = userEvent.setup();
113116
await initTestStore();
114117
renderWithProvider();
115118
const sequenceButton = screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` });
116119
expect(sequenceButton).toBeInTheDocument();
117-
userEvent.click(sequenceButton);
120+
await user.click(sequenceButton);
118121
expect(sequenceButton).toHaveAttribute('aria-expanded', 'true');
119-
userEvent.click(sequenceButton);
122+
await user.click(sequenceButton);
120123
expect(sequenceButton).toHaveAttribute('aria-expanded', 'false');
121124
});
122125

123126
it('navigates to section or sequence level correctly on click by back/section button', async () => {
127+
const user = userEvent.setup();
124128
await initTestStore();
125129
renderWithProvider();
126130

127131
const sidebarBackBtn = screen.queryByRole('button', { name: section.title });
128132
expect(sidebarBackBtn).toBeInTheDocument();
129133
expect(screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` })).toBeInTheDocument();
130134

131-
userEvent.click(sidebarBackBtn);
135+
await user.click(sidebarBackBtn);
132136
expect(sidebarBackBtn).not.toBeInTheDocument();
133137
expect(screen.queryByText(messages.courseOutlineTitle.defaultMessage)).toBeInTheDocument();
134138

135-
userEvent.click(screen.getByRole('button', { name: `${section.title} , ${courseOutlineMessages.incompleteSection.defaultMessage}` }));
139+
await user.click(screen.getByRole('button', { name: `${section.title} , ${courseOutlineMessages.incompleteSection.defaultMessage}` }));
136140
expect(screen.queryByRole('button', { name: section.title })).toBeInTheDocument();
137141
});
138142
});

‎src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.test.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ describe('<CourseOutlineTrigger />', () => {
4343
}
4444

4545
it('renders correctly for desktop when sidebar is enabled', async () => {
46+
const user = userEvent.setup();
4647
const mockToggleSidebar = jest.fn();
4748
await initTestStore({ enableNavigationSidebar: { enable_navigation_sidebar: true } });
4849
renderWithProvider({ toggleSidebar: mockToggleSidebar }, { isMobileView: false });
@@ -52,13 +53,14 @@ describe('<CourseOutlineTrigger />', () => {
5253
});
5354
expect(toggleButton).toBeInTheDocument();
5455

55-
userEvent.click(toggleButton);
56+
await user.click(toggleButton);
5657

5758
expect(mockToggleSidebar).toHaveBeenCalled();
5859
expect(mockToggleSidebar).toHaveBeenCalledWith(outlineSidebarId);
5960
});
6061

6162
it('renders correctly for mobile when sidebar is enabled', async () => {
63+
const user = userEvent.setup();
6264
const mockToggleSidebar = jest.fn();
6365
await initTestStore({ enableNavigationSidebar: { enable_navigation_sidebar: true } });
6466
renderWithProvider({
@@ -71,13 +73,14 @@ describe('<CourseOutlineTrigger />', () => {
7173
});
7274
expect(toggleButton).toBeInTheDocument();
7375

74-
userEvent.click(toggleButton);
76+
await user.click(toggleButton);
7577

7678
expect(mockToggleSidebar).toHaveBeenCalled();
7779
expect(mockToggleSidebar).toHaveBeenCalledWith(outlineSidebarId);
7880
});
7981

8082
it('changes current sidebar value on click', async () => {
83+
const user = userEvent.setup();
8184
const mockToggleSidebar = jest.fn();
8285
await initTestStore({ enableNavigationSidebar: { enable_navigation_sidebar: true } });
8386
renderWithProvider({
@@ -91,7 +94,7 @@ describe('<CourseOutlineTrigger />', () => {
9194
});
9295
expect(toggleButton).toBeInTheDocument();
9396

94-
userEvent.click(toggleButton);
97+
await user.click(toggleButton);
9598

9699
expect(mockToggleSidebar).toHaveBeenCalledTimes(1);
97100
expect(mockToggleSidebar).toHaveBeenCalledWith(null);

‎src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.test.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ describe('<SidebarSection />', () => {
3636
});
3737

3838
it('renders correctly when section is incomplete', async () => {
39+
const user = userEvent.setup();
3940
await initTestStore();
4041
const { getByText, container } = render(<RootWrapper />);
4142

@@ -44,12 +45,13 @@ describe('<SidebarSection />', () => {
4445
expect(container.querySelector('.text-success')).not.toBeInTheDocument();
4546

4647
const button = getByText(section.title);
47-
userEvent.click(button);
48+
await user.click(button);
4849
expect(mockHandleSelectSection).toHaveBeenCalledTimes(1);
4950
expect(mockHandleSelectSection).toHaveBeenCalledWith(section.id);
5051
});
5152

5253
it('renders correctly when section is complete', async () => {
54+
const user = userEvent.setup();
5355
await initTestStore();
5456
const { getByText, getByTestId } = render(
5557
<RootWrapper section={{ ...section, completionStat: { completed: 4, total: 4 }, complete: true }} />,
@@ -60,7 +62,7 @@ describe('<SidebarSection />', () => {
6062
expect(getByTestId('check-circle-icon')).toBeInTheDocument();
6163

6264
const button = getByText(section.title);
63-
userEvent.click(button);
65+
await user.click(button);
6466
expect(mockHandleSelectSection).toHaveBeenCalledTimes(1);
6567
expect(mockHandleSelectSection).toHaveBeenCalledWith(section.id);
6668
});

‎src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.test.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ describe('<SidebarSequence />', () => {
5454
});
5555

5656
it('renders correctly when sequence is not collapsed and complete', async () => {
57+
const user = userEvent.setup();
5758
await initTestStore();
5859
renderWithProvider({
5960
defaultOpen: true,
@@ -67,6 +68,6 @@ describe('<SidebarSequence />', () => {
6768
expect(screen.getByText(sequence.title)).toBeInTheDocument();
6869
expect(screen.getByText(sequenceDescription)).toBeInTheDocument();
6970
expect(screen.getByText(`, ${courseOutlineMessages.completedAssignment.defaultMessage}`)).toBeInTheDocument();
70-
userEvent.click(screen.getByText(sequence.title));
71+
await user.click(screen.getByText(sequence.title));
7172
});
7273
});

‎src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.test.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ describe('<SidebarUnit />', () => {
8888
});
8989

9090
it('sends log event correctly when unit is clicked', async () => {
91+
const user = userEvent.setup();
9192
await initTestStore();
9293
renderWithProvider({ unit: { ...unit } });
9394
const logData = {
@@ -99,7 +100,7 @@ describe('<SidebarUnit />', () => {
99100
widget_placement: 'left',
100101
};
101102

102-
userEvent.click(screen.getByText(unit.title));
103+
await user.click(screen.getByText(unit.title));
103104

104105
expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.sequence.tab_selected', logData);
105106
expect(sendTrackingLogEvent).toHaveBeenCalledWith('edx.ui.lms.sequence.tab_selected', logData);

‎src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.jsx‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

0 commit comments

Comments
 (0)