diff --git a/src/components/HTMLLoader.jsx b/src/components/HTMLLoader.jsx index cac3a7f2..8fe5d0a5 100644 --- a/src/components/HTMLLoader.jsx +++ b/src/components/HTMLLoader.jsx @@ -16,8 +16,7 @@ function HTMLLoader({ htmlNode, componentId, cssClassName, testId, delay, }) { const sanitizedMath = DOMPurify.sanitize(htmlNode, { ...defaultSanitizeOptions }); - const previewRef = useRef(); - + const previewRef = useRef(null); const debouncedPostContent = useDebounce(htmlNode, delay); useEffect(() => { @@ -27,16 +26,18 @@ function HTMLLoader({ .catch((err) => logError(`Typeset failed: ${err.message}`)); return promise; } + if (debouncedPostContent) { typeset(() => { - previewRef.current.innerHTML = sanitizedMath; + if (previewRef.current !== null) { + previewRef.current.innerHTML = sanitizedMath; + } }); } }, [debouncedPostContent]); return (
- ); } diff --git a/src/discussions/post-comments/PostCommentsView.test.jsx b/src/discussions/post-comments/PostCommentsView.test.jsx index 69755fbc..20800400 100644 --- a/src/discussions/post-comments/PostCommentsView.test.jsx +++ b/src/discussions/post-comments/PostCommentsView.test.jsx @@ -223,6 +223,18 @@ describe('ThreadView', () => { expect(JSON.parse(axiosMock.history.patch[axiosMock.history.patch.length - 1].data)).toMatchObject(data); } + it('should display post content', async () => { + renderComponent(discussionPostId); + const post = screen.getByTestId('post-thread-1'); + expect(within(post).queryByTestId(discussionPostId)).toBeInTheDocument(); + }); + + it('should display comment content', async () => { + renderComponent(discussionPostId); + const comment = await waitFor(() => screen.findByTestId('comment-comment-1')); + expect(within(comment).queryByTestId('comment-1')).toBeInTheDocument(); + }); + it('should show and hide the editor', async () => { renderComponent(discussionPostId); const post = screen.getByTestId('post-thread-1'); @@ -742,6 +754,20 @@ describe('ThreadView', () => { }); describe('For comments replies', () => { + it('shows action dropdown for replies', async () => { + renderComponent(discussionPostId); + + const reply = await waitFor(() => screen.findByTestId('reply-comment-7')); + expect(within(reply).getByRole('button', { name: /actions menu/i })).toBeInTheDocument(); + }); + + it('should display reply content', async () => { + renderComponent(discussionPostId); + + const reply = await waitFor(() => screen.findByTestId('reply-comment-7')); + expect(within(reply).queryByTestId('comment-7')).toBeInTheDocument(); + }); + it('shows delete confirmation modal', async () => { renderComponent(discussionPostId);