From 1d5f74bca29c6bb28bef6035aa09a1e35884b40a Mon Sep 17 00:00:00 2001 From: Sam Nystrom Date: Sat, 16 Mar 2024 22:54:54 -0400 Subject: test: begin writing tests --- src/components/NodeEditor.tsx | 67 ++++++++++++++++++++++--------------------- src/index.tsx | 3 +- src/pages/Editor.tsx | 6 +--- src/pages/SignUp.test.tsx | 34 ++++++++++++++++++++++ src/pages/SignUp.tsx | 9 +++++- src/test-preload.ts | 9 ++++++ 6 files changed, 88 insertions(+), 40 deletions(-) create mode 100644 src/pages/SignUp.test.tsx create mode 100644 src/test-preload.ts (limited to 'src') 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) => { - 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) => { + 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 ( -
+ <> {Object.entries(nodeRegistry).map(([name, node]) => ( @@ -252,34 +251,36 @@ const NodeEditor = ({ project }: NodeEditorProps) => { ))} - - - - - - - - - - - - - {allLinks.value.map(({fromX, fromY, toX, toY}) => ( - - ))} - - {nodes.value.map(node => ( - - ))} - - - -
+
+ + + + + + + + + + + + + {allLinks.value.map(({fromX, fromY, toX, toY}) => ( + + ))} + + {nodes.value.map(node => ( + + ))} + + + +
+ ); }; 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 ( 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 && } - - ); + return 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( + + ); + + 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( + + + + ); + + 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 }; -- cgit v1.2.3