@akinon/ui-editor 1.0.0

package/dist/cjs/tiptap/components/__tests__/table-bubble-menu.test.js

@@ -0,0 +1,284 @@
+import '@testing-library/jest-dom';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { TableBubbleMenu } from '../table-bubble-menu';
+vi.mock('../../../i18n', () => ({
+    i18n: {
+        t: (key) => key
+    }
+}));
+vi.mock('@akinon/ui-button', () => ({
+    Button: ({ icon, onClick, disabled, className, tooltip, children }) => (React.createElement("button", { "data-testid": icon ? `ui-button-${icon}` : 'ui-button', onClick: onClick, disabled: disabled, className: className, title: tooltip },
+        icon,
+        children))
+}));
+vi.mock('@akinon/ui-input', () => ({
+    Input: ({ value, onChange, onKeyDown, placeholder, className }) => (React.createElement("input", { "data-testid": "ui-input", value: value, onChange: onChange, onKeyDown: onKeyDown, placeholder: placeholder, className: className }))
+}));
+vi.mock('@akinon/ui-select', () => ({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Select: ({ value, onChange, options, rootClassName }) => (React.createElement("select", { "data-testid": "ui-select", value: value, onChange: e => onChange(e.target.value), className: rootClassName }, options.map((opt) => (React.createElement("option", { key: opt.value, value: opt.value }, opt.label)))))
+}));
+vi.mock('@akinon/ui-color-picker', () => ({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ColorPicker: ({ value, onChange }) => (React.createElement("input", { "data-testid": "ui-color-picker", type: "color", value: !value || value === 'transparent' || typeof value !== 'string'
+            ? '#ffffff'
+            : value, onChange: e => {
+            const val = e.target.value;
+            if (value === 'transparent' || value === '#ffffff') {
+                onChange(val);
+            }
+            else if (val === '#000001') {
+                onChange({});
+            }
+            else {
+                onChange({ toHexString: () => val });
+            }
+        } }))
+}));
+vi.mock('@akinon/ui-theme', () => ({
+    useToken: () => ({
+        token: { boxShadowSecondary: '0 2px 8px rgba(0,0,0,0.15)' },
+        hashId: 'hash-id'
+    })
+}));
+vi.mock('@ant-design/cssinjs', () => ({
+    useStyleRegister: vi.fn((_config, cb) => {
+        cb();
+        return (node) => node;
+    })
+}));
+export let capturedShouldShow;
+vi.mock('@tiptap/react/menus', () => ({
+    BubbleMenu: ({ children, shouldShow }) => {
+        capturedShouldShow = shouldShow;
+        return React.createElement("div", { "data-testid": "table-bubble-menu" }, children);
+    }
+}));
+describe('TableBubbleMenu', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let mockEditor;
+    beforeEach(() => {
+        mockEditor = {
+            isActive: vi.fn(),
+            getAttributes: vi.fn(() => ({})),
+            chain: vi.fn(() => mockEditor),
+            focus: vi.fn(() => mockEditor),
+            addColumnBefore: vi.fn(() => mockEditor),
+            addColumnAfter: vi.fn(() => mockEditor),
+            deleteColumn: vi.fn(() => mockEditor),
+            addRowBefore: vi.fn(() => mockEditor),
+            addRowAfter: vi.fn(() => mockEditor),
+            deleteRow: vi.fn(() => mockEditor),
+            mergeCells: vi.fn(() => mockEditor),
+            splitCell: vi.fn(() => mockEditor),
+            deleteTable: vi.fn(() => mockEditor),
+            updateCellAttributes: vi.fn(() => mockEditor),
+            updateHeaderAttributes: vi.fn(() => mockEditor),
+            run: vi.fn(),
+            can: vi.fn(() => ({
+                mergeCells: () => true,
+                splitCell: () => true
+            })),
+            on: vi.fn(),
+            off: vi.fn()
+        };
+    });
+    const renderComponent = (editor = mockEditor) => {
+        return render(React.createElement(ConfigProvider, null,
+            React.createElement(TableBubbleMenu, { editor: editor })));
+    };
+    it('should return null if editor is not provided', () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const { container } = renderComponent(null);
+        expect(container.firstChild).toBeNull();
+    });
+    it('should handle missing themes and colors', () => {
+        render(React.createElement(ConfigProvider, { theme: {} },
+            React.createElement(TableBubbleMenu, { editor: mockEditor })));
+        expect(screen.getByTestId('table-bubble-menu')).toBeInTheDocument();
+    });
+    it('should handle partial theme colors', () => {
+        render(React.createElement(ConfigProvider, { theme: {
+                colors: {
+                    ebonyClay: { '500': '#000', '550': '#111' },
+                    neutral: { '50': '#fff', '400': '#ccc' }
+                }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            } },
+            React.createElement(TableBubbleMenu, { editor: mockEditor })));
+        expect(screen.getByTestId('table-bubble-menu')).toBeInTheDocument();
+    });
+    it('should render table action buttons', () => {
+        renderComponent();
+        expect(screen.getByTestId('ui-button-add-column-before')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-add-column-after')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-delete-column')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-add-row-before')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-add-row-after')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-delete-row')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-format-merge')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-format-split-cells')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-settings')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-bin')).toBeInTheDocument();
+    });
+    it('should handle table actions', () => {
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-add-column-before'));
+        expect(mockEditor.addColumnBefore).toHaveBeenCalled();
+        fireEvent.click(screen.getByTestId('ui-button-add-column-after'));
+        expect(mockEditor.addColumnAfter).toHaveBeenCalled();
+        fireEvent.click(screen.getByTestId('ui-button-delete-column'));
+        expect(mockEditor.deleteColumn).toHaveBeenCalled();
+        fireEvent.click(screen.getByTestId('ui-button-add-row-before'));
+        expect(mockEditor.addRowBefore).toHaveBeenCalled();
+        fireEvent.click(screen.getByTestId('ui-button-add-row-after'));
+        expect(mockEditor.addRowAfter).toHaveBeenCalled();
+        fireEvent.click(screen.getByTestId('ui-button-delete-row'));
+        expect(mockEditor.deleteRow).toHaveBeenCalled();
+        fireEvent.click(screen.getByTestId('ui-button-format-merge'));
+        expect(mockEditor.mergeCells).toHaveBeenCalled();
+        fireEvent.click(screen.getByTestId('ui-button-format-split-cells'));
+        expect(mockEditor.splitCell).toHaveBeenCalled();
+        fireEvent.click(screen.getByTestId('ui-button-bin'));
+        expect(mockEditor.deleteTable).toHaveBeenCalled();
+    });
+    it('should toggle cell styles when settings button is clicked', () => {
+        renderComponent();
+        expect(screen.queryByTestId('ui-select')).not.toBeInTheDocument();
+        fireEvent.click(screen.getByTestId('ui-button-settings'));
+        expect(screen.getByTestId('ui-select')).toBeInTheDocument();
+        expect(screen.getAllByTestId('ui-color-picker')).toHaveLength(2);
+        expect(screen.getByTestId('ui-input')).toBeInTheDocument();
+        fireEvent.click(screen.getByTestId('ui-button-settings'));
+        expect(screen.queryByTestId('ui-select')).not.toBeInTheDocument();
+    });
+    it('should cancel cell styles editing', () => {
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-settings'));
+        expect(screen.getByTestId('ui-select')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('editor.common.cancel'));
+        expect(screen.queryByTestId('ui-select')).not.toBeInTheDocument();
+    });
+    it('should apply cell styles to regular cell', () => {
+        mockEditor.isActive.mockImplementation((name) => name === 'tableCell');
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-settings'));
+        // Change some values
+        fireEvent.change(screen.getByTestId('ui-input'), {
+            target: { value: '2px' }
+        });
+        // Change border style
+        fireEvent.change(screen.getByTestId('ui-select'), {
+            target: { value: 'dashed' }
+        });
+        fireEvent.change(screen.getAllByTestId('ui-color-picker')[0], {
+            target: { value: '#ff0000' }
+        });
+        fireEvent.click(screen.getByText('editor.common.apply'));
+        expect(mockEditor.updateCellAttributes).toHaveBeenCalledWith({
+            borderColor: '#ff0000',
+            borderWidth: '2px',
+            borderStyle: 'dashed'
+        });
+    });
+    it('should apply cell styles to header cell', () => {
+        mockEditor.isActive.mockImplementation((name) => name === 'tableHeader');
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-settings'));
+        fireEvent.change(screen.getAllByTestId('ui-color-picker')[1], {
+            target: { value: '#00ff00' }
+        });
+        fireEvent.click(screen.getByText('editor.common.apply'));
+        expect(mockEditor.updateHeaderAttributes).toHaveBeenCalledWith({
+            backgroundColor: '#00ff00'
+        });
+    });
+    it('should update cell styles state when selection updates', () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let selectionUpdateHandler;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        mockEditor.on.mockImplementation((name, handler) => {
+            if (name === 'selectionUpdate') {
+                selectionUpdateHandler = handler;
+            }
+        });
+        mockEditor.isActive.mockImplementation((name) => name === 'tableCell');
+        mockEditor.getAttributes.mockReturnValue({
+            borderColor: '#111111',
+            borderWidth: '3px',
+            borderStyle: 'dotted',
+            backgroundColor: '#222222'
+        });
+        renderComponent();
+        act(() => {
+            selectionUpdateHandler();
+        });
+        fireEvent.click(screen.getByTestId('ui-button-settings'));
+        expect(screen.getByTestId('ui-input')).toHaveValue('3px');
+        expect(screen.getByTestId('ui-select')).toHaveValue('dotted');
+        expect(screen.getAllByTestId('ui-color-picker')[0]).toHaveValue('#111111');
+        expect(screen.getAllByTestId('ui-color-picker')[1]).toHaveValue('#222222');
+    });
+    it('should cover getColorString branches', () => {
+        mockEditor.isActive.mockImplementation((name) => name === 'tableCell');
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-settings'));
+        const colorPickers = screen.getAllByTestId('ui-color-picker');
+        fireEvent.change(colorPickers[1], { target: { value: '#123456' } });
+        fireEvent.change(colorPickers[0], { target: { value: '#654321' } });
+        fireEvent.change(colorPickers[0], { target: { value: '#000001' } });
+        fireEvent.click(screen.getByText('editor.common.apply'));
+        expect(mockEditor.updateCellAttributes).toHaveBeenCalledWith(expect.objectContaining({
+            backgroundColor: '#123456',
+            borderColor: '#000000'
+        }));
+    });
+    it('should handle selection update for cell with no attributes', () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let selectionUpdateHandler;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        mockEditor.on.mockImplementation((name, handler) => {
+            if (name === 'selectionUpdate') {
+                selectionUpdateHandler = handler;
+            }
+        });
+        mockEditor.isActive.mockImplementation((name) => name === 'tableCell');
+        mockEditor.getAttributes.mockReturnValue({});
+        renderComponent();
+        act(() => {
+            selectionUpdateHandler();
+        });
+        fireEvent.click(screen.getByTestId('ui-button-settings'));
+        expect(screen.getByTestId('ui-input')).toHaveValue('1px');
+    });
+    it('should update cell styles when tableHeader is active', () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let selectionUpdateHandler;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        mockEditor.on.mockImplementation((name, handler) => {
+            if (name === 'selectionUpdate') {
+                selectionUpdateHandler = handler;
+            }
+        });
+        mockEditor.isActive.mockImplementation((name) => name === 'tableHeader');
+        mockEditor.getAttributes.mockReturnValue({
+            borderColor: '#333333'
+        });
+        renderComponent();
+        act(() => {
+            selectionUpdateHandler();
+        });
+        fireEvent.click(screen.getByTestId('ui-button-settings'));
+        expect(screen.getAllByTestId('ui-color-picker')[0]).toHaveValue('#333333');
+    });
+    it('should return correct value from shouldShow', () => {
+        renderComponent();
+        mockEditor.isActive.mockImplementation((name) => name === 'table');
+        expect(capturedShouldShow({ editor: mockEditor })).toBe(true);
+        mockEditor.isActive.mockImplementation((name) => name === 'paragraph');
+        expect(capturedShouldShow({ editor: mockEditor })).toBe(false);
+    });
+});