@akinon/ui-editor 1.0.0

package/dist/esm/tiptap/components/__tests__/format-bubble-menu.test.js

@@ -0,0 +1,311 @@
+import '@testing-library/jest-dom';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { getMarkRange, isTextSelection } from '@tiptap/core';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { FormatBubbleMenu } from '../format-bubble-menu';
+vi.mock('@akinon/akilocale/react', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('@akinon/ui-button', () => ({
+    Button: ({ icon, onClick, disabled, className, tooltip }) => (React.createElement("button", { "data-testid": `ui-button-${icon}`, onClick: onClick, disabled: disabled, className: className, title: tooltip }, icon))
+}));
+vi.mock('@akinon/ui-input', () => ({
+    Input: ({ value, onChange, onKeyDown, placeholder }) => (React.createElement("input", { "data-testid": "ui-input", value: value, onChange: onChange, onKeyDown: onKeyDown, placeholder: placeholder }))
+}));
+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": "bubble-menu" }, children);
+    }
+}));
+vi.mock('@tiptap/core', () => ({
+    getMarkRange: vi.fn(),
+    isTextSelection: vi.fn()
+}));
+describe('FormatBubbleMenu', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let mockEditor;
+    beforeEach(() => {
+        mockEditor = {
+            isActive: vi.fn(),
+            getAttributes: vi.fn(() => ({})),
+            chain: vi.fn(() => mockEditor.chainApi),
+            on: vi.fn(),
+            off: vi.fn(),
+            isFocused: true,
+            schema: {
+                marks: {
+                    link: {}
+                }
+            },
+            state: {
+                selection: {
+                    from: 0,
+                    to: 10,
+                    $from: {}
+                },
+                schema: {
+                    marks: {
+                        link: {}
+                    }
+                }
+            },
+            chainApi: {
+                focus: vi.fn(function () {
+                    return this;
+                }),
+                toggleMark: vi.fn(function () {
+                    return this;
+                }),
+                unsetAllMarks: vi.fn(function () {
+                    return this;
+                }),
+                extendMarkRange: vi.fn(function () {
+                    return this;
+                }),
+                setMark: vi.fn(function () {
+                    return this;
+                }),
+                unsetMark: vi.fn(function () {
+                    return this;
+                }),
+                setTextSelection: vi.fn(function () {
+                    return this;
+                }),
+                run: vi.fn(function () {
+                    return this;
+                })
+            }
+        };
+        vi.mocked(isTextSelection).mockReturnValue(true);
+        vi.mocked(getMarkRange).mockReturnValue(undefined);
+    });
+    const renderComponent = (editor = mockEditor) => {
+        return render(React.createElement(ConfigProvider, null,
+            React.createElement(FormatBubbleMenu, { 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 theme colors', () => {
+        render(React.createElement(ConfigProvider, { theme: {} },
+            React.createElement(FormatBubbleMenu, { editor: mockEditor })));
+        expect(screen.getByTestId('bubble-menu')).toBeInTheDocument();
+    });
+    it('should handle partial theme colors', () => {
+        render(React.createElement(ConfigProvider, { theme: {
+                colors: {
+                    ebonyClay: { '500': '#000' },
+                    neutral: { '50': '#fff' }
+                }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            } },
+            React.createElement(FormatBubbleMenu, { editor: mockEditor })));
+        expect(screen.getByTestId('bubble-menu')).toBeInTheDocument();
+    });
+    it('should render formatting buttons', () => {
+        renderComponent();
+        expect(screen.getByTestId('ui-button-format-bold')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-format-italic')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-format-strikethrough')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-format-underline')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-format-eraser')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-linked')).toBeInTheDocument();
+    });
+    it('should handle formatting actions', () => {
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-format-bold'));
+        expect(mockEditor.chainApi.toggleMark).toHaveBeenCalledWith('bold');
+        fireEvent.click(screen.getByTestId('ui-button-format-italic'));
+        expect(mockEditor.chainApi.toggleMark).toHaveBeenCalledWith('italic');
+        fireEvent.click(screen.getByTestId('ui-button-format-strikethrough'));
+        expect(mockEditor.chainApi.toggleMark).toHaveBeenCalledWith('strike');
+        fireEvent.click(screen.getByTestId('ui-button-format-underline'));
+        expect(mockEditor.chainApi.toggleMark).toHaveBeenCalledWith('underline');
+        fireEvent.click(screen.getByTestId('ui-button-format-eraser'));
+        expect(mockEditor.chainApi.unsetAllMarks).toHaveBeenCalled();
+    });
+    it('should show link input when link button is clicked', () => {
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-linked'));
+        expect(screen.getByTestId('ui-input')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-katalogkontrol')).toBeInTheDocument();
+        expect(screen.getByTestId('ui-button-bin')).toBeInTheDocument();
+    });
+    it('should apply link when save button is clicked', () => {
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-linked'));
+        const input = screen.getByTestId('ui-input');
+        fireEvent.change(input, { target: { value: 'https://example.com' } });
+        fireEvent.click(screen.getByTestId('ui-button-katalogkontrol'));
+        expect(mockEditor.chainApi.extendMarkRange).toHaveBeenCalledWith('link');
+        expect(mockEditor.chainApi.setMark).toHaveBeenCalledWith('link', {
+            href: 'https://example.com'
+        });
+        expect(mockEditor.chainApi.setTextSelection).toHaveBeenCalledWith(10);
+        expect(mockEditor.chainApi.run).toHaveBeenCalled();
+    });
+    it('should apply link when Enter is pressed', () => {
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-linked'));
+        const input = screen.getByTestId('ui-input');
+        fireEvent.change(input, { target: { value: 'https://example.com' } });
+        fireEvent.keyDown(input, { key: 'Enter' });
+        expect(mockEditor.chainApi.setMark).toHaveBeenCalledWith('link', {
+            href: 'https://example.com'
+        });
+        expect(mockEditor.chainApi.setTextSelection).toHaveBeenCalledWith(10);
+        expect(mockEditor.chainApi.run).toHaveBeenCalled();
+    });
+    it('should remove link when delete button is clicked', () => {
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-linked'));
+        fireEvent.click(screen.getByTestId('ui-button-bin'));
+        expect(mockEditor.chainApi.unsetMark).toHaveBeenCalledWith('link');
+        expect(mockEditor.chainApi.setTextSelection).toHaveBeenCalledWith(10);
+        expect(mockEditor.chainApi.run).toHaveBeenCalled();
+    });
+    it('should set URL when link icon is clicked and link is already active', () => {
+        mockEditor.isActive.mockImplementation((name) => name === 'link');
+        mockEditor.getAttributes.mockReturnValue({ href: 'https://existing.com' });
+        renderComponent();
+        expect(screen.getByTestId('ui-input')).toHaveValue('https://existing.com');
+        fireEvent.click(screen.getByTestId('ui-button-bin'));
+        expect(screen.queryByTestId('ui-input')).not.toBeInTheDocument();
+        fireEvent.click(screen.getByTestId('ui-button-linked'));
+        expect(screen.getByTestId('ui-input')).toHaveValue('https://existing.com');
+    });
+    it('should set empty URL when link icon is clicked and link is active but has no href', () => {
+        mockEditor.isActive.mockImplementation((name) => name === 'link');
+        mockEditor.getAttributes.mockReturnValue({});
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-bin'));
+        fireEvent.click(screen.getByTestId('ui-button-linked'));
+        expect(screen.getByTestId('ui-input')).toHaveValue('');
+    });
+    it('should update link input when editor state changes', () => {
+        mockEditor.isActive.mockImplementation((name) => name === 'link');
+        mockEditor.getAttributes.mockReturnValue({ href: 'https://test.com' });
+        // 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;
+            }
+        });
+        renderComponent();
+        act(() => {
+            selectionUpdateHandler();
+        });
+        expect(screen.getByTestId('ui-input')).toHaveValue('https://test.com');
+    });
+    it('should not show link input if not active link and selection updates', () => {
+        mockEditor.isActive.mockReturnValue(false);
+        let selectionUpdateHandler;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        mockEditor.on.mockImplementation((name, handler) => {
+            if (name === 'selectionUpdate') {
+                selectionUpdateHandler = handler;
+            }
+        });
+        renderComponent();
+        fireEvent.click(screen.getByTestId('ui-button-linked'));
+        expect(screen.getByTestId('ui-input')).toBeInTheDocument();
+        act(() => {
+            if (selectionUpdateHandler) {
+                selectionUpdateHandler();
+            }
+        });
+        expect(screen.queryByTestId('ui-input')).not.toBeInTheDocument();
+    });
+    describe('shouldShow', () => {
+        beforeEach(() => {
+            renderComponent();
+        });
+        it('should return false if selection is not a text selection', () => {
+            vi.mocked(isTextSelection).mockReturnValue(false);
+            expect(capturedShouldShow({ editor: mockEditor })).toBe(false);
+        });
+    });
+    it('should return false if image, codeBlock, code, youtube or imageUpload is active', () => {
+        const activeStates = [
+            'image',
+            'codeBlock',
+            'code',
+            'youtube',
+            'imageUpload'
+        ];
+        activeStates.forEach(state => {
+            mockEditor.isActive.mockImplementation((name) => name === state);
+            expect(capturedShouldShow({ editor: mockEditor })).toBe(false);
+        });
+    });
+    it('should return true if link is active even if selection is empty', () => {
+        mockEditor.isActive.mockImplementation((name) => name === 'link');
+        mockEditor.state.selection.from = 5;
+        mockEditor.state.selection.to = 5;
+        expect(capturedShouldShow({ editor: mockEditor })).toBe(true);
+    });
+    it('should return false if link is active but at the boundaries of the link', () => {
+        mockEditor.isActive.mockImplementation((name) => name === 'link');
+        mockEditor.state.selection.from = 5;
+        mockEditor.state.selection.to = 5;
+        vi.mocked(getMarkRange).mockReturnValue({ from: 5, to: 10 });
+        expect(capturedShouldShow({ editor: mockEditor })).toBe(false);
+        vi.mocked(getMarkRange).mockReturnValue({ from: 0, to: 5 });
+        expect(capturedShouldShow({ editor: mockEditor })).toBe(false);
+    });
+    it('should return true if link is active and not at boundaries', () => {
+        mockEditor.isActive.mockImplementation((name) => name === 'link');
+        mockEditor.state.selection.from = 7;
+        mockEditor.state.selection.to = 7;
+        vi.mocked(getMarkRange).mockReturnValue({ from: 5, to: 10 });
+        expect(capturedShouldShow({ editor: mockEditor })).toBe(true);
+    });
+    it('should return true if link is active and selection is not empty', () => {
+        mockEditor.isActive.mockImplementation((name) => name === 'link');
+        mockEditor.state.selection.from = 5;
+        mockEditor.state.selection.to = 10;
+        expect(capturedShouldShow({ editor: mockEditor })).toBe(true);
+    });
+    it('should return true if text is selected and editor is focused', () => {
+        mockEditor.isActive.mockReturnValue(false);
+        mockEditor.state.selection.from = 0;
+        mockEditor.state.selection.to = 10;
+        mockEditor.isFocused = true;
+        expect(capturedShouldShow({ editor: mockEditor })).toBe(true);
+    });
+    it('should return false if no text is selected', () => {
+        mockEditor.isActive.mockReturnValue(false);
+        mockEditor.state.selection.from = 5;
+        mockEditor.state.selection.to = 5;
+        expect(capturedShouldShow({ editor: mockEditor })).toBe(false);
+    });
+    it('should return false if editor is not focused', () => {
+        mockEditor.isActive.mockReturnValue(false);
+        mockEditor.state.selection.from = 0;
+        mockEditor.state.selection.to = 10;
+        mockEditor.isFocused = false;
+        expect(capturedShouldShow({ editor: mockEditor })).toBe(false);
+    });
+});