Merge branch 'main' into 783-clear2-0-order-ratio-bug

rainlanguage · Dec 23, 2024 · 5954051 · 5954051
2 parents 0f08443 + 90d5712
commit 5954051
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 67 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,7 +3,6 @@
   "svelte.enable-ts-plugin": true,
 
   "rust-analyzer.linkedProjects": ["./Cargo.toml", "tauri-app/src-tauri/Cargo.toml"],
-
   "[rust]": {
     "editor.defaultFormatter": "rust-lang.rust-analyzer",
     "editor.formatOnSave": true,

diff --git a/packages/ui-components/src/__tests__/CodeMirrorRainlang.test.svelte b/packages/ui-components/src/__tests__/CodeMirrorRainlang.test.svelte
diff --git a/packages/ui-components/src/__tests__/CodeMirrorRainlang.test.ts b/packages/ui-components/src/__tests__/CodeMirrorRainlang.test.ts
@@ -1,8 +1,8 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render } from '@testing-library/svelte';
-import CodeMirrorRainlang from './CodeMirrorRainlang.test.svelte';
+import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
+import { render, waitFor } from '@testing-library/svelte';
+import CodeMirrorRainlang from '../lib/components/CodeMirrorRainlang.svelte';
 import type { Order } from '@rainlanguage/orderbook/js_api';
-import * as orderBookApi from '@rainlanguage/orderbook/js_api';
+import { extendOrder } from '@rainlanguage/orderbook/js_api';
 import { writable } from 'svelte/store';
 
 // Mock the extendOrder function
@@ -13,6 +13,15 @@ vi.mock('@rainlanguage/orderbook/js_api', () => ({
 	}))
 }));
 
