@wix/patterns-fields 1.0.0

package/src/__tests__/components/rich-content-editor.spec.tsx

@@ -0,0 +1,647 @@
+import '../../testkit/test-polyfills';
+
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+
+import type { RichContentEditorProps } from '../../components/rich-content/editor';
+import { RichContentEditor } from '../../components/rich-content/editor';
+
+import { nextRender } from '../test-utils';
+
+// Import the mocked fromPlainText
+import { fromPlainText } from '@wix/ricos';
+
+import { PatternsFieldsTestProvider } from '../../testkit/patterns-fields-test-provider';
+
+// Mock the plugins hook
+jest.mock(
+  '../../components/rich-content/rich-content-input/rich-content-editor/plugins',
+  () => ({
+    usePlugins: () => [],
+  }),
+);
+
+// Mock the useWixRicosProps hook
+jest.mock(
+  '../../components/rich-content/rich-content-input/rich-content-common/hooks',
+  () => ({
+    useWixRicosProps: () => ({}),
+  }),
+);
+
+// Mock variables with 'mock' prefix to satisfy Jest's out-of-scope variable rules
+const mockEditorRefObject = {
+  focus: jest.fn(),
+  // Return buttons so that isToolbarReady becomes true
+  getToolbarProps: jest.fn(() => ({
+    buttons: {
+      IMAGE: { name: 'IMAGE', getIcon: () => null },
+      VIDEO: { name: 'VIDEO', getIcon: () => null },
+    },
+  })),
+  getContentTraits: jest.fn(() => ({ isContentChanged: false })),
+};
+
+const mockPublishFn = jest.fn().mockResolvedValue({});
+const mockEditorEventsFn = {
+  publish: mockPublishFn,
+};
+
+jest.mock('@wix/ricos', () => {
+  const mockReact = require('react');
+  return {
+    // Mock fromPlainText function
+    fromPlainText: (text: string) => ({
+      nodes: [
+        {
+          type: 'PARAGRAPH',
+          nodes: [{ type: 'TEXT', textData: { text } }],
+        },
+      ],
+      metadata: { version: 1 },
+    }),
+    // Mock ensureRicosContent function
+    ensureRicosContent: (content: unknown) => content,
+    // Mock WixRicosEditor component
+    WixRicosEditor: mockReact.forwardRef(function MockWixRicosEditor(
+      props: { onLoad?: () => void; content?: unknown },
+      ref: React.Ref<typeof mockEditorRefObject>,
+    ) {
+      mockReact.useImperativeHandle(ref, () => mockEditorRefObject);
+
+      mockReact.useEffect(() => {
+        props.onLoad?.();
+      }, [props]);
+
+      return mockReact.createElement(
+        'div',
+        {
+          'data-hook': 'mock-wix-ricos-editor',
+          'data-testid': 'wix-ricos-editor',
+        },
+        mockReact.createElement(
+          'div',
+          {
+            contentEditable: true,
+            'data-hook': 'rich-content-editable',
+          },
+          props.content ? JSON.stringify(props.content) : 'Empty content',
+        ),
+      );
+    }),
+    // Mock withEditorContext HOC
+    withEditorContext: <T extends Record<string, unknown>>(
+      Component: React.ComponentType<T>,
+    ) => {
+      return function WrappedComponent(props: T) {
+        const mockReactInner = require('react');
+        return mockReactInner.createElement(Component, {
+          ...props,
+          editorEvents: mockEditorEventsFn,
+        });
+      };
+    },
+    // Mock TOOLBARS enum
+    ToolbarType: {
+      INSERT_PLUGIN: 'INSERT_PLUGIN',
+      FOOTER: 'FOOTER',
+      STATIC: 'STATIC',
+      QUICK_ACTIONS: 'QUICK_ACTIONS',
+    },
+    FORMATTING_BUTTONS: {
+      CODE_BLOCK: 'CODE_BLOCK',
+    },
+    // Mock INSERT_PLUGIN_BUTTONS
+    INSERT_PLUGIN_BUTTONS: {
+      IMAGE: 'IMAGE',
+      VIDEO: 'VIDEO',
+      GALLERY: 'GALLERY',
+      LAYOUT: 'LAYOUT',
+      DIVIDER: 'DIVIDER',
+      TABLE: 'TABLE',
+      FILE: 'FILE',
+      HTML: 'HTML',
+      INSTAGRAM: 'INSTAGRAM',
+      TWITTER: 'TWITTER',
+      TIKTOK: 'TIKTOK',
+      STORES: 'STORES',
+      BOOKINGS: 'BOOKINGS',
+      EVENTS: 'EVENTS',
+      EMOJI: 'EMOJI',
+      GIF: 'GIF',
+      CODE_BLOCK: 'CODE_BLOCK',
+      COLLAPSIBLE_LIST: 'COLLAPSIBLE_LIST',
+      BUTTON: 'BUTTON',
+      UNDO: 'UNDO',
+      REDO: 'REDO',
+    },
+    // Mock Tooltip component
+    Tooltip: ({ children }: { children: React.ReactNode }) => children,
+  };
+});
+
+// Mock UserSiteFonts
+jest.mock('../../components/user-site-fonts', () => ({
+  UserSiteFonts: () => null,
+}));
+
+// Mock FullscreenModal
+jest.mock(
+  '../../components/rich-content/rich-content-input/rich-content-common',
+  () => {
+    const mockReact = require('react');
+    const actual = jest.requireActual(
+      '../../components/rich-content/rich-content-input/rich-content-common',
+    );
+    return {
+      ...actual,
+      FullscreenModal: ({
+        isOpen,
+        children,
+      }: {
+        isOpen: boolean;
+        isLoading: boolean;
+        children: React.ReactNode;
+      }) =>
+        isOpen
+          ? mockReact.createElement(
+              'div',
+              {
+                'data-hook': 'fullscreen-modal',
+                'data-testid': 'fullscreen-modal',
+              },
+              children,
+            )
+          : null,
+      ToggleFullscreenButton: ({
+        isFullScreen,
+        onToggleFullScreen,
+      }: {
+        isFullScreen: boolean;
+        onToggleFullScreen: () => void;
+      }) =>
+        mockReact.createElement(
+          'button',
+          {
+            'data-hook': 'toggle-fullscreen-button',
+            'data-testid': 'toggle-fullscreen-button',
+            onClick: onToggleFullScreen,
+            'aria-pressed': isFullScreen,
+          },
+          isFullScreen ? 'Exit Fullscreen' : 'Fullscreen',
+        ),
+      INITIAL_INJECTED_RICH_CONTENT: {},
+    };
+  },
+);
+
+describe('<RichContentEditor/>', () => {
+  const dataHook = 'rich-content-editor';
+
+  let onChange: jest.Mock;
+  let onFocus: jest.Mock;
+  let onBlur: jest.Mock;
+  let onEnterFullScreen: jest.Mock;
+  let onExitFullScreen: jest.Mock;
+  let onPublish: jest.Mock;
+
+  // Use real timers for this test suite to avoid hanging
+  beforeAll(() => {
+    jest.useRealTimers();
+  });
+
+  afterAll(() => {
+    jest.useFakeTimers();
+  });
+
+  beforeEach(() => {
+    onChange = jest.fn();
+    onFocus = jest.fn();
+    onBlur = jest.fn();
+    onEnterFullScreen = jest.fn();
+    onExitFullScreen = jest.fn();
+    onPublish = jest.fn();
+    mockPublishFn.mockClear();
+    mockEditorRefObject.focus.mockClear();
+    mockEditorRefObject.getToolbarProps.mockClear().mockReturnValue({
+      buttons: {
+        IMAGE: { name: 'IMAGE', getIcon: () => null },
+        VIDEO: { name: 'VIDEO', getIcon: () => null },
+      },
+    });
+    mockEditorRefObject.getContentTraits
+      .mockClear()
+      .mockReturnValue({ isContentChanged: false });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  function renderWithProps(props: Partial<RichContentEditorProps> = {}) {
+    const defaultContent = fromPlainText('Test content');
+    return render(
+      <RichContentEditor
+        dataHook={dataHook}
+        content={defaultContent}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        {...props}
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+  }
+
+  describe('rendering', () => {
+    it('should render the editor container', async () => {
+      const { container } = renderWithProps();
+      // Wait for toggle button which appears when toolbar is ready
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+      // Now verify editor is present (use container query for data-hook)
+      const editor = container.querySelector(
+        '[data-hook="mock-wix-ricos-editor"]',
+      );
+      expect(editor).toBeInTheDocument();
+    });
+
+    it('should render with provided content', async () => {
+      const content = fromPlainText('Hello World');
+      const { container } = renderWithProps({ content });
+
+      // Wait for toggle button which appears when toolbar is ready
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+      // Verify editor is present
+      const editor = container.querySelector(
+        '[data-hook="mock-wix-ricos-editor"]',
+      );
+      expect(editor).toBeInTheDocument();
+    });
+
+    it('should render toggle fullscreen button after editor loads', async () => {
+      renderWithProps();
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it('should not render in fullscreen mode by default', async () => {
+      renderWithProps();
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+      expect(screen.queryByTestId('fullscreen-modal')).not.toBeInTheDocument();
+    });
+
+    it('should render in fullscreen mode when fullScreenOnly is true', async () => {
+      renderWithProps({ fullScreenOnly: true });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fullscreen-modal')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('focus and blur behavior', () => {
+    it('should call onFocus when editor receives focus', async () => {
+      const { container } = renderWithProps();
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+
+      // Find the editor container by its data-hook attribute
+      const editorContainer = container.querySelector(
+        '[data-hook="rich-content.editor"]',
+      );
+      expect(editorContainer).toBeTruthy();
+      fireEvent.focus(editorContainer!);
+
+      await nextRender();
+      expect(onFocus).toHaveBeenCalled();
+    });
+
+    it('should call onBlur when editor loses focus', async () => {
+      const { container } = renderWithProps();
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+
+      const editorContainer = container.querySelector(
+        '[data-hook="rich-content.editor"]',
+      );
+      expect(editorContainer).toBeTruthy();
+      fireEvent.focus(editorContainer!);
+
+      await nextRender();
+
+      fireEvent.blur(editorContainer!, { relatedTarget: document.body });
+
+      await nextRender();
+      expect(onBlur).toHaveBeenCalled();
+    });
+  });
+
+  describe('fullscreen mode', () => {
+    it('should open fullscreen modal when toggle button is clicked', async () => {
+      renderWithProps({
+        onEnterFullScreen,
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+
+      const toggleButton = screen.getByTestId('toggle-fullscreen-button');
+      fireEvent.click(toggleButton);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fullscreen-modal')).toBeInTheDocument();
+      });
+    });
+
+    it('should call onEnterFullScreen when entering fullscreen', async () => {
+      renderWithProps({
+        onEnterFullScreen,
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+
+      const toggleButton = screen.getByTestId('toggle-fullscreen-button');
+      fireEvent.click(toggleButton);
+
+      await waitFor(() => {
+        expect(onEnterFullScreen).toHaveBeenCalled();
+      });
+    });
+
+    it('should close fullscreen modal when exit button is clicked', async () => {
+      renderWithProps({
+        onEnterFullScreen,
+        onExitFullScreen,
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+
+      // Enter fullscreen
+      const enterButton = screen.getByTestId('toggle-fullscreen-button');
+      fireEvent.click(enterButton);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fullscreen-modal')).toBeInTheDocument();
+      });
+
+      // Find the exit button inside fullscreen modal (should be the last one)
+      const allButtons = screen.getAllByTestId('toggle-fullscreen-button');
+      const exitButton = allButtons[allButtons.length - 1];
+      fireEvent.click(exitButton);
+
+      await waitFor(() => {
+        expect(onExitFullScreen).toHaveBeenCalled();
+      });
+    });
+
+    it('should only show fullscreen modal when in fullScreenOnly mode', async () => {
+      renderWithProps({ fullScreenOnly: true });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fullscreen-modal')).toBeInTheDocument();
+      });
+
+      // Verify fullscreen modal is present
+      expect(screen.getByTestId('fullscreen-modal')).toBeInTheDocument();
+    });
+  });
+
+  describe('onChange handling', () => {
+    it('should call onPublish when content changes and blur occurs', async () => {
+      mockEditorRefObject.getContentTraits.mockReturnValue({
+        isContentChanged: true,
+      });
+
+      const { container } = renderWithProps({
+        onPublish,
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+
+      const editorContainer = container.querySelector(
+        '[data-hook="rich-content.editor"]',
+      );
+      expect(editorContainer).toBeTruthy();
+      fireEvent.focus(editorContainer!);
+      fireEvent.blur(editorContainer!, { relatedTarget: document.body });
+
+      await waitFor(() => {
+        expect(onPublish).toHaveBeenCalled();
+      });
+    });
+
+    it('should not call onPublish when content has not changed', async () => {
+      mockEditorRefObject.getContentTraits.mockReturnValue({
+        isContentChanged: false,
+      });
+
+      const { container } = renderWithProps({
+        onPublish,
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+
+      const editorContainer = container.querySelector(
+        '[data-hook="rich-content.editor"]',
+      );
+      expect(editorContainer).toBeTruthy();
+      fireEvent.focus(editorContainer!);
+      fireEvent.blur(editorContainer!, { relatedTarget: document.body });
+
+      await nextRender();
+      expect(onPublish).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('autoFocus', () => {
+    it('should focus editor when autoFocus is true', async () => {
+      // Note: autoFocus is tested via the modal editor in fullscreen mode
+      renderWithProps({ fullScreenOnly: true });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fullscreen-modal')).toBeInTheDocument();
+      });
+
+      // The autoFocus prop is passed to the modal editor
+      // In the actual implementation, this triggers editorRef.current?.focus()
+    });
+  });
+
+  describe('content changes on fullscreen transitions', () => {
+    it('should publish content when entering fullscreen with changes', async () => {
+      mockEditorRefObject.getContentTraits.mockReturnValue({
+        isContentChanged: true,
+      });
+      mockPublishFn.mockResolvedValue(fromPlainText('Updated content'));
+
+      renderWithProps({
+        onEnterFullScreen,
+        onChange,
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+
+      const toggleButton = screen.getByTestId('toggle-fullscreen-button');
+      fireEvent.click(toggleButton);
+
+      await waitFor(() => {
+        expect(mockPublishFn).toHaveBeenCalled();
+      });
+
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalled();
+      });
+    });
+
+    it('should publish content when exiting fullscreen with changes', async () => {
+      mockEditorRefObject.getContentTraits.mockReturnValue({
+        isContentChanged: true,
+      });
+      mockPublishFn.mockResolvedValue(fromPlainText('Final content'));
+
+      renderWithProps({
+        onEnterFullScreen,
+        onExitFullScreen,
+        onChange,
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+
+      // Enter fullscreen
+      const enterButton = screen.getByTestId('toggle-fullscreen-button');
+      fireEvent.click(enterButton);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fullscreen-modal')).toBeInTheDocument();
+      });
+
+      // Exit fullscreen
+      const allButtons = screen.getAllByTestId('toggle-fullscreen-button');
+      const exitButton = allButtons[allButtons.length - 1];
+      fireEvent.click(exitButton);
+
+      await waitFor(() => {
+        expect(mockPublishFn).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('error handling', () => {
+    it('should use fallback content when publish fails on entering fullscreen', async () => {
+      const fallbackContent = fromPlainText('Fallback content');
+      mockPublishFn.mockRejectedValue(new Error('Publish failed'));
+
+      renderWithProps({
+        content: fallbackContent,
+        onEnterFullScreen,
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+
+      const toggleButton = screen.getByTestId('toggle-fullscreen-button');
+      fireEvent.click(toggleButton);
+
+      await waitFor(() => {
+        expect(onEnterFullScreen).toHaveBeenCalledWith(
+          fallbackContent,
+          expect.any(Boolean),
+        );
+      });
+    });
+
+    it('should use fallback content when publish fails on exiting fullscreen', async () => {
+      const fallbackContent = fromPlainText('Fallback content');
+      mockPublishFn
+        .mockResolvedValueOnce(fromPlainText('Success'))
+        .mockRejectedValueOnce(new Error('Publish failed'));
+
+      renderWithProps({
+        content: fallbackContent,
+        onEnterFullScreen,
+        onExitFullScreen,
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('toggle-fullscreen-button'),
+        ).toBeInTheDocument();
+      });
+
+      // Enter fullscreen
+      const enterButton = screen.getByTestId('toggle-fullscreen-button');
+      fireEvent.click(enterButton);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fullscreen-modal')).toBeInTheDocument();
+      });
+
+      // Exit fullscreen
+      const allButtons = screen.getAllByTestId('toggle-fullscreen-button');
+      const exitButton = allButtons[allButtons.length - 1];
+      fireEvent.click(exitButton);
+
+      await waitFor(() => {
+        expect(onExitFullScreen).toHaveBeenCalledWith(
+          fallbackContent,
+          expect.any(Boolean),
+        );
+      });
+    });
+  });
+});