@akinon/ui-editor 1.0.0

package/dist/esm/tiptap/components/menu-bar/__tests__/youtube-popover.test.js

@@ -0,0 +1,277 @@
+import '@tiptap/extension-youtube';
+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 Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import Youtube from '@tiptap/extension-youtube';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { YouTubePopover } from '../youtube-popover';
+vi.mock('@akinon/ui-popover', () => ({
+    Popover: ({ children, content, open, onOpenChange }) => {
+        const [isOpen, setIsOpen] = React.useState(false);
+        React.useEffect(() => {
+            if (open !== undefined) {
+                setIsOpen(open);
+            }
+        }, [open]);
+        const handleClick = () => {
+            setIsOpen(!isOpen);
+            if (onOpenChange) {
+                onOpenChange(!isOpen);
+            }
+        };
+        return (React.createElement("div", null,
+            React.createElement("div", { onClick: handleClick }, children),
+            (open !== undefined ? open : isOpen) && (React.createElement("div", { "data-testid": "popover-content" }, content))));
+    }
+}));
+vi.mock('@akinon/ui-button', () => ({
+    Button: ({ children, onClick, disabled, tooltip, icon, type }) => (React.createElement("button", { onClick: onClick, disabled: disabled, "aria-label": tooltip, "data-icon": icon, "data-type": type }, children))
+}));
+vi.mock('@akinon/ui-input', () => ({
+    Input: ({ value, onChange, placeholder, onKeyDown, status }) => (React.createElement("input", { value: value, onChange: onChange, placeholder: placeholder, onKeyDown: onKeyDown, "data-status": status }))
+}));
+vi.mock('@akinon/ui-theme', () => ({
+    useToken: () => ({
+        token: {},
+        hashId: 'test-hash'
+    }),
+    getSafeCustomTokens: () => ({
+        layout: {
+            displayFlex: 'flex',
+            flexCenter: 'center'
+        }
+    })
+}));
+vi.mock('@ant-design/cssinjs', () => ({
+    useStyleRegister: (_config, callback) => {
+        callback();
+        return (component) => component;
+    }
+}));
+vi.mock('antd', () => ({
+    ConfigProvider: {
+        ConfigContext: React.createContext({
+            getPrefixCls: (name) => `ant-${name}`,
+            theme: {}
+        })
+    }
+}));
+vi.mock('../../../../i18n', () => ({
+    i18n: {
+        t: (key) => {
+            const translations = {
+                'editor.youtube.placeholder': 'YouTube URL',
+                'editor.youtube.tooltip': 'Insert YouTube Video',
+                'editor.youtube.cancel': 'Cancel',
+                'editor.youtube.insert': 'Insert'
+            };
+            return translations[key] || key;
+        }
+    }
+}));
+describe('YouTubePopover', () => {
+    const createEditor = () => {
+        return new Editor({
+            extensions: [Document, Paragraph, Text, Youtube]
+        });
+    };
+    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 youtube popover button', () => {
+        const editor = createEditor();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        expect(screen.getByLabelText('Insert YouTube Video')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should have correct icon', () => {
+        const editor = createEditor();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        expect(button).toHaveAttribute('data-icon', 'youtube');
+        editor.destroy();
+    });
+    it('should be disabled when disabled prop is true', () => {
+        const editor = createEditor();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState(), disabled: true }));
+        expect(screen.getByLabelText('Insert YouTube Video')).toBeDisabled();
+        editor.destroy();
+    });
+    it('should be enabled when disabled prop is false', () => {
+        const editor = createEditor();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState(), disabled: false }));
+        expect(screen.getByLabelText('Insert YouTube Video')).not.toBeDisabled();
+        editor.destroy();
+    });
+    it('should show popover content when button is clicked', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        expect(screen.getByTestId('popover-content')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should contain URL input field in popover', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        expect(screen.getByPlaceholderText('YouTube URL')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should contain cancel button in popover', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        expect(screen.getByText('Cancel')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should contain insert button in popover', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        expect(screen.getByText('Insert')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should allow entering URL in input', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        const urlInput = screen.getByPlaceholderText('YouTube URL');
+        await user.type(urlInput, 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+        expect(urlInput).toHaveValue('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+        editor.destroy();
+    });
+    it('should disable insert button when URL is empty', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        const insertButton = screen.getByText('Insert');
+        expect(insertButton).toBeDisabled();
+        editor.destroy();
+    });
+    it('should disable insert button when URL is invalid', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        const urlInput = screen.getByPlaceholderText('YouTube URL');
+        await user.type(urlInput, 'https://invalid-url.com');
+        const insertButton = screen.getByText('Insert');
+        expect(insertButton).toBeDisabled();
+        editor.destroy();
+    });
+    it('should show error status when URL is invalid', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        const urlInput = screen.getByPlaceholderText('YouTube URL');
+        await user.type(urlInput, 'https://invalid-url.com');
+        expect(urlInput).toHaveAttribute('data-status', 'error');
+        editor.destroy();
+    });
+    it('should enable insert button when URL is valid youtube.com URL', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        const urlInput = screen.getByPlaceholderText('YouTube URL');
+        await user.type(urlInput, 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+        const insertButton = screen.getByText('Insert');
+        expect(insertButton).not.toBeDisabled();
+        editor.destroy();
+    });
+    it('should enable insert button when URL is valid youtu.be URL', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        const urlInput = screen.getByPlaceholderText('YouTube URL');
+        await user.type(urlInput, 'https://youtu.be/dQw4w9WgXcQ');
+        const insertButton = screen.getByText('Insert');
+        expect(insertButton).not.toBeDisabled();
+        editor.destroy();
+    });
+    it('should insert video when insert button is clicked', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        const urlInput = screen.getByPlaceholderText('YouTube URL');
+        await user.type(urlInput, 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+        const insertButton = screen.getByText('Insert');
+        await user.click(insertButton);
+        const html = editor.getHTML();
+        expect(html).toContain('youtube');
+        editor.destroy();
+    });
+    it('should clear input and close popover after inserting video', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        const urlInput = screen.getByPlaceholderText('YouTube URL');
+        await user.type(urlInput, 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+        const insertButton = screen.getByText('Insert');
+        await user.click(insertButton);
+        expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should insert video when Enter key is pressed with valid URL', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        const urlInput = screen.getByPlaceholderText('YouTube URL');
+        await user.type(urlInput, 'https://www.youtube.com/watch?v=dQw4w9WgXcQ{Enter}');
+        const html = editor.getHTML();
+        expect(html).toContain('youtube');
+        editor.destroy();
+    });
+    it('should not insert video when Enter key is pressed with invalid URL', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        const urlInput = screen.getByPlaceholderText('YouTube URL');
+        await user.type(urlInput, 'https://invalid-url.com{Enter}');
+        const html = editor.getHTML();
+        expect(html).not.toContain('youtube');
+        editor.destroy();
+    });
+    it('should clear input and close popover when cancel button is clicked', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(YouTubePopover, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Insert YouTube Video');
+        await user.click(button);
+        const urlInput = screen.getByPlaceholderText('YouTube URL');
+        await user.type(urlInput, 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+        const cancelButton = screen.getByText('Cancel');
+        await user.click(cancelButton);
+        expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument();
+        editor.destroy();
+    });
+});