@pie-lib/math-input-mathlive 1.1.5-beta.1 → 1.1.5-beta.11

package/src/__tests__/drop-in-compat.test.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { styled } from '@mui/material/styles';
+
+import { mq } from '../index';
+
+/**
+ * Exercises the exact call patterns real consumers use against
+ * @pie-lib/math-input, to catch drop-in incompatibilities.
+ *
+ * Sources:
+ *  - packages/math-toolbar/src/editor-and-pad.jsx:16,185
+ *  - packages/math-toolbar/src/math-preview.jsx:8,156
+ *  - packages/editable-html/src/plugins/respArea/math-templated/index.jsx:92
+ *  - packages/editable-html-tip-tap/src/components/respArea/MathTemplated.jsx:111
+ */
+describe('drop-in compatibility with @pie-lib/math-input consumers', () => {
+  describe('mq.CommonMqStyles destructuring', () => {
+    it('math-preview.jsx: { commonMqFontStyles, longdivStyles, supsubStyles }', () => {
+      const { commonMqFontStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;
+
+      expect(commonMqFontStyles).toBeDefined();
+      expect(longdivStyles).toBeDefined();
+      expect(supsubStyles).toBeDefined();
+    });
+
+    it('editor-and-pad.jsx: also { commonMqKeyboardStyles }', () => {
+      const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;
+
+      expect(commonMqKeyboardStyles).toBeDefined();
+      // All four must be spreadable into an emotion style object.
+      expect(() => ({
+        ...commonMqFontStyles,
+        ...commonMqKeyboardStyles,
+        ...longdivStyles,
+        ...supsubStyles,
+      })).not.toThrow();
+    });
+
+    it('the destructured groups survive being spread into a styled component', () => {
+      const { commonMqFontStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;
+      const Styled = styled('div')({ ...commonMqFontStyles, ...longdivStyles, ...supsubStyles });
+
+      expect(() => render(<Styled />)).not.toThrow();
+    });
+  });
+
+  describe('mq.Input', () => {
+    it('editor-and-pad.jsx: styled(mq.Input) renders', () => {
+      const MathEditor = styled(mq.Input)(() => ({ width: '100%' }));
+
+      expect(() => render(<MathEditor latex="\\frac{1}{2}" onChange={() => {}} />)).not.toThrow();
+    });
+
+    it('accepts the className that styled() injects', () => {
+      const Styled = styled(mq.Input)({ padding: 4 });
+      const { container } = render(<Styled latex="x" onChange={() => {}} />);
+
+      expect(container.firstChild).toBeTruthy();
+      expect(container.firstChild.className).toBeTruthy();
+    });
+  });
+
+  describe('mq.Static', () => {
+    it('math-preview.jsx: <mq.Static latex onFocus onBlur />', () => {
+      expect(() => render(<mq.Static latex={'\\frac{1}{2}'} onFocus={() => {}} onBlur={() => {}} />)).not.toThrow();
+    });
+
+    it('math-templated respArea: <mq.Static latex={value} />', () => {
+      expect(() => render(<mq.Static latex={'x=1'} />)).not.toThrow();
+    });
+
+    it('renders answer-block latex (the templated-math case) without throwing', () => {
+      expect(() =>
+        render(<mq.Static latex={'x=\\MathQuillMathField[r1]{}'} onSubFieldChange={() => {}} />),
+      ).not.toThrow();
+    });
+
+    it('is styleable, as keypad labels were in math-input', () => {
+      const Styled = styled(mq.Static)({ pointerEvents: 'none' });
+
+      expect(() => render(<Styled latex={'\\pi'} />)).not.toThrow();
+    });
+  });
+
+  describe('surface parity', () => {
+    it('exposes exactly the names math-input exported', () => {
+      // eslint-disable-next-line global-require
+      const pkg = require('../index');
+
+      [
+        'keysForGrade',
+        'addBrackets',
+        'removeBrackets',
+        'keys',
+        'HorizontalKeypad',
+        'mq',
+        'updateSpans',
+        'registerEmbed',
+        'applyStaticMath',
+      ].forEach((name) => {
+        expect(pkg[name]).toBeDefined();
+      });
+    });
+
+    it('mq exposes Input, Static and CommonMqStyles', () => {
+      ['Input', 'Static', 'CommonMqStyles'].forEach((name) => {
+        expect(mq[name]).toBeDefined();
+      });
+    });
+  });
+});

package/src/__tests__/index.test.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import {
+  keys,
+  keysForGrade,
+  addBrackets,
+  removeBrackets,
+  registerEmbed,
+  applyStaticMath,
+  updateSpans,
+  mf,
+  mq,
+  MathInput,
+  HorizontalKeypad,
+  KeyPad,
+} from '../index';
+
+describe('math-input-mathlive public API', () => {
+  it('mirrors the @pie-lib/math-input export surface', () => {
+    expect(typeof keysForGrade).toBe('function');
+    expect(typeof addBrackets).toBe('function');
+    expect(typeof removeBrackets).toBe('function');
+    expect(typeof registerEmbed).toBe('function');
+    expect(typeof applyStaticMath).toBe('function');
+    expect(typeof updateSpans).toBe('function');
+    expect(keys).toBeDefined();
+    expect(keys.baseSet).toBeDefined();
+  });
+
+  it('exports the field wrappers under both mf and mq', () => {
+    expect(mf.Input).toBeDefined();
+    expect(mf.Static).toBeDefined();
+    // `mq` alias lets a consumer swap packages by changing only the import.
+    expect(mq).toBe(mf);
+  });
+
+  it('updateSpans is a safe no-op', () => {
+    expect(() => updateSpans()).not.toThrow();
+  });
+
+  it('CommonMqStyles keeps the shape consumers destructure', () => {
+    // math-toolbar does:
+    //   const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles }
+    //     = mq.CommonMqStyles;
+    const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles } = mf.CommonMqStyles;
+
+    [commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles].forEach((s) => {
+      expect(s).toBeDefined();
+      expect(typeof s).toBe('object');
+    });
+  });
+
+  it('bracket helpers round-trip', () => {
+    expect(addBrackets('x')).toEqual('\\(x\\)');
+    expect(removeBrackets('\\(x\\)')).toEqual('x');
+    expect(removeBrackets(addBrackets('\\frac{1}{2}'))).toEqual('\\frac{1}{2}');
+  });
+
+  it('keysForGrade returns a 5-row keyset', () => {
+    const set = keysForGrade('geometry');
+
+    expect(Array.isArray(set)).toBe(true);
+    expect(set.length).toBe(5);
+  });
+});
+
+describe('rendering', () => {
+  // MathLive is a browser-only custom element; loadMathLive() resolves async and
+  // is a no-op-ish under jsdom. These assert the components mount without
+  // throwing, which is what regressed most often in the MathQuill version.
+  it('KeyPad renders without a live MathLive instance', () => {
+    const { container } = render(<KeyPad onPress={() => {}} />);
+
+    expect(container.querySelectorAll('button').length).toBeGreaterThan(0);
+  });
+
+  it('KeyPad falls back to raw latex for labels before MathLive loads', () => {
+    const { container } = render(
+      <KeyPad onPress={() => {}} baseSet={[[{ name: 'pi', latex: '\\pi', category: 'constants' }]]} />,
+    );
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('KeyPad fires onPress with the key definition', () => {
+    const onPress = jest.fn();
+    const key = { name: 'x', label: 'x', write: 'x', category: 'vars' };
+    const { container } = render(<KeyPad onPress={onPress} baseSet={[[key]]} />);
+
+    container.querySelector('button').click();
+
+    expect(onPress).toHaveBeenCalledWith(key);
+  });
+
+  it('MathInput mounts', () => {
+    expect(() => render(<MathInput latex="\\frac{1}{2}" onChange={() => {}} />)).not.toThrow();
+  });
+
+  it('HorizontalKeypad mounts and reports the legacy {value,type} model', () => {
+    const onClick = jest.fn();
+
+    expect(() => render(<HorizontalKeypad onClick={onClick} />)).not.toThrow();
+  });
+
+  it('Static renders display-mode latex without a mathfield', () => {
+    expect(() => render(<mf.Static latex="\\frac{1}{2}" />)).not.toThrow();
+  });
+});

package/src/__tests__/input-imperative.test.jsx

@@ -0,0 +1,144 @@
+import { KEYSTROKES, keyToAction } from '../latex-bridge';
+import Input from '../mf/input';
+
+/**
+ * The imperative surface that @pie-lib/math-toolbar drives
+ * (editor-and-pad.jsx: clear/command/keystroke/write/latex).
+ *
+ * These call the methods against a stub mathfield, because a real
+ * <math-field> needs a browser. What matters here is the *translation*:
+ * MathQuill-era arguments must become valid MathLive operations.
+ */
+const stubField = () => {
+  const calls = { insert: [], executeCommand: [], focus: 0 };
+
+  return {
+    calls,
+    value: '',
+    getValue: () => '',
+    insert(v) {
+      calls.insert.push(v);
+    },
+    executeCommand(v) {
+      calls.executeCommand.push(v);
+    },
+    focus() {
+      calls.focus++;
+    },
+    blur() {},
+  };
+};
+
+const withField = () => {
+  const input = new Input({});
+  const f = stubField();
+
+  input.mathField = f;
+
+  return { input, f };
+};
+
+describe('Input imperative API (drives math-toolbar)', () => {
+  describe('keystroke', () => {
+    it('maps MathQuill keystroke names to MathLive selectors', () => {
+      const { input, f } = withField();
+
+      input.keystroke('Left');
+      input.keystroke('Right');
+      input.keystroke('Backspace');
+
+      expect(f.calls.executeCommand).toEqual(['moveToPreviousChar', 'moveToNextChar', 'deleteBackward']);
+    });
+
+    it('passes an unknown value through as a selector', () => {
+      const { input, f } = withField();
+
+      input.keystroke('deleteForward');
+
+      expect(f.calls.executeCommand).toEqual(['deleteForward']);
+    });
+
+    it('does not throw when the engine rejects the selector', () => {
+      const { input } = withField();
+
+      input.mathField.executeCommand = () => {
+        throw new Error('unknown command');
+      };
+
+      expect(() => input.keystroke('Nonsense')).not.toThrow();
+    });
+
+    it('covers every keystroke the keypad emits', () => {
+      // navigation.js / edit.js only produce these three
+      ['Left', 'Right', 'Backspace'].forEach((k) => expect(KEYSTROKES[k]).toBeDefined());
+    });
+  });
+
+  describe('command', () => {
+    it('expands argument-taking commands into placeholders', () => {
+      const { input, f } = withField();
+
+      input.command('\\frac');
+
+      // a bare \frac would give no editable slots
+      expect(f.calls.insert).toEqual(['\\frac{#?}{#?}']);
+    });
+
+    it('handles array commands', () => {
+      const { input, f } = withField();
+
+      input.command(['\\log', '_']);
+
+      expect(f.calls.insert).toEqual(['\\log_{#?}']);
+    });
+
+    it('passes argument-less commands through', () => {
+      const { input, f } = withField();
+
+      input.command('\\pi');
+
+      expect(f.calls.insert).toEqual(['\\pi']);
+    });
+
+    it('agrees with keyToAction', () => {
+      expect(keyToAction({ command: '\\sqrt' }).value).toEqual('\\sqrt{#?}');
+    });
+  });
+
+  describe('safety before MathLive loads', () => {
+    it('every method is a no-op rather than a crash', () => {
+      const input = new Input({});
+
+      // mathField is undefined until loadMathLive() resolves
+      expect(input.latex()).toEqual('');
+      expect(input.clear()).toEqual('');
+      expect(input.command('\\frac')).toEqual('');
+      expect(input.keystroke('Left')).toEqual('');
+      expect(input.write('x')).toEqual('');
+      expect(() => input.focus()).not.toThrow();
+      expect(() => input.blur()).not.toThrow();
+      expect(() => input.setLatex('x')).not.toThrow();
+      expect(input.element).toBeUndefined();
+    });
+  });
+
+  describe('mqCompat facade', () => {
+    // math-toolbar used to call this.input.mathField.latex(); external
+    // consumers may still do the same.
+    it('exposes latex() as a getter', () => {
+      const { input } = withField();
+
+      input.mathField.getValue = () => '\\frac{1}{2}';
+
+      expect(input.mqCompat.latex()).toEqual('\\frac{1}{2}');
+    });
+
+    it('exposes latex(v) as a setter and el()', () => {
+      const { input, f } = withField();
+
+      input.mqCompat.latex('x+1');
+      expect(f.value).toEqual('x+1');
+      expect(input.mqCompat.el()).toBe(f);
+    });
+  });
+});

package/src/__tests__/input-selection.test.jsx

@@ -0,0 +1,64 @@
+/**
+ * The editable Input keeps its selection snapped to whole atoms (see
+ * selection.js). This checks the wiring: attached on mount, removed on unmount.
+ */
+jest.mock('../mathlive-instance', () => {
+  class FakeMathfieldElement {
+    constructor() {
+      const el = global.document.createElement('math-field');
+
+      el.value = '';
+      el.getValue = () => el.value;
+
+      return el;
+    }
+  }
+
+  return {
+    loadMathLive: () => Promise.resolve({ MathfieldElement: FakeMathfieldElement }),
+    getMacros: () => ({}),
+    MATH_MODE_SPACE: '\\ ',
+    applyShadowStyles: () => {},
+    trackPlaceholderCaret: () => () => {},
+    latexToMarkup: (l) => `<span>${l}</span>`,
+  };
+});
+
+const mockUntrack = jest.fn();
+
+jest.mock('../selection', () => ({
+  trackWholeAtomSelection: jest.fn(() => mockUntrack),
+}));
+
+// eslint-disable-next-line import/first
+import Input from '../mf/input';
+// eslint-disable-next-line import/first
+import { trackWholeAtomSelection } from '../selection';
+
+describe('Input: whole-atom selection', () => {
+  beforeEach(() => {
+    trackWholeAtomSelection.mockClear();
+    mockUntrack.mockClear();
+  });
+
+  it('attaches the tracker to the mathfield on mount', async () => {
+    const input = new Input({});
+
+    input.holderRef = { current: document.createElement('span') };
+    await input.componentDidMount();
+
+    expect(trackWholeAtomSelection).toHaveBeenCalledTimes(1);
+    expect(trackWholeAtomSelection).toHaveBeenCalledWith(input.mathField);
+  });
+
+  it('removes it on unmount', async () => {
+    const input = new Input({});
+
+    input.holderRef = { current: document.createElement('span') };
+    await input.componentDidMount();
+    input.componentWillUnmount();
+
+    expect(mockUntrack).toHaveBeenCalledTimes(1);
+    expect(input.untrackSelection).toBeUndefined();
+  });
+});