@atom.io/template-react-realtime-text-editor 0.0.1

package/tests/collaboration.test.tsx

@@ -0,0 +1,251 @@
+import { act, waitFor } from "@testing-library/react"
+import { useO } from "atom.io/react"
+import type { Socket, UserKey } from "atom.io/realtime"
+import { useMosaic } from "atom.io/realtime-react"
+import { createMosaicServer } from "atom.io/realtime-server"
+import * as RTTest from "atom.io/realtime-testing"
+
+import { markdownAtomRegistration } from "../node/mosaic-atom.ts"
+import {
+	Markdown,
+	markdownAtom,
+	markdownWordCountSelector,
+	type MarkdownPresence,
+} from "../src/collaboration/mosaic.ts"
+import type { Identity } from "../src/identities.ts"
+import { INITIAL_MARKDOWN } from "../src/initial-markdown.ts"
+
+const JANE = { id: `jane`, name: `Jane`, color: `#7057ff` } satisfies Identity
+const DAVE = { id: `dave`, name: `Dave`, color: `#df527c` } satisfies Identity
+
+function identityFor(userKey: UserKey): Identity {
+	return userKey.includes(`jane`) ? JANE : DAVE
+}
+
+function testClient(identity: Identity, session: string) {
+	return function TestClient() {
+		const mosaic = useMosaic<InstanceType<typeof Markdown>, MarkdownPresence>(
+			markdownAtom,
+			{ actor: identity.id, session },
+		)
+		const document = useO(markdownAtom)
+		const wordCount = useO(markdownWordCountSelector)
+		const text = document.text
+		const history = document.historyFor(identity.id)
+		return (
+			<main>
+				<output data-testid="text">{text}</output>
+				<output data-testid="word-count">{wordCount}</output>
+				<output data-testid="status">{mosaic.status}</output>
+				<output data-testid="presence">
+					{mosaic.presence
+						.map(({ actor }) => actor)
+						.sort()
+						.join(`,`)}
+				</output>
+				<button
+					type="button"
+					data-testid="append"
+					onClick={() =>
+						mosaic.change({
+							text: `${text}[${identity.name}]`,
+							type: `replace-text`,
+						})
+					}
+				/>
+				<button
+					type="button"
+					data-testid="presence-update"
+					onClick={() => {
+						mosaic.publishPresence({
+							color: identity.color,
+							lastActiveAt: 1,
+							name: identity.name,
+							selection: document.selectionFromOffsets(0, 0),
+						})
+					}}
+				/>
+				<button
+					type="button"
+					data-testid="undo"
+					disabled={history.undo.length === 0}
+					onClick={() => mosaic.change({ type: `undo` })}
+				/>
+				<button
+					type="button"
+					data-testid="redo"
+					disabled={history.redo.length === 0}
+					onClick={() => mosaic.change({ type: `redo` })}
+				/>
+			</main>
+		)
+	}
+}
+
+function scenario() {
+	const collaboration = createMosaicServer({
+		registrations: [markdownAtomRegistration],
+	})
+	const room = RTTest.multiClient({
+		scenarioId: `mosaic-markdown`,
+		server: ({ sessionId, socket, userKey }) => {
+			const dispose = collaboration.connect({
+				actor: identityFor(userKey).id,
+				session: sessionId,
+				socket: socket as unknown as Socket,
+			})
+			return () => {
+				void dispose()
+			}
+		},
+		clients: {
+			jane: testClient(JANE, `test:jane`),
+			dave: testClient(DAVE, `test:dave`),
+		},
+	})
+	return {
+		...room,
+		teardown: async (): Promise<void> => {
+			await room.teardown()
+			await collaboration.dispose()
+		},
+	}
+}
+
+const initJane = (room: ReturnType<typeof scenario>) =>
+	room.clients.jane.init({
+		sessionId: `test:jane`,
+		userKey: `user::jane`,
+	})
+
+const initDave = (room: ReturnType<typeof scenario>) =>
+	room.clients.dave.init({
+		sessionId: `test:dave`,
+		userKey: `user::dave`,
+	})
+
+async function expectText(
+	client: RTTest.RealtimeTestClient,
+	text: string,
+): Promise<void> {
+	await waitFor(() => {
+		expect(client.renderResult.getByTestId(`text`).textContent).toBe(text)
+	})
+}
+
+async function expectStatus(
+	client: RTTest.RealtimeTestClient,
+	status: string,
+): Promise<void> {
+	await waitFor(() => {
+		expect(client.renderResult.getByTestId(`status`).textContent).toBe(status)
+	})
+}
+
+describe(`realtime collaborative Markdown`, () => {
+	test(`offline concurrent edits rebase and converge for both clients`, async () => {
+		const room = scenario()
+		const jane = initJane(room)
+		const dave = initDave(room)
+		await expectText(jane, INITIAL_MARKDOWN)
+		await expectText(dave, INITIAL_MARKDOWN)
+
+		act(() => {
+			jane.socket.disconnect()
+			dave.socket.disconnect()
+		})
+		await expectStatus(jane, `offline`)
+		await expectStatus(dave, `offline`)
+		act(() => {
+			jane.renderResult.getByTestId(`append`).click()
+			dave.renderResult.getByTestId(`append`).click()
+		})
+
+		act(() => {
+			jane.socket.connect()
+			dave.socket.connect()
+		})
+		await waitFor(() => {
+			const janeText = jane.renderResult.getByTestId(`text`).textContent ?? ``
+			const daveText = dave.renderResult.getByTestId(`text`).textContent ?? ``
+			expect(janeText).toBe(daveText)
+			expect(janeText).toContain(`[Jane]`)
+			expect(janeText).toContain(`[Dave]`)
+			expect(jane.renderResult.getByTestId(`word-count`).textContent).toBe(
+				dave.renderResult.getByTestId(`word-count`).textContent,
+			)
+		})
+		await room.teardown()
+	})
+
+	test(`one identity's undo preserves a later foreign edit`, async () => {
+		const room = scenario()
+		const jane = initJane(room)
+		const dave = initDave(room)
+		await expectStatus(jane, `live`)
+		await expectStatus(dave, `live`)
+
+		act(() => {
+			jane.renderResult.getByTestId(`append`).click()
+		})
+		await waitFor(() => {
+			expect(dave.renderResult.getByTestId(`text`).textContent).toContain(
+				`[Jane]`,
+			)
+		})
+		act(() => {
+			dave.renderResult.getByTestId(`append`).click()
+		})
+		await waitFor(() => {
+			expect(jane.renderResult.getByTestId(`text`).textContent).toContain(
+				`[Dave]`,
+			)
+		})
+
+		act(() => {
+			jane.renderResult.getByTestId(`undo`).click()
+		})
+		await waitFor(() => {
+			const text = jane.renderResult.getByTestId(`text`).textContent ?? ``
+			expect(text).not.toContain(`[Jane]`)
+			expect(text).toContain(`[Dave]`)
+			expect(dave.renderResult.getByTestId(`text`).textContent).toBe(text)
+		})
+
+		act(() => {
+			jane.renderResult.getByTestId(`redo`).click()
+		})
+		await waitFor(() => {
+			const text = jane.renderResult.getByTestId(`text`).textContent ?? ``
+			expect(text).toContain(`[Jane]`)
+			expect(text).toContain(`[Dave]`)
+			expect(dave.renderResult.getByTestId(`text`).textContent).toBe(text)
+		})
+		await room.teardown()
+	})
+
+	test(`presence is model-aware and removed on disconnect`, async () => {
+		const room = scenario()
+		const jane = initJane(room)
+		const dave = initDave(room)
+		await expectStatus(jane, `live`)
+		await expectStatus(dave, `live`)
+		act(() => {
+			jane.renderResult.getByTestId(`presence-update`).click()
+			dave.renderResult.getByTestId(`presence-update`).click()
+		})
+		await waitFor(() => {
+			expect(jane.renderResult.getByTestId(`presence`).textContent).toBe(
+				`dave,jane`,
+			)
+		})
+
+		act(() => {
+			dave.socket.disconnect()
+		})
+		await waitFor(() => {
+			expect(jane.renderResult.getByTestId(`presence`).textContent).toBe(`jane`)
+		})
+		await room.teardown()
+	})
+})

