@atlaskit/editor-plugin-table 7.2.2 → 7.3.0

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

@@ -1,217 +0,0 @@
-import React from 'react';
-
-import { cleanup, render, screen } from '@testing-library/react';
-import { createPortal } from 'react-dom';
-
-import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
-
-import FixedButton, {
-  BUTTON_WIDTH,
-  calcLeftPos,
-  calcObserverTargetMargin,
-} from '../../../ui/FloatingContextualButton/FixedButton';
-
-jest.mock('react-dom', () => ({
-  createPortal: jest.fn((node: React.ReactNode) => node),
-}));
-
-describe('calcLeftPos()', () => {
-  it('should calculate left position', () => {
-    let result = calcLeftPos({
-      buttonWidth: 0,
-      cellRectLeft: 0,
-      cellRefWidth: 0,
-      offset: 0,
-    });
-    expect(result).toEqual(0);
-    result = calcLeftPos({
-      buttonWidth: 20,
-      cellRectLeft: 400,
-      cellRefWidth: 250,
-      offset: 3,
-    });
-    expect(result).toEqual(627);
-  });
-});
-
-describe('calcObserverTargetMargin()', () => {
-  it('should calculate the margin', () => {
-    const mockTableWrapper = document.createElement('div');
-    mockTableWrapper.scrollLeft = 50;
-    const tableSpy = jest.spyOn(mockTableWrapper, 'getBoundingClientRect');
-    tableSpy.mockImplementation(() => ({ left: 800 } as DOMRect));
-
-    const mockButton = document.createElement('div');
-    const buttonSpy = jest.spyOn(mockButton, 'getBoundingClientRect');
-    buttonSpy.mockImplementation(() => ({ left: 1200 } as DOMRect));
-
-    const result = calcObserverTargetMargin(mockTableWrapper, mockButton);
-    expect(result).toEqual(450);
-  });
-});
-
-describe('<FixedButton />', () => {
-  const targetCellRef = document.createElement('div');
-  const fixedButtonRef = {
-    current: document.createElement('div'),
-  };
-  const observerTargetRef = {
-    current: document.createElement('div'),
-  };
-  const props = {
-    offset: 10,
-    stickyHeader: {
-      pos: 0,
-      top: 0,
-      padding: 0,
-      sticky: true,
-    },
-    targetCellPosition: 0,
-    targetCellRef,
-    mountTo: document.createElement('div'),
-    tableWrapper: document.createElement('div'),
-    fixedButtonRef,
-    observerTargetRef,
-    isContextualMenuOpen: false,
-  };
-  const MockChildren = () => <div data-testid="mock-children" />;
-
-  it('should render children', () => {
-    render(
-      <FixedButton {...props}>
-        <MockChildren />
-      </FixedButton>,
-    );
-    expect(screen.getByTestId('mock-children')).toBeInTheDocument();
-  });
-
-  it('should render using createPortal', () => {
-    render(
-      <FixedButton {...props}>
-        <MockChildren />
-      </FixedButton>,
-    );
-    expect(createPortal).toBeCalled();
-  });
-
-  describe('observerTargetRef', () => {
-    it('should have correct inital styles', () => {
-      const { container } = render(
-        <FixedButton {...props}>
-          <MockChildren />
-        </FixedButton>,
-      );
-      expect(container.firstChild).toHaveStyle(
-        `top: 0px; left: 0px; position: absolute; width: ${BUTTON_WIDTH}px; height: ${BUTTON_WIDTH}px`,
-      );
-    });
-
-    it('should have correct "margin-left" style', () => {
-      const mockTableWrapper = document.createElement('div');
-      mockTableWrapper.scrollLeft = 123;
-      const { container } = render(
-        <FixedButton {...props} tableWrapper={mockTableWrapper}>
-          <MockChildren />
-        </FixedButton>,
-      );
-
-      expect(container.firstChild).toHaveStyle(`margin-left: 123px;`);
-    });
-  });
-
-  describe('fixedButtonRef', () => {
-    it('should have correct "top" style', () => {
-      const { container, rerender } = render(
-        <FixedButton {...props} offset={10}>
-          <MockChildren />
-        </FixedButton>,
-      );
-      expect(container.firstChild?.firstChild).toHaveStyle(`top: 20px;`);
-
-      rerender(
-        <FixedButton
-          {...props}
-          stickyHeader={{ pos: 0, top: 3, padding: 0, sticky: true }}
-        >
-          <MockChildren />
-        </FixedButton>,
-      );
-      expect(container.firstChild?.firstChild).toHaveStyle(`top: 23px;`);
-
-      rerender(
-        <FixedButton
-          {...props}
-          stickyHeader={{ pos: 0, top: 0, padding: 2, sticky: true }}
-        >
-          <MockChildren />
-        </FixedButton>,
-      );
-      expect(container.firstChild?.firstChild).toHaveStyle(`top: 22px;`);
-    });
-
-    it('should have correct "left" style', () => {
-      const mockRef = document.createElement('div');
-      const mockRefSpy = jest.spyOn(mockRef, 'getBoundingClientRect');
-      mockRefSpy.mockImplementation(() => ({ left: 3 } as DOMRect));
-
-      const { container } = render(
-        <FixedButton {...props} targetCellRef={mockRef}>
-          <MockChildren />
-        </FixedButton>,
-      );
-      expect(container.firstChild?.firstChild).toHaveStyle(`left: -27px;`);
-    });
-
-    it('should have correct "z-index" style', () => {
-      const { container } = render(
-        <FixedButton {...props}>
-          <MockChildren />
-        </FixedButton>,
-      );
-      expect(container.firstChild?.firstChild).toHaveStyle(
-        `z-index: ${akEditorTableCellOnStickyHeaderZIndex}`,
-      );
-    });
-  });
-
-  describe('useEffect()', () => {
-    const observe = jest.fn();
-    const unobserve = jest.fn();
-
-    window.IntersectionObserver = jest.fn((callback) => {
-      callback([{ isIntersecting: true }]);
-      return {
-        observe,
-        unobserve,
-      };
-    }) as any;
-
-    it('should add / remove event listener to the table wrapper', () => {
-      const mockTableWrapper = document.createElement('div');
-      const addSpy = jest.spyOn(mockTableWrapper, 'addEventListener');
-      const removeSpy = jest.spyOn(mockTableWrapper, 'removeEventListener');
-
-      render(
-        <FixedButton {...props} tableWrapper={mockTableWrapper}>
-          <MockChildren />
-        </FixedButton>,
-      );
-
-      expect(addSpy).toBeCalled();
-      cleanup();
-      expect(removeSpy).toBeCalled();
-    });
-
-    it('should observe / unobserve an InterSectionObserver', () => {
-      render(
-        <FixedButton {...props}>
-          <MockChildren />
-        </FixedButton>,
-      );
-
-      expect(observe).toHaveBeenCalled();
-      cleanup();
-      expect(unobserve).toHaveBeenCalled();
-    });
-  });
-});

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