+vi.mock('codemirror-rainlang', () => ({
+	RainlangLR: vi.fn()
+}));
+
+vi.mock('svelte-codemirror-editor', async () => {
+	const mockCodeMirror = (await import('../lib/__mocks__/MockComponent.svelte')).default;
+	return { default: mockCodeMirror };
+});
+
 describe('CodeMirrorRainlang', () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
@@ -21,47 +30,51 @@ describe('CodeMirrorRainlang', () => {
 	it('should use extendOrder when order prop is provided', () => {
 		const mockOrder: Order = {} as Order;
 
-		const { getByTestId } = render(CodeMirrorRainlang, {
+		render(CodeMirrorRainlang, {
 			props: {
-				props: {
-					order: mockOrder,
-					rainlangText: 'original text',
-					codeMirrorTheme: writable({})
-				}
+				order: mockOrder,
+				codeMirrorTheme: writable({}),
+				codeMirrorDisabled: false,
+				codeMirrorStyles: {}
 			}
 		});
 
-		expect(orderBookApi.extendOrder).toHaveBeenCalledWith(mockOrder);
-		expect(getByTestId('test-value').textContent).toBe('mocked rainlang text');
+		expect(extendOrder).toHaveBeenCalledWith(mockOrder);
 	});
 
 	it('should use rainlangText when no order is provided', () => {
 		const testText = 'test rainlang text';
 
-		const { getByTestId } = render(CodeMirrorRainlang, {
+		render(CodeMirrorRainlang, {
 			props: {
-				props: {
-					rainlangText: testText,
-					codeMirrorTheme: writable({})
-				}
+				order: undefined,
+				rainlangText: testText,
+				codeMirrorTheme: writable({}),
+				codeMirrorDisabled: false,
+				codeMirrorStyles: {}
 			}
 		});
 
-		expect(orderBookApi.extendOrder).not.toHaveBeenCalled();
-		expect(getByTestId('test-value').textContent).toBe(testText);
+		expect(extendOrder).not.toHaveBeenCalled();
 	});
 
-	it('should pass through disabled prop', () => {
-		const { getByTestId } = render(CodeMirrorRainlang, {
+	it('should pass through disabled prop', async () => {
+		const mockOrder: Order = {} as Order;
+		const mockExtendedOrder = { order: {} };
+
+		(extendOrder as Mock).mockReturnValue(mockExtendedOrder);
+
+		const screen = render(CodeMirrorRainlang, {
 			props: {
-				props: {
-					disabled: true,
-					rainlangText: 'test',
-					codeMirrorTheme: writable({})
-				}
+				order: mockOrder,
+				codeMirrorTheme: writable({}),
+				codeMirrorDisabled: false,
+				codeMirrorStyles: {}
 			}
 		});
 
-		expect(getByTestId('test-value')).toBeTruthy();
+		await waitFor(() => {
+			expect(screen.getByTestId('rainlang-not-included')).toBeInTheDocument();
+		});
 	});
 });
diff --git a/packages/ui-components/src/lib/components/CodeMirrorRainlang.svelte b/packages/ui-components/src/lib/components/CodeMirrorRainlang.svelte
@@ -1,14 +1,38 @@
 <script lang="ts">
 	import type { Order } from '@rainlanguage/orderbook/js_api';
 	import { extendOrder } from '@rainlanguage/orderbook/js_api';
+	import CodeMirror from 'svelte-codemirror-editor';
+	import { RainlangLR } from 'codemirror-rainlang';
 
 	export let order: Order | undefined = undefined;
-	export let rainlangText: string = '';
+	export let rainlangText: string | undefined = undefined;
 	export let codeMirrorTheme;
-	export let disabled = false;
-	export let styles = {};
+	export let codeMirrorDisabled = true;
+	export let codeMirrorStyles = {};
 
-	$: value = order ? extendOrder(order).rainlang : rainlangText;
+	$: extendedOrder = order ? extendOrder(order) : undefined;
 </script>
 
-<slot name="codemirror" {value} {codeMirrorTheme} {disabled} {styles}></slot>
+{#if extendedOrder?.rainlang}
+	<CodeMirror
+		value={rainlangText || extendedOrder.rainlang}
+		extensions={[RainlangLR]}
+		theme={codeMirrorTheme}
+		readonly={codeMirrorDisabled}
+		useTab={true}
+		tabSize={2}
+		styles={{
+			'&': {
+				width: '100%'
+			},
+			...codeMirrorStyles
+		}}
+	/>
+{:else if !extendedOrder?.rainlang && !rainlangText}
+	<div
+		class="w-full tracking-tight text-gray-900 dark:text-white"
+		data-testid="rainlang-not-included"
+	>
+		Rain source not included in order meta
+	</div>
+{/if}
diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -12,9 +12,6 @@
 	import { QKEY_ORDER } from '../../queries/keys';
 	import CodeMirrorRainlang from '../CodeMirrorRainlang.svelte';
 	import { queryClient } from '../../stores/queryClient';
-	import CodeMirror from 'svelte-codemirror-editor';
-	import { RainlangLR } from 'codemirror-rainlang';
-
 	import { getOrder, type Order } from '@rainlanguage/orderbook/js_api';
 	import { createQuery } from '@tanstack/svelte-query';
 	import { Button, TabItem, Tabs } from 'flowbite-svelte';
@@ -157,26 +154,9 @@
 					<CodeMirrorRainlang
 						order={data}
 						codeMirrorTheme={$codeMirrorTheme}
-						disabled={codeMirrorDisabled}
-						styles={codeMirrorStyles}
-					>
-						<svelte:fragment slot="codemirror" let:value>
-							<CodeMirror
-								{value}
-								extensions={[RainlangLR]}
-								theme={codeMirrorTheme}
-								readonly={codeMirrorDisabled}
-								useTab={true}
-								tabSize={2}
-								styles={{
-									'&': {
-										width: '100%'
-									},
-									...codeMirrorStyles
-								}}
-							/>
-						</svelte:fragment>
-					</CodeMirrorRainlang>
+						{codeMirrorDisabled}
+						{codeMirrorStyles}
+					></CodeMirrorRainlang>
 				</div>
 			</TabItem>
 			<TabItem title="Trades">

diff --git a/tauri-app/src/routes/orders/add/+page.svelte b/tauri-app/src/routes/orders/add/+page.svelte
@@ -275,7 +275,7 @@
       >
         {#each Array.from($generatedRainlang.entries()) as [scenario, rainlangText]}
           <TabItem bind:open={openTab[scenario.name]} title={scenario.name}>
-            <CodeMirrorRainlang {rainlangText} disabled={true} {codeMirrorTheme} />
+            <CodeMirrorRainlang {rainlangText} codeMirrorDisabled={true} {codeMirrorTheme} />
           </TabItem>
         {/each}
       </Tabs>