package/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"target": "ES2024",
+		"useDefineForClassFields": true,
+		"lib": ["ES2024", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"types": ["vite/client", "lasertag/css-modules", "lasertag/react-jsx"],
+		"skipLibCheck": true,
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"jsx": "react-jsx",
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"erasableSyntaxOnly": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.app.json" },
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "./tsconfig.test.json" }
+	]
+}

package/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"target": "ES2024",
+		"lib": ["ES2024"],
+		"module": "ESNext",
+		"types": ["node"],
+		"skipLibCheck": true,
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"erasableSyntaxOnly": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["node", "vite.config.ts", "vitest.config.ts", "eslint.config.ts"]
+}

package/tsconfig.test.json

@@ -0,0 +1,13 @@
+{
+	"extends": "./tsconfig.app.json",
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.test.tsbuildinfo",
+		"types": [
+			"node",
+			"vitest/globals",
+			"lasertag/css-modules",
+			"lasertag/react-jsx"
+		]
+	},
+	"include": ["node/mosaic-atom.ts", "src", "tests"]
+}

package/vite.config.ts

@@ -0,0 +1,22 @@
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+const BACKEND_URL = `http://localhost:3000`
+
+const proxyBackend = () => ({
+	[`/health`]: {
+		changeOrigin: true,
+		target: BACKEND_URL,
+	},
+	[`/socket.io`]: {
+		changeOrigin: true,
+		target: BACKEND_URL,
+		ws: true,
+	},
+})
+
+export default defineConfig({
+	plugins: [react()],
+	preview: { proxy: proxyBackend() },
+	server: { proxy: proxyBackend() },
+})

package/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "vitest/config"
+
+export default defineConfig({
+	test: {
+		environment: `happy-dom`,
+		globals: true,
+		include: [`tests/**/*.test.tsx`],
+		testTimeout: 10_000,
+	},
+})