@pie-lib/editable-html-tip-tap 2.2.0-beta.7 → 2.2.0-beta.9

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

@@ -1,557 +0,0 @@
-import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react';
-import { renderMath } from '@pie-lib/math-rendering';
-import InlineDropdown from '../respArea/InlineDropdown';
-
-jest.mock('@pie-lib/math-rendering', () => ({
-  renderMath: jest.fn(),
-}));
-
-jest.mock('@tiptap/react', () => ({
-  NodeViewWrapper: ({ children, ...props }) => (
-    <div data-testid="node-view-wrapper" {...props}>
-      {children}
-    </div>
-  ),
-}));
-
-const mockCreatePortal = jest.fn((node) => node);
-
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  createPortal: (...args) => mockCreatePortal(...args),
-}));
-
-describe('InlineDropdown', () => {
-  const buildMockEditor = (overrides = {}) => {
-    const mockNodeAt = jest.fn((pos) => (pos === 5 ? { nodeSize: 1 } : null));
-    const mockDoc = {
-      descendants: jest.fn(),
-      nodeAt: mockNodeAt,
-    };
-    const mockTr = {
-      delete: jest.fn(),
-      doc: { nodeAt: mockNodeAt },
-      setSelection: jest.fn(),
-      setMeta: jest.fn(function setMeta() {
-        return mockTr;
-      }),
-    };
-    return {
-      state: {
-        selection: {
-          from: 0,
-          to: 1,
-        },
-        tr: mockTr,
-        doc: mockDoc,
-      },
-      view: {
-        coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
-        dispatch: jest.fn(),
-      },
-      commands: {
-        focus: jest.fn(),
-      },
-      _tiptapContainerEl: document.createElement('div'),
-      _toolbarOpened: false,
-      ...overrides,
-    };
-  };
-
-  let mockEditor;
-
-  const mockNode = {
-    attrs: {
-      index: '0',
-      value: 'Selected Option',
-      error: false,
-    },
-    nodeSize: 1,
-  };
-
-  const mockOptions = {
-    respAreaToolbar: jest.fn(() => () => <div data-testid="inline-dropdown-toolbar">Toolbar</div>),
-  };
-
-  const defaultProps = {
-    editor: mockEditor,
-    node: mockNode,
-    getPos: () => 5,
-    options: mockOptions,
-    selected: false,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockCreatePortal.mockClear();
-    mockEditor = buildMockEditor();
-    defaultProps.editor = mockEditor;
-    Object.defineProperty(document.body, 'getBoundingClientRect', {
-      value: jest.fn(() => ({ top: 0, left: 0 })),
-      configurable: true,
-    });
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders NodeViewWrapper', () => {
-    const { getByTestId } = render(<InlineDropdown {...defaultProps} />);
-    expect(getByTestId('node-view-wrapper')).toBeInTheDocument();
-  });
-
-  it('displays selected value', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const valueDiv = container.querySelector('div[style*="border"]');
-    expect(valueDiv).toBeInTheDocument();
-  });
-
-  it('renders math inside the value control on mount', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const valueDiv = container.querySelector('div[style*="border"]');
-
-    expect(renderMath).toHaveBeenCalledWith(valueDiv);
-  });
-
-  it('re-renders math when the value changes', () => {
-    const updatedNode = {
-      ...mockNode,
-      attrs: {
-        ...mockNode.attrs,
-        value: '<span>Updated math</span>',
-      },
-    };
-
-    const { container, rerender } = render(<InlineDropdown {...defaultProps} />);
-
-    renderMath.mockClear();
-
-    rerender(<InlineDropdown {...defaultProps} node={updatedNode} />);
-
-    const valueDiv = container.querySelector('div[style*="border"]');
-    expect(renderMath).toHaveBeenCalledWith(valueDiv);
-  });
-
-  it('uses 2px horizontal margin on the value control and no horizontal margin on the wrapper', () => {
-    const { container, getByTestId } = render(<InlineDropdown {...defaultProps} />);
-    const valueDiv = container.querySelector('div[style*="border"]');
-    expect(valueDiv).toHaveStyle({ margin: '0 2px' });
-    const wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper.getAttribute('style') || '').not.toMatch(/margin/);
-  });
-
-  it('renders chevron icon', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const chevron = container.querySelector('svg');
-    expect(chevron).toBeInTheDocument();
-  });
-
-  it('shows toolbar when selected and only this node is selected', async () => {
-    const { queryByTestId } = render(<InlineDropdown {...defaultProps} selected={true} />);
-    await waitFor(() => {
-      // Toolbar is shown via portal
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-  });
-
-  it('does not show toolbar when not selected', () => {
-    const { queryByTestId } = render(<InlineDropdown {...defaultProps} selected={false} />);
-    expect(queryByTestId('inline-dropdown-toolbar')).not.toBeInTheDocument();
-  });
-
-  it('shows toolbar on click', async () => {
-    const { container, queryByTestId } = render(<InlineDropdown {...defaultProps} />);
-    const dropdown = container.querySelector('div[style*="border"]');
-    if (dropdown) {
-      fireEvent.click(dropdown);
-      await waitFor(() => {
-        expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-      });
-    } else {
-      // If dropdown is not found, just verify the component rendered
-      expect(container).toBeInTheDocument();
-    }
-  });
-
-  it('has correct minimum dimensions', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({ height: '50px' });
-  });
-
-  it('has inline-flex display', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({ display: 'inline-flex' });
-  });
-
-  it('has cursor pointer style', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({ cursor: 'pointer' });
-  });
-
-  it('renders with empty value as nbsp', () => {
-    const emptyNode = { ...mockNode, attrs: { ...mockNode.attrs, value: '' } };
-    const { container } = render(<InlineDropdown {...defaultProps} node={emptyNode} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('calls respAreaToolbar with correct params', () => {
-    render(<InlineDropdown {...defaultProps} />);
-    expect(mockOptions.respAreaToolbar).toHaveBeenCalledWith([mockNode, 5], mockEditor, expect.any(Function));
-  });
-
-  it('closes toolbar on outside click', async () => {
-    const { container, queryByTestId } = render(<InlineDropdown {...defaultProps} selected={true} />);
-    await waitFor(() => {
-      fireEvent.mouseDown(document.body);
-    });
-    // After clicking outside, toolbar should be hidden
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).not.toBeInTheDocument();
-    });
-  });
-
-  it('calls close callback when toolbar closes on outside click', async () => {
-    const onInlineDropdownToolbarClose = jest.fn();
-    const options = {
-      ...mockOptions,
-      onInlineDropdownToolbarClose,
-    };
-
-    const { queryByTestId } = render(<InlineDropdown {...defaultProps} options={options} selected={true} />);
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-
-    fireEvent.mouseDown(document.body);
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).not.toBeInTheDocument();
-    });
-
-    expect(onInlineDropdownToolbarClose).toHaveBeenCalledWith(mockEditor);
-  });
-
-  it('uses the current node when closing on outside click after the node prop changes', async () => {
-    const onToolbarCloseRequest = jest.fn((_tuple, _editor, onConfirm) => onConfirm());
-    const options = {
-      ...mockOptions,
-      onToolbarCloseRequest,
-    };
-    const updatedNode = {
-      attrs: { index: '1', value: 'Updated Option', error: false },
-      nodeSize: 1,
-    };
-
-    const { queryByTestId, rerender } = render(<InlineDropdown {...defaultProps} options={options} selected={true} />);
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-
-    rerender(<InlineDropdown {...defaultProps} options={options} node={updatedNode} selected={true} />);
-
-    fireEvent.mouseDown(document.body);
-
-    await waitFor(() => {
-      expect(onToolbarCloseRequest).toHaveBeenCalledWith(
-        [updatedNode, 5],
-        expect.anything(),
-        expect.any(Function),
-        expect.any(Function),
-      );
-    });
-  });
-
-  it('respects hold state for the current node after the node prop changes', async () => {
-    const updatedNode = {
-      attrs: { index: '1', value: 'Updated Option', error: false },
-      nodeSize: 1,
-    };
-
-    mockEditor._holdInlineDropdownToolbarIndex = '1';
-
-    const { queryByTestId, rerender } = render(<InlineDropdown {...defaultProps} selected={true} />);
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-
-    rerender(<InlineDropdown {...defaultProps} node={updatedNode} selected={true} />);
-
-    fireEvent.mouseDown(document.body);
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-  });
-
-  it('rebinds the outside-click listener when the node prop changes while the toolbar is open', async () => {
-    const addSpy = jest.spyOn(document, 'addEventListener');
-    const removeSpy = jest.spyOn(document, 'removeEventListener');
-    const updatedNode = { ...mockNode, attrs: { ...mockNode.attrs, value: 'Updated Option' } };
-
-    const { rerender } = render(<InlineDropdown {...defaultProps} selected={true} />);
-
-    await waitFor(() => {
-      expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
-    });
-
-    const removeCallsBeforeRerender = removeSpy.mock.calls.filter(([type]) => type === 'mousedown').length;
-
-    rerender(<InlineDropdown {...defaultProps} node={updatedNode} selected={true} />);
-
-    await waitFor(() => {
-      const removeCallsAfterRerender = removeSpy.mock.calls.filter(([type]) => type === 'mousedown').length;
-      expect(removeCallsAfterRerender).toBeGreaterThan(removeCallsBeforeRerender);
-      expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
-    });
-
-    addSpy.mockRestore();
-    removeSpy.mockRestore();
-  });
-
-  it('has correct border styling', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const dropdownDiv = container.querySelector('div[style*="border"]');
-    expect(dropdownDiv).toHaveStyle({ border: '1px solid #C0C3CF' });
-  });
-
-  it('has correct min width', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const dropdownDiv = container.querySelector('div[style*="border"]');
-    expect(dropdownDiv).toHaveStyle({ minWidth: '178px' });
-  });
-
-  it('positions chevron correctly', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const chevron = container.querySelector('svg');
-    // Chevron styling is applied inline, just verify it rendered
-    if (chevron) {
-      expect(chevron).toBeInTheDocument();
-    } else {
-      expect(container).toBeInTheDocument();
-    }
-  });
-
-  it('has ellipsis for overflow text', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const textContainer = container.querySelector('div[style*="overflow"]');
-    expect(textContainer).toHaveStyle({ textOverflow: 'ellipsis', whiteSpace: 'nowrap' });
-  });
-
-  it('portals toolbar into editor container when _tiptapContainerEl is set', async () => {
-    const containerEl = document.createElement('div');
-    const editor = buildMockEditor({ _tiptapContainerEl: containerEl });
-
-    render(<InlineDropdown {...defaultProps} editor={editor} selected={true} />);
-
-    await waitFor(() => {
-      expect(mockCreatePortal).toHaveBeenCalled();
-    });
-
-    expect(mockCreatePortal.mock.calls[0][1]).toBe(containerEl);
-  });
-
-  it('portals toolbar into document.body when _tiptapContainerEl is missing', async () => {
-    const editor = buildMockEditor({ _tiptapContainerEl: undefined });
-
-    render(<InlineDropdown {...defaultProps} editor={editor} selected={true} />);
-
-    await waitFor(() => {
-      expect(mockCreatePortal).toHaveBeenCalled();
-    });
-
-    expect(mockCreatePortal.mock.calls[0][1]).toBe(document.body);
-  });
-
-  it('passes editorCallback to InlineDropdownToolbar', async () => {
-    const mockToolbarComponent = jest.fn(({ editorCallback }) => {
-      editorCallback?.({ instanceId: 'test-instance' });
-      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
-    });
-
-    const mockOptionsWithCallback = {
-      respAreaToolbar: jest.fn(() => mockToolbarComponent),
-    };
-
-    const { queryByTestId } = render(
-      <InlineDropdown {...defaultProps} options={mockOptionsWithCallback} selected={true} />,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-  });
-
-  it('stores toolbar editor instance in ref when editorCallback is called', async () => {
-    let capturedCallback;
-    const mockToolbarComponent = ({ editorCallback }) => {
-      capturedCallback = editorCallback;
-      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
-    };
-
-    const mockOptionsWithCallback = {
-      respAreaToolbar: jest.fn(() => mockToolbarComponent),
-    };
-
-    const { queryByTestId } = render(
-      <InlineDropdown {...defaultProps} options={mockOptionsWithCallback} selected={true} />,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-
-    // Verify callback exists
-    expect(capturedCallback).toBeDefined();
-  });
-
-  it('handles click outside logic with data-toolbar-for attribute', async () => {
-    const editorWithInstanceId = {
-      ...mockEditor,
-      instanceId: 'editor-123',
-      _toolbarOpened: false,
-    };
-
-    // Mock the toolbar callback to set the toolbar editor instance
-    let capturedCallback;
-    const mockToolbarComponent = ({ editorCallback }) => {
-      React.useEffect(() => {
-        capturedCallback = editorCallback;
-        if (editorCallback) {
-          editorCallback({ instanceId: 'editor-123' });
-        }
-      }, [editorCallback]);
-      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
-    };
-
-    const mockOptionsWithCallback = {
-      respAreaToolbar: jest.fn(() => mockToolbarComponent),
-    };
-
-    const { container, queryByTestId } = render(
-      <InlineDropdown
-        {...defaultProps}
-        editor={editorWithInstanceId}
-        options={mockOptionsWithCallback}
-        selected={true}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-
-    // Create an element with data-toolbar-for attribute
-    const otherToolbar = document.createElement('div');
-    otherToolbar.setAttribute('data-toolbar-for', 'editor-456');
-    document.body.appendChild(otherToolbar);
-
-    await waitFor(() => {
-      fireEvent.mouseDown(otherToolbar);
-    });
-
-    // Cleanup
-    document.body.removeChild(otherToolbar);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('does not close when clicking inside same editor toolbar', async () => {
-    const editorWithInstanceId = {
-      ...mockEditor,
-      instanceId: 'editor-123',
-      _toolbarOpened: false,
-    };
-
-    let toolbarEditorInstance;
-    const mockToolbarComponent = ({ editorCallback }) => {
-      React.useEffect(() => {
-        if (editorCallback) {
-          editorCallback({ instanceId: 'editor-123' });
-          toolbarEditorInstance = { instanceId: 'editor-123' };
-        }
-      }, [editorCallback]);
-      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
-    };
-
-    const mockOptionsWithCallback = {
-      respAreaToolbar: jest.fn(() => mockToolbarComponent),
-    };
-
-    render(
-      <InlineDropdown
-        {...defaultProps}
-        editor={editorWithInstanceId}
-        options={mockOptionsWithCallback}
-        selected={true}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(mockOptionsWithCallback.respAreaToolbar).toHaveBeenCalled();
-    });
-  });
-
-  it('checks editor._toolbarOpened in click outside handler', async () => {
-    const editorWithToolbarOpened = buildMockEditor({ _toolbarOpened: true });
-
-    const { queryByTestId } = render(
-      <InlineDropdown {...defaultProps} editor={editorWithToolbarOpened} selected={true} />,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-
-    // When _toolbarOpened is true, clicking outside should not close
-    fireEvent.mouseDown(document.body);
-
-    // Toolbar should still be visible
-    expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-  });
-
-  it('does not close toolbar when clicking the page scrollbar (documentElement)', async () => {
-    const { queryByTestId } = render(<InlineDropdown {...defaultProps} selected={true} />);
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-
-    fireEvent.mouseDown(document.documentElement);
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-  });
-
-  it('renders delete control on portaled custom toolbar when container el is set', async () => {
-    const { findByLabelText } = render(<InlineDropdown {...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(<InlineDropdown {...defaultProps} editor={editor} selected />);
-    expect(await findByTestId('inline-dropdown-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(<InlineDropdown {...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();
-  });
-});