Andal.LND/frontend-app-discussions
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fixing test cases

Browse Source
This commit is contained in:
ayeshoali
2023-01-13 15:51:11 +05:00
committed by Mehak Nasir
parent f081e8dc77
commit bfcb1282f0
8 changed files with 578 additions and 618 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/discussions/comments/CommentsView.jsx
View File

@@ -139,7 +139,7 @@ function DiscussionCommentsView({
<>
{handleDefinition(messages.endorsedResponseCount, endorsedComments.length)}
{endorsed === EndorsementStatus.DISCUSSION
? handleComments(endorsedComments, false, false)
? handleComments(endorsedComments, true, false)
: handleComments(endorsedComments, false, false)}
</>
)}
@@ -147,7 +147,7 @@ function DiscussionCommentsView({
<>
{handleDefinition(messages.responseCount, unEndorsedComments.length)}
{unEndorsedComments.length === 0 && <br />}
{handleComments(unEndorsedComments, true)}
{handleComments(unEndorsedComments, false, true)}
{(userCanAddThreadInBlackoutDate && !!unEndorsedComments.length && !isClosed) && (
<div className="mx-4">
{!addingResponse && (
@@ -216,7 +216,13 @@ function CommentsView({ intl }) {
);
}
return (
<Spinner animation="border" variant="primary" data-testid="loading-indicator" />
<div style={{
position: 'absolute',
top: '50%',
}}
>
<Spinner animation="border" variant="primary" data-testid="loading-indicator" />
</div>
);
}

1045
src/discussions/comments/CommentsView.test.jsx
View File

@@ -155,577 +155,600 @@ describe('CommentsView', () => {
mockAxiosReturnPagedCommentsResponses();
});
// describe('for all post types', () => {
// function assertLastUpdateData(data) {
// expect(JSON.parse(axiosMock.history.patch[axiosMock.history.patch.length - 1].data)).toMatchObject(data);
// }
describe('for all post types', () => {
function assertLastUpdateData(data) {
expect(JSON.parse(axiosMock.history.patch[axiosMock.history.patch.length - 1].data)).toMatchObject(data);
}
// it('should show and hide the editor', async () => {
// renderComponent(discussionPostId);
// await waitFor(() => screen.findByText('comment number 1', { exact: false }));
// const addResponseButtons = screen.getAllByRole('button', { name: /add a response/i });
// await act(async () => {
// fireEvent.click(
// addResponseButtons[0],
// );
// });
// expect(screen.queryByTestId('tinymce-editor')).toBeInTheDocument();
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
// });
// expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
// });
it('should show and hide the editor', async () => {
renderComponent(discussionPostId);
await waitFor(() => screen.findByText('comment number 1', { exact: false }));
const addResponseButtons = screen.getAllByRole('button', { name: /add a response/i });
await act(async () => {
fireEvent.click(
addResponseButtons[0],
);
});
expect(screen.queryByTestId('tinymce-editor')).toBeInTheDocument();
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
});
expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
});
// it('should allow posting a response', async () => {
// renderComponent(discussionPostId);
// await waitFor(() => screen.findByText('comment number 1', { exact: false }));
// const responseButtons = screen.getAllByRole('button', { name: /add a response/i });
// await act(async () => {
// fireEvent.click(
// responseButtons[0],
// );
// });
// await act(() => {
// fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
// });
it('should allow posting a response', async () => {
renderComponent(discussionPostId);
await waitFor(() => screen.findByText('comment number 1', { exact: false }));
const responseButtons = screen.getAllByRole('button', { name: /add a response/i });
await act(async () => {
fireEvent.click(
responseButtons[0],
);
});
await act(() => {
fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
});
// await act(async () => {
// fireEvent.click(
// screen.getByText(/submit/i),
// );
// });
// expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
// await waitFor(async () => expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument());
// });
await act(async () => {
fireEvent.click(
screen.getByText(/submit/i),
);
});
expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
await waitFor(async () => expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument());
});
// it('should not allow posting a response on a closed post', async () => {
// renderComponent(closedPostId);
// await waitFor(() => screen.findByText('Thread-2', { exact: false }));
// expect(screen.queryByRole('button', { name: /add a response/i })).not.toBeInTheDocument();
// });
it('should not allow posting a response on a closed post', async () => {
renderComponent(closedPostId);
await waitFor(() => screen.findByText('Thread-2', { exact: false }));
expect(screen.queryByRole('button', { name: /add response/i })).not.toBeInTheDocument();
});
// it('should allow posting a comment', async () => {
// renderComponent(discussionPostId);
// await waitFor(() => screen.findByText('comment number 1', { exact: false }));
// await act(async () => {
// fireEvent.click(
// screen.getAllByRole('button', { name: /add a comment/i })[0],
// );
// });
// act(() => {
// fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
// });
it('should allow posting a comment', async () => {
renderComponent(discussionPostId);
await act(async () => {
fireEvent.mouseOver(await waitFor(() => screen.findByText('comment number 1', { exact: false })));
});
await act(async () => {
fireEvent.click(
screen.getAllByRole('button', { name: /add comment/i })[0],
);
});
act(() => {
fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
});
// await act(async () => {
// fireEvent.click(
// screen.getByText(/submit/i),
// );
// });
// expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
// await waitFor(async () => expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument());
// });
await act(async () => {
fireEvent.click(
screen.getByText(/submit/i),
);
});
expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
await waitFor(async () => expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument());
});
// it('should not allow posting a comment on a closed post', async () => {
// renderComponent(closedPostId);
// await waitFor(() => screen.findByText('thread-2', { exact: false }));
// await act(async () => {
// expect(
// screen.queryByRole('button', { name: /add a comment/i }),
// ).not.toBeInTheDocument();
// });
// });
it('should not allow posting a comment on a closed post', async () => {
renderComponent(closedPostId);
await waitFor(() => screen.findByText('thread-2', { exact: false }));
await act(async () => {
expect(
screen.queryByRole('button', { name: /add a comment/i }),
).not.toBeInTheDocument();
});
});
// it('should allow editing an existing comment', async () => {
// renderComponent(discussionPostId);
// await waitFor(() => screen.findByText('comment number 1', { exact: false }));
// await act(async () => {
// fireEvent.click(
// // The first edit menu is for the post, the second will be for the first comment.
// screen.getAllByRole('button', { name: /actions menu/i })[1],
// );
// });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /edit/i }));
// });
// act(() => {
// fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
// });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /submit/i }));
// });
// await waitFor(async () => {
// expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument();
// });
// });
it('should allow editing an existing comment', async () => {
renderComponent(discussionPostId);
await act(async () => {
fireEvent.mouseOver(await waitFor(() => screen.findByText('comment number 1', { exact: false })));
});
await act(async () => {
fireEvent.click(
// The first edit menu is for the post, the second will be for the first comment.
screen.getAllByRole('button', { name: /actions menu/i })[1],
);
});
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /edit/i }));
});
act(() => {
fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
});
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /submit/i }));
});
await waitFor(async () => {
expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument();
});
});
// async function setupCourseConfig(reasonCodesEnabled = true) {
// axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
// has_moderation_privileges: true,
// reason_codes_enabled: reasonCodesEnabled,
// editReasons: [
// { code: 'reason-1', label: 'reason 1' },
// { code: 'reason-2', label: 'reason 2' },
// ],
// postCloseReasons: [
// { code: 'reason-1', label: 'reason 1' },
// { code: 'reason-2', label: 'reason 2' },
// ],
// });
// axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
// await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
// }
async function setupCourseConfig(reasonCodesEnabled = true) {
axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
has_moderation_privileges: true,
reason_codes_enabled: reasonCodesEnabled,
editReasons: [
{ code: 'reason-1', label: 'reason 1' },
{ code: 'reason-2', label: 'reason 2' },
],
postCloseReasons: [
{ code: 'reason-1', label: 'reason 1' },
{ code: 'reason-2', label: 'reason 2' },
],
});
axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
}
// it('should show reason codes when editing an existing comment', async () => {
// setupCourseConfig();
// renderComponent(discussionPostId);
// await waitFor(() => screen.findByText('comment number 1', { exact: false }));
// await act(async () => {
// fireEvent.click(
// // The first edit menu is for the post, the second will be for the first comment.
// screen.getAllByRole('button', { name: /actions menu/i })[1],
// );
// });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /edit/i }));
// });
// expect(screen.queryByRole('combobox', { name: /reason for editing/i })).toBeInTheDocument();
// expect(screen.getAllByRole('option', { name: /reason \d/i })).toHaveLength(2);
// await act(async () => {
// fireEvent.change(screen.queryByRole('combobox', { name: /reason for editing/i }), { target: { value: null } });
// });
// await act(async () => {
// fireEvent.change(screen.queryByRole('combobox', { name: /reason for editing/i }), { target: { value: 'reason-1' } });
// });
// await act(async () => {
// fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
// });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /submit/i }));
// });
// assertLastUpdateData({ edit_reason_code: 'reason-1' });
// });
it('should show reason codes when editing an existing comment', async () => {
setupCourseConfig();
renderComponent(discussionPostId);
await act(async () => {
fireEvent.mouseOver(await waitFor(() => screen.findByText('comment number 1', { exact: false })));
});
await act(async () => {
fireEvent.click(
// The first edit menu is for the post, the second will be for the first comment.
screen.getAllByRole('button', { name: /actions menu/i })[1],
);
});
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /edit/i }));
});
expect(screen.queryByRole('combobox', { name: /reason for editing/i })).toBeInTheDocument();
expect(screen.getAllByRole('option', { name: /reason \d/i })).toHaveLength(2);
await act(async () => {
fireEvent.change(screen.queryByRole('combobox', { name: /reason for editing/i }), { target: { value: null } });
});
await act(async () => {
fireEvent.change(screen.queryByRole('combobox', { name: /reason for editing/i }), { target: { value: 'reason-1' } });
});
await act(async () => {
fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
});
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /submit/i }));
});
assertLastUpdateData({ edit_reason_code: 'reason-1' });
});
// it('should show reason codes when closing a post', async () => {
// setupCourseConfig();
// renderComponent(discussionPostId);
// await act(async () => {
// fireEvent.click(
// // The first edit menu is for the post
// screen.getAllByRole('button', {
// name: /actions menu/i,
// })[0],
// );
// });
// expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /close/i }));
// });
// expect(screen.queryByRole('dialog', { name: /close post/i })).toBeInTheDocument();
// expect(screen.queryByRole('combobox', { name: /reason/i })).toBeInTheDocument();
// expect(screen.getAllByRole('option', { name: /reason \d/i })).toHaveLength(2);
// await act(async () => {
// fireEvent.change(screen.queryByRole('combobox', { name: /reason/i }), { target: { value: 'reason-1' } });
// });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /close post/i }));
// });
// expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
// assertLastUpdateData({ closed: true, close_reason_code: 'reason-1' });
// });
it('should show reason codes when closing a post', async () => {
setupCourseConfig();
renderComponent(discussionPostId);
await act(async () => {
fireEvent.mouseOver(screen.getByTestId('post-thread-1'));
});
await act(async () => {
fireEvent.click(
// The first edit menu is for the post
screen.getAllByRole('button', {
name: /actions menu/i,
})[0],
);
});
expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /close/i }));
});
expect(screen.queryByRole('dialog', { name: /close post/i })).toBeInTheDocument();
expect(screen.queryByRole('combobox', { name: /reason/i })).toBeInTheDocument();
expect(screen.getAllByRole('option', { name: /reason \d/i })).toHaveLength(2);
await act(async () => {
fireEvent.change(screen.queryByRole('combobox', { name: /reason/i }), { target: { value: 'reason-1' } });
});
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /close post/i }));
});
expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
assertLastUpdateData({ closed: true, close_reason_code: 'reason-1' });
});
// it('should close the post directly if reason codes are not enabled', async () => {
// setupCourseConfig(false);
// renderComponent(discussionPostId);
// await act(async () => {
// fireEvent.click(
// // The first edit menu is for the post
// screen.getAllByRole('button', { name: /actions menu/i })[0],
// );
// });
// expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /close/i }));
// });
// expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
// assertLastUpdateData({ closed: true });
// });
it('should close the post directly if reason codes are not enabled', async () => {
setupCourseConfig(false);
renderComponent(discussionPostId);
await act(async () => {
fireEvent.mouseOver(screen.getByTestId('post-thread-1'));
});
await act(async () => {
fireEvent.click(
// The first edit menu is for the post
screen.getAllByRole('button', { name: /actions menu/i })[0],
);
});
expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /close/i }));
});
expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
assertLastUpdateData({ closed: true });
});
// it.each([true, false])(
// 'should reopen the post directly when reason codes enabled=%s',
// async (reasonCodesEnabled) => {
// setupCourseConfig(reasonCodesEnabled);
// renderComponent(closedPostId);
// await act(async () => {
// fireEvent.click(
// // The first edit menu is for the post
// screen.getAllByRole('button', { name: /actions menu/i })[0],
// );
// });
// expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /reopen/i }));
// });
// expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
// assertLastUpdateData({ closed: false });
// },
// );
it.each([true, false])(
'should reopen the post directly when reason codes enabled=%s',
async (reasonCodesEnabled) => {
setupCourseConfig(reasonCodesEnabled);
renderComponent(closedPostId);
await act(async () => {
fireEvent.mouseOver(screen.getByTestId('post-thread-2'));
});
await act(async () => {
fireEvent.click(
// The first edit menu is for the post
screen.getAllByRole('button', { name: /actions menu/i })[0],
);
});
expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /reopen/i }));
});
expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
assertLastUpdateData({ closed: false });
},
);
// it('should show the editor if the post is edited', async () => {
// setupCourseConfig(false);
// renderComponent(discussionPostId);
// await act(async () => {
// fireEvent.click(
// // The first edit menu is for the post
// screen.getAllByRole('button', { name: /actions menu/i })[0],
// );
// });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /edit/i }));
// });
// expect(testLocation.pathname).toBe(`/${courseId}/posts/${discussionPostId}/edit`);
// });
it('should show the editor if the post is edited', async () => {
setupCourseConfig(false);
renderComponent(discussionPostId);
await act(async () => {
fireEvent.mouseOver(screen.getByTestId('post-thread-1'));
});
await act(async () => {
fireEvent.click(
// The first edit menu is for the post
screen.getAllByRole('button', { name: /actions menu/i })[0],
);
});
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /edit/i }));
});
expect(testLocation.pathname).toBe(`/${courseId}/posts/${discussionPostId}/edit`);
});
// it('should allow pinning the post', async () => {
// renderComponent(discussionPostId);
// await act(async () => {
// fireEvent.click(
// // The first edit menu is for the post
// screen.getAllByRole('button', { name: /actions menu/i })[0],
// );
// });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /pin/i }));
// });
// assertLastUpdateData({ pinned: false });
// });
it('should allow pinning the post', async () => {
renderComponent(discussionPostId);
await act(async () => {
fireEvent.mouseOver(screen.getByTestId('post-thread-1'));
});
await act(async () => {
fireEvent.click(
// The first edit menu is for the post
screen.getAllByRole('button', { name: /actions menu/i })[0],
);
});
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /pin/i }));
});
assertLastUpdateData({ pinned: false });
});
// it('should allow reporting the post', async () => {
// renderComponent(discussionPostId);
// await act(async () => {
// fireEvent.click(
// // The first edit menu is for the post
// screen.getAllByRole('button', { name: /actions menu/i })[0],
// );
// });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /report/i }));
// });
// expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).toBeInTheDocument();
// await act(async () => {
// fireEvent.click(screen.queryByRole('button', { name: /Confirm/i }));
// });
// expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).not.toBeInTheDocument();
// assertLastUpdateData({ abuse_flagged: true });
// });
it('should allow reporting the post', async () => {
renderComponent(discussionPostId);
await act(async () => {
fireEvent.mouseOver(screen.getByTestId('post-thread-1'));
});
await act(async () => {
fireEvent.click(
// The first edit menu is for the post
screen.getAllByRole('button', { name: /actions menu/i })[0],
);
});
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /report/i }));
});
expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).toBeInTheDocument();
await act(async () => {
fireEvent.click(screen.queryByRole('button', { name: /Confirm/i }));
});
expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).not.toBeInTheDocument();
assertLastUpdateData({ abuse_flagged: true });
});
// it('handles liking a comment', async () => {
// renderComponent(discussionPostId);
it('handles liking a comment', async () => {
renderComponent(discussionPostId);
// // Wait for the content to load
// await screen.findByText('comment number 7', { exact: false });
// const view = screen.getByTestId('comment-comment-1');
// Wait for the content to load
await act(async () => {
fireEvent.mouseOver(await waitFor(() => screen.findByText('comment number 7', { exact: false })));
});
const view = screen.getByTestId('comment-comment-1');
// const likeButton = within(view).getByRole('button', { name: /like/i });
// await act(async () => {
// fireEvent.click(likeButton);
// });
// expect(axiosMock.history.patch).toHaveLength(2);
// expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ voted: true });
// });
const likeButton = within(view).getByRole('button', { name: /like/i });
await act(async () => {
fireEvent.click(likeButton);
});
expect(axiosMock.history.patch).toHaveLength(2);
expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ voted: true });
});
// it('handles endorsing comments', async () => {
// renderComponent(discussionPostId);
// // Wait for the content to load
// await screen.findByText('comment number 7', { exact: false });
it('handles endorsing comments', async () => {
renderComponent(discussionPostId);
// Wait for the content to load
await act(async () => {
fireEvent.mouseOver(await waitFor(() => screen.findByText('comment number 7', { exact: false })));
});
// // There should be three buttons, one for the post, the second for the
// // comment and the third for a response to that comment
// const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
// await act(async () => {
// fireEvent.click(actionButtons[1]);
// });
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /Endorse/i }));
});
expect(axiosMock.history.patch).toHaveLength(2);
expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ endorsed: true });
});
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /Endorse/i }));
// });
// expect(axiosMock.history.patch).toHaveLength(2);
// expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ endorsed: true });
// });
it('handles reporting comments', async () => {
renderComponent(discussionPostId);
// Wait for the content to load
await act(async () => {
fireEvent.mouseOver(await waitFor(() => screen.findByText('comment number 7', { exact: false })));
});
const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
await act(async () => {
fireEvent.click(actionButtons[0]);
});
// it('handles reporting comments', async () => {
// renderComponent(discussionPostId);
// // Wait for the content to load
// await screen.findByText('comment number 7', { exact: false });
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /Report/i }));
});
expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).toBeInTheDocument();
await act(async () => {
fireEvent.click(screen.queryByRole('button', { name: /Confirm/i }));
});
expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).not.toBeInTheDocument();
expect(axiosMock.history.patch).toHaveLength(2);
expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ abuse_flagged: true });
});
});
// // There should be three buttons, one for the post, the second for the
// // comment and the third for a response to that comment
// const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
// await act(async () => {
// fireEvent.click(actionButtons[1]);
// });
describe('for discussion thread', () => {
const findLoadMoreCommentsButton = () => screen.findByTestId('load-more-comments');
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /Report/i }));
// });
// expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).toBeInTheDocument();
// await act(async () => {
// fireEvent.click(screen.queryByRole('button', { name: /Confirm/i }));
// });
// expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).not.toBeInTheDocument();
// expect(axiosMock.history.patch).toHaveLength(2);
// expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ abuse_flagged: true });
// });
// });
it('shown post not found when post id does not belong to course', async () => {
renderComponent('unloaded-id');
expect(await screen.findByText('Thread not found', { exact: true }))
.toBeInTheDocument();
});
// describe('for discussion thread', () => {
// const findLoadMoreCommentsButton = () => screen.findByTestId('load-more-comments');
it('initially loads only the first page', async () => {
renderComponent(discussionPostId);
expect(await screen.findByText('comment number 1', { exact: false }))
.toBeInTheDocument();
expect(screen.queryByText('comment number 2', { exact: false }))
.not
.toBeInTheDocument();
});
// it('shown post not found when post id does not belong to course', async () => {
// renderComponent('unloaded-id');
// expect(await screen.findByText('Thread not found', { exact: true }))
// .toBeInTheDocument();
// });
it('pressing load more button will load next page of comments', async () => {
renderComponent(discussionPostId);
// it('initially loads only the first page', async () => {
// renderComponent(discussionPostId);
// expect(await screen.findByText('comment number 1', { exact: false }))
// .toBeInTheDocument();
// expect(screen.queryByText('comment number 2', { exact: false }))
// .not
// .toBeInTheDocument();
// });
const loadMoreButton = await findLoadMoreCommentsButton();
fireEvent.click(loadMoreButton);
// it('pressing load more button will load next page of comments', async () => {
// renderComponent(discussionPostId);
await screen.findByText('comment number 1', { exact: false });
await screen.findByText('comment number 2', { exact: false });
});
// const loadMoreButton = await findLoadMoreCommentsButton();
// fireEvent.click(loadMoreButton);
it('newly loaded comments are appended to the old ones', async () => {
renderComponent(discussionPostId);
// await screen.findByText('comment number 1', { exact: false });
// await screen.findByText('comment number 2', { exact: false });
// });
const loadMoreButton = await findLoadMoreCommentsButton();
fireEvent.click(loadMoreButton);
// it('newly loaded comments are appended to the old ones', async () => {
// renderComponent(discussionPostId);
await screen.findByText('comment number 1', { exact: false });
// check that comments from the first page are also displayed
expect(screen.queryByText('comment number 2', { exact: false }))
.toBeInTheDocument();
});
// const loadMoreButton = await findLoadMoreCommentsButton();
// fireEvent.click(loadMoreButton);
it('load more button is hidden when no more comments pages to load', async () => {
const totalPages = 2;
renderComponent(discussionPostId);
// await screen.findByText('comment number 1', { exact: false });
// // check that comments from the first page are also displayed
// expect(screen.queryByText('comment number 2', { exact: false }))
// .toBeInTheDocument();
// });
const loadMoreButton = await findLoadMoreCommentsButton();
for (let page = 1; page < totalPages; page++) {
fireEvent.click(loadMoreButton);
}
// it('load more button is hidden when no more comments pages to load', async () => {
// const totalPages = 2;
// renderComponent(discussionPostId);
await screen.findByText('comment number 2', { exact: false });
await expect(findLoadMoreCommentsButton())
.rejects
.toThrow();
});
});
// const loadMoreButton = await findLoadMoreCommentsButton();
// for (let page = 1; page < totalPages; page++) {
// fireEvent.click(loadMoreButton);
// }
describe('for question thread', () => {
const findLoadMoreCommentsButtons = () => screen.findAllByTestId('load-more-comments');
// await screen.findByText('comment number 2', { exact: false });
// await expect(findLoadMoreCommentsButton())
// .rejects
// .toThrow();
// });
// });
it('initially loads only the first page', async () => {
act(() => renderComponent(questionPostId));
expect(await screen.findByText('comment number 3', { exact: false }))
.toBeInTheDocument();
expect(await screen.findByText('endorsed comment number 5', { exact: false }))
.toBeInTheDocument();
expect(screen.queryByText('comment number 4', { exact: false }))
.not
.toBeInTheDocument();
});
// describe('for question thread', () => {
// const findLoadMoreCommentsButtons = () => screen.findAllByTestId('load-more-comments');
it('pressing load more button will load next page of comments', async () => {
act(() => {
renderComponent(questionPostId);
});
// it('initially loads only the first page', async () => {
// act(() => renderComponent(questionPostId));
// expect(await screen.findByText('comment number 3', { exact: false }))
// .toBeInTheDocument();
// expect(await screen.findByText('endorsed comment number 5', { exact: false }))
// .toBeInTheDocument();
// expect(screen.queryByText('comment number 4', { exact: false }))
// .not
// .toBeInTheDocument();
// });
const [loadMoreButtonEndorsed, loadMoreButtonUnendorsed] = await findLoadMoreCommentsButtons();
// Both load more buttons should show
expect(await findLoadMoreCommentsButtons()).toHaveLength(2);
expect(await screen.findByText('unendorsed comment number 3', { exact: false }))
.toBeInTheDocument();
expect(await screen.findByText('endorsed comment number 5', { exact: false }))
.toBeInTheDocument();
// Comments from next page should not be loaded yet.
expect(await screen.queryByText('endorsed comment number 6', { exact: false }))
.not
.toBeInTheDocument();
expect(await screen.queryByText('unendorsed comment number 4', { exact: false }))
.not
.toBeInTheDocument();
// it('pressing load more button will load next page of comments', async () => {
// act(() => {
// renderComponent(questionPostId);
// });
await act(async () => {
fireEvent.click(loadMoreButtonEndorsed);
});
// Endorsed comment from next page should be loaded now.
await waitFor(() => expect(screen.queryByText('endorsed comment number 6', { exact: false }))
.toBeInTheDocument());
// Unendorsed comment from next page should not be loaded yet.
expect(await screen.queryByText('unendorsed comment number 4', { exact: false }))
.not
.toBeInTheDocument();
// Now only one load more buttons should show, for unendorsed comments
expect(await findLoadMoreCommentsButtons()).toHaveLength(1);
await act(async () => {
fireEvent.click(loadMoreButtonUnendorsed);
});
// Unendorsed comment from next page should be loaded now.
await waitFor(() => expect(screen.queryByText('unendorsed comment number 4', { exact: false }))
.toBeInTheDocument());
await expect(findLoadMoreCommentsButtons()).rejects.toThrow();
});
});
// const [loadMoreButtonEndorsed, loadMoreButtonUnendorsed] = await findLoadMoreCommentsButtons();
// // Both load more buttons should show
// expect(await findLoadMoreCommentsButtons()).toHaveLength(2);
// expect(await screen.findByText('unendorsed comment number 3', { exact: false }))
// .toBeInTheDocument();
// expect(await screen.findByText('endorsed comment number 5', { exact: false }))
// .toBeInTheDocument();
// // Comments from next page should not be loaded yet.
// expect(await screen.queryByText('endorsed comment number 6', { exact: false }))
// .not
// .toBeInTheDocument();
// expect(await screen.queryByText('unendorsed comment number 4', { exact: false }))
// .not
// .toBeInTheDocument();
describe('comments responses', () => {
const findLoadMoreCommentsResponsesButton = () => screen.findByTestId('load-more-comments-responses');
// await act(async () => {
// fireEvent.click(loadMoreButtonEndorsed);
// });
// // Endorsed comment from next page should be loaded now.
// await waitFor(() => expect(screen.queryByText('endorsed comment number 6', { exact: false }))
// .toBeInTheDocument());
// // Unendorsed comment from next page should not be loaded yet.
// expect(await screen.queryByText('unendorsed comment number 4', { exact: false }))
// .not
// .toBeInTheDocument();
// // Now only one load more buttons should show, for unendorsed comments
// expect(await findLoadMoreCommentsButtons()).toHaveLength(1);
// await act(async () => {
// fireEvent.click(loadMoreButtonUnendorsed);
// });
// // Unendorsed comment from next page should be loaded now.
// await waitFor(() => expect(screen.queryByText('unendorsed comment number 4', { exact: false }))
// .toBeInTheDocument());
// await expect(findLoadMoreCommentsButtons()).rejects.toThrow();
// });
// });
it('initially loads only the first page', async () => {
renderComponent(discussionPostId);
// describe('comments responses', () => {
// const findLoadMoreCommentsResponsesButton = () => screen.findByTestId('load-more-comments-responses');
await waitFor(() => screen.findByText('comment number 7', { exact: false }));
expect(screen.queryByText('comment number 8', { exact: false })).not.toBeInTheDocument();
});
// it('initially loads only the first page', async () => {
// renderComponent(discussionPostId);
it('pressing load more button will load next page of responses', async () => {
renderComponent(discussionPostId);
// await waitFor(() => screen.findByText('comment number 7', { exact: false }));
// expect(screen.queryByText('comment number 8', { exact: false })).not.toBeInTheDocument();
// });
const loadMoreButton = await findLoadMoreCommentsResponsesButton();
await act(async () => {
fireEvent.click(loadMoreButton);
});
// it('pressing load more button will load next page of responses', async () => {
// renderComponent(discussionPostId);
await screen.findByText('comment number 8', { exact: false });
});
// const loadMoreButton = await findLoadMoreCommentsResponsesButton();
// await act(async () => {
// fireEvent.click(loadMoreButton);
// });
it('newly loaded responses are appended to the old ones', async () => {
renderComponent(discussionPostId);
// await screen.findByText('comment number 8', { exact: false });
// });
const loadMoreButton = await findLoadMoreCommentsResponsesButton();
await act(async () => {
fireEvent.click(loadMoreButton);
});
// it('newly loaded responses are appended to the old ones', async () => {
// renderComponent(discussionPostId);
await screen.findByText('comment number 8', { exact: false });
// check that comments from the first page are also displayed
expect(screen.queryByText('comment number 7', { exact: false })).toBeInTheDocument();
});
// const loadMoreButton = await findLoadMoreCommentsResponsesButton();
// await act(async () => {
// fireEvent.click(loadMoreButton);
// });
it('load more button is hidden when no more responses pages to load', async () => {
const totalPages = 2;
renderComponent(discussionPostId);
// await screen.findByText('comment number 8', { exact: false });
// // check that comments from the first page are also displayed
// expect(screen.queryByText('comment number 7', { exact: false })).toBeInTheDocument();
// });
const loadMoreButton = await findLoadMoreCommentsResponsesButton();
for (let page = 1; page < totalPages; page++) {
act(() => {
fireEvent.click(loadMoreButton);
});
}
// it('load more button is hidden when no more responses pages to load', async () => {
// const totalPages = 2;
// renderComponent(discussionPostId);
await screen.findByText('comment number 8', { exact: false });
await expect(findLoadMoreCommentsResponsesButton())
.rejects
.toThrow();
});
// const loadMoreButton = await findLoadMoreCommentsResponsesButton();
// for (let page = 1; page < totalPages; page++) {
// act(() => {
// fireEvent.click(loadMoreButton);
// });
// }
// it('handles liking a comment', async () => {
// renderComponent(discussionPostId);
// await screen.findByText('comment number 8', { exact: false });
// await expect(findLoadMoreCommentsResponsesButton())
// .rejects
// .toThrow();
// });
// // Wait for the content to load
// await screen.findByText('comment number 7', { exact: false });
// const view = screen.getByTestId('comment-comment-1');
// it('handles liking a comment', async () => {
// renderComponent(discussionPostId);
// const likeButton = within(view).getByRole('button', { name: /like/i });
// await act(async () => {
// fireEvent.click(likeButton);
// });
// expect(axiosMock.history.patch).toHaveLength(2);
// expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ voted: true });
// });
// // Wait for the content to load
// await screen.findByText('comment number 7', { exact: false });
// const view = screen.getByTestId('comment-comment-1');
// it('handles endorsing comments', async () => {
// renderComponent(discussionPostId);
// // Wait for the content to load
// await screen.findByText('comment number 7', { exact: false });
// const likeButton = within(view).getByRole('button', { name: /like/i });
// await act(async () => {
// fireEvent.click(likeButton);
// });
// expect(axiosMock.history.patch).toHaveLength(2);
// expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ voted: true });
// });
// // There should be three buttons, one for the post, the second for the
// // comment and the third for a response to that comment
// const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
// await act(async () => {
// fireEvent.click(actionButtons[1]);
// });
// it('handles endorsing comments', async () => {
// renderComponent(discussionPostId);
// // Wait for the content to load
// await screen.findByText('comment number 7', { exact: false });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /Endorse/i }));
// });
// expect(axiosMock.history.patch).toHaveLength(2);
// expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ endorsed: true });
// });
// // There should be three buttons, one for the post, the second for the
// // comment and the third for a response to that comment
// const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
// await act(async () => {
// fireEvent.click(actionButtons[1]);
// });
// it('handles reporting comments', async () => {
// renderComponent(discussionPostId);
// // Wait for the content to load
// await screen.findByText('comment number 7', { exact: false });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /Endorse/i }));
// });
// expect(axiosMock.history.patch).toHaveLength(2);
// expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ endorsed: true });
// });
// // There should be three buttons, one for the post, the second for the
// // comment and the third for a response to that comment
// const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
// await act(async () => {
// fireEvent.click(actionButtons[1]);
// });
// it('handles reporting comments', async () => {
// renderComponent(discussionPostId);
// // Wait for the content to load
// await screen.findByText('comment number 7', { exact: false });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /Report/i }));
// });
// expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).toBeInTheDocument();
// await act(async () => {
// fireEvent.click(screen.queryByRole('button', { name: /Confirm/i }));
// });
// expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).not.toBeInTheDocument();
// expect(axiosMock.history.patch).toHaveLength(2);
// expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ abuse_flagged: true });
// });
});
// // There should be three buttons, one for the post, the second for the
// // comment and the third for a response to that comment
// const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
// await act(async () => {
// fireEvent.click(actionButtons[1]);
// });
// await act(async () => {
// fireEvent.click(screen.getByRole('button', { name: /Report/i }));
// });
// expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).toBeInTheDocument();
// await act(async () => {
// fireEvent.click(screen.queryByRole('button', { name: /Confirm/i }));
// });
// expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).not.toBeInTheDocument();
// expect(axiosMock.history.patch).toHaveLength(2);
// expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ abuse_flagged: true });
// });
// });
// describe.each([
// { component: 'post', testId: 'post-thread-1' },
// { component: 'comment', testId: 'comment-comment-1' },
// { component: 'reply', testId: 'reply-comment-7' },
// ])('delete confirmation modal', ({
// component,
// testId,
// }) => {
// test(`for ${component}`, async () => {
// renderComponent(discussionPostId);
// // Wait for the content to load
// await waitFor(() => expect(screen.queryByText('comment number 7', { exact: false })).toBeInTheDocument());
// const content = screen.getByTestId(testId);
// const actionsButton = within(content).getAllByRole('button', { name: /actions menu/i })[0];
// await act(async () => {
// fireEvent.click(actionsButton);
// });
// expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false })).not.toBeInTheDocument();
// const deleteButton = within(content).queryByRole('button', { name: /delete/i });
// await act(async () => {
// fireEvent.click(deleteButton);
// });
// expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false })).toBeInTheDocument();
// await act(async () => {
// fireEvent.click(screen.queryByRole('button', { name: /delete/i }));
// });
// expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false })).not.toBeInTheDocument();
// });
// });
describe.each([
{ component: 'post', testId: 'post-thread-1' },
{ component: 'comment', testId: 'comment-comment-1' },
{ component: 'reply', testId: 'reply-comment-7' },
])('delete confirmation modal', ({
component,
testId,
}) => {
test(`for ${component}`, async () => {
renderComponent(discussionPostId);
// Wait for the content to load
await waitFor(() => expect(screen.queryByText('comment number 7', { exact: false })).toBeInTheDocument());
const content = screen.getByTestId(testId);
await act(async () => {
fireEvent.mouseOver(screen.getByTestId('post-thread-1'));
});
const actionsButton = within(content).getAllByRole('button', { name: /actions menu/i })[0];
await act(async () => {
fireEvent.click(actionsButton);
});
expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false })).not.toBeInTheDocument();
const deleteButton = within(content).queryByRole('button', { name: /delete/i });
await act(async () => {
fireEvent.click(deleteButton);
});
expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false })).toBeInTheDocument();
await act(async () => {
fireEvent.click(screen.queryByRole('button', { name: /delete/i }));
});
expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false })).not.toBeInTheDocument();
});
});
});

