@akinon/ui-editor 1.0.0

package/dist/cjs/tiptap/components/menu-bar/__tests__/heading-selector.test.js

@@ -0,0 +1,242 @@
+import '@tiptap/extension-heading';
+import '@tiptap/extension-paragraph';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Heading from '@tiptap/extension-heading';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { HeadingSelector } from '../heading-selector';
+let mockOnOpenChange = null;
+vi.mock('@akinon/ui-dropdown', () => ({
+    Dropdown: ({ children, menu, onOpenChange }) => {
+        mockOnOpenChange = onOpenChange;
+        return (React.createElement("div", null,
+            children,
+            React.createElement("select", { "data-testid": "heading-dropdown", onChange: e => {
+                    const item = menu.items.find(i => i.key === e.target.value);
+                    if (item) {
+                        item.onClick();
+                    }
+                }, onFocus: () => onOpenChange(true), onBlur: () => onOpenChange(false) }, menu.items.map(item => (React.createElement("option", { key: item.key, value: item.key }, item.label))))));
+    }
+}));
+vi.mock('@akinon/ui-button', () => ({
+    Button: ({ children, disabled, tooltip, icon, className }) => (React.createElement("button", { disabled: disabled, "aria-label": tooltip, "data-icon": icon, className: className }, children))
+}));
+vi.mock('../../../../i18n', () => ({
+    i18n: {
+        t: (key) => {
+            const translations = {
+                'editor.heading.paragraph': 'Paragraph',
+                'editor.heading.h1': 'Heading 1',
+                'editor.heading.h2': 'Heading 2',
+                'editor.heading.h3': 'Heading 3',
+                'editor.heading.h4': 'Heading 4',
+                'editor.heading.tooltip': 'Text Style'
+            };
+            return translations[key] || key;
+        }
+    }
+}));
+describe('HeadingSelector', () => {
+    beforeEach(() => {
+        mockOnOpenChange = null;
+    });
+    const createEditor = () => {
+        return new Editor({
+            extensions: [
+                Document,
+                Paragraph,
+                Text,
+                Heading.configure({
+                    levels: [1, 2, 3, 4]
+                })
+            ]
+        });
+    };
+    const createEditorState = (overrides = {}) => (Object.assign({ isBold: false, isItalic: false, isUnderline: false, isStrike: false, isCode: false, isHighlight: false, isParagraph: false, isHeading1: false, isHeading2: false, isHeading3: false, isHeading4: false, isCodeBlock: false, isBlockquote: false, isBulletList: false, isOrderedList: false, isTaskList: false, isLink: false, isTable: false, isLeftAlign: false, isCenterAlign: false, isRightAlign: false, isJustifyAlign: false, canUndo: false, canRedo: false, canBold: false, canItalic: false, canUnderline: false, canStrike: false, canCode: false, canClearMarks: false }, overrides));
+    it('should render heading selector button', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState(), baseCls: "test", hashId: "test-hash" }));
+        expect(screen.getByLabelText('Text Style')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should display "Paragraph" when isParagraph is true', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState({ isParagraph: true }), baseCls: "test", hashId: "test-hash" }));
+        const button = screen.getByRole('button', { name: 'Text Style' });
+        expect(button).toHaveTextContent('Paragraph');
+        editor.destroy();
+    });
+    it('should display "Heading 1" when isHeading1 is true', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState({ isHeading1: true }), baseCls: "test", hashId: "test-hash" }));
+        const button = screen.getByRole('button', { name: 'Text Style' });
+        expect(button).toHaveTextContent('Heading 1');
+        editor.destroy();
+    });
+    it('should display "Heading 2" when isHeading2 is true', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState({ isHeading2: true }), baseCls: "test", hashId: "test-hash" }));
+        const button = screen.getByRole('button', { name: 'Text Style' });
+        expect(button).toHaveTextContent('Heading 2');
+        editor.destroy();
+    });
+    it('should display "Heading 3" when isHeading3 is true', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState({ isHeading3: true }), baseCls: "test", hashId: "test-hash" }));
+        const button = screen.getByRole('button', { name: 'Text Style' });
+        expect(button).toHaveTextContent('Heading 3');
+        editor.destroy();
+    });
+    it('should display "Heading 4" when isHeading4 is true', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState({ isHeading4: true }), baseCls: "test", hashId: "test-hash" }));
+        const button = screen.getByRole('button', { name: 'Text Style' });
+        expect(button).toHaveTextContent('Heading 4');
+        editor.destroy();
+    });
+    it('should display "Paragraph" by default when no heading is active', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState(), baseCls: "test", hashId: "test-hash" }));
+        const button = screen.getByRole('button', { name: 'Text Style' });
+        expect(button).toHaveTextContent('Paragraph');
+        editor.destroy();
+    });
+    it('should disable button when disabled prop is true', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState(), baseCls: "test", hashId: "test-hash", disabled: true }));
+        expect(screen.getByLabelText('Text Style')).toBeDisabled();
+        editor.destroy();
+    });
+    it('should enable button when disabled prop is false', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState(), baseCls: "test", hashId: "test-hash", disabled: false }));
+        expect(screen.getByLabelText('Text Style')).not.toBeDisabled();
+        editor.destroy();
+    });
+    it('should call setParagraph when paragraph option is selected', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<h1>Test heading</h1>');
+        const user = userEvent.setup();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState({ isHeading1: true }), baseCls: "test", hashId: "test-hash" }));
+        const dropdown = screen.getByTestId('heading-dropdown');
+        await user.selectOptions(dropdown, 'paragraph');
+        expect(editor.isActive('paragraph')).toBe(true);
+        expect(editor.isActive('heading')).toBe(false);
+        editor.destroy();
+    });
+    it('should call toggleHeading with level 1 when h1 option is selected', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test paragraph</p>');
+        const user = userEvent.setup();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState({ isParagraph: true }), baseCls: "test", hashId: "test-hash" }));
+        const dropdown = screen.getByTestId('heading-dropdown');
+        await user.selectOptions(dropdown, 'h1');
+        expect(editor.isActive('heading', { level: 1 })).toBe(true);
+        editor.destroy();
+    });
+    it('should call toggleHeading with level 2 when h2 option is selected', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test paragraph</p>');
+        const user = userEvent.setup();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState({ isParagraph: true }), baseCls: "test", hashId: "test-hash" }));
+        const dropdown = screen.getByTestId('heading-dropdown');
+        await user.selectOptions(dropdown, 'h2');
+        expect(editor.isActive('heading', { level: 2 })).toBe(true);
+        editor.destroy();
+    });
+    it('should call toggleHeading with level 3 when h3 option is selected', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test paragraph</p>');
+        const user = userEvent.setup();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState({ isParagraph: true }), baseCls: "test", hashId: "test-hash" }));
+        const dropdown = screen.getByTestId('heading-dropdown');
+        await user.selectOptions(dropdown, 'h3');
+        expect(editor.isActive('heading', { level: 3 })).toBe(true);
+        editor.destroy();
+    });
+    it('should call toggleHeading with level 4 when h4 option is selected', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test paragraph</p>');
+        const user = userEvent.setup();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState({ isParagraph: true }), baseCls: "test", hashId: "test-hash" }));
+        const dropdown = screen.getByTestId('heading-dropdown');
+        await user.selectOptions(dropdown, 'h4');
+        expect(editor.isActive('heading', { level: 4 })).toBe(true);
+        editor.destroy();
+    });
+    it('should hide h1 option when h1 is in hiddenButtons', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState(), baseCls: "test", hashId: "test-hash", hiddenButtons: ['h1'] }));
+        const dropdown = screen.getByTestId('heading-dropdown');
+        const options = Array.from(dropdown.querySelectorAll('option'));
+        const h1Option = options.find(opt => opt.value === 'h1');
+        expect(h1Option).toBeUndefined();
+        editor.destroy();
+    });
+    it('should hide multiple headings when they are in hiddenButtons', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState(), baseCls: "test", hashId: "test-hash", hiddenButtons: ['h1', 'h2', 'h3'] }));
+        const dropdown = screen.getByTestId('heading-dropdown');
+        const options = Array.from(dropdown.querySelectorAll('option'));
+        expect(options.find(opt => opt.value === 'h1')).toBeUndefined();
+        expect(options.find(opt => opt.value === 'h2')).toBeUndefined();
+        expect(options.find(opt => opt.value === 'h3')).toBeUndefined();
+        expect(options.find(opt => opt.value === 'h4')).toBeDefined();
+        expect(options.find(opt => opt.value === 'paragraph')).toBeDefined();
+        editor.destroy();
+    });
+    it('should show default label when active heading is hidden', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState({ isHeading1: true }), baseCls: "test", hashId: "test-hash", hiddenButtons: ['h1'] }));
+        const button = screen.getByRole('button', { name: 'Text Style' });
+        expect(button).toHaveTextContent('Paragraph');
+        editor.destroy();
+    });
+    it('should render all heading options in dropdown when no buttons are hidden', () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState(), baseCls: "test", hashId: "test-hash" }));
+        const dropdown = screen.getByTestId('heading-dropdown');
+        const options = Array.from(dropdown.querySelectorAll('option'));
+        expect(options).toHaveLength(5);
+        expect(options.find(opt => opt.value === 'paragraph')).toBeDefined();
+        expect(options.find(opt => opt.value === 'h1')).toBeDefined();
+        expect(options.find(opt => opt.value === 'h2')).toBeDefined();
+        expect(options.find(opt => opt.value === 'h3')).toBeDefined();
+        expect(options.find(opt => opt.value === 'h4')).toBeDefined();
+        editor.destroy();
+    });
+    it('should show chevron_up icon when dropdown is open', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState(), baseCls: "test", hashId: "test-hash" }));
+        const button = screen.getByRole('button', { name: 'Text Style' });
+        const dropdown = screen.getByTestId('heading-dropdown');
+        expect(button).toHaveAttribute('data-icon', 'chevron_down');
+        await user.click(dropdown);
+        if (mockOnOpenChange) {
+            mockOnOpenChange(true);
+        }
+        const updatedButton = screen.getByRole('button', { name: 'Text Style' });
+        expect(updatedButton).toHaveAttribute('data-icon', 'chevron_up');
+        editor.destroy();
+    });
+    it('should show chevron_down icon when dropdown is closed', async () => {
+        const editor = createEditor();
+        render(React.createElement(HeadingSelector, { editor: editor, editorState: createEditorState(), baseCls: "test", hashId: "test-hash" }));
+        const button = screen.getByRole('button', { name: 'Text Style' });
+        expect(button).toHaveAttribute('data-icon', 'chevron_down');
+        if (mockOnOpenChange) {
+            mockOnOpenChange(true);
+            mockOnOpenChange(false);
+        }
+        expect(button).toHaveAttribute('data-icon', 'chevron_down');
+        editor.destroy();
+    });
+});