@pie-lib/editable-html-tip-tap 2.2.0-beta.7 → 3.0.0-next.35

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

@@ -1,255 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import DragDrop, { onRemoveResponse, onValueChange } from '../respArea/DragInTheBlank/DragInTheBlank';
-
-jest.mock('@tiptap/react', () => ({
-  NodeViewWrapper: ({ children, ...props }) => (
-    <div data-testid="node-view-wrapper" {...props}>
-      {children}
-    </div>
-  ),
-}));
-
-jest.mock('../respArea/DragInTheBlank/choice', () => ({
-  __esModule: true,
-  default: ({ n, dragKey, targetId, pos, value, onChange, removeResponse }) => (
-    <div data-testid="drag-drop-tile" data-drag-key={dragKey} data-target-id={targetId} data-pos={pos}>
-      Tile
-    </div>
-  ),
-}));
-
-describe('onValueChange', () => {
-  it('dispatches transaction with updated attributes', () => {
-    const mockEditor = {
-      state: {
-        tr: {
-          setNodeMarkup: jest.fn(function () {
-            return this;
-          }),
-          isDone: false,
-        },
-      },
-      view: {
-        dispatch: jest.fn(),
-      },
-    };
-
-    const mockNode = {
-      attrs: { id: '1', value: 'old' },
-    };
-
-    const choice = {
-      value: { id: '2', value: 'new' },
-    };
-
-    onValueChange(mockEditor, mockNode, 5, choice);
-
-    expect(mockEditor.state.tr.setNodeMarkup).toHaveBeenCalledWith(5, undefined, {
-      id: '1',
-      value: 'old',
-      ...choice.value,
-    });
-    expect(mockEditor.view.dispatch).toHaveBeenCalled();
-  });
-
-  it('sets isDone flag on transaction', () => {
-    const mockEditor = {
-      state: {
-        tr: {
-          setNodeMarkup: jest.fn(function () {
-            return this;
-          }),
-          isDone: false,
-        },
-      },
-      view: {
-        dispatch: jest.fn(),
-      },
-    };
-
-    const mockNode = {
-      attrs: {},
-    };
-
-    const choice = {
-      value: {},
-    };
-
-    onValueChange(mockEditor, mockNode, 0, choice);
-
-    expect(mockEditor.state.tr.isDone).toBe(true);
-  });
-});
-
-describe('onRemoveResponse', () => {
-  it('dispatches transaction removing value and id', () => {
-    const mockEditor = {
-      state: {
-        tr: {
-          setNodeMarkup: jest.fn(function () {
-            return this;
-          }),
-          isDone: false,
-        },
-      },
-      view: {
-        dispatch: jest.fn(),
-      },
-    };
-
-    const mockNode = {
-      attrs: { id: '1', value: 'test', other: 'keep' },
-    };
-
-    const choice = {
-      pos: 5,
-    };
-
-    onRemoveResponse(mockEditor, mockNode, choice);
-
-    expect(mockEditor.state.tr.setNodeMarkup).toHaveBeenCalledWith(5, undefined, { other: 'keep' });
-    expect(mockEditor.view.dispatch).toHaveBeenCalled();
-  });
-
-  it('sets isDone flag on transaction', () => {
-    const mockEditor = {
-      state: {
-        tr: {
-          setNodeMarkup: jest.fn(function () {
-            return this;
-          }),
-          isDone: false,
-        },
-      },
-      view: {
-        dispatch: jest.fn(),
-      },
-    };
-
-    const mockNode = {
-      attrs: { id: '1', value: 'test' },
-    };
-
-    const choice = {
-      pos: 0,
-    };
-
-    onRemoveResponse(mockEditor, mockNode, choice);
-
-    expect(mockEditor.state.tr.isDone).toBe(true);
-  });
-});
-
-describe('DragDrop', () => {
-  const mockEditor = {
-    state: {
-      tr: {
-        setNodeMarkup: jest.fn(function () {
-          return this;
-        }),
-      },
-    },
-    view: {
-      dispatch: jest.fn(),
-    },
-  };
-
-  const mockNode = {
-    attrs: {
-      id: '1',
-      value: 'Test',
-      index: '0',
-      inTable: false,
-    },
-    nodeSize: 1,
-  };
-
-  const mockOptions = {
-    duplicates: false,
-  };
-
-  const defaultProps = {
-    editor: mockEditor,
-    node: mockNode,
-    getPos: () => 5,
-    options: mockOptions,
-    selected: false,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(<DragDrop {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders NodeViewWrapper', () => {
-    const { getByTestId } = render(<DragDrop {...defaultProps} />);
-    expect(getByTestId('node-view-wrapper')).toBeInTheDocument();
-  });
-
-  it('renders DragDropTile', () => {
-    const { getByTestId } = render(<DragDrop {...defaultProps} />);
-    expect(getByTestId('drag-drop-tile')).toBeInTheDocument();
-  });
-
-  it('passes attributes to DragDropTile', () => {
-    const { getByTestId } = render(<DragDrop {...defaultProps} />);
-    const tile = getByTestId('drag-drop-tile');
-    expect(tile).toHaveAttribute('data-drag-key', '1');
-    expect(tile).toHaveAttribute('data-target-id', '0');
-    expect(tile).toHaveAttribute('data-pos', '5');
-  });
-
-  it('applies correct margin when not in table', () => {
-    const { container } = render(<DragDrop {...defaultProps} />);
-    const span = container.querySelector('span[style*="margin"]');
-    expect(span).toHaveStyle({ margin: '0 10px' });
-  });
-
-  it('applies correct margin when in table', () => {
-    const nodeInTable = { ...mockNode, attrs: { ...mockNode.attrs, inTable: true } };
-    const { container } = render(<DragDrop {...defaultProps} node={nodeInTable} />);
-    const span = container.querySelector('span[style*="margin"]');
-    expect(span).toHaveStyle({ margin: '10px' });
-  });
-
-  it('has inline-flex display', () => {
-    const { container } = render(<DragDrop {...defaultProps} />);
-    const span = container.querySelector('span[style*="display"]');
-    expect(span).toHaveStyle({ display: 'inline-flex' });
-  });
-
-  it('has correct minimum height', () => {
-    const { container } = render(<DragDrop {...defaultProps} />);
-    const span = container.querySelector('span[style*="display"]');
-    expect(span).toHaveStyle({ minHeight: '50px' });
-  });
-
-  it('has correct minimum width', () => {
-    const { container } = render(<DragDrop {...defaultProps} />);
-    const span = container.querySelector('span[style*="display"]');
-    expect(span).toHaveStyle({ minWidth: '178px' });
-  });
-
-  it('has cursor pointer style', () => {
-    const { container } = render(<DragDrop {...defaultProps} />);
-    const span = container.querySelector('span[style*="cursor"]');
-    expect(span).toHaveStyle({ cursor: 'pointer' });
-  });
-
-  it('passes duplicates option to DragDropTile', () => {
-    const optionsWithDuplicates = { ...mockOptions, duplicates: true };
-    render(<DragDrop {...defaultProps} options={optionsWithDuplicates} />);
-    expect(true).toBe(true); // DragDropTile is mocked, so we just verify it renders
-  });
-
-  it('sets data-selected attribute on NodeViewWrapper', () => {
-    const { getByTestId } = render(<DragDrop {...defaultProps} selected={true} />);
-    const wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper).toHaveAttribute('data-selected', 'true');
-  });
-});

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

