@pie-lib/editable-html-tip-tap 2.1.19 → 2.1.20-beta.1

package/src/components/__tests__/custom-popper.test.jsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import CustomPopper from '../characters/custom-popper';
-
-jest.mock('@mui/material/Popper', () => ({
-  __esModule: true,
-  default: ({ children, id, open, ...props }) =>
-    open ? (
-      <div id={id} data-testid="popper" {...props}>
-        {children}
-      </div>
-    ) : null,
-}));
-
-describe('CustomPopper', () => {
-  const mockAnchorEl = document.createElement('div');
-
-  it('renders without crashing', () => {
-    const { container } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders children', () => {
-    const { getByText } = render(<CustomPopper anchorEl={mockAnchorEl}>Test Content</CustomPopper>);
-    expect(getByText('Test Content')).toBeInTheDocument();
-  });
-
-  it('is always open', () => {
-    const { getByTestId } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
-    expect(getByTestId('popper')).toBeInTheDocument();
-  });
-
-  it('has correct id', () => {
-    const { container } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
-    const popper = container.querySelector('#mouse-over-popover');
-    expect(popper).toBeInTheDocument();
-  });
-
-  it('applies correct styling to typography', () => {
-    const { getByText } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
-    const typography = getByText('Content');
-    expect(typography).toHaveStyle({ fontSize: '50px', textAlign: 'center' });
-  });
-
-  it('passes additional props to Popper', () => {
-    const { container } = render(
-      <CustomPopper anchorEl={mockAnchorEl} onClose={jest.fn()}>
-        Content
-      </CustomPopper>,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders multiple children', () => {
-    const { getByText } = render(
-      <CustomPopper anchorEl={mockAnchorEl}>
-        <div>First</div>
-        <div>Second</div>
-      </CustomPopper>,
-    );
-    expect(getByText('First')).toBeInTheDocument();
-    expect(getByText('Second')).toBeInTheDocument();
-  });
-
-  it('has pointer-events disabled', () => {
-    const { container } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
-    // Styling is applied via styled component, just verify it rendered
-    expect(container).toBeInTheDocument();
-  });
-
-  it('has high z-index', () => {
-    const { container } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
-    // Styling is applied via styled component, just verify it rendered
-    expect(container).toBeInTheDocument();
-  });
-
-  it('has correct background color', () => {
-    const { container } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
-    // Styling is applied via styled component, just verify it rendered
-    expect(container).toBeInTheDocument();
-  });
-});

package/src/components/__tests__/done-button.test.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { DoneButton, RawDoneButton } from '../common/done-button';
-
-describe('RawDoneButton', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<RawDoneButton onClick={jest.fn()} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders with Check icon', () => {
-    const { container } = render(<RawDoneButton onClick={jest.fn()} />);
-    const button = container.querySelector('button');
-    expect(button).toBeInTheDocument();
-  });
-
-  it('calls onClick when clicked', () => {
-    const onClick = jest.fn();
-    const { container } = render(<RawDoneButton onClick={onClick} />);
-    const button = container.querySelector('button');
-    fireEvent.click(button);
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('has aria-label "Done"', () => {
-    const { container } = render(<RawDoneButton onClick={jest.fn()} />);
-    const button = container.querySelector('button');
-    expect(button).toHaveAttribute('aria-label', 'Done');
-  });
-
-  it('accepts doneButtonRef prop', () => {
-    const doneButtonRef = jest.fn();
-    const { container } = render(<RawDoneButton onClick={jest.fn()} doneButtonRef={doneButtonRef} />);
-    // doneButtonRef is passed as buttonRef to IconButton, just verify it's accepted
-    expect(container).toBeInTheDocument();
-  });
-
-  it('applies correct styling', () => {
-    const { container } = render(<RawDoneButton onClick={jest.fn()} />);
-    const button = container.querySelector('button');
-    expect(button).toHaveClass('MuiIconButton-root');
-  });
-});
-
-describe('DoneButton', () => {
-  it('is the same as RawDoneButton', () => {
-    expect(DoneButton).toBe(RawDoneButton);
-  });
-
-  it('renders correctly', () => {
-    const { container } = render(<DoneButton onClick={jest.fn()} />);
-    expect(container.querySelector('button')).toBeInTheDocument();
-  });
-});

package/src/components/__tests__/toolbar-buttons.test.jsx

