fix: fix typeset failed error (#475)

* fix: fix typeset failed error

* test: adds test cases for decreased coverage

* test: adds test cases for reply component

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 (
     <div ref={previewRef} className={cssClassName} id={componentId} data-testid={testId} />
-
   );
 }
 

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);