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

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

@@ -1,250 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import StyledMenuBar from '../MenuBar';
-
-jest.mock('@tiptap/react', () => ({
-  EditorContent: ({ editor }) => <div data-testid="editor-content" />,
-  useEditorState: ({ selector }) => {
-    const mockEditor = {
-      isActive: jest.fn(() => false),
-      can: jest.fn(() => ({
-        chain: jest.fn(() => ({
-          toggleBold: jest.fn(() => ({ run: jest.fn(() => true) })),
-          insertTable: jest.fn(() => ({ run: jest.fn(() => true) })),
-          toggleItalic: jest.fn(() => ({ run: jest.fn(() => true) })),
-          toggleStrike: jest.fn(() => ({ run: jest.fn(() => true) })),
-          toggleCode: jest.fn(() => ({ run: jest.fn(() => true) })),
-          unsetAllMarks: jest.fn(() => ({ run: jest.fn(() => true) })),
-          undo: jest.fn(() => ({ run: jest.fn(() => true) })),
-          redo: jest.fn(() => ({ run: jest.fn(() => true) })),
-        })),
-      })),
-      getAttributes: jest.fn(() => ({ border: '1' })),
-      commandManager: {},
-      isFocused: true,
-      state: {
-        selection: {},
-      },
-    };
-
-    return selector({ editor: mockEditor });
-  },
-}));
-
-jest.mock('prosemirror-state', () => ({
-  NodeSelection: jest.fn(),
-}));
-
-jest.mock('../CharacterPicker', () => ({
-  CharacterIcon: ({ letter }) => <div data-testid="character-icon">{letter}</div>,
-  CharacterPicker: ({ onClose }) => (
-    <div data-testid="character-picker">
-      <button onClick={onClose} data-testid="close-picker">
-        Close
-      </button>
-    </div>
-  ),
-}));
-
-jest.mock('../common/done-button', () => ({
-  DoneButton: ({ onClick }) => (
-    <button onClick={onClick} data-testid="done-button">
-      Done
-    </button>
-  ),
-}));
-
-describe('StyledMenuBar', () => {
-  const mockEditor = {
-    chain: jest.fn(() => ({
-      focus: jest.fn(() => ({
-        insertTable: jest.fn(() => ({ run: jest.fn() })),
-        toggleBold: jest.fn(() => ({ run: jest.fn() })),
-        toggleItalic: jest.fn(() => ({ run: jest.fn() })),
-        toggleStrike: jest.fn(() => ({ run: jest.fn() })),
-        toggleCode: jest.fn(() => ({ run: jest.fn() })),
-        toggleUnderline: jest.fn(() => ({ run: jest.fn() })),
-        toggleSubscript: jest.fn(() => ({ run: jest.fn() })),
-        toggleSuperscript: jest.fn(() => ({ run: jest.fn() })),
-        setImageUploadNode: jest.fn(() => ({ run: jest.fn() })),
-        insertMedia: jest.fn(() => ({ run: jest.fn() })),
-        toggleHeading: jest.fn(() => ({ run: jest.fn() })),
-        insertMath: jest.fn(() => ({ run: jest.fn() })),
-        toggleBulletList: jest.fn(() => ({ run: jest.fn() })),
-        toggleOrderedList: jest.fn(() => ({ run: jest.fn() })),
-        undo: jest.fn(() => ({ run: jest.fn() })),
-        redo: jest.fn(() => ({ run: jest.fn() })),
-        addRowAfter: jest.fn(() => ({ run: jest.fn() })),
-        deleteRow: jest.fn(() => ({ run: jest.fn() })),
-        addColumnAfter: jest.fn(() => ({ run: jest.fn() })),
-        deleteColumn: jest.fn(() => ({ run: jest.fn() })),
-        deleteTable: jest.fn(() => ({ run: jest.fn() })),
-        insertResponseArea: jest.fn(() => ({ run: jest.fn() })),
-      })),
-    })),
-    can: jest.fn(() => ({
-      chain: jest.fn(() => ({
-        toggleBold: jest.fn(() => ({ run: jest.fn(() => true) })),
-        insertTable: jest.fn(() => ({ run: jest.fn(() => true) })),
-        undo: jest.fn(() => ({ run: jest.fn(() => true) })),
-        redo: jest.fn(() => ({ run: jest.fn(() => true) })),
-      })),
-    })),
-    isActive: jest.fn((name) => {
-      if (name === 'bold') return true;
-      if (name === 'italic') return false;
-      return false;
-    }),
-    getAttributes: jest.fn(() => ({ border: '1' })),
-    getHTML: jest.fn(() => '<p>Test</p>'),
-    commands: {
-      blur: jest.fn(),
-      openCSSClassDialog: jest.fn(),
-      updateAttributes: jest.fn(),
-    },
-    isFocused: true,
-    state: {
-      selection: {},
-    },
-    _toolbarOpened: false,
-  };
-
-  const defaultProps = {
-    editor: mockEditor,
-    activePlugins: ['bold', 'italic', 'underline', 'table'],
-    toolbarOpts: {},
-    responseAreaProps: { type: 'explicit-constructed-response' },
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(<StyledMenuBar {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders toolbar with buttons', () => {
-    const { container } = render(<StyledMenuBar {...defaultProps} />);
-    const buttons = container.querySelectorAll('button');
-    expect(buttons.length).toBeGreaterThan(0);
-  });
-
-  it('shows bold button when bold plugin is active', () => {
-    const { container } = render(<StyledMenuBar {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('hides buttons when isTable is true', () => {
-    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table']} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('shows table buttons when in table context', () => {
-    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table']} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('handles button clicks', () => {
-    const { container } = render(<StyledMenuBar {...defaultProps} />);
-    const button = container.querySelector('button');
-    if (button) {
-      fireEvent.click(button);
-    }
-    expect(container).toBeInTheDocument();
-  });
-
-  it('shows done button when toolbarOpts.showDone is true', () => {
-    const { getByTestId } = render(
-      <StyledMenuBar {...defaultProps} toolbarOpts={{ showDone: true }} onChange={jest.fn()} />,
-    );
-    expect(getByTestId('done-button')).toBeInTheDocument();
-  });
-
-  it('does not show done button when toolbarOpts.showDone is false', () => {
-    const { queryByTestId } = render(<StyledMenuBar {...defaultProps} toolbarOpts={{ showDone: false }} />);
-    expect(queryByTestId('done-button')).not.toBeInTheDocument();
-  });
-
-  it('handles done button click', () => {
-    const onChange = jest.fn();
-    const { getByTestId } = render(
-      <StyledMenuBar {...defaultProps} toolbarOpts={{ showDone: true }} onChange={onChange} />,
-    );
-    fireEvent.click(getByTestId('done-button'));
-    expect(onChange).toHaveBeenCalledWith('<p>Test</p>');
-    expect(mockEditor.commands.blur).toHaveBeenCalled();
-  });
-
-  it('applies custom minWidth from toolbarOpts', () => {
-    const { container } = render(<StyledMenuBar {...defaultProps} toolbarOpts={{ minWidth: 500 }} />);
-    const toolbar = container.querySelector('.toolbar');
-    expect(toolbar).toHaveStyle({ minWidth: '500px' });
-  });
-
-  it('applies hidden class when toolbarOpts.isHidden is true', () => {
-    const { container } = render(<StyledMenuBar {...defaultProps} toolbarOpts={{ isHidden: true }} />);
-    const toolbar = container.querySelector('.toolbar');
-    expect(toolbar).toHaveClass('hidden');
-  });
-
-  it('shows character picker when language character button is clicked', () => {
-    const { container, queryByTestId } = render(
-      <StyledMenuBar {...defaultProps} activePlugins={['languageCharacters']} />,
-    );
-    expect(queryByTestId('character-picker')).not.toBeInTheDocument();
-  });
-
-  it('applies focused class when editor is focused', () => {
-    const { container } = render(<StyledMenuBar {...defaultProps} toolbarOpts={{ alwaysVisible: false }} />);
-    const toolbar = container.querySelector('.toolbar');
-    expect(toolbar).toHaveClass('focused');
-  });
-
-  it('shows response area button when responseArea plugin is active', () => {
-    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['responseArea']} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('prevents default on mouse down', () => {
-    const { container } = render(<StyledMenuBar {...defaultProps} />);
-    const toolbar = container.querySelector('.toolbar');
-    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
-    const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
-    toolbar?.dispatchEvent(event);
-    expect(preventDefaultSpy).toHaveBeenCalled();
-  });
-
-  it('calculates hasTextSelectionInTable correctly when selection is not empty in table', () => {
-    // This test verifies the hasTextSelectionInTable state computation
-    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table', 'bold', 'italic']} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('hides table manipulation buttons when text is selected in table', () => {
-    // When hasTextSelectionInTable is true, table row/column buttons should be hidden
-    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table']} />);
-    // The component should render but table manipulation buttons should be conditional
-    expect(container).toBeInTheDocument();
-  });
-
-  it('shows table manipulation buttons when no text is selected in table', () => {
-    // When hasTextSelectionInTable is false, table row/column buttons should be visible
-    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table']} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('shows text formatting buttons regardless of table state', () => {
-    // Bold, italic, etc. should always be visible when their plugin is active
-    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['bold', 'italic', 'underline']} />);
-    const buttons = container.querySelectorAll('button');
-    expect(buttons.length).toBeGreaterThan(0);
-  });
-
-  it('does not hide text formatting buttons when in table', () => {
-    // Verify that the removal of "|| state.isTable" condition works correctly
-    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table', 'bold', 'italic']} />);
-    expect(container).toBeInTheDocument();
-  });
-});

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

@@ -1,122 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Chevron, GripIcon, ToolbarIcon } from '../icons/RespArea';
-
-describe('Chevron', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<Chevron />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('rotates 0 degrees for right direction (default)', () => {
-    const { container } = render(<Chevron direction="right" />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveStyle({ transform: 'rotate(0deg)' });
-  });
-
-  it('rotates 90 degrees for down direction', () => {
-    const { container } = render(<Chevron direction="down" />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveStyle({ transform: 'rotate(90deg)' });
-  });
-
-  it('rotates -90 degrees for up direction', () => {
-    const { container } = render(<Chevron direction="up" />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveStyle({ transform: 'rotate(-90deg)' });
-  });
-
-  it('rotates 180 degrees for left direction', () => {
-    const { container } = render(<Chevron direction="left" />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveStyle({ transform: 'rotate(180deg)' });
-  });
-
-  it('applies custom style prop', () => {
-    const customStyle = { color: 'red', fontSize: '20px' };
-    const { container } = render(<Chevron style={customStyle} />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveStyle({ color: 'red', fontSize: '20px' });
-  });
-
-  it('defaults to 0 rotation when no direction specified', () => {
-    const { container } = render(<Chevron />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveStyle({ transform: 'rotate(0deg)' });
-  });
-});
-
-describe('GripIcon', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<GripIcon />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders two MoreVert icons', () => {
-    const { container } = render(<GripIcon />);
-    const moreVertIcons = container.querySelectorAll('svg');
-    expect(moreVertIcons.length).toBe(2);
-  });
-
-  it('applies custom style prop', () => {
-    const customStyle = { color: 'blue' };
-    const { container } = render(<GripIcon style={customStyle} />);
-    const span = container.querySelector('span');
-    expect(span).toHaveStyle({ color: 'blue' });
-  });
-
-  it('applies negative margin to first icon', () => {
-    const { container } = render(<GripIcon />);
-    const firstIcon = container.querySelector('svg');
-    expect(firstIcon).toHaveStyle({ margin: '0 -16px' });
-  });
-});
-
-describe('ToolbarIcon', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<ToolbarIcon />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders "+ Response Area" text', () => {
-    const { getByText } = render(<ToolbarIcon />);
-    expect(getByText('+ Response Area')).toBeInTheDocument();
-  });
-
-  it('applies correct font family', () => {
-    const { getByText } = render(<ToolbarIcon />);
-    const element = getByText('+ Response Area');
-    // Font family is applied via styled component, just verify text renders
-    expect(element).toBeInTheDocument();
-  });
-
-  it('applies bold font weight', () => {
-    const { getByText } = render(<ToolbarIcon />);
-    const element = getByText('+ Response Area');
-    expect(element).toHaveStyle({ fontWeight: 'bold' });
-  });
-
-  it('has correct dimensions', () => {
-    const { getByText } = render(<ToolbarIcon />);
-    const element = getByText('+ Response Area');
-    expect(element).toHaveStyle({ width: '110px', height: '28px' });
-  });
-
-  it('has relative positioning', () => {
-    const { getByText } = render(<ToolbarIcon />);
-    const element = getByText('+ Response Area');
-    expect(element).toHaveStyle({ position: 'relative' });
-  });
-
-  it('has nowrap white space', () => {
-    const { getByText } = render(<ToolbarIcon />);
-    const element = getByText('+ Response Area');
-    expect(element).toHaveStyle({ whiteSpace: 'nowrap' });
-  });
-
-  it('has top offset', () => {
-    const { getByText } = render(<ToolbarIcon />);
-    const element = getByText('+ Response Area');
-    expect(element).toHaveStyle({ top: '7px' });
-  });
-});

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

@@ -1,149 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { AddColumn, AddRow, RemoveColumn, RemoveRow, RemoveTable } from '../icons/TableIcons';
-
-describe('AddRow', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<AddRow />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders SVG', () => {
-    const { container } = render(<AddRow />);
-    const svg = container.querySelector('svg');
-    expect(svg).toBeInTheDocument();
-  });
-
-  it('has correct viewBox', () => {
-    const { container } = render(<AddRow />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
-  });
-
-  it('has correct dimensions', () => {
-    const { container } = render(<AddRow />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('width', '24');
-    expect(svg).toHaveAttribute('height', '24');
-  });
-
-  it('contains path element', () => {
-    const { container } = render(<AddRow />);
-    const path = container.querySelector('path');
-    expect(path).toBeInTheDocument();
-  });
-});
-
-describe('RemoveRow', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<RemoveRow />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders SVG', () => {
-    const { container } = render(<RemoveRow />);
-    const svg = container.querySelector('svg');
-    expect(svg).toBeInTheDocument();
-  });
-
-  it('has correct viewBox', () => {
-    const { container } = render(<RemoveRow />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
-  });
-
-  it('contains path element', () => {
-    const { container } = render(<RemoveRow />);
-    const path = container.querySelector('path');
-    expect(path).toBeInTheDocument();
-  });
-});
-
-describe('AddColumn', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<AddColumn />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders SVG', () => {
-    const { container } = render(<AddColumn />);
-    const svg = container.querySelector('svg');
-    expect(svg).toBeInTheDocument();
-  });
-
-  it('has correct viewBox', () => {
-    const { container } = render(<AddColumn />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
-  });
-
-  it('has correct dimensions', () => {
-    const { container } = render(<AddColumn />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('width', '24');
-    expect(svg).toHaveAttribute('height', '24');
-  });
-
-  it('contains path element', () => {
-    const { container } = render(<AddColumn />);
-    const path = container.querySelector('path');
-    expect(path).toBeInTheDocument();
-  });
-});
-
-describe('RemoveColumn', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<RemoveColumn />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders SVG', () => {
-    const { container } = render(<RemoveColumn />);
-    const svg = container.querySelector('svg');
-    expect(svg).toBeInTheDocument();
-  });
-
-  it('has correct viewBox', () => {
-    const { container } = render(<RemoveColumn />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
-  });
-
-  it('contains path element', () => {
-    const { container } = render(<RemoveColumn />);
-    const path = container.querySelector('path');
-    expect(path).toBeInTheDocument();
-  });
-});
-
-describe('RemoveTable', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<RemoveTable />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders SVG', () => {
-    const { container } = render(<RemoveTable />);
-    const svg = container.querySelector('svg');
-    expect(svg).toBeInTheDocument();
-  });
-
-  it('has correct viewBox', () => {
-    const { container } = render(<RemoveTable />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
-  });
-
-  it('has correct dimensions', () => {
-    const { container } = render(<RemoveTable />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('width', '24');
-    expect(svg).toHaveAttribute('height', '24');
-  });
-
-  it('contains path element', () => {
-    const { container } = render(<RemoveTable />);
-    const path = container.querySelector('path');
-    expect(path).toBeInTheDocument();
-  });
-});

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