@@ -1,247 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { color } from '@pie-lib/render-ui';
-import { Button, MarkButton, RawButton, RawMarkButton } from '../common/toolbar-buttons';
-
-/*
- * jsdom does not resolve custom properties, so toHaveStyle() normalises `var(--x, y)`
- * to the empty string and cannot compare it. These buttons now take their ink from
- * `--pie-text`, so assert against the rule emotion emitted for the element's class.
- */
-const declaredColor = (el) =>
-  Array.from(document.querySelectorAll('style'))
-    .flatMap((tag) => Array.from(tag.sheet?.cssRules || []))
-    .filter((rule) => Array.from(el.classList).some((c) => rule.selectorText?.includes(`.${c}`)))
-    .map((rule) => rule.style?.color)
-    .find(Boolean);
-
-describe('RawButton', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<RawButton onClick={jest.fn()}>Click me</RawButton>);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders children', () => {
-    const { getByText } = render(<RawButton onClick={jest.fn()}>Test Button</RawButton>);
-    expect(getByText('Test Button')).toBeInTheDocument();
-  });
-
-  it('calls onClick on mouse down', () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
-    fireEvent.mouseDown(getByText('Click'));
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('prevents default on mouse down', () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
-    const button = getByText('Click');
-    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
-    const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
-    button.dispatchEvent(event);
-    expect(preventDefaultSpy).toHaveBeenCalled();
-  });
-
-  it('calls onClick on Enter key press', () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
-    fireEvent.keyDown(getByText('Click'), { key: 'Enter' });
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('calls onClick on Space key press', () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
-    fireEvent.keyDown(getByText('Click'), { key: ' ' });
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('does not call onClick on other key press', () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
-    fireEvent.keyDown(getByText('Click'), { key: 'a' });
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  it('applies active style when active is true', () => {
-    const { getByText } = render(
-      <RawButton onClick={jest.fn()} active={true}>
-        Active
-      </RawButton>,
-    );
-    const button = getByText('Active');
-    expect(declaredColor(button)).toBe(color.text());
-  });
-
-  it('applies disabled style when disabled is true', () => {
-    const { getByText } = render(
-      <RawButton onClick={jest.fn()} disabled={true}>
-        Disabled
-      </RawButton>,
-    );
-    const button = getByText('Disabled');
-    expect(button).toHaveStyle({ cursor: 'not-allowed' });
-  });
-
-  it('applies extraStyles when provided', () => {
-    const extraStyles = { backgroundColor: 'red' };
-    const { getByText } = render(
-      <RawButton onClick={jest.fn()} extraStyles={extraStyles}>
-        Styled
-      </RawButton>,
-    );
-    const button = getByText('Styled');
-    expect(button).toHaveStyle({ backgroundColor: 'red' });
-  });
-
-  it('has aria-label when provided', () => {
-    const { getByLabelText } = render(
-      <RawButton onClick={jest.fn()} ariaLabel="Test Button">
-        Button
-      </RawButton>,
-    );
-    expect(getByLabelText('Test Button')).toBeInTheDocument();
-  });
-
-  it('has aria-pressed attribute', () => {
-    const { getByText } = render(
-      <RawButton onClick={jest.fn()} active={true}>
-        Button
-      </RawButton>,
-    );
-    expect(getByText('Button')).toHaveAttribute('aria-pressed', 'true');
-  });
-
-  it('is focusable with tabIndex', () => {
-    const { getByText } = render(<RawButton onClick={jest.fn()}>Button</RawButton>);
-    expect(getByText('Button')).toHaveAttribute('tabIndex', '0');
-  });
-});
-
-describe('Button', () => {
-  it('is the same as RawButton', () => {
-    expect(Button).toBe(RawButton);
-  });
-});
-
-describe('RawMarkButton', () => {
-  it('renders without crashing', () => {
-    const { container } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold">
-        B
-      </RawMarkButton>,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders children', () => {
-    const { getByText } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold">
-        Bold
-      </RawMarkButton>,
-    );
-    expect(getByText('Bold')).toBeInTheDocument();
-  });
-
-  it('calls onToggle with mark on mouse down', () => {
-    const onToggle = jest.fn();
-    const { getByText } = render(
-      <RawMarkButton onToggle={onToggle} mark="italic" label="Italic">
-        I
-      </RawMarkButton>,
-    );
-    fireEvent.mouseDown(getByText('I'));
-    expect(onToggle).toHaveBeenCalledWith('italic');
-  });
-
-  it('prevents default on mouse down', () => {
-    const onToggle = jest.fn();
-    const { getByText } = render(
-      <RawMarkButton onToggle={onToggle} mark="bold" label="Bold">
-        B
-      </RawMarkButton>,
-    );
-    const button = getByText('B');
-    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
-    const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
-    button.dispatchEvent(event);
-    expect(preventDefaultSpy).toHaveBeenCalled();
-  });
-
-  it('calls onToggle on Enter key press', () => {
-    const onToggle = jest.fn();
-    const { getByText } = render(
-      <RawMarkButton onToggle={onToggle} mark="underline" label="Underline">
-        U
-      </RawMarkButton>,
-    );
-    fireEvent.keyDown(getByText('U'), { key: 'Enter' });
-    expect(onToggle).toHaveBeenCalledWith('underline');
-  });
-
-  it('calls onToggle on Space key press', () => {
-    const onToggle = jest.fn();
-    const { getByText } = render(
-      <RawMarkButton onToggle={onToggle} mark="strike" label="Strike">
-        S
-      </RawMarkButton>,
-    );
-    fireEvent.keyDown(getByText('S'), { key: ' ' });
-    expect(onToggle).toHaveBeenCalledWith('strike');
-  });
-
-  it('does not call onToggle on other key press', () => {
-    const onToggle = jest.fn();
-    const { getByText } = render(
-      <RawMarkButton onToggle={onToggle} mark="bold" label="Bold">
-        B
-      </RawMarkButton>,
-    );
-    fireEvent.keyDown(getByText('B'), { key: 'a' });
-    expect(onToggle).not.toHaveBeenCalled();
-  });
-
-  it('applies active style when active is true', () => {
-    const { getByText } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold" active={true}>
-        B
-      </RawMarkButton>,
-    );
-    const button = getByText('B');
-    expect(declaredColor(button)).toBe(color.text());
-  });
-
-  it('has aria-label from label prop', () => {
-    const { getByLabelText } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Toggle Bold">
-        B
-      </RawMarkButton>,
-    );
-    expect(getByLabelText('Toggle Bold')).toBeInTheDocument();
-  });
-
-  it('has aria-pressed attribute', () => {
-    const { getByText } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold" active={true}>
-        B
-      </RawMarkButton>,
-    );
-    expect(getByText('B')).toHaveAttribute('aria-pressed', 'true');
-  });
-
-  it('is focusable with tabIndex', () => {
-    const { getByText } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold">
-        B
-      </RawMarkButton>,
-    );
-    expect(getByText('B')).toHaveAttribute('tabIndex', '0');
-  });
-});
-
-describe('MarkButton', () => {
-  it('is the same as RawMarkButton', () => {
-    expect(MarkButton).toBe(RawMarkButton);
-  });
-});

