Notes/packages/ckeditor5-math/tests/automath.ts

import Mathematics from '../src/math.js';
import AutoMath from '../src/automath.js';
import { ClassicEditor, Clipboard, Paragraph, Undo, Typing, _getModelData as getData, _setModelData as setData } from 'ckeditor5';
import { describe, beforeEach, it, afterEach, vi, expect } from "vitest";

describe( 'AutoMath - integration', () => {
	let editorElement: HTMLDivElement, editor: ClassicEditor;

	beforeEach( async () => {
		editorElement = document.createElement( 'div' );
		document.body.appendChild( editorElement );

		return ClassicEditor
			.create( editorElement, {
				plugins: [ Mathematics, AutoMath, Typing, Paragraph ],
				licenseKey: "GPL",
				math: {
					engine: ( equation, element, display ) => {
						if ( display ) {
							element.innerHTML = '\\[' + equation + '\\]';
						} else {
							element.innerHTML = '\\(' + equation + '\\)';
						}
					}
				}
			} )
			.then( newEditor => {
				editor = newEditor;
			} );
	} );

	afterEach( () => {
		editorElement.remove();

		return editor.destroy();
	} );

	it( 'should load Clipboard plugin', () => {
		expect( editor.plugins.get( Clipboard ) ).to.instanceOf( Clipboard );
	} );

	it( 'should load Undo plugin', () => {
		expect( editor.plugins.get( Undo ) ).to.instanceOf( Undo );
	} );

	it( 'has proper name', () => {
		expect( AutoMath.pluginName ).to.equal( 'AutoMath' );
	} );

	// TODO: It appears that these tests are failing as the text is not replaced with its corresponding equation. What I find strange here:
	// The automath plugin currently only seems to trigger a window and not allow inserting convertion a selection into an equation (either the implementation or test is broken).
	// To test on the original repository.
	describe.skip( 'use fake timers', () => {
		beforeEach( () => {
			vi.useFakeTimers();
		} );

		afterEach( () => {
			vi.useRealTimers();
		} );

		it( 'replaces pasted text with mathtex element after 100ms', () => {
			setData( editor.model, '<paragraph>[]</paragraph>' );
			pasteHtml( editor, '\\[x^2\\]' );

			expect( getData( editor.model ) ).to.equal(
				'<paragraph>\\[x^2\\][]</paragraph>'
			);

			vi.advanceTimersByTime( 100 );

			expect( getData( editor.model ) ).to.equal(
				'<paragraph>[<mathtex display="true" equation="x^2" type="script"></mathtex>]</paragraph>'
			);
		} );

		it( 'replaces pasted text with inline mathtex element after 100ms', () => {
			setData( editor.model, '<paragraph>[]</paragraph>' );
			pasteHtml( editor, '\\(x^2\\)' );

			expect( getData( editor.model ) ).to.equal(
				'<paragraph>\\(x^2\\)[]</paragraph>'
			);

			vi.advanceTimersByTime( 100 );

			expect( getData( editor.model ) ).to.equal(
				'<paragraph>[<mathtex display="false" equation="x^2" type="script"></mathtex>]</paragraph>'
			);
		} );

		it( 'can undo auto-mathing', () => {
			setData( editor.model, '<paragraph>[]</paragraph>' );
			pasteHtml( editor, '\\[x^2\\]' );

			expect( getData( editor.model ) ).to.equal(
				'<paragraph>\\[x^2\\][]</paragraph>'
			);

			vi.advanceTimersByTime( 100 );

			editor.commands.execute( 'undo' );

			expect( getData( editor.model ) ).to.equal(
				'<paragraph>\\[x^2\\][]</paragraph>'
			);
		} );

		it( 'works for not collapsed selection inside single element', () => {
			setData( editor.model, '<paragraph>[Foo]</paragraph>' );
			pasteHtml( editor, '\\[x^2\\]' );

			vi.advanceTimersByTime( 100 );

			expect( getData( editor.model ) ).to.equal(
				'<paragraph>[<mathtex display="true" equation="x^2" type="script"></mathtex>]</paragraph>'
			);
		} );

		it( 'works for not collapsed selection over a few elements', () => {
			setData( editor.model, '<paragraph>Fo[o</paragraph><paragraph>Ba]r</paragraph>' );
			pasteHtml( editor, '\\[x^2\\]' );

			vi.advanceTimersByTime( 100 );

			expect( getData( editor.model ) ).to.equal(
				'<paragraph>Fo[<mathtex display="true" equation="x^2" type="script"></mathtex>]r</paragraph>'
			);
		} );

		it( 'inserts mathtex in-place (collapsed selection)', () => {
			setData( editor.model, '<paragraph>Foo []Bar</paragraph>' );
			pasteHtml( editor, '\\[x^2\\]' );

			vi.advanceTimersByTime( 100 );

			expect( getData( editor.model ) ).to.equal(
				'<paragraph>Foo ' +
				'[<mathtex display="true" equation="x^2" type="script"></mathtex>]' +
				'Bar</paragraph>'
			);
		} );

		it( 'inserts math in-place (non-collapsed selection)', () => {
			setData( editor.model, '<paragraph>Foo [Bar] Baz</paragraph>' );
			pasteHtml( editor, '\\[x^2\\]' );

			vi.advanceTimersByTime( 100 );

			expect( getData( editor.model ) ).to.equal(
				'<paragraph>Foo ' +
				'[<mathtex display="true" equation="x^2" type="script"></mathtex>]' +
				' Baz</paragraph>'
			);
		} );

		it( 'does nothing if pasted two equation as text', () => {
			setData( editor.model, '<paragraph>[]</paragraph>' );
			pasteHtml( editor, '\\[x^2\\] \\[\\sqrt{x}2\\]' );

			vi.advanceTimersByTime( 100 );

			expect( getData( editor.model ) ).to.equal(
				'<paragraph>\\[x^2\\] \\[\\sqrt{x}2\\][]</paragraph>'
			);
		} );
	} );

	function pasteHtml( editor: ClassicEditor, html: string ) {
		editor.editing.view.document.fire( 'paste', {
			dataTransfer: createDataTransfer( { 'text/html': html } ),
			preventDefault() {},
			stopPropagation() {}
		} );
	}

	function createDataTransfer( data: Record<string, string> ) {
		return {
			getData( type: string ) {
				return data[ type ];
			}
		};
	}
} );