@pie-lib/editable-html-tip-tap 2.1.1-next.3 → 2.1.2-next.0

package/src/components/__tests__/TiptapContainer.test.jsx

@@ -1,138 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import TiptapContainer from '../TiptapContainer';
-
-jest.mock('../MenuBar', () => ({
-  __esModule: true,
-  default: ({ editor, toolbarOpts }) => <div data-testid="styled-menu-bar">MenuBar for editor</div>,
-}));
-
-describe('TiptapContainer', () => {
-  const mockEditor = {
-    commands: {
-      focus: jest.fn(),
-    },
-  };
-
-  const defaultProps = {
-    editor: mockEditor,
-    disabled: false,
-    children: <div data-testid="editor-content">Editor content</div>,
-    activePlugins: ['bold', 'italic'],
-    toolbarOpts: {},
-    responseAreaProps: {},
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders children', () => {
-    const { getByTestId } = render(<TiptapContainer {...defaultProps} />);
-    expect(getByTestId('editor-content')).toBeInTheDocument();
-  });
-
-  it('renders MenuBar when editor is provided', () => {
-    const { getByTestId } = render(<TiptapContainer {...defaultProps} />);
-    expect(getByTestId('styled-menu-bar')).toBeInTheDocument();
-  });
-
-  it('does not render MenuBar when editor is not provided', () => {
-    const { queryByTestId } = render(<TiptapContainer {...defaultProps} editor={null} />);
-    expect(queryByTestId('styled-menu-bar')).not.toBeInTheDocument();
-  });
-
-  it('applies noBorder style when toolbarOpts.noBorder is true', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} toolbarOpts={{ noBorder: true }} />);
-    const root = container.firstChild;
-    expect(root).toHaveStyle({ border: 'none' });
-  });
-
-  it('applies error style when toolbarOpts.error is true', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} toolbarOpts={{ error: true }} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('applies noPadding style when toolbarOpts.noPadding is true', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} toolbarOpts={{ noPadding: true }} />);
-    const children = container.querySelector('div > div > div');
-    expect(children).toHaveStyle({ padding: '0' });
-  });
-
-  it('disables scrollbar when disableScrollbar is true', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} disableScrollbar={true} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('applies width from props', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} width={500} />);
-    const root = container.firstChild;
-    expect(root).toHaveStyle({ width: '500px' });
-  });
-
-  it('applies minWidth from props', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} minWidth={300} />);
-    const root = container.firstChild;
-    expect(root).toHaveStyle({ minWidth: '300px' });
-  });
-
-  it('applies maxWidth from props', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} maxWidth={800} />);
-    const root = container.firstChild;
-    expect(root).toHaveStyle({ maxWidth: '800px' });
-  });
-
-  it('applies height from props', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} height={400} />);
-    const root = container.firstChild;
-    expect(root).toBeInTheDocument();
-  });
-
-  it('applies minHeight from props', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} minHeight={200} />);
-    const root = container.firstChild;
-    expect(root).toBeInTheDocument();
-  });
-
-  it('applies maxHeight from props', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} maxHeight={600} />);
-    const root = container.firstChild;
-    expect(root).toBeInTheDocument();
-  });
-
-  it('focuses editor on mount when autoFocus is true', () => {
-    jest.useFakeTimers();
-    const { container } = render(<TiptapContainer {...defaultProps} autoFocus={true} />);
-    jest.runAllTimers();
-    // Just verify the component rendered with autoFocus
-    expect(container).toBeInTheDocument();
-    jest.useRealTimers();
-  });
-
-  it('does not focus editor when autoFocus is false', () => {
-    render(<TiptapContainer {...defaultProps} autoFocus={false} />);
-    expect(mockEditor.commands.focus).not.toHaveBeenCalled();
-  });
-
-  it('passes className to root element', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} className="custom-class" />);
-    expect(container.firstChild).toHaveClass('custom-class');
-  });
-
-  it('handles width as string with units', () => {
-    const { container } = render(<TiptapContainer {...defaultProps} width="50%" />);
-    // Width is applied via styled component, just verify it rendered
-    expect(container).toBeInTheDocument();
-  });
-
-  it('passes onChange to MenuBar', () => {
-    const onChange = jest.fn();
-    const { getByTestId } = render(<TiptapContainer {...defaultProps} onChange={onChange} />);
-    expect(getByTestId('styled-menu-bar')).toBeInTheDocument();
-  });
-});

package/src/components/__tests__/characterUtils.test.js

