@pie-lib/math-input-mathlive 1.0.7 → 1.0.8

package/src/__tests__/composites.test.jsx

@@ -0,0 +1,220 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import MathInput from '../math-input';
+import HorizontalKeypad from '../horizontal-keypad';
+import Input from '../mf/input';
+
+/**
+ * The pieces that sit between the keypad and the field: how a pressed key is
+ * routed into the field, and the legacy `{value,type}` shape math-toolbar
+ * consumes.
+ */
+describe('MathInput.keypadPress routing', () => {
+  const withInput = () => {
+    const mi = new MathInput({});
+    const calls = { write: [], keystroke: [] };
+
+    mi.input = {
+      write: (v) => calls.write.push(v),
+      keystroke: (v) => calls.keystroke.push(v),
+    };
+
+    return { mi, calls };
+  };
+
+  it('routes an insert action to write()', () => {
+    const { mi, calls } = withInput();
+
+    mi.keypadPress({ latex: '\\pi' });
+
+    expect(calls.write).toEqual(['\\pi']);
+    expect(calls.keystroke).toEqual([]);
+  });
+
+  it('expands an argument-taking command before writing', () => {
+    const { mi, calls } = withInput();
+
+    mi.keypadPress({ command: '\\frac' });
+
+    expect(calls.write).toEqual(['\\frac{#?}{#?}']);
+  });
+
+  it('routes a cursor keystroke to keystroke()', () => {
+    const { mi, calls } = withInput();
+
+    mi.keypadPress({ keystroke: 'Left' });
+
+    expect(calls.keystroke).toEqual(['moveToPreviousChar']);
+    expect(calls.write).toEqual([]);
+  });
+
+  it('ignores keys with no action', () => {
+    const { mi, calls } = withInput();
+
+    mi.keypadPress({});
+    mi.keypadPress({ keystroke: 'Nonsense' });
+
+    expect(calls.write).toEqual([]);
+    expect(calls.keystroke).toEqual([]);
+  });
+
+  it('is a no-op before the field ref exists', () => {
+    const mi = new MathInput({});
+
+    expect(() => mi.keypadPress({ latex: '\\pi' })).not.toThrow();
+  });
+
+  it('changeLatex only fires onChange when the value differs', () => {
+    const onChange = jest.fn();
+    const mi = new MathInput({ latex: 'x', onChange });
+
+    mi.changeLatex('x');
+    expect(onChange).not.toHaveBeenCalled();
+
+    mi.changeLatex('y');
+    expect(onChange).toHaveBeenCalledWith('y');
+  });
+
+  it('tracks focus state', () => {
+    const mi = new MathInput({});
+
+    mi.setState = (s) => Object.assign(mi.state, s);
+    mi.inputFocus();
+    expect(mi.state.focused).toBe(true);
+
+    mi.inputBlur();
+    expect(mi.state.focused).toBe(false);
+  });
+});
+
+describe('HorizontalKeypad legacy {value,type} model', () => {
+  const pressed = (key) => {
+    const onClick = jest.fn();
+    const hk = new HorizontalKeypad({ onClick });
+
+    hk.keypadPress(key);
+
+    return onClick.mock.calls[0][0];
+  };
+
+  it('maps a command to {value, type: command}', () => {
+    expect(pressed({ command: '\\frac' })).toEqual({ value: '\\frac', type: 'command' });
+  });
+
+  it('maps a write to {value}', () => {
+    expect(pressed({ write: 'x' })).toEqual({ value: 'x' });
+  });
+
+  it('maps a keystroke to {type: cursor}', () => {
+    expect(pressed({ keystroke: 'Left' })).toEqual({ type: 'cursor', value: 'Left' });
+  });
+
+  it('renders without throwing', () => {
+    expect(() => render(<HorizontalKeypad onClick={() => {}} />)).not.toThrow();
+  });
+});
+
+describe('Input: controlled-value sync and events', () => {
+  const withField = () => {
+    const input = new Input({});
+
+    input.mathField = {
+      value: '',
+      getValue: () => input.mathField.value,
+      insert(v) {
+        input.mathField.value += v;
+      },
+      executeCommand() {},
+      focus() {},
+      blur() {},
+      addEventListener() {},
+      removeEventListener() {},
+      remove() {},
+    };
+
+    return input;
+  };
+
+  it('emits stored-form latex on edit', () => {
+    const onChange = jest.fn();
+    const input = withField();
+
+    input.props = { onChange };
+    input.mathField.value = '\\longdiv{\\placeholder{}}';
+    input.onInputEdit();
+
+    // \placeholder is MathLive-internal and must not reach the model
+    expect(onChange).toHaveBeenCalledWith('\\longdiv{}');
+    expect(input.lastEmitted).toEqual('\\longdiv{}');
+  });
+
+  it('does not push a prop echo back into the field', () => {
+    const input = withField();
+
+    input.mathField.value = 'x';
+    input.lastEmitted = 'x';
+    input.props = { latex: 'x' };
+
+    input.componentDidUpdate({ latex: '' });
+
+    expect(input.mathField.value).toEqual('x');
+  });
+
+  it('pushes a genuinely new latex prop into the field', () => {
+    const input = withField();
+
+    input.mathField.value = 'x';
+    input.lastEmitted = 'x';
+    input.props = { latex: 'y' };
+
+    input.componentDidUpdate({ latex: 'x' });
+
+    expect(input.mathField.value).toEqual('y');
+  });
+
+  it('bridges stored latex on the way in', () => {
+    const input = withField();
+
+    input.props = { latex: '\\longdiv{5}' };
+    input.componentDidUpdate({ latex: '' });
+
+    // must become native \enclose so the content stays editable
+    expect(input.mathField.value).toEqual('\\enclose{longdiv}{5}');
+  });
+
+  it('toggles readOnly', () => {
+    const input = withField();
+
+    input.props = { readOnly: true };
+    input.componentDidUpdate({ readOnly: false });
+
+    expect(input.mathField.readOnly).toBe(true);
+  });
+
+  it('clear() empties the field', () => {
+    const input = withField();
+
+    input.mathField.value = 'abc';
+    expect(input.clear()).toEqual('');
+    expect(input.mathField.value).toEqual('');
+  });
+
+  it('suppresses Enter so it cannot insert a line break', () => {
+    const input = withField();
+    const preventDefault = jest.fn();
+
+    input.onKeyDown({ key: 'Enter', preventDefault });
+    expect(preventDefault).toHaveBeenCalled();
+
+    preventDefault.mockClear();
+    input.onKeyDown({ key: 'a', preventDefault });
+    expect(preventDefault).not.toHaveBeenCalled();
+  });
+
+  it('componentDidUpdate is safe before the field exists', () => {
+    const input = new Input({ latex: 'x' });
+
+    expect(() => input.componentDidUpdate({ latex: '' })).not.toThrow();
+  });
+});