package/src/components/respArea/DragInTheBlank/__tests__/choice.test.jsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import DragDropChoice from '../choice';
-
-// Mock @dnd-kit hooks to avoid DndContext requirement
-jest.mock('@dnd-kit/core', () => ({
-  useDraggable: jest.fn(() => ({
-    attributes: {},
-    listeners: {},
-    setNodeRef: jest.fn(),
-    isDragging: false,
-  })),
-  useDroppable: jest.fn(() => ({
-    setNodeRef: jest.fn(),
-    isOver: false,
-    active: null,
-  })),
-}));
-
-jest.mock('@pie-lib/math-rendering', () => ({
-  renderMath: jest.fn(),
-}));
-
-// Collect the CSS rules emotion/MUI injected into the document (jsdom uses insertRule).
-const collectEmotionRules = () => {
-  const rules = [];
-  for (const sheet of Array.from(document.styleSheets)) {
-    try {
-      for (const rule of Array.from(sheet.cssRules)) {
-        rules.push(rule.cssText);
-      }
-    } catch (e) {
-      /* inaccessible stylesheet */
-    }
-  }
-  return rules;
-};
-
-describe('DragInTheBlank choice', () => {
-  const defaultProps = {
-    value: { id: '1', value: '<math>1/2</math>' },
-    disabled: false,
-    instanceId: 'test-instance',
-    n: { index: 0 },
-    onChange: jest.fn(),
-    removeResponse: jest.fn(),
-    duplicates: false,
-  };
-
-  it('renders without crashing', () => {
-    const { container } = render(<DragDropChoice {...defaultProps} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  describe('fraction math styling', () => {
-    it('enlarges numerator/denominator digits adjacent to a fraction to 120%', () => {
-      render(<DragDropChoice {...defaultProps} />);
-      const rule = collectEmotionRules().find((r) => r.includes('mjx-mn') && r.includes('mjx-mfrac'));
-      expect(rule).toBeDefined();
-      expect(rule).toMatch(/mjx-mn:has\(~\s*mjx-mfrac\)/);
-      expect(rule).toMatch(/mjx-mfrac\s*~\s*mjx-mn/);
-      expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
-    });
-
-    it('keeps the existing mjx-frac 120% rule', () => {
-      render(<DragDropChoice {...defaultProps} />);
-      const rule = collectEmotionRules().find((r) => /(^|[^-])mjx-frac/.test(r) && !r.includes('mjx-mfrac'));
-      expect(rule).toBeDefined();
-      expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
-    });
-  });
-});

package/src/components/respArea/__tests__/MathTemplated.test.jsx

@@ -1,210 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import MathTemplated from '../MathTemplated';
-
-// Mock the dependencies
-jest.mock('@tiptap/react', () => ({
-  NodeViewWrapper: ({ children, ...props }) => (
-    <div data-testid="node-view-wrapper" {...props}>
-      {children}
-    </div>
-  ),
-}));
-
-jest.mock('@pie-lib/math-input', () => ({
-  mq: {
-    Static: ({ latex }) => (
-      <div data-testid="mq-static" data-latex={latex}>
-        {latex}
-      </div>
-    ),
-  },
-}));
-
-describe('MathTemplated', () => {
-  const defaultProps = {
-    node: {
-      attrs: {
-        value: 'x^2 + y^2 = r^2',
-        index: 0,
-      },
-    },
-    options: {},
-    selected: false,
-  };
-
-  it('renders without crashing', () => {
-    const { container } = render(<MathTemplated {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders NodeViewWrapper with correct className', () => {
-    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
-    const wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper).toHaveClass('math-templated');
-  });
-
-  it('displays correct response key for index 0', () => {
-    const { getByText } = render(<MathTemplated {...defaultProps} />);
-    expect(getByText('R 1')).toBeInTheDocument();
-  });
-
-  it('displays correct response key for index 1', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: 'a + b',
-          index: 1,
-        },
-      },
-    };
-    const { getByText } = render(<MathTemplated {...props} />);
-    expect(getByText('R 2')).toBeInTheDocument();
-  });
-
-  it('displays correct response key for index 5', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: 'c = d',
-          index: 5,
-        },
-      },
-    };
-    const { getByText } = render(<MathTemplated {...props} />);
-    expect(getByText('R 6')).toBeInTheDocument();
-  });
-
-  it('renders LaTeX value correctly', () => {
-    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
-    const mqStatic = getByTestId('mq-static');
-    expect(mqStatic).toHaveAttribute('data-latex', 'x^2 + y^2 = r^2');
-  });
-
-  it('renders different LaTeX value', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: '\\frac{a}{b}',
-          index: 2,
-        },
-      },
-    };
-    const { getByTestId } = render(<MathTemplated {...props} />);
-    const mqStatic = getByTestId('mq-static');
-    expect(mqStatic).toHaveAttribute('data-latex', '\\frac{a}{b}');
-  });
-
-  it('passes selected prop to NodeViewWrapper', () => {
-    const props = {
-      ...defaultProps,
-      selected: true,
-    };
-    const { getByTestId } = render(<MathTemplated {...props} />);
-    const wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper).toHaveAttribute('data-selected', 'true');
-  });
-
-  it('passes false selected prop to NodeViewWrapper', () => {
-    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
-    const wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper).toHaveAttribute('data-selected', 'false');
-  });
-
-  it('applies correct inline styles to NodeViewWrapper', () => {
-    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
-    const wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper).toHaveStyle({
-      display: 'inline-flex',
-      minHeight: '36px',
-      minWidth: '50px',
-      cursor: 'pointer',
-    });
-  });
-
-  it('handles string index correctly', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: 'test',
-          index: '3',
-        },
-      },
-    };
-    const { getByText } = render(<MathTemplated {...props} />);
-    expect(getByText('R 4')).toBeInTheDocument();
-  });
-
-  it('handles empty value', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: '',
-          index: 0,
-        },
-      },
-    };
-    const { getByTestId } = render(<MathTemplated {...props} />);
-    const mqStatic = getByTestId('mq-static');
-    expect(mqStatic).toHaveAttribute('data-latex', '');
-  });
-
-  it('renders all styled components', () => {
-    const { container, getByText } = render(<MathTemplated {...defaultProps} />);
-
-    // Check for response box
-    expect(getByText('R 1')).toBeInTheDocument();
-
-    // Check for math block with LaTeX
-    const mqStatic = container.querySelector('[data-testid="mq-static"]');
-    expect(mqStatic).toBeInTheDocument();
-  });
-
-  it('handles zero index', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: 'x = 0',
-          index: 0,
-        },
-      },
-    };
-    const { getByText } = render(<MathTemplated {...props} />);
-    expect(getByText('R 1')).toBeInTheDocument();
-  });
-
-  it('handles large index values', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: 'x = 100',
-          index: 99,
-        },
-      },
-    };
-    const { getByText } = render(<MathTemplated {...props} />);
-    expect(getByText('R 100')).toBeInTheDocument();
-  });
-
-  it('renders with complex LaTeX expression', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: '\\sqrt{x^2 + y^2}',
-          index: 0,
-        },
-      },
-    };
-    const { getByTestId } = render(<MathTemplated {...props} />);
-    const mqStatic = getByTestId('mq-static');
-    expect(mqStatic).toHaveAttribute('data-latex', '\\sqrt{x^2 + y^2}');
-  });
-});