add callout test

webapp/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"testing.automaticallyOpenPeekView": "never"
+}

webapp/package.json

@@ -19,6 +19,8 @@
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "^1.0.0-next.350",
 		"@tailwindcss/typography": "^0.5.2",
+		"@testing-library/jest-dom": "^5.16.4",
+		"@testing-library/svelte": "^3.1.3",
 		"@types/crypto-js": "^4.1.1",
 		"@types/marked": "^4.0.3",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",

webapp/setupTest.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

webapp/src/lib/components/Callout.svelte

@@ -10,9 +10,11 @@
 
 	let content: HTMLElement;
 
+	$: console.log(content);
+
 	$: if (content) {
 		const titleElement = content.getElementsByTagName('p')[0];
-		const match = titleElement.innerText.split('\n')[0].match(/\[!(.+)\](\s([\w\s]+))?/);
+		const match = titleElement.innerText.split('\n')[0].match(/\[!(.+)\](?:\s(.+))?/);
 		if (match) {
 			type = match[1]?.trim();
 			title = match[2]?.trim() ?? type[0].toUpperCase() + type.substring(1).toLowerCase();
@@ -37,10 +39,10 @@
 	class="border-l-4 border-l-callout bg-zinc-100 dark:bg-zinc-800 my-4"
 >
 	<div class="p-[10px] bg-callout-bg flex items-center gap-2">
-		<span class="font-bold text-md text-callout h-5"><CalloutIcon {icon} /></span>
-		<span class="font-bold text-md">{title}</span>
+		<span class="callout-icon font-bold text-md text-callout h-5"><CalloutIcon {icon} /></span>
+		<span class="callout-title font-bold text-md">{title}</span>
 	</div>
-	<div bind:this={content} class="prose-p:my-0 prose-p:mx-0 py-4 px-3">
+	<div bind:this={content} class="callout-content prose-p:my-0 prose-p:mx-0 py-4 px-3">
 		<slot />
 	</div>
 </div>

webapp/src/lib/components/MarkdownRenderer.test.ts

@@ -0,0 +1,27 @@
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import { render, screen } from '@testing-library/svelte';
+import MarkdownRenderer from './MarkdownRenderer.svelte';
+
+const TEST_FILES_DIR = 'test/markdown/';
+
+describe('Callout rendering', () => {
+	it('Renders callout correctly ', async () => {
+		const plaintext = await readMd('callout.md');
+
+		render(MarkdownRenderer, { plaintext: plaintext });
+
+		// Expect title to be correct.
+		const titleEl = await screen.findByText('Don!t forget to account for non-letters! //fsd \\n');
+		expect(titleEl).toBeInTheDocument();
+		expect(titleEl).toHaveClass('callout-title');
+
+		// Expect content to be correct.
+		expect(await screen.findByText('Sample text.')).toBeInTheDocument();
+		expect((await screen.findByText('Sample text.')).parentNode).toHaveClass('callout-content');
+	});
+});
+
+async function readMd(file: string) {
+	return await readFile(join(TEST_FILES_DIR, file), { encoding: 'utf8' });
+}

webapp/svelte.config.js

@@ -15,7 +15,9 @@ const config = {
 		adapter: adapter(),
 		vite: {
 			test: {
-				environment: 'happy-dom'
+				globals: true,
+				environment: 'happy-dom',
+				setupFiles: ['setupTest.js']
 			}
 		}
 	}

webapp/test/markdown/callout.md

@@ -0,0 +1,2 @@
+> [!Warning] Don!t forget to account for non-letters! //fsd \n
+> Sample text.

webapp/tsconfig.json

@@ -8,7 +8,8 @@
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
+		"strict": true,
+		"types": ["vitest/globals", "@testing-library/jest-dom"]
 	},
 	"paths": {
 		"$lib": ["src/lib"],