package/src/__tests__/keypad-render.test.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import KeyPad, { LatexLabel } from '../keypad';
+
+/**
+ * Keypad behaviour that is new in this package: labels are static markup from
+ * convertLatexToMarkup (the MathQuill version created a live StaticMath per
+ * button), with a raw-latex fallback when the engine is unavailable.
+ */
+describe('LatexLabel', () => {
+  it('falls back to raw latex when MathLive is unavailable', () => {
+    // jsdom cannot load MathLive, so latexToMarkup returns '' - the button must
+    // still show something rather than render blank.
+    const { container } = render(<LatexLabel latex={'\\pi'} />);
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('re-renders when the latex prop changes', () => {
+    const { container, rerender } = render(<LatexLabel latex={'\\pi'} />);
+
+    rerender(<LatexLabel latex={'\\theta'} />);
+
+    expect(container.textContent).toContain('\\theta');
+  });
+
+  it('does not warn more than once about a missing engine', async () => {
+    LatexLabel.warned = false;
+
+    const a = new LatexLabel({ latex: '\\pi' });
+    const b = new LatexLabel({ latex: '\\theta' });
+
+    a.state = { markup: '' };
+    b.state = { markup: '' };
+    a.setState = () => {};
+    b.setState = () => {};
+
+    await a.componentDidMount();
+    await b.componentDidMount();
+
+    expect(LatexLabel.warned).toBe(true);
+  });
+});
+
+describe('KeyPad', () => {
+  const key = (over = {}) => ({ name: 'x', label: 'x', write: 'x', category: 'vars', ...over });
+
+  it('renders a button per key', () => {
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[key(), key({ name: 'y', label: 'y' })]]} />);
+
+    expect(container.querySelectorAll('button').length).toBe(2);
+  });
+
+  it('calls onPress with the whole key definition', () => {
+    const onPress = jest.fn();
+    const k = key();
+    const { container } = render(<KeyPad onPress={onPress} baseSet={[[k]]} />);
+
+    container.querySelector('button').click();
+
+    expect(onPress).toHaveBeenCalledWith(k);
+  });
+
+  it('renders a latex key through LatexLabel', () => {
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[{ name: 'pi', latex: '\\pi' }]]} />);
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('disables the decimal separators when noDecimal is set', () => {
+    const dot = key({ name: '.', label: '.', write: '.' });
+    const comma = key({ name: ',', label: ',', write: ',' });
+    const { container } = render(<KeyPad onPress={() => {}} noDecimal baseSet={[[dot, comma]]} />);
+
+    const disabled = Array.from(container.querySelectorAll('button')).filter((b) => b.disabled);
+
+    expect(disabled.length).toBe(2);
+  });
+
+  it('leaves the separators enabled otherwise', () => {
+    const dot = key({ name: '.', label: '.', write: '.' });
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[dot]]} />);
+
+    expect(container.querySelector('button').disabled).toBe(false);
+  });
+
+  it('renders a placeholder for empty grid slots', () => {
+    expect(() => render(<KeyPad onPress={() => {}} baseSet={[[null]]} />)).not.toThrow();
+  });
+
+  it('notifies setKeypadInteraction on pointer interaction', () => {
+    const setKeypadInteraction = jest.fn();
+    const { container } = render(
+      <KeyPad onPress={() => {}} setKeypadInteraction={setKeypadInteraction} baseSet={[[key()]]} />,
+    );
+
+    container.firstChild.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+
+    expect(setKeypadInteraction).toHaveBeenCalledWith(true);
+  });
+
+  it('uses the mode as a class so mode-specific styling applies', () => {
+    const { container } = render(<KeyPad onPress={() => {}} mode="language" baseSet={[[key()]]} />);
+
+    expect(container.firstChild.className).toContain('language');
+  });
+
+  it('drops the base set for the modes that supply their own keys', () => {
+    const { container } = render(
+      <KeyPad onPress={() => {}} mode="language" baseSet={[[key(), key()]]} additionalKeys={[[key()]]} />,
+    );
+
+    // base set ignored, only the additional key renders
+    expect(container.querySelectorAll('button').length).toBe(1);
+  });
+
+  it('unmounts without throwing', () => {
+    const { unmount } = render(<KeyPad onPress={() => {}} controlledKeypadMode baseSet={[[key()]]} />);
+
+    expect(() => unmount()).not.toThrow();
+  });
+});

