test: begin writing testsHEADmain

6 files changed, 88 insertions, 40 deletions

diff --git a/src/components/NodeEditor.tsx b/src/components/NodeEditor.tsx
index 758fb76..4cb7011 100644
--- a/src/components/NodeEditor.tsx
+++ b/src/components/NodeEditor.tsx
@@ -87,7 +87,7 @@ const NodeEditor = ({ project }: NodeEditorProps) => {
 			const filter = pb.filter('project.id = {:id}', { id: project.id });
 			const projectNodes = await pb.collection('nodes').getFullList({ filter });
 			const projectLinks = await pb.collection('links').getFullList({ filter });
-			const instances = projectNodes.map(node => instantiateNode(node.id, node.x, node.y, node.name));
+			const instances = projectNodes.map(node => instantiateNode(node.id, node.x, node.y, nodeRegistry[node.type]));
 			nodes.value = nodes.value.concat(instances);
 		})();
 	}, []);
@@ -237,14 +237,13 @@ const NodeEditor = ({ project }: NodeEditorProps) => {
 		scale.value *= 1 + delta;
 	}), []);
 
-	const addNode = useCallback(async (name: string, info: NodeInfo<any, any>) => {
-		const node = await pb.collection('nodes').create({ x: 100, y: 100, type: name, project: projectId, collapsed: false });
-		alert(JSON.stringify(node));
+	const addNode = useCallback(async (type: string, info: NodeInfo<any, any>) => {
+		const node = await pb.collection('nodes').create({ x: 100, y: 100, type, project: project.id, collapsed: false });
 		nodes.value = nodes.value.concat(instantiateNode(node.id, node.x, node.y, info));
 	}, []);
 
 	return (
-		<div class="__NodeEditor">
+		<>
 			<Toolbar title={project.name}>
 				<ButtonMenu label="Add">
 					{Object.entries(nodeRegistry).map(([name, node]) => (
@@ -252,34 +251,36 @@ const NodeEditor = ({ project }: NodeEditorProps) => {
 					))}
 				</ButtonMenu>
 			</Toolbar>
-		<svg width="100vw" height="100vh" ref={svgRef} onMouseDown={onBgMouseDown} onWheel={onBgWheel}>
-			<pattern
-				id="bg-grid-major"
-				patternUnits="userSpaceOnUse"
-				x={offsetX} y={offsetY}
-				width={120 * scale.value} height={120 * scale.value}
-			>
-				<pattern id="bg-grid-minor" patternUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-					<circle cx="2" cy="2" r="1" fill="var(--surface)" />
-				</pattern>
-				<g transform={`scale(${scale})`}>
-					<rect fill="url(#bg-grid-minor)" x="0" y="0" width="100%" height="100%" />
-					<circle cx="2" cy="2" r="2" fill="var(--surface)" />
-				</g>
-			</pattern>
-			<rect fill="url(#bg-grid-major)" x="0" y="0" width="100%" height="100%" />
-			<g transform={`translate(${offsetX},${offsetY}) scale(${scale})`}>
-				{allLinks.value.map(({fromX, fromY, toX, toY}) => (
-					<Link fromX={fromX} fromY={fromY} toX={toX} toY={toY} />
-				))}
-				<SocketHandlers.Provider value={socketHandlers}>
-					{nodes.value.map(node => (
-						<node.component id={node.id} x={node.x} y={node.y} inputs={node.inputs} />
-					))}
-				</SocketHandlers.Provider>
-			</g>
-		</svg>
-		</div>
+			<main>
+				<svg class="__NodeEditor" width="100vw" height="100vh" ref={svgRef} onMouseDown={onBgMouseDown} onWheel={onBgWheel}>
+					<pattern
+						id="bg-grid-major"
+						patternUnits="userSpaceOnUse"
+						x={offsetX} y={offsetY}
+						width={120 * scale.value} height={120 * scale.value}
+					>
+						<pattern id="bg-grid-minor" patternUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+							<circle cx="2" cy="2" r="1" fill="color-mix(in srgb, var(--overlay) 25%, var(--surface))" />
+						</pattern>
+						<g transform={`scale(${scale})`}>
+							<rect fill="url(#bg-grid-minor)" x="0" y="0" width="100%" height="100%" />
+							<circle cx="2" cy="2" r="2" fill="color-mix(in srgb, var(--overlay) 25%, var(--surface))" />
+						</g>
+					</pattern>
+					<rect fill="url(#bg-grid-major)" x="0" y="0" width="100%" height="100%" />
+					<g transform={`translate(${offsetX},${offsetY}) scale(${scale})`}>
+						{allLinks.value.map(({fromX, fromY, toX, toY}) => (
+							<Link fromX={fromX} fromY={fromY} toX={toX} toY={toY} />
+						))}
+						<SocketHandlers.Provider value={socketHandlers}>
+							{nodes.value.map(node => (
+								<node.component id={node.id} x={node.x} y={node.y} inputs={node.inputs} />
+							))}
+						</SocketHandlers.Provider>
+					</g>
+				</svg>
+			</main>
+		</>
 	);
 };
 
diff --git a/src/index.tsx b/src/index.tsx
index cd8c870..a67fd94 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,3 +1,4 @@
+import 'preact/debug';
 import { render } from 'preact';
 import { useMemo } from 'preact/hooks';
 import { Router } from 'preact-router';
@@ -7,7 +8,7 @@ import { Home, SignUp, LogIn, ProjectsList, Editor } from './pages';
 import './index.css';
 
 export const App = () => {
-	const pb = useMemo(() => new PocketBase(`/`), []);
+	const pb = useMemo(() => new PocketBase('http://localhost:8090/'), []);
 	return (
 		<Pb.Provider value={pb}>
 			<Router>
diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx
index c929595..c5b369f 100644
--- a/src/pages/Editor.tsx
+++ b/src/pages/Editor.tsx
@@ -20,11 +20,7 @@ const Editor = ({ user, project }: EditorProps) => {
 		})();
 	}, []);
 
-	return (
-		<>
-			{!!projectData.value && <NodeEditor project={projectData.value} />}
-		</>
-	);
+	return projectData.value ? <NodeEditor project={projectData.value} /> : null;
 };
 
 export default Editor;
