got tests working

Author: pdiffley

packages/collab-client/src/index.ts

@@ -79,7 +79,6 @@ export class CollabClient {
    * Send local editor state changes to the remote server.
    */
   async send(editorState: EditorState) {
-    console.error("SENDING STATE");
     const commit = sendableCommit(editorState);
     if (!commit) return;
     // Avoid unnecessary network traffic by skipping commits
@@ -88,9 +87,7 @@ export class CollabClient {
 
     this.sending = commit.ref;
     try {
-      console.error("CALLING sendCommit");
       await this.sendCommit(commit);
-      console.error("SENT COMMIT");
     } catch {
       // If the send fails, then unset the
       // sending ref so that it's possible

packages/collab-server/src/index.ts

@@ -176,7 +176,6 @@ export class CollabAuthority<Transaction> {
     });
 
     if (!appliedCommitJSON) return;
-    console.error("AUTHORITY IS BROADCASTING COMMIT");
     await this.broadcastManager.broadcastCommit(docId, appliedCommitJSON);
   }
 
@@ -185,7 +184,6 @@ export class CollabAuthority<Transaction> {
    * are found or after a timeout specified in the CollabAuthority's `broadcastManager`.
    */
   async listenForCommit(docId: string, version: number) {
-    console.error("AUTHORITY IS LISTENING FOR COMMIT");
     // Create listner to notify if commits are made. After this await, the listener is registered with
     // the notification service and will be notified if a commit is made.
     const { listen, abort } = await this.broadcastManager.createCommitListener(docId, version);
@@ -194,23 +192,17 @@ export class CollabAuthority<Transaction> {
     // new commit listener being registered
     const preCommits = await this.getCommits(null, docId, version);
     if (preCommits.length) {
-      console.error("RETURNING EARLY WITH COMMITS");
       await abort();
       return preCommits;
     }
 
-    console.error("LISTENING FOR COMMMITS");
     // Await and return any incoming commits
     let commitsFound = await listen();
     if (commitsFound) {
-      console.error("FOUND COMMMITS");
-
       const postCommits = await this.getCommits(null, docId, version);
       return postCommits;
     }
 
-    console.error("FOUND NO COMMMITS");
-
     return [];
   }
 }

packages/demo/src/server-base.tsx

@@ -171,7 +171,6 @@ export function createDeployment(config: DemoDeploymentConfig): DemoDeployment {
   });
 
   app.get("/api/docs/:docId/commits", async (req, res) => {
-    console.error("SERVER LISTENING FOR COMMIT");
     const commits = await collabAuthority.listenForCommit(
       req.params.docId,
       parseInt(req.query["version"] as string, 10),
@@ -199,7 +198,6 @@ export function createDeployment(config: DemoDeploymentConfig): DemoDeployment {
 
   app.post("/api/docs/:docId/commits", async (req, res) => {
     try {
-      console.log("SERVER HAS RECEIVED A COMMIT");
       await collabAuthority.receiveCommit(req.params.docId, req.body);
     } catch (e) {
       if (e instanceof TooMuchContentionError) {

packages/demo/src/test/collab.test.ts

@@ -4,8 +4,7 @@ import { assert, expect, test } from "vitest";
 import { getDoc } from "../database/docs";
 import { createDeployment, startServer } from "../server-base";
 
-import { createCollabClient,
-generateTestDeploymentConfig, sleep } from "./utils";
+import { createCollabClient, generateTestDeploymentConfig, sleep } from "./utils";
 
 const TEST_PORT = 10001;
 
@@ -33,13 +32,11 @@ test("Test collab", async () => {
     serverUrl,
     docId,
     doc1,
-    "client1",
   );
   const { client: _client2, stateBox: stateBox2 } = await createCollabClient(
     serverUrl,
     docId,
     doc2,
-    "client2",
   );
 
   const tr = stateBox1.state.tr.insertText("hello");
@@ -51,4 +48,3 @@ test("Test collab", async () => {
 
   expect(stateBox1.state.doc.content).toStrictEqual(stateBox2.state.doc.content);
 });
-

packages/demo/src/test/presence.test.ts

@@ -1,35 +1,18 @@
-import { Node } from "prosemirror-model";
-import { schema } from "prosemirror-schema-basic";
-import { EditorState } from "prosemirror-state";
+import { TextSelection } from "prosemirror-state";
 // Todo: should the test files be named differently?
 import { assert, expect, test } from "vitest";
 
 import {
-  NodeJSON,
-  collab,
-} from "@pitter-patter/collab-client";
-import {
-  PresenceClient,
-  PresenceClientConfig,
-  LongPollListener as PresenceLongPollListener,
-  receivePresenceTransaction,
+  presenceKey,
 } from "@pitter-patter/presence-client";
 
 import { getDoc } from "../database/docs";
 import { randomRef } from "../editor/Editor";
 import { createDeployment, startServer } from "../server-base";
 
-import { createCollabClient, generateTestDeploymentConfig, sleep, StateBox } from "./utils";
-
-const TEST_PORT = 10001;
+import { createCollabClient, createPresenceClient, generateTestDeploymentConfig, sleep } from "./utils";
 
-interface Doc {
-  content: NodeJSON;
-  createdAt: string;
-  id: string;
-  updatedAt: string;
-  version: number;
-}
+const TEST_PORT = 10002;
 
 test("Test collab", async () => {
   const config = generateTestDeploymentConfig(1);
@@ -51,72 +34,53 @@ test("Test collab", async () => {
 
   const userId1 = randomRef();
   const doc1 = await getDoc(await deployment.db.getDb(), docId);
-  const { client: _presenceClient1, stateBox: presenceStateBox1 } = await createPresenceClient(
+  const { client: collabClient1, stateBox: stateBox1 } = await createCollabClient(
     serverUrl,
-    userId1,
+    docId,
     doc1,
   );
-  const { client: collabClient1, stateBox: collabStateBox1 } = await createCollabClient(
+  const { client: presenceClient1 } = await createPresenceClient(
     serverUrl,
-    docId,
+    userId1,
     doc1,
-    "client1",
+    stateBox1,
   );
 
   const userId2 = randomRef();
   const doc2 = await getDoc(await deployment.db.getDb(), docId);
-  const { client: _presenceClient2, stateBox: presenceStateBox2 } = await createPresenceClient(
+  const { client: _collabClient2, stateBox: stateBox2 } = await createCollabClient(
+    serverUrl,
+    docId,
+    doc2,
+  );
+  const { client: _presenceClient2 } = await createPresenceClient(
     serverUrl,
     userId2,
     doc2,
+    stateBox2,
   );
 
-  const tr = collabStateBox1.state.tr..insertText("hello");
-  collabStateBox1.state = collabStateBox1.state.apply(tr);
-  await collabClient1.send(collabStateBox1.state);
+  const collabTr = stateBox1.state.tr.insertText("hello");
+  stateBox1.state = stateBox1.state.apply(collabTr);
+  await collabClient1.send(stateBox1.state);
 
   // We could pass a channel into the client's receive function and await that instead
   // of using an arbitrary delay
   await sleep(500);
 
-  expect(presenceStateBox1.state.doc.content).toStrictEqual(presenceStateBox2.state.doc.content);
-});
+  const presenceTr = stateBox1.state.tr.setSelection(TextSelection.create(stateBox1.state.doc, 2));
+  stateBox1.state = stateBox1.state.apply(presenceTr);
+  await presenceClient1.send(stateBox1.state);
 
-async function createPresenceClient(
-  serverUrl: string,
-  userId: string,
-  doc: Doc,
-): Promise<{ client: PresenceClient; stateBox: StateBox }> {
-  const presenceListener = new PresenceLongPollListener(
-    new URL(`${serverUrl}/api/docs/${doc.id}/presence`),
-  );
+  await sleep(500);
+
+  const presenceState = presenceKey.getState(stateBox2.state);
+  let indicatorArr = presenceState?.indicators[presenceClient1.getClientId()];
+  if (!indicatorArr || !indicatorArr[0]) {
+    throw "Indicators not found";
+  }
+  const indicator = indicatorArr[0];
+  expect(indicator.anchor).toBe(2);
+  expect(indicator.head).toBe(2);
+});
 
-  const stateBox = {
-    state: EditorState.create({
-      doc: Node.fromJSON(schema, doc.content),
-      plugins: [collab({ version: doc.version })],
-    }),
-  };
-
-  const presenceConfig: PresenceClientConfig = {
-    userId,
-    sendIndicator: async (clientId, indicator) => {
-      await fetch(`${serverUrl}/api/docs/${doc.id}/presence/${clientId}`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(indicator),
-      });
-    },
-    receiveIndicators: (indicators) => {
-      // Todo: Something seems redundant about this line in presence and collab. Why
-      //       do we have to call apply on state and pass it to the receive transaction function?
-      stateBox.state = stateBox.state.apply(receivePresenceTransaction(stateBox.state, indicators));
-    },
-    listener: presenceListener,
-  };
-
-  const client = new PresenceClient(presenceConfig);
-  client.listen();
-
-  return { client, stateBox };
-}

packages/demo/src/test/utils.ts

@@ -11,10 +11,16 @@ import {
   receiveCommitTransaction,
   collab,
 } from "@pitter-patter/collab-client";
+import {
+  PresenceClient,
+  PresenceClientConfig,
+  LongPollListener as PresenceLongPollListener,
+  receivePresenceTransaction,
+} from "@pitter-patter/presence-client";
+import { presence } from "@pitter-patter/presence-client/react";
 
 import { DemoDeploymentConfig } from "../server-base";
 
-
 // function randomRedisDatabaseIndex(): number {
 //   return Math.round(Math.random() * 2147483647);
 // }
@@ -50,12 +56,11 @@ export async function createCollabClient(
   serverUrl: string,
   docId: string,
   doc: Doc,
-  tag: string,
 ): Promise<{ client: CollabClient; stateBox: StateBox }> {
   const stateBox = {
     state: EditorState.create({
       doc: Node.fromJSON(schema, doc.content),
-      plugins: [collab({ version: doc.version })],
+      plugins: [collab({ version: doc.version }), presence()],
     }),
   };
 
@@ -69,7 +74,6 @@ export async function createCollabClient(
     },
     listener: new CollabLongPollListener(new URL(`${serverUrl}/api/docs/${docId}/commits`)),
     receiveCommits: (commits) => {
-      console.log(`${tag}: RECEIVING COMMITS`);
       for (const commit of commits) {
         stateBox.state = stateBox.state.apply(receiveCommitTransaction(stateBox.state, commit));
       }
@@ -80,3 +84,34 @@ export async function createCollabClient(
 
   return { client, stateBox };
 }
+
+export async function createPresenceClient(
+  serverUrl: string,
+  userId: string,
+  doc: Doc,
+  stateBox: StateBox,
+): Promise<{ client: PresenceClient; stateBox: StateBox }> {
+  const presenceListener = new PresenceLongPollListener(
+    new URL(`${serverUrl}/api/docs/${doc.id}/presence`),
+  );
+
+  const presenceConfig: PresenceClientConfig = {
+    userId,
+    sendIndicator: async (clientId, indicator) => {
+      await fetch(`${serverUrl}/api/docs/${doc.id}/presence/${clientId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(indicator),
+      });
+    },
+    receiveIndicators: (indicators) => {
+      stateBox.state = stateBox.state.apply(receivePresenceTransaction(stateBox.state, indicators));
+    },
+    listener: presenceListener,
+  };
+
+  const client = new PresenceClient(presenceConfig);
+  client.listen();
+
+  return { client, stateBox };
+}

packages/presence-client/src/index.ts

@@ -93,6 +93,14 @@ export class PresenceClient {
       this.receiveIndicators(indicators);
     }
   }
+
+  getUserId(): string {
+    return this.userId;
+  }
+
+  getClientId(): string {
+    return this.clientId;
+  }
 }
 
 export interface LongPollListenerOptions {