test: markdown text component

apps/meteor/client/components/MarkdownText.spec.tsx

@@ -0,0 +1,80 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import MarkdownText from './MarkdownText';
+
+import '@testing-library/jest-dom';
+
+const normalizeHtml = (html: any) => {
+	return html.replace(/\s+/g, ' ').trim();
+};
+
+const markdownText = `
+  # Heading 1
+
+  **Paragraph text**: *Bold with one asterisk* **Bold with two asterisks** Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+  ## Heading 2
+
+  _Italic Text_: _Italic with one underscore_ __Italic with two underscores__ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+  ### Heading 3 
+
+  - Lists, Links and elements
+
+  **Unordered List** 
+  - List Item 1 
+  - List Item 2 
+  - List Item 3 
+  - List Item 4
+
+  **Ordered List** 
+
+  1. List Item
+  2. List Item
+  3. List Item
+  4. List Item
+
+  **Links:** 
+
+  [Google](google.com)
+  [Rocket.Chat](rocket.chat)
+  [email protected] 
+  +55991999999 
+  \`Inline code\`
+  \`\`\`typescript 
+  const test = 'this is code'
+  \`\`\`
+`;
+
+it('should render html elements as expected', async () => {
+	const { container } = render(<MarkdownText content={markdownText} />, {
+		wrapper: mockAppRoot().build(),
+	});
+
+	const normalizedHtml = normalizeHtml(container.innerHTML);
+
+	expect(normalizedHtml).toContain('<h1>Heading 1</h1>');
+	expect(normalizedHtml).toContain(
+		'<strong>Paragraph text</strong>: <strong>Bold with one asterisk</strong> <strong>Bold with two asterisks</strong> Lorem ipsum dolor sit amet',
+	);
+	expect(normalizedHtml).toContain('<h2>Heading 2</h2>');
+	expect(normalizedHtml).toContain(
+		'<em>Italic Text</em>: <em>Italic with one underscore</em> <em>Italic with two underscores</em> Lorem ipsum dolor sit amet',
+	);
+	expect(normalizedHtml).toContain('<h3>Heading 3</h3>');
+	expect(normalizedHtml).toContain('<ul> <li>Lists, Links and elements</li></ul>');
+	expect(normalizedHtml).toContain(
+		'<strong>Unordered List</strong> </p> <ul> <li>List Item 1 </li><li>List Item 2 </li><li>List Item 3 </li><li>List Item 4</li></ul>',
+	);
+	expect(normalizedHtml).toContain(
+		'<strong>Ordered List</strong> </p> <ol> <li>List Item</li><li>List Item</li><li>List Item</li><li>List Item</li></ol>',
+	);
+	expect(normalizedHtml).toContain('<a title="" rel="nofollow noopener noreferrer" target="_blank">Google</a>');
+	expect(normalizedHtml).toContain('<a title="" rel="nofollow noopener noreferrer" target="_blank">Rocket.Chat</a>');
+	expect(normalizedHtml).toContain('[email protected]');
+	expect(normalizedHtml).toContain('+55991999999');
+	expect(normalizedHtml).toContain('<code>Inline code</code>');
+	expect(normalizedHtml).toContain('<pre><code class="language-typescript">const test = \'this is code\' </code></pre>');
+});