From 6878631de27985a27401eca116b43f5e50f46afe Mon Sep 17 00:00:00 2001
From: Salmen Hichri <salmen.hichri@gmail.com>
Date: Wed, 19 Jun 2024 10:52:53 +0100
Subject: [PATCH] Added tests for <Markdown /> primitive

---
 .../markdown-syntaxHighlighter.spec.tsx       | 63 +++++++++++++++++++
 .../specs/aiChat/primitives/markdown.spec.tsx | 58 +++++++++++++++++
 2 files changed, 121 insertions(+)
 create mode 100644 specs/specs/aiChat/primitives/markdown-syntaxHighlighter.spec.tsx
 create mode 100644 specs/specs/aiChat/primitives/markdown.spec.tsx

diff --git a/specs/specs/aiChat/primitives/markdown-syntaxHighlighter.spec.tsx b/specs/specs/aiChat/primitives/markdown-syntaxHighlighter.spec.tsx
new file mode 100644
index 00000000..87f3968f
--- /dev/null
+++ b/specs/specs/aiChat/primitives/markdown-syntaxHighlighter.spec.tsx
@@ -0,0 +1,63 @@
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {AdapterController} from '../../../utils/adapters';
+import {adapterBuilder} from '../../../utils/adapterBuilder';
+import {AiChat, Markdown, ResponseRenderer} from '@nlux-dev/react/src';
+import {highlighter} from '@nlux-dev/highlighter/src';
+import {memo} from 'react';
+import {render} from '@testing-library/react';
+import {waitForReactRenderCycle} from '../../../utils/wait';
+import userEvent from '@testing-library/user-event';
+
+describe('<AiChat /> + <Markdown /> + syntax highlighter', () => {
+    let adapterController: AdapterController | undefined;
+
+    beforeEach(() => {
+        adapterController = adapterBuilder()
+            .withBatchText(true)
+            .withStreamText(false)
+            .create();
+    });
+
+    afterEach(() => {
+        adapterController = undefined;
+    });
+
+    it('should parse and render the markdown content', async () => {
+        // Arrange
+        const responseRenderer: ResponseRenderer<string> = memo((props) => {
+            const {dataTransferMode, content} = props;
+            return (
+                <div>
+                    <h1>Response Renderer</h1>
+                    <Markdown>{content}</Markdown>
+                </div>
+            );
+        });
+
+        const {container} = render(
+            <AiChat
+                adapter={adapterController!.adapter}
+                messageOptions={{
+                    responseRenderer,
+                    showCodeBlockCopyButton: false,
+                    syntaxHighlighter: highlighter,
+                }}
+            />,
+        );
+        const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-composer > textarea')!;
+        await waitForReactRenderCycle();
+
+        // Act
+        await userEvent.type(textArea, 'Hello{enter}');
+        await waitForReactRenderCycle();
+
+        adapterController!.resolve('```js\nvar someJsCode = true;\n\n```');
+        await waitForReactRenderCycle();
+
+        // Assert
+        const responseElement = container.querySelector('.nlux-comp-chatItem--received .nlux-markdown-container');
+        expect(responseElement!.innerHTML).toBe(
+            '<div class="code-block"><pre data-language="js" class="highlighter-dark"><div><span class="hljs-keyword">var</span> someJsCode = <span class="hljs-literal">true</span>;\n</div></pre></div>\n',
+        );
+    });
+});
diff --git a/specs/specs/aiChat/primitives/markdown.spec.tsx b/specs/specs/aiChat/primitives/markdown.spec.tsx
new file mode 100644
index 00000000..dc914319
--- /dev/null
+++ b/specs/specs/aiChat/primitives/markdown.spec.tsx
@@ -0,0 +1,58 @@
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {AdapterController} from '../../../utils/adapters';
+import {adapterBuilder} from '../../../utils/adapterBuilder';
+import {AiChat, Markdown, ResponseRenderer} from '@nlux-dev/react/src';
+import {memo} from 'react';
+import {render} from '@testing-library/react';
+import {waitForReactRenderCycle} from '../../../utils/wait';
+import userEvent from '@testing-library/user-event';
+
+describe('<AiChat /> + <Markdown /> + inside custom renderers', () => {
+    let adapterController: AdapterController | undefined;
+
+    beforeEach(() => {
+        adapterController = adapterBuilder()
+            .withBatchText(true)
+            .withStreamText(false)
+            .create();
+    });
+
+    afterEach(() => {
+        adapterController = undefined;
+    });
+
+    it('should parse and render the markdown content', async () => {
+        // Arrange
+        const responseRenderer: ResponseRenderer<string> = memo((props) => {
+            const {dataTransferMode, content} = props;
+            return (
+                <div>
+                    <h1>Response Renderer</h1>
+                    <Markdown>{content}</Markdown>
+                </div>
+            );
+        });
+
+        const {container} = render(
+            <AiChat
+                adapter={adapterController!.adapter}
+                messageOptions={{responseRenderer}}
+            />,
+        );
+        const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-composer > textarea')!;
+        await waitForReactRenderCycle();
+
+        // Act
+        await userEvent.type(textArea, 'Hello{enter}');
+        await waitForReactRenderCycle();
+
+        adapterController!.resolve('**Yo!**');
+        await waitForReactRenderCycle();
+
+        // Assert
+        const responseElement = container.querySelector('.nlux-comp-chatItem--received');
+        expect(responseElement!.innerHTML).toEqual(
+            expect.stringContaining('<div class="nlux-markdown-container"><p><strong>Yo!</strong></p>\n</div>'),
+        );
+    });
+});