test(): Add cursor animation testing and migrate some easy one to jest

.codesandbox/templates/vanilla/src/index.ts

@@ -1,6 +1,6 @@
 import * as fabric from 'fabric';
 import './styles.css';
-import { testCase } from './testcases/nestedSelections';
+import { testCase } from './testcases/simpleTextbox';
 
 const el = document.getElementById('canvas');
 const canvas = (window.canvas = new fabric.Canvas(el));

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- test(): Add cursor animation testing and migrate some easy one to jest [#9829](https://github.com/fabricjs/fabric.js/pull/9829)
 - fix(): Replace 'hasOwn' with 'in' operator in typeAssertions check [#9812](https://github.com/fabricjs/fabric.js/pull/9812)
 
 ## [6.0.0-rc1]

src/shapes/IText/ITextBehavior.test.ts

@@ -1,6 +1,8 @@
 import { roundSnapshotOptions } from '../../../jest.extend';
 import { IText } from './IText';
 
+import { ValueAnimation } from '../../util/animation/ValueAnimation';
+
 export function matchTextStateSnapshot(text: IText) {
   const {
     styles,
@@ -90,3 +92,84 @@ describe('text imperative changes', () => {
     expect(iText.missingNewlineOffset(0)).toBe(1);
   });
 });
+
+describe('IText cursor animation snapshot', () => {
+  let currentAnimation: string[] = [];
+  const origCalculate = ValueAnimation.prototype.calculate;
+  beforeAll(() => {
+    ValueAnimation.prototype.calculate = function (timeElapsed: number) {
+      const value = origCalculate.call(this, timeElapsed);
+      currentAnimation.push(value.value.toFixed(3));
+      return value;
+    };
+    jest.useFakeTimers();
+  });
+  beforeEach(() => {
+    jest.runAllTimers();
+    currentAnimation = [];
+  });
+  afterAll(() => {
+    ValueAnimation.prototype.calculate = origCalculate;
+    jest.useRealTimers();
+  });
+  test('initDelayedCursor false - with delay', () => {
+    const iText = new IText('', { canvas: {} });
+    iText.initDelayedCursor();
+    jest.advanceTimersByTime(2000);
+    expect(currentAnimation).toMatchSnapshot();
+    iText.abortCursorAnimation();
+  });
+  test('initDelayedCursor true - with NO delay', () => {
+    const iText = new IText('', { canvas: {} });
+    iText.initDelayedCursor(true);
+    jest.advanceTimersByTime(2000);
+    expect(currentAnimation).toMatchSnapshot();
+    iText.abortCursorAnimation();
+  });
+  test('selectionStart/selection end will abort animation', () => {
+    const iText = new IText('asd', { canvas: {} });
+    iText.initDelayedCursor(true);
+    jest.advanceTimersByTime(160);
+    iText.selectionStart = 0;
+    iText.selectionEnd = 3;
+    jest.advanceTimersByTime(2000);
+    expect(currentAnimation).toMatchSnapshot();
+    iText.abortCursorAnimation();
+  });
+  test('exiting from a canvas will abort animation', () => {
+    const iText = new IText('asd', { canvas: {} });
+    iText.initDelayedCursor(true);
+    jest.advanceTimersByTime(160);
+    iText.canvas = undefined;
+    jest.advanceTimersByTime(2000);
+    expect(currentAnimation).toMatchSnapshot();
+    iText.abortCursorAnimation();
+  });
+});
+
+describe('IText _tick', () => {
+  const _tickMock = jest.fn();
+  beforeEach(() => {
+    _tickMock.mockClear();
+  });
+  test('enter Editing will call _tick', () => {
+    const iText = new IText('hello\nhello');
+    iText._tick = _tickMock;
+    iText.enterEditing();
+    expect(iText._tick).toHaveBeenCalledWith();
+  });
+  test('mouse up will fire an animation restart with 0 delay if is a click', () => {
+    const iText = new IText('hello\nhello');
+    iText._tick = _tickMock;
+    iText.enterEditing();
+    expect(iText._tick).toHaveBeenCalledWith();
+    _tickMock.mockClear();
+    iText.__lastSelected = true;
+    iText.mouseUpHandler({
+      e: {
+        button: 0,
+      },
+    });
+    expect(iText._tick).toHaveBeenCalledWith(0);
+  });
+});

src/shapes/IText/ITextBehavior.ts

@@ -134,13 +134,10 @@ export abstract class ITextBehavior<
       duration,
       delay,
       onComplete,
-      abort: () => {
-        return (
-          !this.canvas ||
-          // we do not want to animate a selection, only cursor
-          this.selectionStart !== this.selectionEnd
-        );
-      },
+      abort: () =>
+        !this.canvas ||
+        // we do not want to animate a selection, only cursor
+        this.selectionStart !== this.selectionEnd,
       onChange: (value) => {
         this._currentCursorOpacity = value;
         this.renderCursorOrSelection();
@@ -197,6 +194,10 @@ export abstract class ITextBehavior<
     }
   }
 
+  /**
+   * Restart tue cursor animation if either is in complete state ( between animations )
+   * or if it never started before
+   */
   restartCursorIfNeeded() {
     if (
       [this._currentTickState, this._currentTickCompleteState].some(
@@ -336,10 +337,11 @@ export abstract class ITextBehavior<
   }
 
   /**
+   * TODO fix: selectionStart set as 0 will be ignored?
    * Selects a word based on the index
    * @param {Number} selectionStart Index of a character
    */
-  selectWord(selectionStart: number) {
+  selectWord(selectionStart?: number) {
     selectionStart = selectionStart || this.selectionStart;
     // search backwards
     const newSelectionStart = this.searchWordBoundary(selectionStart, -1),
@@ -357,10 +359,11 @@ export abstract class ITextBehavior<
   }
 
   /**
+   * TODO fix: selectionStart set as 0 will be ignored?
    * Selects a line based on the index
    * @param {Number} selectionStart Index of a character
    */
-  selectLine(selectionStart: number) {
+  selectLine(selectionStart?: number) {
     selectionStart = selectionStart || this.selectionStart;
     const newSelectionStart = this.findLineBoundaryLeft(selectionStart),
       newSelectionEnd = this.findLineBoundaryRight(selectionStart);