From 5f50ab74d774fd40c3fe64aa7794c9653938d9ba Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Wed, 26 Apr 2023 06:47:11 -0500
Subject: [PATCH] tests: begin adding tests

---
 jest.config.ts                               |  5 ++-
 tests/unit/Fence.spec.tsx                    | 40 ++++++++++++++++++++
 tests/unit/{test.spec.ts => Markdoc.spec.ts} |  0
 3 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 tests/unit/Fence.spec.tsx
 rename tests/unit/{test.spec.ts => Markdoc.spec.ts} (100%)

diff --git a/jest.config.ts b/jest.config.ts
index 274dd68..23c15bb 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -9,13 +9,14 @@ const config = {
   clearMocks: true,
   collectCoverage: true,
   collectCoverageFrom: [
-    './src/**/*.ts',
+    './src/**/*.(ts|tsx)',
     '!**/tests/**',
     '!/node_modules',
+    '!./src/docs/**',
   ],
   coverageDirectory: 'coverage',
   coverageReporters: ['json', 'text', 'html'],
-  testMatch: ['**/tests/**/*.(test|spec|jest).ts'],
+  testMatch: ['**/tests/**/*.(test|spec|jest).(ts|tsx)'],
   testPathIgnorePatterns: ['tests/(setup|testUtils).ts'],
   verbose: true,
 };
diff --git a/tests/unit/Fence.spec.tsx b/tests/unit/Fence.spec.tsx
new file mode 100644
index 0000000..9f00ae1
--- /dev/null
+++ b/tests/unit/Fence.spec.tsx
@@ -0,0 +1,40 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import Prism from 'prismjs';
+import Fence from '../../src/app/components/Fence';
+
+describe('Fence component', () => {
+  it('renders a code block with highlighted syntax', () => {
+    const content = 'console.log(app)';
+    const language = 'javascript';
+    const highlightedCode = `
+      console
+      <span class="token function">log</span>
+      <span class="token punctuation">(</span>
+      app
+      <span class="token punctuation">)</span>
+      <span class="token punctuation">;</span>
+    `;
+
+    jest
+      .spyOn(Prism, 'highlight')
+      .mockReturnValue(highlightedCode);
+
+    const { container } = render(
+      <Fence content={content} language={language} />
+    );
+
+    const codeBlocks =
+      container.getElementsByTagName('code');
+    expect(codeBlocks).toHaveLength(1);
+
+    const codeBlock = codeBlocks[0];
+    expect(codeBlock).toBeInTheDocument();
+    expect(codeBlock.innerHTML).toEqual(highlightedCode);
+    expect(Prism.highlight).toHaveBeenCalledWith(
+      content,
+      Prism.languages[language],
+      language
+    );
+  });
+});
diff --git a/tests/unit/test.spec.ts b/tests/unit/Markdoc.spec.ts
similarity index 100%
rename from tests/unit/test.spec.ts
rename to tests/unit/Markdoc.spec.ts