Add tests to ensure markdown is rendered correctly

Signed-off-by: Tushar Goel <tushar.goel.dav@gmail.com>
Real-Dev-Squad · Mar 24, 2024 · 7aeb49a · 7aeb49a
1 parent db671c5
commit 7aeb49a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/__tests__/Unit/Components/Issues/TaskRequestForm.test.tsx b/__tests__/Unit/Components/Issues/TaskRequestForm.test.tsx
@@ -38,9 +38,13 @@ describe('TaskRequestForm Component', () => {
             /Description:/i
         ) as HTMLTextAreaElement;
         fireEvent.change(descriptionTextarea, {
-            target: { value: 'Test description' },
+            target: { value: '## Heading' },
         });
-        expect(descriptionTextarea.value).toBe('Test description');
+        expect(descriptionTextarea.value).toBe('## Heading');
+        fireEvent.click(previewButton);
+        const headingElement = screen.getByRole('heading', { level: 2 });
+        expect(headingElement).toBeInTheDocument();
+        expect(headingElement).toHaveTextContent('Heading');
     });
 
     test('renders form with default values', () => {

diff --git a/src/components/MarkDownEditor/MarkDownEditor.tsx b/src/components/MarkDownEditor/MarkDownEditor.tsx
@@ -1,6 +1,6 @@
-import Markdown from 'markdown-to-jsx';
 import PropTypes from 'prop-types';
 import { ChangeEvent, useState } from 'react';
+import Markdown from 'markdown-to-jsx';
 
 interface MarkDownEditorProps {
     onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
@@ -18,7 +18,6 @@ const MarkDownEditor: React.FC<MarkDownEditorProps> = ({
 }) => {
     const [markdown, setMarkdown] = useState('');
     const [mode, setMode] = useState<'description' | 'preview'>('description');
-
     const handleClick = () => {
         if (mode == 'preview') {
             setMode('description');
@@ -61,10 +60,8 @@ const MarkDownEditor: React.FC<MarkDownEditorProps> = ({
                     </div>
                 )}
                 {mode === 'preview' && (
-                    <div>
-                        <Markdown className={previewClassName ?? ''}>
-                            {markdown}
-                        </Markdown>
+                    <div className={previewClassName ?? ''}>
+                        <Markdown>{markdown}</Markdown>
                     </div>
                 )}
             </div>