@pie-lib/math-toolbar 3.1.0-beta.8 → 4.0.0-next.41

package/src/__tests__/editor-and-pad-mathlive.test.js

@@ -1,178 +0,0 @@
-import { EditorAndPad } from '../editor-and-pad';
-
-/**
- * Covers the call sites that changed when this package moved from
- * @pie-lib/math-input (MathQuill) to @pie-lib/math-input-mathlive.
- *
- * All three were MathQuill-shaped and silently changed meaning:
- *  - shouldComponentUpdate read `this.input.mathField.latex()`, which throws now
- *    (and the field loads asynchronously, so `this.input` can be null)
- *  - the mixed-number workaround poked `__controller.cursor`, a MathQuill
- *    internal with no MathLive equivalent
- *  - onClick routes keypad presses through the imperative field API
- */
-describe('EditorAndPad after the MathLive migration', () => {
-  const props = (over = {}) => ({ classes: {}, classNames: {}, onChange: jest.fn(), ...over });
-
-  describe('shouldComponentUpdate', () => {
-    it('treats a missing input ref as different, so the first render is not skipped', () => {
-      const c = new EditorAndPad(props({ latex: 'x' }));
-
-      c.input = null;
-
-      expect(c.shouldComponentUpdate({ latex: 'x' }, {})).toBe(true);
-    });
-
-    it('does not throw when the math engine has not loaded yet', () => {
-      const c = new EditorAndPad(props({ latex: 'x' }));
-
-      // latex() returns '' until MathLive is ready
-      c.input = { latex: () => '' };
-
-      expect(() => c.shouldComponentUpdate({ latex: 'x' }, {})).not.toThrow();
-      expect(c.shouldComponentUpdate({ latex: 'x' }, {})).toBe(true);
-    });
-
-    it('skips the update when the field already holds the incoming latex', () => {
-      const c = new EditorAndPad(props({ latex: 'x', keypadMode: 'a', noDecimal: false }));
-
-      c.input = { latex: () => 'x' };
-      c.state = { equationEditor: 'geometry' };
-
-      expect(c.shouldComponentUpdate({ latex: 'x', keypadMode: 'a', noDecimal: false }, c.state)).toBe(false);
-    });
-
-    it('re-renders when the field differs from the incoming latex', () => {
-      const c = new EditorAndPad(props({ latex: 'y' }));
-
-      c.input = { latex: () => 'x' };
-
-      expect(c.shouldComponentUpdate({ latex: 'y' }, {})).toBe(true);
-    });
-
-    it('uses input.latex(), never input.mathField.latex()', () => {
-      const c = new EditorAndPad(props({ latex: 'x' }));
-      const latex = jest.fn(() => 'x');
-
-      // deliberately no `mathField` - the old code would have thrown here
-      c.input = { latex };
-      c.state = { equationEditor: 'geometry' };
-      c.shouldComponentUpdate({ latex: 'x' }, c.state);
-
-      expect(latex).toHaveBeenCalled();
-    });
-  });
-
-  describe('onClick key routing', () => {
-    const withInput = (over = {}) => {
-      const c = new EditorAndPad(props(over));
-      const calls = { write: [], command: [], keystroke: [], clear: 0 };
-
-      c.input = {
-        write: (v) => calls.write.push(v),
-        command: (v) => calls.command.push(v),
-        keystroke: (v) => calls.keystroke.push(v),
-        clear: () => calls.clear++,
-      };
-      c.updateDisable = () => {};
-
-      return { c, calls };
-    };
-
-    // toNodeData keys this off `value === 'clear'`, not `type`
-    it('clear', () => {
-      const { c, calls } = withInput();
-
-      c.onClick({ value: 'clear' });
-      expect(calls.clear).toBe(1);
-    });
-
-    it('command', () => {
-      const { c, calls } = withInput();
-
-      c.onClick({ type: 'command', value: '\\frac' });
-      expect(calls.command).toEqual(['\\frac']);
-    });
-
-    it('cursor keystroke', () => {
-      const { c, calls } = withInput();
-
-      c.onClick({ type: 'cursor', value: 'Left' });
-      expect(calls.keystroke).toEqual(['Left']);
-    });
-
-    it('answer block writes the response token', () => {
-      const { c, calls } = withInput();
-
-      c.onClick({ type: 'answer' });
-      expect(calls.write).toEqual(['%response%']);
-    });
-
-    it('plain value', () => {
-      const { c, calls } = withInput();
-
-      c.onClick({ value: 'x' });
-      expect(calls.write).toEqual(['x']);
-    });
-
-    it('ignores a nullish key', () => {
-      const { c, calls } = withInput();
-
-      expect(() => c.onClick(null)).not.toThrow();
-      expect(calls.write).toEqual([]);
-    });
-  });
-
-  describe('onEditorChange', () => {
-    const withInput = (over = {}) => {
-      const onChange = jest.fn();
-      const c = new EditorAndPad(props({ onChange, ...over }));
-      const calls = { keystroke: [], clear: 0, write: [] };
-
-      c.input = {
-        keystroke: (v) => calls.keystroke.push(v),
-        clear: () => calls.clear++,
-        write: (v) => calls.write.push(v),
-      };
-      c.updateDisable = () => {};
-
-      return { c, onChange, calls };
-    };
-
-    it('propagates ordinary latex to onChange', () => {
-      const { c, onChange } = withInput();
-
-      c.onEditorChange('\\frac{1}{2}');
-      expect(onChange).toHaveBeenCalledWith('\\frac{1}{2}');
-    });
-
-    it('strips decimals when noDecimal is set', () => {
-      const { c, onChange, calls } = withInput({ noDecimal: true });
-
-      c.onEditorChange('1.5');
-
-      expect(calls.clear).toBe(1);
-      expect(calls.write).toEqual(['15']);
-      expect(onChange).not.toHaveBeenCalled();
-    });
-
-    it('undoes the empty fraction after a digit with a public delete, not MathQuill internals', () => {
-      const { c, onChange, calls } = withInput();
-
-      // the shape the old __controller hack targeted
-      c.onEditorChange('2\\ \\frac{1}{ }');
-
-      expect(calls.keystroke).toEqual(['Backspace']);
-      expect(onChange).not.toHaveBeenCalled();
-    });
-
-    it('does not treat normal fractions as the mixed-number case', () => {
-      const { c, onChange, calls } = withInput();
-
-      c.onEditorChange('\\frac{1}{2}');
-
-      expect(calls.keystroke).toEqual([]);
-      expect(onChange).toHaveBeenCalled();
-    });
-  });
-});

