Merge pull request #1265 from rainlanguage/2024-02-11-url-state

updating url with state

packages/ui-components/package.json

@@ -19,6 +19,7 @@
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
+		"build:watch": "vite build --watch & svelte-package --watch",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

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

@@ -1,13 +1,14 @@
 import { render, screen } from '@testing-library/svelte';
 import { describe, it, expect } from 'vitest';
 import DeploymentSectionHeader from '../lib/components/deployment/DeploymentSectionHeader.svelte';
+import type { ComponentProps } from 'svelte';
+
+export type DeploymentSectionHeaderComponentProps = ComponentProps<DeploymentSectionHeader>;
 
 describe('DeploymentSectionHeader', () => {
-	const defaultProps = {
+	const defaultProps: DeploymentSectionHeaderComponentProps = {
 		title: 'Test Title',
-		description: 'Test Description',
-		open: false,
-		value: 'Test Value'
+		description: 'Test Description'
 	};
 
 	it('renders title and description', () => {
@@ -16,29 +17,4 @@ describe('DeploymentSectionHeader', () => {
 		expect(screen.getByText('Test Title')).toBeInTheDocument();
 		expect(screen.getByText('Test Description')).toBeInTheDocument();
 	});
-
-	it('shows value when not open', () => {
-		render(DeploymentSectionHeader, defaultProps);
-
-		expect(screen.getByTestId('header-value')).toBeInTheDocument();
-		expect(screen.getByText('Test Value')).toBeInTheDocument();
-	});
-
-	it('hides value when open', () => {
-		render(DeploymentSectionHeader, {
-			...defaultProps,
-			open: true
-		});
-
-		expect(screen.queryByTestId('header-value')).not.toBeInTheDocument();
-	});
-
-	it('hides value when value is undefined', () => {
-		render(DeploymentSectionHeader, {
-			...defaultProps,
-			value: undefined
-		});
-
-		expect(screen.queryByTestId('header-value')).not.toBeInTheDocument();
-	});
 });

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

@@ -592,7 +592,8 @@ describe('DeploymentSteps', () => {
 				wagmiConfig: mockWagmiConfigStore,
 				wagmiConnected: mockConnectedStore,
 				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn()
+				handleDeployModal: vi.fn(),
+				handleUpdateGuiState: vi.fn()
 			}
 		});
 
@@ -619,7 +620,8 @@ describe('DeploymentSteps', () => {
 				wagmiConfig: mockWagmiConfigStore,
 				wagmiConnected: mockConnectedStore,
 				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn()
+				handleDeployModal: vi.fn(),
+				handleUpdateGuiState: vi.fn()
 			}
 		});
 
@@ -644,7 +646,8 @@ describe('DeploymentSteps', () => {
 				wagmiConfig: mockWagmiConfigStore,
 				wagmiConnected: mockConnectedStore,
 				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn()
+				handleDeployModal: vi.fn(),
+				handleUpdateGuiState: vi.fn()
 			}
 		});
 
@@ -679,7 +682,8 @@ describe('DeploymentSteps', () => {
 				wagmiConfig: mockWagmiConfigStore,
 				wagmiConnected: mockConnectedStore,
 				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn()
+				handleDeployModal: vi.fn(),
+				handleUpdateGuiState: vi.fn()
 			}
 		});
 
@@ -712,7 +716,8 @@ describe('DeploymentSteps', () => {
 				wagmiConfig: mockWagmiConfigStore,
 				wagmiConnected: mockConnectedStore,
 				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn()
+				handleDeployModal: vi.fn(),
+				handleUpdateGuiState: vi.fn()
 			}
 		});
 

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

