test(json-crdt-extensions): 💍 improve Range tests

Author: streamich

src/json-crdt-extensions/peritext/Peritext.ts

@@ -28,6 +28,10 @@ export class Peritext implements Printable {
     this.editor = new Editor(this);
   }
 
+  public strApi() {
+    return this.model.api.wrap(this.str);
+  }
+
   // ------------------------------------------------------------------- Points
 
   /**
@@ -42,9 +46,10 @@ export class Peritext implements Printable {
   }
 
   /**
-   * Creates a point at a view position in the text.
+   * Creates a point at a view position in the text. The `pos` argument specifies
+   * the position of the character, not the gap between characters.
    *
-   * @param pos View position in the text.
+   * @param pos Position of the character in the text.
    * @param anchor Whether the point should attach before or after a character.
    * @returns The point.
    */
@@ -131,7 +136,7 @@ export class Peritext implements Printable {
    * @param text Text to insert.
    */
   public insAt(pos: number, text: string): void {
-    const str = this.model.api.wrap(this.str);
+    const str = this.strApi();
     str.ins(pos, text);
   }
 

src/json-crdt-extensions/peritext/slice/Cursor.ts

@@ -15,6 +15,8 @@ export class Cursor extends Range implements Slice {
    * the end which does not move when user changes selection. The other
    * end is free to move, the moving end of the cursor is "focus". By default
    * "anchor" is the start of the cursor.
+   * 
+   * @todo Create a custom enum for this, instead of using `Anchor`.
    */
   public base: Anchor = Anchor.Before;
 
@@ -35,10 +37,10 @@ export class Cursor extends Range implements Slice {
     return this.base === Anchor.Before ? this.end : this.start;
   }
 
-  public set(start: Point, end?: Point, anchor: Anchor = Anchor.Before): void {
+  public set(start: Point, end?: Point, base: Anchor = Anchor.Before): void {
     if (!end || end === start) end = start.clone();
     super.set(start, end);
-    this.base = anchor;
+    this.base = base;
   }
 
   public setAt(start: number, length: number = 0): void {
@@ -75,7 +77,7 @@ export class Cursor extends Range implements Slice {
     }
   }
 
-  /** @deprecated What is this method for? */
+  /** @todo Maybe move it to another interface? */
   public del(): boolean {
     return false;
   }

src/json-crdt-extensions/peritext/slice/Range.ts

@@ -59,12 +59,12 @@ export class Range implements Printable {
     const pos2 = end.pos();
     if (pos1 === pos2) {
       if (start.anchor === end.anchor) return true;
-      // TODO: inspect below cases, if they are needed
       if (start.anchor === Anchor.After) return true;
       else {
         const chunk = start.chunk();
         if (chunk && chunk.del) {
-          this.start = this.end.clone();
+          // TODO: Revisit where is the best place for this normalization.
+          // this.start = this.end.clone();
           return true;
         }
       }

src/json-crdt-extensions/peritext/slice/__tests__/Range.spec.ts

@@ -3,24 +3,159 @@ import {Peritext} from '../../Peritext';
 import {Anchor} from '../../constants';
 import {Editor} from '../../editor/Editor';
 
-const setup = (insert: (editor: Editor) => void = (editor) => editor.insert('Hello world!')) => {
+const setup = (insert: (peritext: Peritext) => void = (peritext) => peritext.strApi().ins(0, 'Hello world!')) => {
   const model = Model.withLogicalClock();
   model.api.root({
     text: '',
     slices: [],
   });
   const peritext = new Peritext(model, model.api.str(['text']).node, model.api.arr(['slices']).node);
-  const editor = peritext.editor;
-  insert(editor);
-  return {model, peritext, editor};
+  insert(peritext);
+  return {model, peritext};
 };
 
+const setupEvenDeleted = () => {
+  return setup((peritext) => {
+    peritext.strApi().ins(0, '0123456789');
+    peritext.strApi().del(0, 1);
+    peritext.strApi().del(1, 1);
+    peritext.strApi().del(2, 1);
+    peritext.strApi().del(3, 1);
+    peritext.strApi().del(4, 1);
+  });
+};
+
+describe('new', () => {
+  test('creates a range from two points', () => {
+    const {peritext} = setup();
+    const range = peritext.rangeAt(1, 2);
+    expect(range.text()).toBe('el');
+    expect(range.start.pos()).toBe(1);
+    expect(range.start.viewPos()).toBe(1);
+    expect(range.start.anchor).toBe(Anchor.Before);
+    expect(range.end.pos()).toBe(2);
+    expect(range.end.viewPos()).toBe(3);
+    expect(range.end.anchor).toBe(Anchor.After);
+  });
+});
+
+describe('.from()', () => {
+  test('creates a when two points are in reverse order', () => {
+    const {peritext} = setup();
+    const rangeTmp = peritext.rangeAt(1, 2);
+    const range = peritext.rangeFromPoints(rangeTmp.end, rangeTmp.start);
+    expect(range.text()).toBe('el');
+    expect(range.start.pos()).toBe(1);
+    expect(range.start.viewPos()).toBe(1);
+    expect(range.start.anchor).toBe(Anchor.Before);
+    expect(range.end.pos()).toBe(2);
+    expect(range.end.viewPos()).toBe(3);
+    expect(range.end.anchor).toBe(Anchor.After);
+  });
+});
+
+describe('.clone()', () => {
+  test('can clone a range', () => {
+    const {peritext} = setup();
+    const range1 = peritext.rangeAt(2, 3);
+    const range2 = range1.clone();
+    expect(range2).not.toBe(range1);
+    expect(range1.text()).toBe(range2.text());
+    expect(range2.start).not.toBe(range1.start);
+    expect(range2.end).not.toBe(range1.end);
+    expect(range2.start.refresh()).toBe(range1.start.refresh());
+    expect(range2.end.refresh()).toBe(range1.end.refresh());
+    expect(range2.start.compare(range1.start)).toBe(0);
+    expect(range2.end.compare(range1.end)).toBe(0);
+  });
+});
+
+describe('.isCollapsed()', () => {
+  describe('when range is collapsed', () => {
+    test('returns true at the beginning of string', () => {
+      const {peritext} = setup();
+      const point = peritext.pointAtStart();
+      const range = peritext.range(point, point);
+      const isCollapsed = range.isCollapsed();
+      expect(isCollapsed).toBe(true);
+    });
+
+    test('returns true at the end of string', () => {
+      const {peritext} = setup();
+      const point = peritext.pointAtEnd();
+      const range = peritext.range(point, point);
+      const isCollapsed = range.isCollapsed();
+      expect(isCollapsed).toBe(true);
+    });
+
+    test('returns true when before first character', () => {
+      const {peritext} = setup();
+      const point = peritext.pointAt(0, Anchor.Before);
+      const range = peritext.range(point, point);
+      const isCollapsed = range.isCollapsed();
+      expect(isCollapsed).toBe(true);
+    });
+
+    test('returns true when after last character', () => {
+      const {peritext} = setup();
+      const point = peritext.pointAt(peritext.str.length() - 1, Anchor.After);
+      const range = peritext.range(point, point);
+      const isCollapsed = range.isCollapsed();
+      expect(isCollapsed).toBe(true);
+    });
+
+    test('returns true when in the middle of plain/undeleted text', () => {
+      const {peritext} = setup();
+      const point1 = peritext.pointAt(2, Anchor.After);
+      const point2 = peritext.pointAt(3, Anchor.Before);
+      const range1 = peritext.range(point1, point1);
+      const range2 = peritext.range(point2, point2);
+      expect(range1.isCollapsed()).toBe(true);
+      expect(range2.isCollapsed()).toBe(true);
+    });
+
+    describe('when first character is deleted', () => {
+      test('returns true at the beginning of string', () => {
+        const {peritext} = setupEvenDeleted();
+        const point = peritext.pointAtStart();
+        const range = peritext.range(point, point);
+        const isCollapsed = range.isCollapsed();
+        expect(isCollapsed).toBe(true);
+      });
+
+      test('returns true when before first character', () => {
+        const {peritext} = setupEvenDeleted();
+        const point = peritext.pointAt(0, Anchor.Before);
+        const range = peritext.range(point, point);
+        const isCollapsed = range.isCollapsed();
+        expect(isCollapsed).toBe(true);
+      });
+
+      test('returns true when in the middle of deleted characters', () => {
+        const {peritext} = setupEvenDeleted();
+        const range = peritext.rangeAt(2, 1);
+        expect(range.isCollapsed()).toBe(false);
+        peritext.strApi().del(1, 3);
+        expect(range.isCollapsed()).toBe(true);
+      });
+
+      test('returns true when whole text was deleted', () => {
+        const {peritext} = setupEvenDeleted();
+        const range = peritext.rangeAt(1, 3);
+        expect(range.isCollapsed()).toBe(false);
+        peritext.strApi().del(0, 5);
+        expect(range.isCollapsed()).toBe(true);
+      });
+    });
+  });
+});
+
 describe('.contains()', () => {
   test('returns true if slice is contained', () => {
-    const {peritext, editor} = setup();
-    editor.setCursor(3, 2);
-    const slice = editor.insertOverwriteSlice('b');
-    editor.setCursor(0);
+    const {peritext} = setup();
+    peritext.editor.setCursor(3, 2);
+    const slice = peritext.editor.insertOverwriteSlice('b');
+    peritext.editor.setCursor(0);
     peritext.refresh();
     expect(peritext.rangeAt(2, 4).contains(slice)).toBe(true);
     expect(peritext.rangeAt(3, 4).contains(slice)).toBe(true);
@@ -29,10 +164,10 @@ describe('.contains()', () => {
   });
 
   test('returns false if slice is not contained', () => {
-    const {peritext, editor} = setup();
-    editor.setCursor(3, 2);
-    const slice = editor.insertOverwriteSlice('b');
-    editor.setCursor(0);
+    const {peritext} = setup();
+    peritext.editor.setCursor(3, 2);
+    const slice = peritext.editor.insertOverwriteSlice('b');
+    peritext.editor.setCursor(0);
     peritext.refresh();
     expect(peritext.rangeAt(3, 1).contains(slice)).toBe(false);
     expect(peritext.rangeAt(2, 1).contains(slice)).toBe(false);
@@ -45,24 +180,25 @@ describe('.contains()', () => {
 
 describe('.isCollapsed()', () => {
   test('returns true when endpoints point to the same location', () => {
-    const {editor} = setup();
-    editor.setCursor(3);
-    expect(editor.cursor.isCollapsed()).toBe(true);
+    const {peritext} = setup();
+    peritext.editor.setCursor(3);
+    expect(peritext.editor.cursor.isCollapsed()).toBe(true);
   });
 
   test('returns true when when there is no visible content between endpoints', () => {
-    const {peritext, editor} = setup();
+    const {peritext} = setup();
     const range = peritext.rangeAt(2, 1);
-    editor.setCursor(2, 1);
-    editor.delete();
+    peritext.editor.setCursor(2, 1);
+    peritext.editor.delete();
     expect(range.isCollapsed()).toBe(true);
   });
 });
 
 describe('.expand()', () => {
   const runExpandTests = (setup2: typeof setup) => {
     test('can expand anchors to include adjacent elements', () => {
-      const {editor} = setup2();
+      const {peritext} = setup2();
+      const editor = peritext.editor;
       editor.setCursor(1, 1);
       expect(editor.cursor.start.pos()).toBe(1);
       expect(editor.cursor.start.anchor).toBe(Anchor.Before);
@@ -77,15 +213,15 @@ describe('.expand()', () => {
     });
 
     test('can expand anchors to contain include adjacent tombstones', () => {
-      const {peritext, editor} = setup2();
+      const {peritext} = setup2();
       const tombstone1 = peritext.rangeAt(1, 1);
       tombstone1.expand();
       const tombstone2 = peritext.rangeAt(3, 1);
       tombstone2.expand();
-      editor.cursor.setRange(tombstone1);
-      editor.delete();
-      editor.cursor.setRange(tombstone2);
-      editor.delete();
+      peritext.editor.cursor.setRange(tombstone1);
+      peritext.editor.delete();
+      peritext.editor.cursor.setRange(tombstone2);
+      peritext.editor.delete();
       const range = peritext.rangeAt(1, 1);
       range.expand();
       expect(range.start.pos()).toBe(tombstone1.start.pos());
@@ -101,7 +237,8 @@ describe('.expand()', () => {
 
   describe('each car is own chunk', () => {
     runExpandTests(() =>
-      setup((editor) => {
+      setup((peritext) => {
+        const editor = peritext.editor;
         editor.insert('!');
         editor.setCursor(0);
         editor.insert('d');