@@ -1,166 +0,0 @@
-import { spanishConfig, specialConfig } from '../characters/characterUtils';
-
-describe('characterUtils', () => {
-  describe('spanishConfig', () => {
-    it('exports spanishConfig object', () => {
-      expect(spanishConfig).toBeDefined();
-      expect(typeof spanishConfig).toBe('object');
-    });
-
-    it('has characters array', () => {
-      expect(spanishConfig).toHaveProperty('characters');
-      expect(Array.isArray(spanishConfig.characters)).toBe(true);
-    });
-
-    it('has correct character structure', () => {
-      expect(spanishConfig.characters.length).toBeGreaterThan(0);
-      spanishConfig.characters.forEach((row) => {
-        expect(Array.isArray(row)).toBe(true);
-      });
-    });
-
-    it('includes Spanish characters', () => {
-      const allChars = spanishConfig.characters.flat();
-      expect(allChars).toContain('á');
-      expect(allChars).toContain('é');
-      expect(allChars).toContain('í');
-      expect(allChars).toContain('ó');
-      expect(allChars).toContain('ú');
-      expect(allChars).toContain('ñ');
-      expect(allChars).toContain('Ñ');
-    });
-
-    it('includes accented uppercase letters', () => {
-      const allChars = spanishConfig.characters.flat();
-      expect(allChars).toContain('Á');
-      expect(allChars).toContain('É');
-      expect(allChars).toContain('Í');
-      expect(allChars).toContain('Ó');
-      expect(allChars).toContain('Ú');
-    });
-
-    it('includes special punctuation', () => {
-      const allChars = spanishConfig.characters.flat();
-      expect(allChars).toContain('¿');
-      expect(allChars).toContain('¡');
-      expect(allChars).toContain('«');
-      expect(allChars).toContain('»');
-    });
-  });
-
-  describe('specialConfig', () => {
-    it('exports specialConfig object', () => {
-      expect(specialConfig).toBeDefined();
-      expect(typeof specialConfig).toBe('object');
-    });
-
-    it('has hasPreview property set to true', () => {
-      expect(specialConfig).toHaveProperty('hasPreview', true);
-    });
-
-    it('has characters array', () => {
-      expect(specialConfig).toHaveProperty('characters');
-      expect(Array.isArray(specialConfig.characters)).toBe(true);
-    });
-
-    it('has correct character structure with metadata', () => {
-      expect(specialConfig.characters.length).toBeGreaterThan(0);
-      specialConfig.characters.forEach((row) => {
-        expect(Array.isArray(row)).toBe(true);
-        row.forEach((char) => {
-          expect(char).toHaveProperty('unicode');
-          expect(char).toHaveProperty('description');
-          expect(char).toHaveProperty('write');
-          expect(char).toHaveProperty('label');
-        });
-      });
-    });
-
-    it('includes currency symbols', () => {
-      const allChars = specialConfig.characters.flat();
-      const euroChar = allChars.find((c) => c.write === '€');
-      expect(euroChar).toBeDefined();
-      expect(euroChar.unicode).toBe('U+20AC');
-      expect(euroChar.description).toBe('EURO SIGN');
-
-      const centChar = allChars.find((c) => c.write === '¢');
-      expect(centChar).toBeDefined();
-
-      const poundChar = allChars.find((c) => c.write === '£');
-      expect(poundChar).toBeDefined();
-
-      const yenChar = allChars.find((c) => c.write === '¥');
-      expect(yenChar).toBeDefined();
-    });
-
-    it('includes accented characters', () => {
-      const allChars = specialConfig.characters.flat();
-      const chars = ['á', 'é', 'í', 'ó', 'ú', 'ñ'];
-      chars.forEach((char) => {
-        const found = allChars.find((c) => c.write === char);
-        expect(found).toBeDefined();
-      });
-    });
-
-    it('includes space characters', () => {
-      const allChars = specialConfig.characters.flat();
-      const descriptions = allChars.map((c) => c.description);
-      expect(descriptions).toContain('NO-BREAK SPACE');
-      expect(descriptions).toContain('HAIR SPACE');
-      expect(descriptions).toContain('THIN SPACE');
-      expect(descriptions).toContain('EM SPACE');
-    });
-
-    it('includes diacritics', () => {
-      const allChars = specialConfig.characters.flat();
-      const acuteAccent = allChars.find((c) => c.description === 'ACUTE ACCENT');
-      expect(acuteAccent).toBeDefined();
-
-      const circumflex = allChars.find((c) => c.description === 'CIRCUMFLEX ACCENT');
-      expect(circumflex).toBeDefined();
-
-      const grave = allChars.find((c) => c.description === 'GRAVE ACCENT');
-      expect(grave).toBeDefined();
-
-      const diaeresis = allChars.find((c) => c.description === 'DIAERESIS');
-      expect(diaeresis).toBeDefined();
-    });
-
-    it('includes punctuation marks', () => {
-      const allChars = specialConfig.characters.flat();
-      const descriptions = allChars.map((c) => c.description);
-      expect(descriptions).toContain('INVERTED QUESTION MARK');
-      expect(descriptions).toContain('INVERTED EXCLAMATION MARK');
-      expect(descriptions).toContain('SECTION SIGN');
-      expect(descriptions).toContain('BULLET');
-      expect(descriptions).toContain('HORIZONTAL ELLIPSIS');
-    });
-
-    it('includes quotation marks', () => {
-      const allChars = specialConfig.characters.flat();
-      const leftQuote = allChars.find((c) => c.description === 'LEFT-POINTING DOUBLE ANGLE QUOTATION MARK');
-      expect(leftQuote).toBeDefined();
-
-      const rightQuote = allChars.find((c) => c.description === 'RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK');
-      expect(rightQuote).toBeDefined();
-    });
-
-    it('includes dashes', () => {
-      const allChars = specialConfig.characters.flat();
-      const enDash = allChars.find((c) => c.description === 'EN DASH');
-      expect(enDash).toBeDefined();
-
-      const emDash = allChars.find((c) => c.description === 'EM DASH');
-      expect(emDash).toBeDefined();
-
-      const minus = allChars.find((c) => c.description === 'MINUS SIGN');
-      expect(minus).toBeDefined();
-    });
-
-    it('some characters have extraProps', () => {
-      const allChars = specialConfig.characters.flat();
-      const charsWithExtraProps = allChars.filter((c) => c.extraProps);
-      expect(charsWithExtraProps.length).toBeGreaterThan(0);
-    });
-  });
-});

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