package/src/__tests__/editor-and-pad.test.js

@@ -1,74 +0,0 @@
-import { EditorAndPad } from '../editor-and-pad';
-import { render } from '@testing-library/react';
-import React from 'react';
-
-describe('EditorAndPad', () => {
-  const defaultProps = {
-    classes: {},
-    classNames: {},
-    onBlur: jest.fn(),
-  };
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  it('renders with default props', () => {
-    const { container } = render(<EditorAndPad {...defaultProps} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  describe('autoFocus', () => {
-    it('focuses input immediately via setTimeout when autoFocus is true', () => {
-      const mockFocus = jest.fn();
-      const component = new EditorAndPad({ ...defaultProps, autoFocus: true });
-      component.input = { focus: mockFocus };
-
-      component.componentDidMount();
-
-      expect(mockFocus).not.toHaveBeenCalled();
-
-      jest.runAllTimers();
-
-      expect(mockFocus).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not focus input when autoFocus is false', () => {
-      const mockFocus = jest.fn();
-      const component = new EditorAndPad({ ...defaultProps, autoFocus: false });
-      component.input = { focus: mockFocus };
-
-      component.componentDidMount();
-      jest.runAllTimers();
-
-      expect(mockFocus).not.toHaveBeenCalled();
-    });
-
-    it('does not focus when input ref is not set', () => {
-      const component = new EditorAndPad({ ...defaultProps, autoFocus: true });
-      component.input = null;
-
-      expect(() => {
-        component.componentDidMount();
-        jest.runAllTimers();
-      }).not.toThrow();
-    });
-
-    it('uses setTimeout with 0ms delay to defer focus', () => {
-      const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
-      const mockFocus = jest.fn();
-      const component = new EditorAndPad({ ...defaultProps, autoFocus: true });
-      component.input = { focus: mockFocus };
-
-      component.componentDidMount();
-
-      expect(setTimeoutSpy).toHaveBeenCalledWith(expect.any(Function), 0);
-
-      setTimeoutSpy.mockRestore();
-    });
-  });
-});

package/src/__tests__/index.test.js

@@ -1,21 +0,0 @@
-import { RawPureToolbar } from '../index';
-import { render } from '@testing-library/react';
-import React from 'react';
-
-describe('RawPureToolbar', () => {
-  const defaultProps = {
-    classes: {},
-    controlledKeypad: true,
-    showKeypad: true,
-  };
-
-  it('renders with DONE button if hideDoneButton is not defined', () => {
-    const { container } = render(<RawPureToolbar {...defaultProps} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('renders without DONE button if hideDoneButton value is true', () => {
-    const { container } = render(<RawPureToolbar {...defaultProps} hideDoneButton={true} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-});

package/src/__tests__/math-preview.test.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import MathPreview from '../math-preview';
-
-/** Every rule emotion has injected so far, as CSSStyleRule objects. */
-const injectedRules = () =>
-  Array.from(document.querySelectorAll('style[data-emotion]'))
-    .flatMap((tag) => (tag.sheet ? Array.from(tag.sheet.cssRules) : []))
-    .filter((rule) => rule.selectorText);
-
-/**
- * The `.ML__latex` rule that actually applies to `element`.
- *
- * Matching with `element.matches` rather than string comparison means the
- * assertions cover the selector too: a rule written as `& > .ML__latex` would
- * not match the nested markup MathLive emits, and these tests would fail.
- */
-const mathLiveRuleFor = (element) =>
-  injectedRules().find((rule) => rule.selectorText.includes('.ML__latex') && element.matches(rule.selectorText));
-
-/**
- * Stand in for MathLive's `convertLatexToMarkup` output, which is
- * `<span class="ML__latex">...</span>` nested inside `mf.Static`'s holder span.
- * MathLive does not load under jsdom, so the markup is added by hand.
- */
-const addStaticMarkup = (container, depth = 1) => {
-  let parent = container.firstChild;
-
-  for (let i = 1; i < depth; i += 1) {
-    const wrapper = document.createElement('span');
-
-    parent.appendChild(wrapper);
-    parent = wrapper;
-  }
-
-  const markup = document.createElement('span');
-
-  markup.className = 'ML__latex';
-  parent.appendChild(markup);
-
-  return markup;
-};
-
-describe('MathPreview', () => {
-  const defaultProps = {
-    latex: 'sqrt(5)',
-    classes: {},
-    isSelected: false,
-    onFocus: jest.fn(),
-    onBlur: jest.fn(),
-  };
-
-  it('renders with default props', () => {
-    const { container } = render(<MathPreview {...defaultProps} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  describe('MathLive static markup', () => {
-    it('is outlined and padded when not selected', () => {
-      const { container } = render(<MathPreview {...defaultProps} isSelected={false} />);
-      const rule = mathLiveRuleFor(addStaticMarkup(container));
-
-      expect(rule).toBeDefined();
-      expect(rule.style.getPropertyValue('border')).toEqual('solid 1px lightgrey');
-      expect(rule.style.getPropertyValue('padding')).toEqual('5px');
-    });
-
-    it('drops its outline and padding when selected, so only the container border shows', () => {
-      const { container } = render(<MathPreview {...defaultProps} isSelected />);
-      const rule = mathLiveRuleFor(addStaticMarkup(container));
-
-      expect(rule).toBeDefined();
-      expect(rule.style.getPropertyValue('border')).toEqual('solid 0px lightgrey');
-      expect(rule.style.getPropertyValue('padding')).toEqual('0px');
-    });
-
-    it('is styled at any depth below the container, not just as a direct child', () => {
-      const { container } = render(<MathPreview {...defaultProps} isSelected={false} />);
-
-      expect(mathLiveRuleFor(addStaticMarkup(container, 3))).toBeDefined();
-    });
-  });
-});

package/src/done-button.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import IconButton from '@mui/material/IconButton';
-import Check from '@mui/icons-material/Check';
-import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-
-const StyledIconButton = styled(IconButton)(({ theme, hideBackground }) => ({
-  verticalAlign: 'top',
-  width: '28px',
-  height: '28px',
-  color: '#00bb00',
-  ...(hideBackground && {
-    backgroundColor: theme.palette.common.white,
-    '&:hover': {
-      backgroundColor: theme.palette.grey[200],
-    },
-  }),
-  '& .MuiIconButton-label': {
-    position: 'absolute',
-    top: '2px',
-  },
-}));
-
-export const RawDoneButton = ({ onClick, hideBackground }) => (
-  <StyledIconButton aria-label="Done" onClick={onClick} hideBackground={hideBackground} size="large">
-    <Check />
-  </StyledIconButton>
-);
-
-RawDoneButton.propTypes = {
-  onClick: PropTypes.func,
-  hideBackground: PropTypes.bool,
-};
-
-export const DoneButton = RawDoneButton;