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

feat: hide the comments sort feature (#441)

Browse Source 
* feat: hide the comments sort feature

* test: temporarily comment the commnets/responses test cases

* refactor: remove comments sort commented test cases
This commit is contained in:
Awais Ansari
2023-02-20 16:07:58 +05:00
committed by GitHub
parent 6afb7c7763
commit d34d0ebbbc
2 changed files with 3 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/discussions/post-comments/PostCommentsView.jsx
View File

@@ -40,6 +40,7 @@ function PostCommentsView({ intl }) {
const {
courseId, learnerUsername, category, topicId, page, enableInContextSidebar,
} = useContext(DiscussionContext);
const enableCommentsSort = false;
useEffect(() => {
if (!thread) { submitDispatch(fetchThread(postId, courseId, true)); }
@@ -109,7 +110,7 @@ function PostCommentsView({ intl }) {
/>
)}
</div>
{!!commentsCount && commentsStatus === RequestStatus.SUCCESSFUL && <CommentsSort />}
{!!commentsCount && commentsStatus === RequestStatus.SUCCESSFUL && enableCommentsSort && <CommentsSort />}
{thread.type === ThreadType.DISCUSSION && (
<CommentsView
postId={postId}

68
src/discussions/post-comments/PostCommentsView.test.jsx
View File

@@ -19,7 +19,6 @@ import DiscussionContent from '../discussions-home/DiscussionContent';
import { getThreadsApiUrl } from '../posts/data/api';
import { fetchThreads } from '../posts/data/thunks';
import { getCommentsApiUrl } from './data/api';
import { removeComment } from './data/thunks';
import '../posts/data/__factories__';
import './data/__factories__';
@@ -35,7 +34,6 @@ const reverseOrder = false;
let store;
let axiosMock;
let testLocation;
let container;
function mockAxiosReturnPagedComments() {
[null, false, true].forEach(endorsed => {
@@ -106,7 +104,7 @@ function renderComponent(postId) {
</AppProvider>
</IntlProvider>,
);
container = wrapper.container;
return wrapper;
}
describe('ThreadView', () => {
@@ -698,68 +696,4 @@ describe('ThreadView', () => {
expect(screen.queryByRole('dialog', { name: /Delete/i, exact: false })).toBeInTheDocument();
});
});
describe('for comments sort', () => {
it('should show sort dropdown if there are endorse or unendorsed comments', async () => {
renderComponent(discussionPostId);
const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
const sortWrapper = container.querySelector('.comments-sort');
const sortDropDown = within(sortWrapper).getByRole('button', { name: /Oldest first/i });
expect(comment).toBeInTheDocument();
expect(sortDropDown).toBeInTheDocument();
});
it('should not show sort dropdown if there is no response', async () => {
const commentId = 'comment-1';
renderComponent(discussionPostId);
await waitFor(() => screen.findByTestId('comment-comment-1'));
axiosMock.onDelete(`${commentsApiUrl}${commentId}/`).reply(201);
await executeThunk(removeComment(commentId, discussionPostId), store.dispatch, store.getState);
expect(await waitFor(() => screen.findByText('No responses', { exact: true }))).toBeInTheDocument();
expect(container.querySelector('.comments-sort')).not.toBeInTheDocument();
});
it('should have only two options', async () => {
renderComponent(discussionPostId);
await waitFor(() => screen.findByTestId('comment-comment-1'));
await act(async () => { fireEvent.click(screen.getByRole('button', { name: /Oldest first/i })); });
const dropdown = await waitFor(() => screen.findByTestId('comment-sort-dropdown-modal-popup'));
expect(dropdown).toBeInTheDocument();
expect(await within(dropdown).getAllByRole('button')).toHaveLength(2);
});
it('should be selected Oldest first and auto focus', async () => {
renderComponent(discussionPostId);
await waitFor(() => screen.findByTestId('comment-comment-1'));
await act(async () => { fireEvent.click(screen.getByRole('button', { name: /Oldest first/i })); });
const dropdown = await waitFor(() => screen.findByTestId('comment-sort-dropdown-modal-popup'));
expect(dropdown).toBeInTheDocument();
expect(within(dropdown).getByRole('button', { name: /Oldest first/i })).toBeInTheDocument();
expect(within(dropdown).getByRole('button', { name: /Oldest first/i })).toHaveFocus();
expect(within(dropdown).getByRole('button', { name: /Newest first/i })).not.toHaveFocus();
});
test('successfully handles sort state update', async () => {
renderComponent(discussionPostId);
expect(store.getState().comments.sortOrder).toBeFalsy();
await waitFor(() => screen.findByTestId('comment-comment-1'));
await act(async () => { fireEvent.click(screen.getByRole('button', { name: /Oldest first/i })); });
const dropdown = await waitFor(() => screen.findByTestId('comment-sort-dropdown-modal-popup'));
await act(async () => {
fireEvent.click(within(dropdown).getByRole('button', { name: /Newest first/i }));
});
expect(store.getState().comments.sortOrder).toBeTruthy();
});
});
});