@@ -1,123 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl-next';
-
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-// 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 type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import * as prosemirrorUtils 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,
-  table,
-  tdCursor,
-  tdEmpty,
-  thEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import tablePlugin from '../../../plugin';
-import type { Props as FloatingContextualButtonProps } from '../../../ui/FloatingContextualButton';
-import FloatingContextualButton from '../../../ui/FloatingContextualButton';
-
-jest.mock('@atlaskit/editor-prosemirror/utils', () => {
-  // Unblock prosemirror bump:
-  // Workaround to enable spy on prosemirror-utils cjs bundle
-  const originalModule = jest.requireActual(
-    '@atlaskit/editor-prosemirror/utils',
-  );
-
-  return {
-    __esModule: true,
-    ...originalModule,
-  };
-});
-
-const createEditor = createProsemirrorEditorFactory();
-let createAnalyticsEvent = jest.fn(() => ({ fire() {} } as UIAnalyticsEvent));
-const editor = (doc: DocBuilder) =>
-  createEditor({
-    doc,
-    preset: new Preset<LightEditorPlugin>()
-      .add([featureFlagsPlugin, {}])
-      .add([analyticsPlugin, {}])
-      .add(contentInsertionPlugin)
-      .add(widthPlugin)
-      .add(guidelinePlugin)
-      .add(selectionPlugin)
-      .add(tablePlugin),
-  });
-
-describe('Floating Contextual Button', () => {
-  let editorView: EditorView;
-  let refs: { [name: string]: number };
-  let tableNode: ContentNodeWithPos | undefined;
-
-  beforeEach(() => {
-    ({ editorView, refs } = editor(
-      doc(
-        table()(
-          tr('{firstCell}', thEmpty, thEmpty, thEmpty),
-          tr(tdCursor, tdEmpty, tdEmpty),
-          tr(tdEmpty, tdEmpty, tdEmpty),
-        ),
-      ),
-    ));
-
-    tableNode = prosemirrorUtils.findParentNodeOfTypeClosestToPos(
-      editorView.state.selection.$from,
-      editorView.state.schema.nodes.table,
-    );
-  });
-
-  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('renders', () => {
-      component({
-        editorView,
-        targetCellPosition: refs.firstCell,
-      });
-
-      expect(screen.getByLabelText('Cell options')).toBeInTheDocument();
-    });
-
-    it('dispatches an analytics event', () => {
-      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

@@ -1,68 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl-next';
-
-// 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 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 tablePlugin from '../../../plugin';
-import { getPluginState } from '../../../pm-plugins/plugin-factory';
-import FloatingContextualMenu from '../../../ui/FloatingContextualMenu';
-
-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([featureFlagsPlugin, {}])
-          .add([analyticsPlugin, {}])
-          .add(contentInsertionPlugin)
-          .add(widthPlugin)
-          .add(guidelinePlugin)
-          .add(selectionPlugin)
-          .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

@@ -1,178 +0,0 @@
-import React from 'react';
-
-import { fireEvent, render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl-next';
-
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { getCellsInColumn, selectTable } from '@atlaskit/editor-tables/utils';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  doc,
-  table,
-  tdCursor,
-  tdEmpty,
-  thEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { selectColumns, selectRows } from '@atlaskit/editor-test-helpers/table';
-
-import tablePlugin from '../../../plugin';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
-import type { TablePluginState } from '../../../types';
-import { TableCssClassName } from '../../../types';
-import type { Props as FloatingDeleteButtonProps } from '../../../ui/FloatingDeleteButton';
-import FloatingDeleteButton from '../../../ui/FloatingDeleteButton';
-import * as tableColumnControlsUtils from '../../../utils/column-controls';
-
-describe('Floating Delete Button', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
-
-  const editor = (doc: DocBuilder) =>
-    createEditor({
-      doc,
-      editorProps: {
-        allowTables: false,
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ config: undefined })],
-        },
-      },
-      pluginKey,
-    });
-
-  let editorView: EditorView;
-
-  beforeEach(() => {
-    ({ editorView } = editor(
-      doc(
-        table()(
-          tr(thEmpty, thEmpty, thEmpty),
-          tr(tdCursor, tdEmpty, tdEmpty),
-          tr(tdEmpty, tdEmpty, tdEmpty),
-        ),
-      ),
-    ));
-  });
-
-  const component = (props: FloatingDeleteButtonProps) =>
-    render(
-      <IntlProvider locale="en">
-        <FloatingDeleteButton
-          tableRef={editorView.dom.querySelector('table')!}
-          {...props}
-        />
-      </IntlProvider>,
-    );
-
-  it('should not render a delete button with no selection', () => {
-    component({ selection: editorView.state.selection, editorView });
-
-    expect(screen.queryByLabelText('Popup')).toBeFalsy();
-  });
-
-  it('should not render a delete button with whole table selected', () => {
-    // selects the whole table
-    editorView.dispatch(selectTable(editorView.state.tr));
-
-    component({ selection: editorView.state.selection, editorView });
-
-    expect(screen.queryByLabelText('Popup')).toBeFalsy();
-  });
-
-  describe('Columns', () => {
-    beforeEach(() => {
-      const COLUMN_WIDTH = 33;
-      const tableWrapper = document.querySelector(
-        `.${TableCssClassName.TABLE_NODE_WRAPPER}`,
-      );
-      jest.spyOn(tableWrapper!, 'getBoundingClientRect').mockReturnValue({
-        width: COLUMN_WIDTH * 3,
-      } as DOMRect);
-      tableWrapper!.scrollLeft = 0;
-      jest
-        .spyOn(tableColumnControlsUtils, 'getColumnsWidths')
-        .mockReturnValue([COLUMN_WIDTH, COLUMN_WIDTH, COLUMN_WIDTH]);
-    });
-
-    test.each([[1], [2], [3]])(
-      'should renders a delete button with column %d selected',
-      (column) => {
-        // Select columns start from 0
-        selectColumns([column - 1])(editorView.state, editorView.dispatch);
-
-        component({ selection: editorView.state.selection, editorView });
-
-        expect(screen.getAllByLabelText('Delete column').length).toBe(1);
-      },
-    );
-
-    it('should render a single delete button over multiple column selections', () => {
-      selectColumns([0, 1])(editorView.state, editorView.dispatch);
-
-      component({ selection: editorView.state.selection, editorView });
-
-      expect(screen.getAllByLabelText('Delete column').length).toBe(1);
-    });
-  });
-
-  describe('Rows', () => {
-    test.each([[1], [2], [3]])(
-      'renders a delete button with row %d selected',
-      (row) => {
-        selectRows([row - 1])(editorView.state, editorView.dispatch);
-
-        component({ selection: editorView.state.selection, editorView });
-
-        expect(screen.getAllByLabelText('Delete row').length).toBe(1);
-      },
-    );
-
-    it('only renders a single delete button over multiple row selections', () => {
-      selectRows([0, 1])(editorView.state, editorView.dispatch);
-
-      // selecting the row mutates the editor state (which is inside editorView)
-      component({ selection: editorView.state.selection, editorView });
-
-      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,
-        );
-      });
-    });
-  });
-});