57
src/discussions/comments/comment/CommentHeader.test.jsx
View File

@@ -1,57 +0,0 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import { initializeMockApp } from '@edx/frontend-platform';
import { AppProvider } from '@edx/frontend-platform/react';
import { initializeStore } from '../../../store';
import { DiscussionContext } from '../../common/context';
import CommentHeader from './CommentHeader';
let store;
function renderComponent(comment, postType, actionHandlers) {
return render(
<IntlProvider locale="en">
<AppProvider store={store}>
<DiscussionContext.Provider
value={{ courseId: 'course-v1:edX+TestX+Test_Course' }}
>
<CommentHeader comment={comment} postType={postType} actionHandlers={actionHandlers} />
</DiscussionContext.Provider>
</AppProvider>
</IntlProvider>,
);
}
const mockComment = {
author: 'abc123',
authorLabel: 'ABC 123',
endorsed: true,
editableFields: ['endorsed'],
};
describe('Comment Header', () => {
beforeEach(async () => {
initializeMockApp({
authenticatedUser: {
userId: 3,
username: 'abc123',
administrator: true,
roles: [],
},
});
store = initializeStore();
});
// it('should render verified icon for endorsed discussion posts', () => {
// renderComponent(mockComment, 'discussion', {});
// expect(screen.queryAllByTestId('check-icon')).toHaveLength(1);
// });
// it('should render check icon for endorsed question posts', () => {
// renderComponent(mockComment, 'question', {});
// expect(screen.queryAllByTestId('check-icon')).toHaveLength(1);
// });
});