@@ -1,209 +0,0 @@
-import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react';
-import ExplicitConstructedResponse from '../respArea/ExplicitConstructedResponse';
-
-jest.mock('@tiptap/react', () => ({
-  NodeViewWrapper: ({ children, ...props }) => (
-    <div data-testid="node-view-wrapper" {...props}>
-      {children}
-    </div>
-  ),
-}));
-
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  createPortal: (node) => node,
-}));
-
-describe('ExplicitConstructedResponse', () => {
-  const buildMockEditor = (overrides = {}) => {
-    const mockTr = {
-      delete: jest.fn(),
-      setMeta: jest.fn(function setMeta() {
-        return mockTr;
-      }),
-    };
-    return {
-      state: {
-        selection: {
-          from: 0,
-          to: 1,
-        },
-        tr: mockTr,
-      },
-      view: {
-        dispatch: jest.fn(),
-      },
-      commands: {
-        focus: jest.fn(),
-      },
-      _tiptapContainerEl: document.createElement('div'),
-      ...overrides,
-    };
-  };
-
-  let mockEditor;
-
-  const mockNode = {
-    attrs: {
-      index: '0',
-      value: 'Test value',
-    },
-    nodeSize: 1,
-  };
-
-  const mockOptions = {
-    respAreaToolbar: jest.fn(() => () => <div data-testid="toolbar">Toolbar</div>),
-    error: jest.fn(() => ({})),
-  };
-
-  const defaultProps = {
-    editor: mockEditor,
-    node: mockNode,
-    getPos: () => 5,
-    options: mockOptions,
-    selected: false,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockEditor = buildMockEditor();
-    defaultProps.editor = mockEditor;
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders NodeViewWrapper', () => {
-    const { getByTestId } = render(<ExplicitConstructedResponse {...defaultProps} />);
-    expect(getByTestId('node-view-wrapper')).toBeInTheDocument();
-  });
-
-  it('displays node value', () => {
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} />);
-    const valueDiv = container.querySelector('div[style*="padding"]');
-    expect(valueDiv).toBeInTheDocument();
-  });
-
-  it('applies correct border when no error', () => {
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} />);
-    const contentDiv = container.querySelector('div[style*="border"]');
-    expect(contentDiv).toHaveStyle({ border: '1px solid #C0C3CF' });
-  });
-
-  it('applies red border when error exists', () => {
-    const errorFn = jest.fn(() => ({ 0: ['error'] }));
-    const options = { ...mockOptions, error: errorFn };
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} options={options} />);
-    const contentDiv = container.querySelector('div[style*="border"]');
-    expect(contentDiv).toHaveStyle({ border: '1px solid red' });
-  });
-
-  it('shows toolbar when selected and only this node is selected', async () => {
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} selected={true} />);
-    await waitFor(() => {
-      const toolbar = container.querySelector('[data-testid="toolbar"]');
-      // Toolbar might be hidden initially based on selection logic
-      expect(container).toBeInTheDocument();
-    });
-  });
-
-  it('does not show toolbar when not selected', () => {
-    const { queryByTestId } = render(<ExplicitConstructedResponse {...defaultProps} selected={false} />);
-    expect(queryByTestId('toolbar')).not.toBeInTheDocument();
-  });
-
-  it('shows toolbar on click', async () => {
-    const { container, queryByTestId } = render(<ExplicitConstructedResponse {...defaultProps} />);
-    const clickableDiv = container.querySelector('div[style*="border"]');
-    fireEvent.click(clickableDiv);
-    await waitFor(() => {
-      expect(queryByTestId('toolbar')).toBeInTheDocument();
-    });
-  });
-
-  it('hides content when toolbar is shown', async () => {
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} selected={true} />);
-    await waitFor(() => {
-      // Check visibility state
-      expect(container).toBeInTheDocument();
-    });
-  });
-
-  it('has correct minimum dimensions', () => {
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} />);
-    const wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({ minHeight: '55px' });
-  });
-
-  it('renders with empty value as nbsp', () => {
-    const emptyNode = { ...mockNode, attrs: { ...mockNode.attrs, value: '' } };
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} node={emptyNode} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('calls respAreaToolbar with correct params', () => {
-    render(<ExplicitConstructedResponse {...defaultProps} />);
-    expect(mockOptions.respAreaToolbar).toHaveBeenCalledWith([mockNode, 5], mockEditor, expect.any(Function));
-  });
-
-  it('has cursor pointer style', () => {
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} />);
-    const wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({ cursor: 'pointer' });
-  });
-
-  it('has inline-flex display', () => {
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} />);
-    const wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({ display: 'inline-flex' });
-  });
-
-  it('closes toolbar on outside click', async () => {
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} selected={true} />);
-    await waitFor(() => {
-      fireEvent.mouseDown(document.body);
-    });
-    expect(container).toBeInTheDocument();
-  });
-
-  it('applies correct padding to content', () => {
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} />);
-    const contentDiv = container.querySelector('div[style*="padding"]');
-    expect(contentDiv).toHaveStyle({ padding: '12px 21px' });
-  });
-
-  it('applies correct min width', () => {
-    const { container } = render(<ExplicitConstructedResponse {...defaultProps} />);
-    const contentDiv = container.querySelector('div[style*="padding"]');
-    expect(contentDiv).toHaveStyle({ minWidth: '178px' });
-  });
-
-  it('renders delete control on portaled custom toolbar when container el is set', async () => {
-    const { findByLabelText } = render(<ExplicitConstructedResponse {...defaultProps} selected />);
-    expect(await findByLabelText('Delete')).toBeInTheDocument();
-  });
-
-  it('does not render portaled delete control when _tiptapContainerEl is missing', async () => {
-    const editor = buildMockEditor({ _tiptapContainerEl: undefined });
-    const { queryByLabelText, findByTestId } = render(
-      <ExplicitConstructedResponse {...defaultProps} editor={editor} selected />,
-    );
-    expect(await findByTestId('toolbar')).toBeInTheDocument();
-    expect(queryByLabelText('Delete')).not.toBeInTheDocument();
-  });
-
-  it('delete clears toolbar flag, removes node range, dispatches, and focuses', async () => {
-    mockEditor._toolbarOpened = true;
-    const { findByLabelText } = render(<ExplicitConstructedResponse {...defaultProps} selected />);
-    fireEvent.mouseDown(await findByLabelText('Delete'));
-    expect(mockEditor.state.tr.delete).toHaveBeenCalledWith(5, 6);
-    expect(mockEditor.view.dispatch).toHaveBeenCalledTimes(2);
-    expect(mockEditor.view.dispatch).toHaveBeenNthCalledWith(1, mockEditor.state.tr);
-    expect(mockEditor.view.dispatch).toHaveBeenNthCalledWith(2, mockEditor.state.tr);
-    expect(mockEditor._toolbarOpened).toBe(false);
-    expect(mockEditor.commands.focus).toHaveBeenCalled();
-  });
-});

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

