Add test should render codemirror-dotrain

packages/ui-components/src/__tests__/CodeMirrorDotrain.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, waitFor } from '@testing-library/svelte';
+import { CodeMirrorDotrain } from '@rainlanguage/ui-components';
+import { RawRainlangExtension } from 'codemirror-rainlang'; // Direct import
+import { writable } from 'svelte/store';
+
+// Mock dependencies
+vi.mock('codemirror-rainlang', () => ({
+	RawRainlangExtension: vi.fn(() => ({
+		plugin: vi.fn(),
+		hover: vi.fn(),
+		completion: vi.fn(),
+		language: vi.fn(),
+		diagnostics: vi.fn()
+	}))
+}));
+
+vi.mock('@codemirror/lint', () => ({
+	openLintPanel: vi.fn()
+}));
+
+vi.mock('svelte-codemirror-editor', async () => {
+	const mockCodeMirror = (await import('../lib/__mocks__/MockComponent.svelte')).default;
+	return { default: mockCodeMirror };
+});
+
+describe('CodeMirrorDotrain', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should render codemirror-dotrain', async () => {
+		const testValue = 'initial dotrain value';
+		const rainlangExtensionMock = new RawRainlangExtension({
+			hover: async () => null,
+			completion: async () => null,
+			diagnostics: async () => []
+		});
+
+		const screen = render(CodeMirrorDotrain, {
+			props: {
+				rainlangText: testValue,
+				disabled: false,
+				styles: {},
+				rainlangExtension: rainlangExtensionMock,
+				codeMirrorTheme: writable({})
+			}
+		});
+
+		await waitFor(() => {
+			expect(screen.getByTestId('codemirror-dotrain')).toBeInTheDocument();
+		});
+	});
+});

packages/ui-components/src/lib/components/CodeMirrorDotrain.svelte

@@ -10,23 +10,26 @@
 	export let codeMirrorTheme;
 </script>
 
-<CodeMirror
-	value={rainlangText || ''}
-	extensions={[rainlangExtension]}
-	theme={codeMirrorTheme}
-	readonly={disabled}
-	useTab={true}
-	tabSize={2}
-	styles={{
-		'&': {
-			width: '100%'
-		},
-		...styles
-	}}
-	on:ready={(e) => {
-		openLintPanel(e.detail);
-	}}
-/>
+<div data-testid="codemirror-dotrain">
+	{rainlangText}
+	<CodeMirror
+		value={rainlangText || ''}
+		extensions={[rainlangExtension]}
+		theme={codeMirrorTheme}
+		readonly={disabled}
+		useTab={true}
+		tabSize={2}
+		styles={{
+			'&': {
+				width: '100%'
+			},
+			...styles
+		}}
+		on:ready={(e) => {
+			openLintPanel(e.detail);
+		}}
+	/>
+</div>
 
 <style global>
 	:global(.ͼ1 .cm-panel.cm-panel-lint ul [aria-selected]) {