Add first DOM test

prosemirror-client/happydom.ts

@@ -1,3 +1,5 @@
 import { GlobalRegistrator } from "@happy-dom/global-registrator";
 
-GlobalRegistrator.register();
+const bunFetch = fetch;
+GlobalRegistrator.register();
+window.fetch = bunFetch;

prosemirror-client/package.json

@@ -14,6 +14,7 @@
     "@types/bun": "latest",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "shadow-dom-testing-library": "^1.11.2",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vitest": "^1.6.0"

prosemirror-client/src/cqlInput/CqlInput.spec.ts

@@ -1,17 +1,24 @@
-import { test, mock } from "bun:test";
+import { test, mock, expect } from "bun:test";
 import { createCqlInput } from "./CqlInput";
-import { CqlService } from "../CqlService";
+import { TestCqlService } from "../services/TestCqlService";
+import example from "./fixtures/responses/example.json";
+import { findByTestId } from "@testing-library/dom";
 
 mock.module("../CqlService", () => ({}));
 
-const testCqlService = new CqlService("http://localhost");
+const testCqlService = new TestCqlService("http://localhost", {
+  example, // Fix types
+});
 const cqlInput = createCqlInput(testCqlService);
 customElements.define("cql-input", cqlInput);
 
 const mountComponent = () => {
-  document.body.innerHTML = `<cql-input></cql-input>`;
+  const container = document.createElement("div");
+  container.innerHTML = `<cql-input data-testid="cql-input"></cql-input>`;
+  return container;
 };
 
-test("renders a custom element", () => {
-  mountComponent();
+test("renders a custom element", async () => {
+  const container = mountComponent();
+  await findByTestId(container, "cql-input");
 });

prosemirror-client/src/cqlInput/CqlInput.ts

@@ -1,4 +1,4 @@
-import { CqlService } from "../CqlService";
+import { CqlServiceInterface } from "../services/CqlService";
 import { QueryChangeEventDetail } from "./dom";
 import { createEditor } from "./editor";
 

prosemirror-client/src/cqlInput/TypeaheadPopover.ts

@@ -1,5 +1,5 @@
 import { Mapping } from "prosemirror-transform";
-import { TypeaheadSuggestion } from "../CqlService";
+import { TypeaheadSuggestion } from "../services/CqlService";
 import { findNodeAt } from "./utils";
 import { EditorView } from "prosemirror-view";
 import { chip, schema } from "./schema";
@@ -80,14 +80,14 @@ export class TypeaheadPopover {
           this.updateItems(suggestions.TextSuggestion.suggestions);
         }
 
-        this.popoverEl.showPopover();
+        this.popoverEl.showPopover?.();
       } else {
         this.currentSuggestion = undefined;
-        this.popoverEl.hidePopover();
+        this.popoverEl.hidePopover?.();
       }
     } else {
       this.currentSuggestion = undefined;
-      this.popoverEl.hidePopover();
+      this.popoverEl.hidePopover?.();
       this.popoverEl.innerHTML = "";
     }
   };

prosemirror-client/src/cqlInput/editor.ts

@@ -1,5 +1,5 @@
 import { EditorView } from "prosemirror-view";
-import { CqlService } from "../CqlService";
+import { CqlServiceInterface } from "../services/CqlService";
 import { createCqlPlugin } from "./plugin";
 import { EditorState } from "prosemirror-state";
 import { doc, schema, searchText } from "./schema";
