Add test for arrow keybindings

ProseMirror · Sep 12, 2023 · 6438817 · 6438817
1 parent 0cc29c6
commit 6438817
Show file tree

Hide file tree

Showing 5 changed files with 399 additions and 322 deletions.
diff --git a/package.json b/package.json
@@ -42,23 +42,24 @@
     "builddocs": "^1.0.7",
     "eslint": "^8.42.0",
     "eslint-plugin-jest": "^26.9.0",
+    "happy-dom": "^11.0.2",
     "ist": "^1.1.7",
     "prettier": "^2.8.8",
     "prosemirror-commands": "^1.5.2",
     "prosemirror-example-setup": "^1.2.2",
     "prosemirror-menu": "^1.2.2",
     "prosemirror-schema-basic": "^1.2.2",
     "prosemirror-test-builder": "^1.1.1",
-    "tsup": "^6.7.0",
+    "tsup": "^7.2.0",
     "typescript": "^4.9.5",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.0"
+    "vite": "^4.4.9",
+    "vitest": "^0.34.4"
   },
   "scripts": {
     "dev": "vite demo",
     "build_demo": "vite build demo",
     "typecheck": "tsc --noEmit",
-    "test": "vitest",
+    "test": "vitest --environment happy-dom",
     "build": "tsup",
     "watch": "tsup --watch",
     "build_readme": "builddocs --name tables --format markdown --main src/README.md src/*.js > README.md",

diff --git a/src/input.ts b/src/input.ts
@@ -59,7 +59,10 @@ function maybeSetSelection(
   return true;
 }
 
-function arrow(axis: Axis, dir: Direction): Command {
+/**
+ * @internal
+ */
+export function arrow(axis: Axis, dir: Direction): Command {
   return (state, dispatch, view) => {
     if (!view) return false;
     const sel = state.selection;

diff --git a/test/build.ts b/test/build.ts
@@ -43,6 +43,7 @@ export function c(colspan: number, rowspan: number) {
 export const c11 = c(1, 1);
 export const cEmpty = td(p());
 export const cCursor = td(p('x<cursor>'));
+export const cCursorBefore = td(p('<cursor>x'));
 export const cAnchor = td(p('x<anchor>'));
 export const cHead = td(p('x<head>'));
 

diff --git a/test/input.test.ts b/test/input.test.ts
@@ -0,0 +1,64 @@
+import { Command, EditorState } from 'prosemirror-state';
+import { describe, expect, it } from 'vitest';
+
+import { EditorView } from 'prosemirror-view';
+import { arrow } from '../src/input';
+import {
+  TaggedNode,
+  c11,
+  cCursor,
+  cCursorBefore,
+  selectionFor,
+  table,
+  tr,
+} from './build';
+
+function test(
+  doc: TaggedNode,
+  command: Command,
+  result: TaggedNode | null | undefined,
+) {
+  let state = EditorState.create({ doc, selection: selectionFor(doc) });
+  let view = new EditorView(document.createElement('div'), { state });
+  let ran = command(state, (tr) => (state = state.apply(tr)), view);
+  if (result == null) {
+    expect(ran).toBe(false);
+  } else {
+    let expected = {
+      doc: result.toJSON(),
+      selection: selectionFor(result).toJSON(),
+    };
+    let actual = state.toJSON();
+    expect(actual).toEqual(expected);
+  }
+}
+
+describe('arrow', () => {
+  it('can move cursor to the right cell', () =>
+    test(
+      table(tr(c11, c11, c11), tr(c11, cCursor, c11), tr(c11, c11, c11)),
+      arrow('horiz', 1),
+      table(tr(c11, c11, c11), tr(c11, c11, cCursorBefore), tr(c11, c11, c11)),
+    ));
+
+  it('can move cursor to the left cell', () =>
+    test(
+      table(tr(c11, c11, c11), tr(c11, c11, cCursorBefore), tr(c11, c11, c11)),
+      arrow('horiz', -1),
+      table(tr(c11, c11, c11), tr(c11, cCursor, c11), tr(c11, c11, c11)),
+    ));
+
+  it('can move cursor to the bottom cell', () =>
+    test(
+      table(tr(c11, c11, c11), tr(c11, cCursorBefore, c11), tr(c11, c11, c11)),
+      arrow('vert', 1),
+      table(tr(c11, c11, c11), tr(c11, c11, c11), tr(c11, cCursorBefore, c11)),
+    ));
+
+  it('can move cursor to the top cell', () =>
+    test(
+      table(tr(c11, c11, c11), tr(c11, c11, c11), tr(c11, cCursorBefore, c11)),
+      arrow('vert', -1),
+      table(tr(c11, c11, c11), tr(c11, cCursorBefore, c11), tr(c11, c11, c11)),
+    ));
+});