@@ -1,128 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { ImageToolbar } from '../image/ImageToolbar';
-
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  render: jest.fn(),
-}));
-
-jest.mock('../image/AltDialog', () => ({
-  __esModule: true,
-  default: jest.fn(() => <div data-testid="alt-dialog" />),
-}));
-
-jest.mock('../common/toolbar-buttons', () => ({
-  MarkButton: ({ onToggle, active, label, children }) => (
-    <button onClick={() => onToggle()} data-testid={`mark-button-${label}`} data-active={active}>
-      {children}
-    </button>
-  ),
-}));
-
-describe('ImageToolbar', () => {
-  const defaultProps = {
-    onChange: jest.fn(),
-    alignment: 'left',
-    alt: 'Test alt text',
-    imageLoaded: true,
-    disableImageAlignmentButtons: false,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(<ImageToolbar {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders alignment buttons when not disabled', () => {
-    const { getByTestId } = render(<ImageToolbar {...defaultProps} />);
-    expect(getByTestId('mark-button-left')).toBeInTheDocument();
-    expect(getByTestId('mark-button-center')).toBeInTheDocument();
-    expect(getByTestId('mark-button-right')).toBeInTheDocument();
-  });
-
-  it('does not render alignment buttons when disabled', () => {
-    const { queryByTestId } = render(<ImageToolbar {...defaultProps} disableImageAlignmentButtons={true} />);
-    expect(queryByTestId('mark-button-left')).not.toBeInTheDocument();
-    expect(queryByTestId('mark-button-center')).not.toBeInTheDocument();
-    expect(queryByTestId('mark-button-right')).not.toBeInTheDocument();
-  });
-
-  it('renders "Alt text" label', () => {
-    const { getByText } = render(<ImageToolbar {...defaultProps} />);
-    expect(getByText('Alt text')).toBeInTheDocument();
-  });
-
-  it('calls onChange with alignment when alignment button clicked', () => {
-    const onChange = jest.fn();
-    const { getByTestId } = render(<ImageToolbar {...defaultProps} onChange={onChange} />);
-    fireEvent.click(getByTestId('mark-button-center'));
-    expect(onChange).toHaveBeenCalledWith({ alignment: 'center' });
-  });
-
-  it('shows left button as active when alignment is left', () => {
-    const { getByTestId } = render(<ImageToolbar {...defaultProps} alignment="left" />);
-    expect(getByTestId('mark-button-left')).toHaveAttribute('data-active', 'true');
-  });
-
-  it('shows center button as active when alignment is center', () => {
-    const { getByTestId } = render(<ImageToolbar {...defaultProps} alignment="center" />);
-    expect(getByTestId('mark-button-center')).toHaveAttribute('data-active', 'true');
-  });
-
-  it('shows right button as active when alignment is right', () => {
-    const { getByTestId } = render(<ImageToolbar {...defaultProps} alignment="right" />);
-    expect(getByTestId('mark-button-right')).toHaveAttribute('data-active', 'true');
-  });
-
-  it('disables alt text when image is not loaded', () => {
-    const { getByText } = render(<ImageToolbar {...defaultProps} imageLoaded={false} />);
-    const altText = getByText('Alt text');
-    expect(altText).toHaveStyle({ opacity: '0.5' });
-  });
-
-  it('does not disable alt text when image is loaded', () => {
-    const { getByText } = render(<ImageToolbar {...defaultProps} imageLoaded={true} />);
-    const altText = getByText('Alt text');
-    expect(altText).not.toHaveStyle({ opacity: '0.5' });
-  });
-
-  it('renders alt text dialog on mouse down when image is loaded', () => {
-    const { getByText, container } = render(<ImageToolbar {...defaultProps} imageLoaded={true} />);
-    const altText = getByText('Alt text');
-    fireEvent.mouseDown(altText);
-    // Just verify the component rendered and mouseDown didn't throw
-    expect(container).toBeInTheDocument();
-  });
-
-  it('does not render alt text dialog on mouse down when image is not loaded', () => {
-    const { getByText, container } = render(<ImageToolbar {...defaultProps} imageLoaded={false} />);
-    const altText = getByText('Alt text');
-    fireEvent.mouseDown(altText);
-    // Just verify the component rendered and mouseDown didn't throw
-    expect(container).toBeInTheDocument();
-  });
-
-  it('calls onChange with new alt text and true when alt dialog is done', () => {
-    const onChange = jest.fn();
-    const toolbar = new ImageToolbar({ ...defaultProps, onChange });
-    toolbar.onAltTextDone('New alt text');
-    expect(onChange).toHaveBeenCalledWith({ alt: 'New alt text' }, true);
-  });
-
-  it('has border on alt text when alignment buttons are shown', () => {
-    const { getByText } = render(<ImageToolbar {...defaultProps} disableImageAlignmentButtons={false} />);
-    const altText = getByText('Alt text');
-    expect(altText).toHaveStyle({ borderLeft: '1px solid grey' });
-  });
-
-  it('does not have border on alt text when alignment buttons are hidden', () => {
-    const { getByText } = render(<ImageToolbar {...defaultProps} disableImageAlignmentButtons={true} />);
-    const altText = getByText('Alt text');
-    expect(altText).not.toHaveStyle({ borderLeft: '1px solid grey' });
-  });
-});