@@ -1,167 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import TextAlignIcon, { AlignCenter, AlignJustify, AlignLeft, AlignRight } from '../icons/TextAlign';
-
-jest.mock('@mui/material/ListItem', () => ({
-  __esModule: true,
-  default: ({ children, onClick, value, ...props }) => (
-    <div {...props} value={value} onClick={onClick} role="listitem">
-      {children}
-    </div>
-  ),
-}));
-
-describe('AlignLeft', () => {
-  it('renders SVG', () => {
-    const { container } = render(<AlignLeft />);
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('has correct viewBox', () => {
-    const { container } = render(<AlignLeft />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('viewBox', '0 0 66 66');
-  });
-});
-
-describe('AlignRight', () => {
-  it('renders SVG', () => {
-    const { container } = render(<AlignRight />);
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('has correct viewBox', () => {
-    const { container } = render(<AlignRight />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('viewBox', '0 0 66 66');
-  });
-});
-
-describe('AlignCenter', () => {
-  it('renders SVG', () => {
-    const { container } = render(<AlignCenter />);
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('has correct viewBox', () => {
-    const { container } = render(<AlignCenter />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('viewBox', '0 0 66 66');
-  });
-});
-
-describe('AlignJustify', () => {
-  it('renders SVG', () => {
-    const { container } = render(<AlignJustify />);
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('has correct viewBox', () => {
-    const { container } = render(<AlignJustify />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('viewBox', '0 0 66 66');
-  });
-});
-
-describe('TextAlignIcon', () => {
-  const mockEditor = {
-    isActive: jest.fn(),
-    commands: {
-      setTextAlign: jest.fn(),
-    },
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(<TextAlignIcon editor={mockEditor} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('shows AlignLeft icon by default', () => {
-    mockEditor.isActive.mockReturnValue(false);
-    const { container } = render(<TextAlignIcon editor={mockEditor} />);
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('shows AlignRight icon when right alignment is active', () => {
-    mockEditor.isActive.mockImplementation((options) => options?.textAlign === 'right');
-    const { container } = render(<TextAlignIcon editor={mockEditor} />);
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('shows AlignCenter icon when center alignment is active', () => {
-    mockEditor.isActive.mockImplementation((options) => options?.textAlign === 'center');
-    const { container } = render(<TextAlignIcon editor={mockEditor} />);
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('shows AlignJustify icon when justify alignment is active', () => {
-    mockEditor.isActive.mockImplementation((options) => options?.textAlign === 'justify');
-    const { container } = render(<TextAlignIcon editor={mockEditor} />);
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('toggles dropdown on click', () => {
-    const { container } = render(<TextAlignIcon editor={mockEditor} />);
-    const button = container.querySelector('div[style*="display: flex"]');
-    fireEvent.click(button);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('applies alignment when list item is clicked', () => {
-    const { container, getByLabelText } = render(<TextAlignIcon editor={mockEditor} />);
-    const button = container.querySelector('div[style*="display: flex"]');
-    fireEvent.click(button);
-
-    const leftButton = getByLabelText('Align text left');
-    fireEvent.click(leftButton);
-    expect(mockEditor.commands.setTextAlign).toHaveBeenCalledWith('left');
-  });
-
-  it('prevents default and stops propagation on mouse down', () => {
-    const { container } = render(<TextAlignIcon editor={mockEditor} />);
-    const button = container.querySelector('div[style*="display"]');
-    if (button) {
-      fireEvent.mouseDown(button);
-      // Just verify the event handler didn't throw
-      expect(container).toBeInTheDocument();
-    } else {
-      expect(container).toBeInTheDocument();
-    }
-  });
-
-  it('shows dropdown arrow', () => {
-    const { container } = render(<TextAlignIcon editor={mockEditor} />);
-    const span = container.querySelector('span[style*="marginLeft"]');
-    if (span) {
-      expect(span).toBeInTheDocument();
-    } else {
-      // Arrow might be rendered differently in test environment
-      expect(container).toBeInTheDocument();
-    }
-  });
-
-  it('closes dropdown after selecting alignment', () => {
-    const { container, getByLabelText } = render(<TextAlignIcon editor={mockEditor} />);
-    const button = container.querySelector('div[style*="display: flex"]');
-    fireEvent.click(button);
-
-    const centerButton = getByLabelText('Align text center');
-    fireEvent.click(centerButton);
-    expect(mockEditor.commands.setTextAlign).toHaveBeenCalledWith('center');
-  });
-
-  it('renders all alignment options in dropdown', () => {
-    const { container, getByLabelText } = render(<TextAlignIcon editor={mockEditor} />);
-    const button = container.querySelector('div[style*="display: flex"]');
-    fireEvent.click(button);
-
-    expect(getByLabelText('Align text left')).toBeInTheDocument();
-    expect(getByLabelText('Align text center')).toBeInTheDocument();
-    expect(getByLabelText('Align text right')).toBeInTheDocument();
-    expect(getByLabelText('Justify text')).toBeInTheDocument();
-  });
-});