@atlaskit/editor-plugin-table 0.0.10 → 0.1.1

package/src/{plugins/table/__tests__ → __tests__}/unit/toolbar.ts

@@ -1,9 +1,13 @@
 import {
   getToolbarMenuConfig,
   getToolbarCellOptionsConfig,
-} from '../../toolbar';
-import { ToolbarMenuConfig, ToolbarMenuState } from '../../types';
-import { createEditorState } from '@atlaskit/editor-test-helpers/create-editor-state';
+} from '../../plugins/table/toolbar';
+import { ToolbarMenuConfig, ToolbarMenuState } from '../../plugins/table/types';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   p,
@@ -17,11 +21,13 @@ import type {
   FloatingToolbarDropdown,
 } from '@atlaskit/editor-common/types';
 import { splitCell } from '@atlaskit/editor-tables/utils';
-import { canMergeCells } from '../../transforms';
+import { canMergeCells } from '../../plugins/table/transforms';
 import { Rect } from '@atlaskit/editor-tables/table-map';
+import tablePlugin from '../../plugins/table';
+import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 
 jest.mock('@atlaskit/editor-tables/utils');
-jest.mock('../../transforms');
+jest.mock('../../plugins/table/transforms');
 
 const formatMessage: (t: unknown) => string = (id) => 'Lorem ipsum';
 const ctx = { formatMessage };