@@ -1,171 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { BlankContent } from '../respArea/DragInTheBlank/choice';
-
-jest.mock('@pie-lib/math-rendering', () => ({
-  renderMath: jest.fn(),
-}));
-
-jest.mock('@dnd-kit/core', () => ({
-  useDraggable: () => ({
-    attributes: {},
-    listeners: {},
-    setNodeRef: jest.fn(),
-    isDragging: false,
-  }),
-  useDroppable: () => ({
-    setNodeRef: jest.fn(),
-    isOver: false,
-    active: null,
-  }),
-}));
-
-describe('BlankContent', () => {
-  const mockN = {
-    index: '0',
-  };
-
-  const mockValue = {
-    value: 'Test Value',
-  };
-
-  const defaultProps = {
-    n: mockN,
-    value: mockValue,
-    isDragging: false,
-    isOver: false,
-    dragItem: null,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('displays value text', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    expect(contentDiv).toBeInTheDocument();
-  });
-
-  it('displays nbsp when value is empty', () => {
-    const emptyValue = { value: '' };
-    const { container } = render(<BlankContent {...defaultProps} value={emptyValue} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('shows grip icon when value is present', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const gripIcon = container.querySelector('svg');
-    expect(gripIcon).toBeInTheDocument();
-  });
-
-  it('does not show grip icon when value is nbsp', () => {
-    const emptyValue = { value: '' };
-    const { container } = render(<BlankContent {...defaultProps} value={emptyValue} />);
-    // Grip should not be visible
-    expect(container).toBeInTheDocument();
-  });
-
-  it('applies correct background when not preview', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    expect(contentDiv).toHaveStyle({ background: 'rgb(255, 255, 255)' });
-  });
-
-  it('applies preview background when isOver', () => {
-    const { container } = render(<BlankContent {...defaultProps} isOver={true} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    expect(contentDiv).toHaveStyle({ border: '1px solid #d1d1d1' });
-  });
-
-  it('has correct minimum dimensions', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    expect(contentDiv).toHaveStyle({ minWidth: '178px', minHeight: '36px' });
-  });
-
-  it('has inline-flex display', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    expect(contentDiv).toHaveStyle({ display: 'inline-flex' });
-  });
-
-  it('has correct border radius', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    expect(contentDiv).toHaveStyle({ borderRadius: '3px' });
-  });
-
-  it('has correct padding', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    expect(contentDiv).toHaveStyle({ padding: '8px 8px 8px 35px' });
-  });
-
-  it('is not content editable', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    expect(contentDiv).toHaveAttribute('contentEditable', 'false');
-  });
-
-  it('sets data-key attribute', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    expect(contentDiv).toHaveAttribute('data-key', '0');
-  });
-
-  it('renders children', () => {
-    const { getByText } = render(
-      <BlankContent {...defaultProps}>
-        <span>Child Content</span>
-      </BlankContent>,
-    );
-    expect(getByText('Child Content')).toBeInTheDocument();
-  });
-
-  it('shows dragItem value when isOver', () => {
-    const dragItem = { value: { value: 'Dragged Value' } };
-    const { container } = render(<BlankContent {...defaultProps} isOver={true} dragItem={dragItem} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('shows nbsp when isDragging', () => {
-    const { container } = render(<BlankContent {...defaultProps} isDragging={true} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('positions grip icon correctly', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const gripContainer = container.querySelector('svg')?.parentElement;
-    if (gripContainer) {
-      expect(gripContainer).toHaveStyle({ position: 'absolute', top: '6px', left: '15px' });
-    }
-  });
-
-  it('applies hover size when isOver', () => {
-    const { container } = render(<BlankContent {...defaultProps} isOver={true} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    expect(contentDiv).toBeInTheDocument();
-  });
-
-  it('handles click to add selected class', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    fireEvent.click(contentDiv);
-    expect(contentDiv).toHaveClass('selected');
-  });
-
-  it('handles click outside to remove selected class', () => {
-    const { container } = render(<BlankContent {...defaultProps} />);
-    const contentDiv = container.querySelector('div[data-key]');
-    fireEvent.click(contentDiv);
-    expect(contentDiv).toHaveClass('selected');
-    fireEvent.click(document.body);
-    expect(contentDiv).not.toHaveClass('selected');
-  });
-});

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();
-  });
-});