@@ -30,7 +30,8 @@ describe('DepositInput', () => {
 				gui: {
 					...mockGui,
 					getTokenInfo: vi.fn().mockReturnValue({ name: 'Test Token', symbol: 'TEST' })
-				}
+				},
+				handleUpdateGuiState: vi.fn()
 			} as unknown as DepositInputProps
 		});
 		await waitFor(() => {
@@ -45,7 +46,8 @@ describe('DepositInput', () => {
 		const { getByText } = render(DepositInput, {
 			props: {
 				deposit: mockDeposit,
-				gui: mockGui
+				gui: mockGui,
+				handleUpdateGuiState: vi.fn()
 			} as unknown as DepositInputProps
 		});
 
@@ -59,7 +61,8 @@ describe('DepositInput', () => {
 		const { getByPlaceholderText } = render(DepositInput, {
 			props: {
 				deposit: mockDeposit,
-				gui: mockGui
+				gui: mockGui,
+				handleUpdateGuiState: vi.fn()
 			} as unknown as DepositInputProps
 		});
 

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

@@ -34,7 +34,7 @@ describe('FieldDefinitionInput', () => {
 			props: {
 				fieldDefinition: mockFieldDefinition,
 				gui: mockGui,
-				open: true
+				handleUpdateGuiState: vi.fn()
 			}
 		});
 
@@ -47,7 +47,7 @@ describe('FieldDefinitionInput', () => {
 			props: {
 				fieldDefinition: mockFieldDefinition,
 				gui: mockGui,
-				open: true
+				handleUpdateGuiState: vi.fn()
 			}
 		});
 
@@ -60,7 +60,7 @@ describe('FieldDefinitionInput', () => {
 			props: {
 				fieldDefinition: mockFieldDefinition,
 				gui: mockGui,
-				open: true
+				handleUpdateGuiState: vi.fn()
 			}
 		});
 
@@ -77,7 +77,7 @@ describe('FieldDefinitionInput', () => {
 			props: {
 				fieldDefinition: mockFieldDefinition,
 				gui: mockGui,
-				open: true
+				handleUpdateGuiState: vi.fn()
 			}
 		});
 
@@ -100,7 +100,7 @@ describe('FieldDefinitionInput', () => {
 			props: {
 				fieldDefinition: fastExitFieldDef,
 				gui: mockGui,
-				open: true
+				handleUpdateGuiState: vi.fn()
 			}
 		});
 

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

@@ -19,13 +19,13 @@ describe('SelectToken', () => {
 	} as unknown as DotrainOrderGui;
 
 	const mockProps: SelectTokenComponentProps = {
-		allTokensSelected: false,
 		gui: mockGui,
-		selectToken: { key: 'input', name: 'test input', description: 'test description' },
-		selectTokens: [
-			{ key: 'input', name: 'test input', description: 'test description' },
-			{ key: 'output', name: 'test output', description: 'test description' }
-		]
+		token: {
+			key: 'input',
+			name: 'test input',
+			description: 'test description'
+		},
+		handleUpdateGuiState: vi.fn()
 	};
 
 	beforeEach(() => {

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

@@ -0,0 +1,52 @@
+import { render, fireEvent, screen } from '@testing-library/svelte';
+import { describe, it, expect, vi } from 'vitest';
+import ShareChoicesButton from '../lib/components/deployment/ShareChoicesButton.svelte';
+
+describe('ShareChoicesButton', () => {
+	const mockHandleShareChoices = vi.fn();
+
+	it('calls handleShareChoices when clicked', async () => {
+		render(ShareChoicesButton, {
+			props: {
+				handleShareChoices: mockHandleShareChoices
+			}
+		});
+
+		await fireEvent.click(screen.getByTestId('review-choices-button'));
+		expect(mockHandleShareChoices).toHaveBeenCalledTimes(1);
+	});
+
+	it('shows and hides copied message when clicked', async () => {
+		render(ShareChoicesButton, {
+			props: {
+				handleShareChoices: mockHandleShareChoices
+			}
+		});
+
+		// Message should not be visible initially
+		expect(screen.queryByText('Shareable URL copied to clipboard')).not.toBeInTheDocument();
+
+		// Click the button
+		await fireEvent.click(screen.getByTestId('review-choices-button'));
+
+		// Message should be visible
+		expect(screen.getByText('Shareable URL copied to clipboard')).toBeInTheDocument();
+
+		// Wait for 5 seconds
+		await new Promise((resolve) => setTimeout(resolve, 5000));
+
+		// Message should be gone
+		expect(screen.queryByText('Shareable URL copied to clipboard')).not.toBeInTheDocument();
+	});
+
+	it('renders the share button correctly', () => {
+		render(ShareChoicesButton, {
+			props: {
+				handleShareChoices: mockHandleShareChoices
+			}
+		});
+
+		expect(screen.getByText('Share these choices')).toBeInTheDocument();
+		expect(screen.getByTestId('review-choices-button')).toBeInTheDocument();
+	});
+});

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

@@ -1,43 +1,54 @@
-import { render, fireEvent } from '@testing-library/svelte';
+import { render, fireEvent, waitFor } from '@testing-library/svelte';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import TokenIOInput from '../lib/components/deployment/TokenIOInput.svelte';
 import type { ComponentProps } from 'svelte';
+import userEvent from '@testing-library/user-event';
 
 export type TokenIOInputComponentProps = ComponentProps<TokenIOInput>;
 
 describe('TokenInput', () => {
 	const mockInput = {
 		token: {
-			address: '0x123'
+			address: '0x123',
+			key: 'test'
 		}
 	};
-
-	const mockGui = {
-		setVaultId: vi.fn(),
-		getTokenInfo: vi.fn()
-	};
-
 	const mockTokenInfo = {
 		symbol: 'MOCK',
 		name: 'Mock Token',
 		decimals: 18
 	};
 
-	const inputMockProps: TokenIOInputComponentProps = {
+	const mockGui = {
+		setVaultId: vi.fn(),
+		getTokenInfo: vi.fn(),
+		getCurrentDeployment: vi.fn().mockResolvedValue({
+			deployment: {
+				order: {
+					inputs: [mockInput]
+				}
+			}
+		})
+	};
+
+	const mockProps: TokenIOInputComponentProps = {
 		i: 0,
 		isInput: true,
 		label: 'Input',
 		vault: mockInput,
 		vaultIds: ['vault1'],
-		gui: mockGui
+		gui: mockGui,
+		handleUpdateGuiState: vi.fn()
 	} as unknown as TokenIOInputComponentProps;
+
 	const outputMockProps: TokenIOInputComponentProps = {
 		i: 0,
 		isInput: false,
 		label: 'Output',
 		vault: mockInput,
 		vaultIds: ['vault2'],
-		gui: mockGui
+		gui: mockGui,
+		handleUpdateGuiState: vi.fn()
 	} as unknown as TokenIOInputComponentProps;
 
 	beforeEach(() => {
@@ -46,36 +57,42 @@ describe('TokenInput', () => {
 	});
 
 	it('renders with correct label and no token symbol', () => {
-		const { getByText } = render(TokenIOInput, inputMockProps);
+		const { getByText } = render(TokenIOInput, mockProps);
 		expect(getByText('Input 1')).toBeInTheDocument();
 	});
 
 	it('renders input field with correct placeholder', () => {
-		const { getByPlaceholderText } = render(TokenIOInput, inputMockProps);
+		const { getByPlaceholderText } = render(TokenIOInput, mockProps);
 		const input = getByPlaceholderText('Enter vault ID');
 		expect(input).toBeInTheDocument();
 	});
 
-	it('displays the correct vault ID value', () => {
-		const { getByDisplayValue } = render(TokenIOInput, inputMockProps);
-		expect(getByDisplayValue('vault1')).toBeInTheDocument();
+	it('displays the correct vault ID value', async () => {
+		const { getByText } = render(TokenIOInput, mockProps);
+		await waitFor(() => {
+			expect(getByText('MOCK vault ID')).toBeInTheDocument();
+		});
 	});
 
-	it('calls setVaultId on input vault when input changes', async () => {
-		const input = render(TokenIOInput, inputMockProps).getByPlaceholderText('Enter vault ID');
-		await fireEvent.change(input, { target: { value: 'vault1' } });
-		expect(mockGui.setVaultId).toHaveBeenCalledWith(true, 0, 'vault1');
+	it('calls setVaultId when input changes', async () => {
+		const { getByPlaceholderText } = render(TokenIOInput, mockProps);
+		const input = getByPlaceholderText('Enter vault ID');
+
+		await userEvent.type(input, 'vault1');
+		await waitFor(() => {
+			expect(mockGui.setVaultId).toHaveBeenCalledWith(true, 0, 'vault1');
+		});
 	});
 
 	it('calls setVaultId on output vault when input changes', async () => {
 		const input = render(TokenIOInput, outputMockProps).getByPlaceholderText('Enter vault ID');
-		await fireEvent.change(input, { target: { value: 'vault2' } });
+		await fireEvent.input(input, { target: { value: 'vault2' } });
 		expect(mockGui.setVaultId).toHaveBeenCalledWith(false, 0, 'vault2');
 	});
 
 	it('does not call setVaultId when gui is undefined', async () => {
 		const propsWithoutGui = {
-			...inputMockProps,
+			...mockProps,
 			gui: undefined
 		} as unknown as TokenIOInputComponentProps;
 		const { getByPlaceholderText } = render(TokenIOInput, propsWithoutGui);
@@ -88,7 +105,7 @@ describe('TokenInput', () => {
 
 	it('handles missing token info gracefully', () => {
 		const propsWithUnknownToken = {
-			...inputMockProps,
+			...mockProps,
 			vault: { token: { address: '0x789' } }
 		};
 		const { getByText } = render(
@@ -100,7 +117,7 @@ describe('TokenInput', () => {
 
 	it('fetches and displays token symbol when token key is present', async () => {
 		const propsWithTokenKey = {
-			...inputMockProps,
+			...mockProps,
 			vault: {
 				token: {
 					key: '0x456'