diff --git a/src/pages/SignUp.test.tsx b/src/pages/SignUp.test.tsx
new file mode 100644
index 0000000..3029beb
--- /dev/null
+++ b/src/pages/SignUp.test.tsx
@@ -0,0 +1,34 @@
+import { expect, test } from 'bun:test';
+import { render, fireEvent } from '@testing-library/preact';
+import { Pb } from '../context.ts';
+import { pb } from '../preload.ts';
+import SignUp from './SignUp.tsx';
+
+test('has a link to log in', () => {
+	const { getAllByText, getByLabelText, getByText } = render(
+		<SignUp />
+	);
+
+	expect(getAllByText(/log in/i)).not.toHaveLength(0);
+});
+
+test('can sign up', () => {
+	const username = 'foo';
+	const email = 'foo@example.com';
+	const password = '12345678';
+
+	const { getByText, getByLabelText } = render(
+		<Pb.Provider value={pb}>
+			<SignUp />
+		</Pb.Provider>
+	);
+
+	fireEvent.change(getByLabelText(/username/i), {target: {value: username}});
+	fireEvent.change(getByLabelText(/email/i), {target: {value: email}});
+	fireEvent.change(getByLabelText(/password/i), {target: {value: password}});
+	fireEvent.change(getByLabelText(/confirm password/i), {target: {value: password}});
+
+	fireEvent.click(getByText(/continue/i));
+
+	expect(pb.authStore.isValid()).toBeTrue();
+});
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index e1cee3c..755c180 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -2,7 +2,14 @@ import { useContext, useCallback } from 'preact/hooks';
 import { useSignal } from '@preact/signals';
 import { route } from 'preact-router';
 import { Pb } from '../context.ts';
-import { Header, Content, Form, FormLabel, TextInput, Button, ArrowButton } from '../components';
+
+import Header from '../components/Header.tsx';
+import Content from '../components/Content.tsx';
+import Form from '../components/Form.tsx';
+import FormLabel from '../components/FormLabel.tsx';
+import TextInput from '../components/TextInput.tsx';
+import Button from '../components/Button.tsx';
+import ArrowButton from '../components/ArrowButton.tsx';
 
 const SignUp = () => {
 	const pb = useContext(Pb)!;
diff --git a/src/test-preload.ts b/src/test-preload.ts
new file mode 100644
index 0000000..3ec72a1
--- /dev/null
+++ b/src/test-preload.ts
@@ -0,0 +1,9 @@
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+import PocketBase from 'pocketbase';
+
+GlobalRegistrator.register();
+
+const proc = Bun.spawn(['./pocketbase', 'serve', '--http', '127.0.0.1:8090']);
+
+const pb = new PocketBase('http://localhost:8090/');
+export { pb };