@pie-lib/editable-html-tip-tap 1.1.0-next.6059 → 1.1.1-next.1

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import MediaToolbar from '../media/MediaToolbar';
+
+describe('MediaToolbar', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders Edit Settings text', () => {
+    const { getByText } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
+    expect(getByText('Edit Settings')).toBeInTheDocument();
+  });
+
+  it('renders Remove text', () => {
+    const { getByText } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
+    expect(getByText('Remove')).toBeInTheDocument();
+  });
+
+  it('calls onEdit when Edit Settings is clicked', () => {
+    const onEdit = jest.fn();
+    const { getByText } = render(<MediaToolbar onEdit={onEdit} onRemove={jest.fn()} />);
+    fireEvent.click(getByText('Edit Settings'));
+    expect(onEdit).toHaveBeenCalled();
+  });
+
+  it('calls onRemove when Remove is clicked', () => {
+    const onRemove = jest.fn();
+    const { getByText } = render(<MediaToolbar onEdit={jest.fn()} onRemove={onRemove} />);
+    fireEvent.click(getByText('Remove'));
+    expect(onRemove).toHaveBeenCalled();
+  });
+
+  it('hides Edit Settings when hideEdit is true', () => {
+    const { queryByText } = render(<MediaToolbar hideEdit={true} onEdit={jest.fn()} onRemove={jest.fn()} />);
+    expect(queryByText('Edit Settings')).not.toBeInTheDocument();
+  });
+
+  it('shows Edit Settings when hideEdit is false', () => {
+    const { getByText } = render(<MediaToolbar hideEdit={false} onEdit={jest.fn()} onRemove={jest.fn()} />);
+    expect(getByText('Edit Settings')).toBeInTheDocument();
+  });
+
+  it('applies cursor pointer style', () => {
+    const { getByText } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
+    const editButton = getByText('Edit Settings');
+    expect(editButton).toHaveStyle({ cursor: 'pointer' });
+  });
+
+  it('has border on Edit Settings container', () => {
+    const { getByText } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
+    const editButton = getByText('Edit Settings');
+    expect(editButton).toHaveStyle({ borderWidth: '0 2px 0 0' });
+  });
+
+  it('applies white background', () => {
+    const { container } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
+    const root = container.firstChild;
+    expect(root).toHaveStyle({ background: '#fff' });
+  });
+
+  it('applies box shadow', () => {
+    const { container } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
+    const root = container.firstChild;
+    expect(root).toHaveStyle({ boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' });
+  });
+
+  it('displays inline-flex', () => {
+    const { container } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
+    const root = container.firstChild;
+    expect(root).toHaveStyle({ display: 'inline-flex' });
+  });
+});

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MediaWrapper from '../media/MediaWrapper';
+
+describe('MediaWrapper', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<MediaWrapper>Content</MediaWrapper>);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    const { getByText } = render(
+      <MediaWrapper>
+        <div>Test Content</div>
+      </MediaWrapper>,
+    );
+    expect(getByText('Test Content')).toBeInTheDocument();
+  });
+
+  it('applies default width of 300', () => {
+    const { container } = render(<MediaWrapper>Content</MediaWrapper>);
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveStyle({ width: '300px' });
+  });
+
+  it('applies custom width from props', () => {
+    const { container } = render(<MediaWrapper width={500}>Content</MediaWrapper>);
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveStyle({ width: '500px' });
+  });
+
+  it('applies string width', () => {
+    const { container } = render(<MediaWrapper width="50%">Content</MediaWrapper>);
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveStyle({ width: '50%' });
+  });
+
+  it('applies editor styles when editor prop is true', () => {
+    const { container } = render(<MediaWrapper editor={true}>Content</MediaWrapper>);
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveStyle({ display: 'inline-block', overflow: 'hidden' });
+  });
+
+  it('does not apply editor styles when editor prop is false', () => {
+    const { container } = render(<MediaWrapper editor={false}>Content</MediaWrapper>);
+    const wrapper = container.firstChild;
+    expect(wrapper).not.toHaveStyle({ display: 'inline-block' });
+  });
+
+  it('has relative positioning', () => {
+    const { container } = render(<MediaWrapper>Content</MediaWrapper>);
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveStyle({ position: 'relative' });
+  });
+
+  it('renders multiple children', () => {
+    const { getByText } = render(
+      <MediaWrapper>
+        <div>First</div>
+        <div>Second</div>
+      </MediaWrapper>,
+    );
+    expect(getByText('First')).toBeInTheDocument();
+    expect(getByText('Second')).toBeInTheDocument();
+  });
+
+  it('passes additional props through', () => {
+    const { container } = render(
+      <MediaWrapper data-testid="custom" className="custom-class">
+        Content
+      </MediaWrapper>,
+    );
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveAttribute('data-testid', 'custom');
+  });
+
+  it('renders without children', () => {
+    const { container } = render(<MediaWrapper />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,217 @@
+import React from 'react';
+import { render, fireEvent } 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' })),
+      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();
+  });
+});

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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,149 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { AddRow, RemoveRow, AddColumn, RemoveColumn, 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();
+  });
+});