@@ -131,9 +137,16 @@ describe('getToolbarMenuConfig', () => {
 });
 
 describe('getToolbarCellOptionsConfig', () => {
-  const state = createEditorState(doc(table()(row(td()(p('1{cursor}'))))));
+  const createEditor = createProsemirrorEditorFactory();
+  const {
+    editorView: { state },
+  } = createEditor({
+    doc: doc(table()(row(td()(p('1{cursor}'))))),
+    preset: new Preset<LightEditorPlugin>().add(tablePlugin),
+    pluginKey,
+  });
   const getEditorContainerWidth = () => ({ width: 500 });
-  //
+
   const formatMessage: (t: { id: string }) => string = (message) =>
     `${message.id}`;
   const rect = new Rect(1, 1, 1, 1);
@@ -146,10 +159,6 @@ describe('getToolbarCellOptionsConfig', () => {
     getEditorContainerWidth,
     undefined,
   );
-  //
-  it('is hidden by default', () => {
-    expect(cellOptionsMenu.hidden).toBe(true);
-  });
 
   it('is a dropdown with the following dropdown items with the given order', () => {
     const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
@@ -191,7 +200,7 @@ describe('getToolbarCellOptionsConfig', () => {
   });
 
   it('should have enabled merge cells when multiple cells are selected', () => {
-    ((canMergeCells as Function) as jest.Mock<{}>).mockImplementation(
+    (canMergeCells as Function as jest.Mock<{}>).mockImplementation(
       () => () => true,
     );
     //
@@ -215,8 +224,8 @@ describe('getToolbarCellOptionsConfig', () => {
   });
 
   it('should have enabled split cell when cell can be splitted', () => {
-    ((splitCell as Function) as jest.Mock<{}>).mockImplementation(() => () =>
-      true,
+    (splitCell as Function as jest.Mock<{}>).mockImplementation(
+      () => () => true,
     );
     //
     const cellOptionsMenu = getToolbarCellOptionsConfig(

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { EditorView } from 'prosemirror-view';
+import { createIntl } from 'react-intl-next';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  p,
+  table,
+  tdCursor,
+  tdEmpty,
+  th,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import tablePlugin from '../../../plugins/table-plugin';
+
+import { ContextualMenu } from '../../../plugins/table/ui/FloatingContextualMenu/ContextualMenu';
+
+describe('ContextualMenu', () => {
+  const getEditorContainerWidth = () => ({ width: 500 });
+  const createEditor = createProsemirrorEditorFactory();
+  describe('with right table cell position in plugin state', () => {
+    let editorView: EditorView;
+    beforeEach(() => {
+      ({ editorView } = createEditor({
+        doc: doc(table()(tr(th()(p('')), th()(p(''))), tr(tdCursor, tdEmpty))),
+        preset: new Preset<LightEditorPlugin>().add([
+          tablePlugin,
+          { tableOptions: { advanced: true } },
+        ]),
+      }));
+    });
+
+    it('should render contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
+      const intl = createIntl({ locale: 'en' });
+      render(
+        <ContextualMenu
+          intl={intl}
+          editorView={editorView}
+          isOpen
+          selectionRect={{ bottom: 0, left: 0, right: 0, top: 0 }}
+          getEditorContainerWidth={getEditorContainerWidth}
+        />,
+      );
+
+      expect(
+        screen.getByTestId('table-cell-contextual-menu'),
+      ).toBeInTheDocument();
+    });
+  });
+});

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

@@ -2,7 +2,11 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl-next';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   table,
@@ -11,22 +15,18 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
-import { TablePluginState } from '../../../plugins/table/types';
 import { CornerControls } from '../../../plugins/table/ui/TableFloatingControls/CornerControls';
 import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import tablePlugin from '../../../plugins/table-plugin';
 
 describe('CornerControls', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
+  const createEditor = createProsemirrorEditorFactory();
 
   const editor = (doc: DocBuilder) =>
     createEditor({
       doc,
-      editorProps: {
-        allowTables: false,
-        dangerouslyAppendPlugins: { __plugins: [tablePlugin()] },
-      },
+      preset: new Preset<LightEditorPlugin>().add(tablePlugin),
       pluginKey,
     });
 

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

@@ -1,9 +1,14 @@
-import { ReactWrapper } from 'enzyme';
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import * as prosemirrorUtils from 'prosemirror-utils';
+import type { ContentNodeWithPos } from 'prosemirror-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
 import { EditorView } from 'prosemirror-view';
 import React from 'react';
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
-import { mountWithIntl } from '@atlaskit/editor-test-helpers/enzyme';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   table,
@@ -14,29 +19,23 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { TablePluginState } from '../../../plugins/table/types';
 import FloatingContextualButton, {
   Props as FloatingContextualButtonProps,
-  FloatingContextualButtonInner,
 } from '../../../plugins/table/ui/FloatingContextualButton';
 import tablePlugin from '../../../plugins/table-plugin';
 
-describe('Floating Contextual Button', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
-  let createAnalyticsEvent = jest.fn(() => ({ fire() {} } as UIAnalyticsEvent));
-  const editor = (doc: DocBuilder) =>
-    createEditor({
-      doc,
-      editorProps: {
-        allowTables: false,
-        dangerouslyAppendPlugins: { __plugins: [tablePlugin()] },
-      },
-      createAnalyticsEvent,
-    });
+const createEditor = createProsemirrorEditorFactory();
+let createAnalyticsEvent = jest.fn(() => ({ fire() {} } as UIAnalyticsEvent));
+const editor = (doc: DocBuilder) =>
+  createEditor({
+    doc,
+    preset: new Preset<LightEditorPlugin>().add(tablePlugin),
+  });
 
-  let wrapper: ReactWrapper<FloatingContextualButtonProps>;
+describe('Floating Contextual Button', () => {
   let editorView: EditorView;
   let refs: { [name: string]: number };
+  let tableNode: ContentNodeWithPos | undefined;
 
   beforeEach(() => {
     ({ editorView, refs } = editor(
@@ -49,47 +48,44 @@ describe('Floating Contextual Button', () => {
       ),
     ));
 
-    const tableNode = findParentNodeOfTypeClosestToPos(
+    tableNode = prosemirrorUtils.findParentNodeOfTypeClosestToPos(
       editorView.state.selection.$from,
       editorView.state.schema.nodes.table,
     );
+  });
 
-    wrapper = mountWithIntl(
-      <FloatingContextualButton
-        editorView={editorView}
-        tableNode={tableNode && tableNode.node}
-        targetCellPosition={refs.firstCell}
-        dispatchAnalyticsEvent={createAnalyticsEvent}
-      />,
+  const component = (props: FloatingContextualButtonProps) =>
+    render(
+      <IntlProvider locale="en">
+        <FloatingContextualButton
+          tableNode={tableNode && tableNode.node}
+          dispatchAnalyticsEvent={createAnalyticsEvent}
+          {...props}
+        />
+      </IntlProvider>,
     );
-  });
 
   describe('when an error is thrown in the component', () => {
-    it('handles it gracefully', () => {
-      const buttonWrapper = wrapper.find(FloatingContextualButtonInner);
-      expect(() =>
-        buttonWrapper.simulateError(new Error('Oh no!')),
-      ).not.toThrow();
+    it('renders', () => {
+      component({
+        editorView,
+        targetCellPosition: refs.firstCell,
+      });
+
+      expect(screen.getByLabelText('Cell options')).toBeInTheDocument();
     });
 
     it('dispatches an analytics event', () => {
-      wrapper
-        .find(FloatingContextualButtonInner)
-        .simulateError(new Error('Oh no!'));
-      expect(createAnalyticsEvent).toHaveBeenCalledWith({
-        action: 'unhandledErrorCaught',
-        actionSubject: 'floatingContextualButton',
-        eventType: 'operational',
-        attributes: {
-          error: new Error('Oh no!'),
-          errorInfo: expect.objectContaining({
-            componentStack: expect.stringContaining(
-              'in FloatingContextualButton',
-            ),
-          }),
-          errorRethrown: false,
-        },
+      const mock = jest.spyOn(prosemirrorUtils, 'findDomRefAtPos');
+      mock.mockImplementation(() => {
+        throw new Error('Error message from mock');
       });
+      component({
+        editorView,
+        targetCellPosition: refs.firstCell,
+      });
+
+      expect(createAnalyticsEvent).toHaveBeenCalled();
     });
   });
 });

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { EditorView } from 'prosemirror-view';
+import { IntlProvider } from 'react-intl-next';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  p,
+  table,
+  tdCursor,
+  tdEmpty,
+  th,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
+import FloatingContextualMenu from '../../../plugins/table/ui/FloatingContextualMenu';
+import tablePlugin from '../../../plugins/table-plugin';
+
+describe('FloatingContextualMenu', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  describe('with right position in plugin state', () => {
+    let editorView: EditorView;
+    beforeEach(() => {
+      ({ editorView } = createEditor({
+        doc: doc(table()(tr(th()(p('')), th()(p(''))), tr(tdCursor, tdEmpty))),
+        preset: new Preset<LightEditorPlugin>().add(tablePlugin),
+      }));
+    });
+
+    it('should render floating contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
+      render(
+        <IntlProvider locale="en">
+          <FloatingContextualMenu
+            editorView={editorView}
+            isOpen
+            pluginConfig={getPluginState(editorView.state).pluginConfig}
+            getEditorContainerWidth={jest.fn()}
+          />
+        </IntlProvider>,
+      );
+      expect(screen.getAllByLabelText('Popup').length).toBeGreaterThan(0);
+    });
+  });
+});

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

@@ -9,10 +9,10 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { selectColumns, selectRows } from '@atlaskit/editor-test-helpers/table';
-import { selectTable } from '@atlaskit/editor-tables/utils';
+import { selectTable, getCellsInColumn } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { IntlProvider } from 'react-intl-next';
 import {
   TablePluginState,
@@ -134,4 +134,32 @@ describe('Floating Delete Button', () => {
       expect(screen.getAllByLabelText('Delete row').length).toBe(1);
     });
   });
+  describe('when deleting with the delete button', () => {
+    describe('Columns', () => {
+      it('should move cursor within the table after delete', () => {
+        selectColumns([0, 1])(editorView.state, editorView.dispatch);
+        component({ selection: editorView.state.selection, editorView });
+        const { tr } = editorView.state;
+        const { pos } = getCellsInColumn(2)(tr.selection)![2];
+        const lastCellPos = tr.doc.resolve(pos).pos + 1;
+        fireEvent.click(screen.getByLabelText('Delete column'));
+        expect(editorView.state.selection.from).toBeLessThanOrEqual(
+          lastCellPos,
+        );
+      });
+    });
+    describe('Rows', () => {
+      it('should move cursor within the table after delete', () => {
+        selectRows([0, 1])(editorView.state, editorView.dispatch);
+        component({ selection: editorView.state.selection, editorView });
+        const { tr } = editorView.state;
+        const { pos } = getCellsInColumn(2)(tr.selection)![2];
+        const lastCellPos = tr.doc.resolve(pos).pos + 1;
+        fireEvent.click(screen.getByLabelText('Delete row'));
+        expect(editorView.state.selection.from).toBeLessThanOrEqual(
+          lastCellPos,
+        );
+      });
+    });
+  });
 });