@@ -26,7 +26,7 @@ export const createEditor = ({
 }: {
   mountEl: HTMLElement;
   popoverEl: HTMLElement;
-  cqlService: CqlService;
+  cqlService: CqlServiceInterface;
   onChange: (detail: QueryChangeEventDetail) => void;
   debugEl?: HTMLElement;
 }) => {

prosemirror-client/src/cqlInput/fixtures/responses/example.json

@@ -0,0 +1,36 @@
+{
+  "tokens": [
+    {
+      "type": "Token",
+      "tokenType": "STRING",
+      "lexeme": "example",
+      "start": 0,
+      "end": 6,
+      "literal": "example"
+    },
+    {
+      "type": "Token",
+      "tokenType": "EOF",
+      "lexeme": "",
+      "start": 7,
+      "end": 7,
+      "literal": null
+    }
+  ],
+  "ast": {
+    "type": "QueryList",
+    "content": [
+      {
+        "type": "QueryBinary",
+        "left": {
+          "type": "QueryContent",
+          "searchExpr": "example"
+        },
+        "right": null
+      }
+    ]
+  },
+  "queryResult": "q=example",
+  "suggestions": [],
+  "error": null
+}

prosemirror-client/src/cqlInput/plugin.ts

@@ -1,5 +1,8 @@
 import { DecorationSet } from "prosemirror-view";
-import { CqlService, TypeaheadSuggestion } from "../CqlService";
+import {
+  CqlServiceInterface,
+  TypeaheadSuggestion,
+} from "../services/CqlService";
 import {
   AllSelection,
   Plugin,
@@ -44,7 +47,7 @@ export const createCqlPlugin = ({
   onChange,
   debugEl,
 }: {
-  cqlService: CqlService;
+  cqlService: CqlServiceInterface;
   popoverEl: HTMLElement;
   onChange: (detail: QueryChangeEventDetail) => void;
   debugEl?: HTMLElement;

prosemirror-client/src/cqlInput/utils.spec.ts

@@ -1,9 +1,9 @@
 import { describe, expect, test } from "bun:test";
-import _tokensWithOneKVPair from "./fixtures/tokensWithOneKVPair.json";
-import _tokensWithTwoKVPairs from "./fixtures/tokensWithTwoKVPairs.json";
-import _tokensWithParens from "./fixtures/tokensWithParens.json";
-import _tokensWithParensAndKVPair from "./fixtures/tokensWithParensAndKVPair.json";
-import _tokensWithTrailingWhitespace from "./fixtures/tokensWithTrailingWhitespace.json";
+import _tokensWithOneKVPair from "./fixtures/tokens/tokensWithOneKVPair.json";
+import _tokensWithTwoKVPairs from "./fixtures/tokens/tokensWithTwoKVPairs.json";
+import _tokensWithParens from "./fixtures/tokens/tokensWithParens.json";
+import _tokensWithParensAndKVPair from "./fixtures/tokens/tokensWithParensAndKVPair.json";
+import _tokensWithTrailingWhitespace from "./fixtures/tokens/tokensWithTrailingWhitespace.json";
 import {
   mapTokens,
   toProseMirrorTokens,

prosemirror-client/src/main.ts

@@ -1,7 +1,7 @@
 import { createCqlInput } from "./cqlInput/CqlInput";
 import applyDevTools from "prosemirror-dev-tools";
 import "./style.css";
-import { CqlService } from "./CqlService";
+import { CqlService } from "./services/CqlService";
 
 const debugEl = document.createElement("div");
 debugEl.className = "CqlSandbox__debug-container";

prosemirror-client/src/CqlService.ts → prosemirror-client/src/services/CqlService.ts

@@ -27,7 +27,15 @@ type TextSuggestion = { suggestions: Array<TextSuggestionOption> };
 type TextSuggestionOption = { label: string; value: string };
 type DateSuggestion = { validFrom?: string; validTo?: string };
 
-export class CqlService {
+export interface CqlServiceInterface {
+  setUrl(url: string): void;
+
+  fetchResult(query: string): Promise<CqlResult>;
+
+  cancel(): void;
+}
+
+export class CqlService implements CqlServiceInterface {
   private abortController: AbortController | undefined;
 
   constructor(private url: string) {}

prosemirror-client/src/services/TestCqlService.ts

@@ -0,0 +1,34 @@
+import { CqlResult, CqlServiceInterface } from "./CqlService";
+
+export class TestCqlService implements CqlServiceInterface {
+  private abortController: AbortController | undefined;
+
+  /**
+   * @param url
+   * @param resultFixtures A map from query strings to results
+   */
+  constructor(
+    private url: string,
+    private resultFixtures: Record<string, CqlResult>
+  ) {}
+
+  public setUrl(url: string) {
+    this.url = url;
+  }
+
+  public async fetchResult(query: string) {
+    const result = this.resultFixtures[query];
+
+    if (result) {
+      return Promise.resolve(result);
+    }
+
+    return Promise.reject(
+      new Error(`Fixture not found for query string ${query}`)
+    );
+  }
+
+  public cancel() {
+    this.abortController?.abort();
+  }
+}