25
src/discussions/common/AuthorLabel.jsx
View File

@@ -73,7 +73,7 @@ function AuthorLabel({
trigger={['hover', 'focus']}
>
<div className={classNames('d-flex flex-row align-items-center', {
'diable-div': !authorToolTip,
'disable-div': !authorToolTip,
})}
>
<Icon
@@ -82,7 +82,7 @@ function AuthorLabel({
height: '1rem',
}}
src={icon}
disabled
data-testid="author-icon"
/>
{authorLabelMessage && (
<span
@@ -97,27 +97,6 @@ function AuthorLabel({
)}
</div>
</OverlayTrigger>
{/* {icon && (
<Icon
style={{
width: '1rem',
height: '1rem',
}}
src={icon}
/>
)}
{authorLabelMessage && (
<span
className={classNames('mr-1.5 font-size-14 font-style-normal font-family-inter font-weight-500', {
'text-primary-500': !authorLabelMessage && !isRetiredUser && !alert,
'text-gray-700': isRetiredUser,
})}
style={{ marginLeft: '2px' }}
>
{authorLabelMessage}
</span>
)} */}
{
postCreatedAt && (
<span

16
src/discussions/common/EndorsedAlertBanner.test.jsx
View File

@@ -46,21 +46,21 @@ describe.each([
type: 'comment',
postType: ThreadType.QUESTION,
props: { endorsed: true, endorsedBy: 'test-user', endorsedByLabel: 'Staff' },
expectText: [messages.answer.defaultMessage, messages.answeredLabel.defaultMessage, 'test-user', 'Staff'],
expectText: [messages.answer.defaultMessage, 'Staff'],
},
{
label: 'TA endorsed comment in a question thread',
type: 'comment',
postType: ThreadType.QUESTION,
props: { endorsed: true, endorsedBy: 'test-user', endorsedByLabel: 'Community TA' },
expectText: [messages.answer.defaultMessage, messages.answeredLabel.defaultMessage, 'test-user', 'TA'],
expectText: [messages.answer.defaultMessage, 'TA'],
},
{
label: 'endorsed comment in a discussion thread',
type: 'comment',
postType: ThreadType.DISCUSSION,
props: { endorsed: true, endorsedBy: 'test-user' },
expectText: [messages.endorsed.defaultMessage, messages.endorsedLabel.defaultMessage, 'test-user'],
expectText: [messages.endorsed.defaultMessage],
},
])('EndorsedAlertBanner', ({
label, type, postType, props, expectText,
@@ -84,9 +84,9 @@ describe.each([
renderComponent(content, postType);
});
// it(`should show correct banner for a ${label}`, async () => {
// expectText.forEach(message => {
// expect(screen.queryAllByText(message, { exact: false }).length).toBeGreaterThan(0);
// });
// });
it(`should show correct banner for a ${label}`, async () => {
expectText.forEach(message => {
expect(screen.queryAllByText(message, { exact: false }).length).toBeGreaterThan(0);
});
});
});

5
src/discussions/common/HoverCard.jsx
View File

@@ -32,7 +32,10 @@ function HoverCard({
const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
return (
<div className="d-flex flex-row flex-fill justify-content-end align-items-center hover-card mr-n3 position-absolute">
<div
className="d-flex flex-row flex-fill justify-content-end align-items-center hover-card mr-n3 position-absolute"
data-testid="hover-card"
>
{userCanAddThreadInBlackoutDate && (
<div className="actions d-flex">
<Button

34
src/discussions/posts/post/PostFooter.test.jsx
View File

@@ -89,18 +89,24 @@ describe('PostFooter', () => {
expect(screen.getByTestId('cohort-icon')).toBeTruthy();
});
// it.each([[true, /unfollow/i], [false, /follow/i]])('test follow button when following=%s', async (following, message) => {
// renderComponent({ ...mockPost, following });
// const followButton = screen.getByRole('button', { name: /follow/i });
// expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
// await act(async () => {
// fireEvent.mouseEnter(followButton);
// });
// expect(screen.getByRole('tooltip')).toHaveTextContent(message);
// await act(async () => {
// fireEvent.click(followButton);
// });
// // clicking on the button triggers thread update.
// expect(store.getState().threads.status === RequestStatus.IN_PROGRESS).toBeTruthy();
// });
it('test follow button when following=true', async () => {
renderComponent({ ...mockPost, following: true });
const followButton = screen.getByRole('button', { name: /follow/i });
expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
await act(async () => {
fireEvent.mouseEnter(followButton);
});
expect(screen.getByRole('tooltip')).toHaveTextContent(/unfollow/i);
await act(async () => {
fireEvent.click(followButton);
});
// clicking on the button triggers thread update.
expect(store.getState().threads.status === RequestStatus.IN_PROGRESS).toBeTruthy();
});
it('test follow button when following=false', async () => {
renderComponent({ ...mockPost, following: false });
expect(screen.queryByRole('button', { name: /follow/i })).not.toBeInTheDocument();
});
});

2
src/index.scss
View File

@@ -397,6 +397,6 @@ header {
margin: 24px 24px 0px 24px;
}
.diable-div {
.disable-div {
pointer-events: none;
}