@atlaskit/editor-plugin-table 7.2.2 → 7.3.0

package/src/__tests__/unit/ui/FloatingDragMenu.tsx

@@ -1,511 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl-next';
-
-import { ReactEditorViewContext } from '@atlaskit/editor-common/ui-react';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
-import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
-import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
-import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import * as prosemirrorUtils from '@atlaskit/editor-prosemirror/utils';
-import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  createProsemirrorEditorFactory,
-  Preset,
-} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  doc,
-  p,
-  table,
-  tdCursor,
-  tdEmpty,
-  th,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-import { ffTest } from '@atlassian/feature-flags-test-utils';
-
-import tablePlugin from '../../../plugin';
-import DragMenu from '../../../ui/FloatingDragMenu/DragMenu';
-
-describe('FloatingDragMenu', () => {
-  const createEditor = createProsemirrorEditorFactory();
-  let editorView: EditorView;
-  let tableNode: ContentNodeWithPos | undefined;
-  beforeEach(() => {
-    ({ editorView } = createEditor({
-      doc: doc(table()(tr(th()(p('')), th()(p(''))), tr(tdCursor, tdEmpty))),
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(contentInsertionPlugin)
-        .add(widthPlugin)
-        .add(guidelinePlugin)
-        .add(selectionPlugin)
-        .add(tablePlugin),
-    }));
-
-    tableNode = prosemirrorUtils.findParentNodeOfTypeClosestToPos(
-      editorView.state.selection.$from,
-      editorView.state.schema.nodes.table,
-    );
-  });
-  describe('should group the menu items correctly', () => {
-    ffTest(
-      'platform.editor.menu.group-items',
-      () => {
-        // Run test case when FF platform.editor..menu.group-items is true
-        const tableRef = editorView.dom.querySelector('table');
-        const editorRef = {
-          current: document.createElement('div'),
-        };
-        render(
-          <ReactEditorViewContext.Provider
-            value={{
-              editorRef,
-            }}
-          >
-            {' '}
-            <IntlProvider locale="en">
-              <DragMenu
-                editorView={editorView}
-                isOpen={true}
-                getEditorContainerWidth={jest.fn()}
-                tableRef={tableRef as HTMLTableElement}
-                tableNode={tableNode?.node}
-                direction="row"
-              />
-            </IntlProvider>
-          </ReactEditorViewContext.Provider>,
-        );
-        expect(screen.getAllByRole('menu')).toHaveLength(1);
-        expect(screen.getAllByRole('group')).toHaveLength(2);
-      },
-      () => {
-        // Run test case when FF platform.editor..menu.group-items is false
-        const tableRef = editorView.dom.querySelector('table');
-        const editorRef = {
-          current: document.createElement('div'),
-        };
-        render(
-          <ReactEditorViewContext.Provider
-            value={{
-              editorRef,
-            }}
-          >
-            <IntlProvider locale="en">
-              <DragMenu
-                editorView={editorView}
-                isOpen={true}
-                getEditorContainerWidth={jest.fn()}
-                tableRef={tableRef as HTMLTableElement}
-                tableNode={tableNode?.node}
-                direction="row"
-              />
-            </IntlProvider>
-          </ReactEditorViewContext.Provider>,
-        );
-        expect(screen.getAllByRole('menu')).toHaveLength(2);
-        expect(screen.queryByRole('group')).toBeNull();
-      },
-    );
-  });
-  describe('menu items', () => {
-    it('should render the right menu items for row', () => {
-      // Run test case when FF platform.editor..menu.group-items is true
-      const tableRef = editorView.dom.querySelector('table');
-      const editorRef = {
-        current: document.createElement('div'),
-      };
-      render(
-        <ReactEditorViewContext.Provider
-          value={{
-            editorRef,
-          }}
-        >
-          <div id="drag-handle-button-row">dragmenu anchor</div>
-          <IntlProvider locale="en">
-            <DragMenu
-              editorView={editorView}
-              isOpen={true}
-              getEditorContainerWidth={jest.fn()}
-              tableRef={tableRef as HTMLTableElement}
-              tableNode={tableNode?.node}
-              direction="row"
-            />
-          </IntlProvider>
-        </ReactEditorViewContext.Provider>,
-      );
-
-      const items = screen.getAllByRole('menuitem');
-      const menuitemTextArray = items.map((item) => item.textContent);
-      expect(menuitemTextArray).toMatchInlineSnapshot(`
-          Array [
-            "Add row aboveCtrl+Alt+↑",
-            "Add row belowCtrl+Alt+↓",
-            "Clear cell⌫",
-            "Delete rowCtrl+⌫",
-            "Move row upCtrl+Alt+Shift+↑",
-            "Move row downCtrl+Alt+Shift+↓",
-          ]
-        `);
-    });
-    it('should render the right menu items for column', () => {
-      const tableRef = editorView.dom.querySelector('table');
-      const editorRef = {
-        current: document.createElement('div'),
-      };
-      render(
-        <ReactEditorViewContext.Provider
-          value={{
-            editorRef,
-          }}
-        >
-          <IntlProvider locale="en">
-            <DragMenu
-              editorView={editorView}
-              isOpen={true}
-              getEditorContainerWidth={jest.fn()}
-              tableRef={tableRef as HTMLTableElement}
-              tableNode={tableNode?.node}
-              direction="column"
-            />
-          </IntlProvider>
-        </ReactEditorViewContext.Provider>,
-      );
-
-      const items = screen.getAllByRole('menuitem');
-      const menuitemTextArray = items.map((item) => item.textContent);
-      expect(menuitemTextArray).toMatchInlineSnapshot(`
-          Array [
-            "Add column leftCtrl+Alt+←",
-            "Add column rightCtrl+Alt+→",
-            "Distribute columns",
-            "Clear cell⌫",
-            "Delete columnCtrl+⌫",
-            "Move column leftCtrl+Alt+Shift+←",
-            "Move column rightCtrl+Alt+Shift+→",
-            "Sort increasing",
-            "Sort decreasing",
-          ]
-        `);
-    });
-    // first row menu item check
-    ffTest(
-      'platform.editor.table.new-cell-context-menu-styling',
-      () => {
-        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
-
-        const tableRef = editorView.dom.querySelector('table');
-        const editorRef = {
-          current: document.createElement('div'),
-        };
-        render(
-          <ReactEditorViewContext.Provider
-            value={{
-              editorRef,
-            }}
-          >
-            <div id="drag-handle-button-row">dragmenu anchor</div>
-            <IntlProvider locale="en">
-              <DragMenu
-                editorView={editorView}
-                isOpen={true}
-                getEditorContainerWidth={jest.fn()}
-                tableRef={tableRef as HTMLTableElement}
-                tableNode={tableNode?.node}
-                direction="row"
-                index={0}
-              />
-            </IntlProvider>
-          </ReactEditorViewContext.Provider>,
-        );
-
-        const items = screen.getAllByRole('menuitem');
-        const menuitemTextArray = items.map((item) => item.textContent);
-        expect(menuitemTextArray).toMatchInlineSnapshot(`
-              Array [
-                "Add row aboveCtrl+Alt+↑",
-                "Add row belowCtrl+Alt+↓",
-                "Clear cell⌫",
-                "Delete rowCtrl+⌫",
-                "Move row upCtrl+Alt+Shift+↑",
-                "Move row downCtrl+Alt+Shift+↓",
-                "Header row",
-                "Row numbers",
-              ]
-            `);
-      },
-      () => {
-        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is false
-        const tableRef = editorView.dom.querySelector('table');
-        const editorRef = {
-          current: document.createElement('div'),
-        };
-        render(
-          <ReactEditorViewContext.Provider
-            value={{
-              editorRef,
-            }}
-          >
-            <div id="drag-handle-button-row">dragmenu anchor</div>
-            <IntlProvider locale="en">
-              <DragMenu
-                editorView={editorView}
-                isOpen={true}
-                getEditorContainerWidth={jest.fn()}
-                tableRef={tableRef as HTMLTableElement}
-                tableNode={tableNode?.node}
-                direction="row"
-                index={0}
-              />
-            </IntlProvider>
-          </ReactEditorViewContext.Provider>,
-        );
-
-        const items = screen.getAllByRole('menuitem');
-        const menuitemTextArray = items.map((item) => item.textContent);
-        expect(menuitemTextArray).toMatchInlineSnapshot(`
-              Array [
-                "Add row aboveCtrl+Alt+↑",
-                "Add row belowCtrl+Alt+↓",
-                "Clear cell⌫",
-                "Delete rowCtrl+⌫",
-                "Move row upCtrl+Alt+Shift+↑",
-                "Move row downCtrl+Alt+Shift+↓",
-              ]
-            `);
-      },
-    );
-    // second row menu item check
-    ffTest(
-      'platform.editor.table.new-cell-context-menu-styling',
-      () => {
-        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
-
-        const tableRef = editorView.dom.querySelector('table');
-        const editorRef = {
-          current: document.createElement('div'),
-        };
-        render(
-          <ReactEditorViewContext.Provider
-            value={{
-              editorRef,
-            }}
-          >
-            <div id="drag-handle-button-row">dragmenu anchor</div>
-            <IntlProvider locale="en">
-              <DragMenu
-                editorView={editorView}
-                isOpen={true}
-                getEditorContainerWidth={jest.fn()}
-                tableRef={tableRef as HTMLTableElement}
-                tableNode={tableNode?.node}
-                direction="row"
-                index={1}
-              />
-            </IntlProvider>
-          </ReactEditorViewContext.Provider>,
-        );
-
-        const items = screen.getAllByRole('menuitem');
-        const menuitemTextArray = items.map((item) => item.textContent);
-        expect(menuitemTextArray).toMatchInlineSnapshot(`
-              Array [
-                "Add row aboveCtrl+Alt+↑",
-                "Add row belowCtrl+Alt+↓",
-                "Clear cell⌫",
-                "Delete rowCtrl+⌫",
-                "Move row upCtrl+Alt+Shift+↑",
-                "Move row downCtrl+Alt+Shift+↓",
-                "Row numbers",
-              ]
-            `);
-      },
-      () => {
-        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is false
-        const tableRef = editorView.dom.querySelector('table');
-        const editorRef = {
-          current: document.createElement('div'),
-        };
-        render(
-          <ReactEditorViewContext.Provider
-            value={{
-              editorRef,
-            }}
-          >
-            <div id="drag-handle-button-row">dragmenu anchor</div>
-            <IntlProvider locale="en">
-              <DragMenu
-                editorView={editorView}
-                isOpen={true}
-                getEditorContainerWidth={jest.fn()}
-                tableRef={tableRef as HTMLTableElement}
-                tableNode={tableNode?.node}
-                direction="row"
-                index={1}
-              />
-            </IntlProvider>
-          </ReactEditorViewContext.Provider>,
-        );
-
-        const items = screen.getAllByRole('menuitem');
-        const menuitemTextArray = items.map((item) => item.textContent);
-        expect(menuitemTextArray).toMatchInlineSnapshot(`
-              Array [
-                "Add row aboveCtrl+Alt+↑",
-                "Add row belowCtrl+Alt+↓",
-                "Clear cell⌫",
-                "Delete rowCtrl+⌫",
-                "Move row upCtrl+Alt+Shift+↑",
-                "Move row downCtrl+Alt+Shift+↓",
-              ]
-            `);
-      },
-    );
-    // first column menu item check
-    ffTest(
-      'platform.editor.table.new-cell-context-menu-styling',
-      () => {
-        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
-
-        const tableRef = editorView.dom.querySelector('table');
-        const editorRef = {
-          current: document.createElement('div'),
-        };
-        render(
-          <ReactEditorViewContext.Provider
-            value={{
-              editorRef,
-            }}
-          >
-            <div id="drag-handle-button-row">dragmenu anchor</div>
-            <IntlProvider locale="en">
-              <DragMenu
-                editorView={editorView}
-                isOpen={true}
-                getEditorContainerWidth={jest.fn()}
-                tableRef={tableRef as HTMLTableElement}
-                tableNode={tableNode?.node}
-                direction="column"
-                index={0}
-              />
-            </IntlProvider>
-          </ReactEditorViewContext.Provider>,
-        );
-
-        const items = screen.getAllByRole('menuitem');
-        const menuitemTextArray = items.map((item) => item.textContent);
-        expect(menuitemTextArray).toMatchInlineSnapshot(`
-              Array [
-                "Add column leftCtrl+Alt+←",
-                "Add column rightCtrl+Alt+→",
-                "Distribute columns",
-                "Clear cell⌫",
-                "Delete columnCtrl+⌫",
-                "Move column leftCtrl+Alt+Shift+←",
-                "Move column rightCtrl+Alt+Shift+→",
-                "Sort increasing",
-                "Sort decreasing",
-                "Header column",
-              ]
-            `);
-      },
-      () => {
-        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is false
-        const tableRef = editorView.dom.querySelector('table');
-        const editorRef = {
-          current: document.createElement('div'),
-        };
-        render(
-          <ReactEditorViewContext.Provider
-            value={{
-              editorRef,
-            }}
-          >
-            <div id="drag-handle-button-row">dragmenu anchor</div>
-            <IntlProvider locale="en">
-              <DragMenu
-                editorView={editorView}
-                isOpen={true}
-                getEditorContainerWidth={jest.fn()}
-                tableRef={tableRef as HTMLTableElement}
-                tableNode={tableNode?.node}
-                direction="column"
-                index={0}
-              />
-            </IntlProvider>
-          </ReactEditorViewContext.Provider>,
-        );
-
-        const items = screen.getAllByRole('menuitem');
-        const menuitemTextArray = items.map((item) => item.textContent);
-        expect(menuitemTextArray).toMatchInlineSnapshot(`
-              Array [
-                "Add column leftCtrl+Alt+←",
-                "Add column rightCtrl+Alt+→",
-                "Distribute columns",
-                "Clear cell⌫",
-                "Delete columnCtrl+⌫",
-                "Move column leftCtrl+Alt+Shift+←",
-                "Move column rightCtrl+Alt+Shift+→",
-                "Sort increasing",
-                "Sort decreasing",
-              ]
-            `);
-      },
-    );
-    // second column menu item check
-    ffTest('platform.editor.table.new-cell-context-menu-styling', () => {
-      // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
-      const tableRef = editorView.dom.querySelector('table');
-      const editorRef = {
-        current: document.createElement('div'),
-      };
-      render(
-        <ReactEditorViewContext.Provider
-          value={{
-            editorRef,
-          }}
-        >
-          <div id="drag-handle-button-row">dragmenu anchor</div>
-          <IntlProvider locale="en">
-            <DragMenu
-              editorView={editorView}
-              isOpen={true}
-              getEditorContainerWidth={jest.fn()}
-              tableRef={tableRef as HTMLTableElement}
-              tableNode={tableNode?.node}
-              direction="column"
-              index={1}
-            />
-          </IntlProvider>
-        </ReactEditorViewContext.Provider>,
-      );
-
-      const items = screen.getAllByRole('menuitem');
-      const menuitemTextArray = items.map((item) => item.textContent);
-      expect(menuitemTextArray).toMatchInlineSnapshot(`
-              Array [
-                "Add column leftCtrl+Alt+←",
-                "Add column rightCtrl+Alt+→",
-                "Distribute columns",
-                "Clear cell⌫",
-                "Delete columnCtrl+⌫",
-                "Move column leftCtrl+Alt+Shift+←",
-                "Move column rightCtrl+Alt+Shift+→",
-                "Sort increasing",
-                "Sort decreasing",
-              ]
-            `);
-    });
-  });
-});