package/src/__tests__/mount-race.test.jsx

@@ -0,0 +1,129 @@
+/**
+ * MathLive loads asynchronously, so `componentDidMount` resumes after an await
+ * before appending a <math-field>. Two orderings must both hold:
+ *
+ *  - StrictMode dev double-mount (mount -> unmount -> mount on the SAME
+ *    instance) must end up with exactly ONE field. A boolean "unmounted" flag
+ *    latches here and blocks the remount entirely - which is why this uses a
+ *    generation counter.
+ *  - A genuine unmount while the load is in flight must append nothing.
+ *
+ * MathLive cannot load under jsdom, so it is mocked with a minimal stub in
+ * order to actually count appended fields.
+ */
+jest.mock('../mathlive-instance', () => {
+  // Must be a real DOM node: the component uses replaceChildren(), which
+  // rejects anything that is not a Node. Returning an element from the
+  // constructor replaces `this`, so callers get a genuine <math-field>.
+  class FakeMathfieldElement {
+    constructor() {
+      // `global` rather than `document`: jest forbids out-of-scope variables in
+      // a mock factory, and `global` is on its allow-list.
+      const el = global.document.createElement('math-field');
+
+      el.value = '';
+      el.getValue = () => el.value;
+
+      return el;
+    }
+  }
+
+  return {
+    loadMathLive: () => Promise.resolve({ MathfieldElement: FakeMathfieldElement }),
+    getMacros: () => ({}),
+    // must mirror the real export, otherwise the component sets `undefined`
+    MATH_MODE_SPACE: '\\ ',
+    latexToMarkup: (l) => `<span>${l}</span>`,
+  };
+});
+
+// eslint-disable-next-line import/first
+import Input from '../mf/input';
+
+const holderFor = (cmp) => {
+  const el = document.createElement('span');
+
+  cmp.holderRef = { current: el };
+
+  return el;
+};
+
+const fieldCount = (el) => Array.from(el.childNodes).filter((n) => n.tagName === 'MATH-FIELD').length;
+
+describe('async mount race', () => {
+  it('StrictMode mount -> unmount -> mount yields exactly one field', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    const first = input.componentDidMount();
+
+    input.componentWillUnmount();
+
+    const second = input.componentDidMount();
+
+    await Promise.all([first, second]);
+
+    expect(fieldCount(el)).toBe(1);
+    expect(input.mathField).toBeDefined();
+  });
+
+  it('appends nothing when unmounted while the load is in flight', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    const pending = input.componentDidMount();
+
+    input.componentWillUnmount();
+
+    await pending;
+
+    expect(fieldCount(el)).toBe(0);
+    expect(input.mathField).toBeUndefined();
+  });
+
+  it('a normal single mount creates the field', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    await input.componentDidMount();
+
+    expect(fieldCount(el)).toBe(1);
+  });
+
+  it('repeated mounts never accumulate fields', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    await input.componentDidMount();
+    await input.componentDidMount();
+    await input.componentDidMount();
+
+    expect(fieldCount(el)).toBe(1);
+  });
+
+  // MathLive's mathModeSpace defaults to '', which makes the spacebar a no-op.
+  it('configures the spacebar so a space can be typed', async () => {
+    const input = new Input({});
+
+    holderFor(input);
+    await input.componentDidMount();
+
+    // a LaTeX control space - what MathQuill produced, and MathJax understands
+    expect(input.mathField.mathModeSpace).toEqual('\\ ');
+    expect(input.mathField.mathModeSpace).not.toEqual('');
+  });
+
+  it('reports itself through innerRef on mount and clears it on unmount', async () => {
+    const innerRef = jest.fn();
+    const input = new Input({ innerRef });
+
+    holderFor(input);
+    await input.componentDidMount();
+
+    expect(innerRef).toHaveBeenCalledWith(input);
+
+    input.componentWillUnmount();
+
+    expect(innerRef).toHaveBeenLastCalledWith(null);
+  });
+});