@atlaskit/editor-plugin-table 0.0.6 → 0.0.8

package/src/__tests__/unit/hover-selection.ts

@@ -0,0 +1,277 @@
+import { EditorView } from 'prosemirror-view';
+import {
+  getCellsInColumn,
+  getCellsInRow,
+  getCellsInTable,
+} from '@atlaskit/editor-tables/utils';
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+  LightEditorPlugin,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  p,
+  table,
+  tr,
+  tdEmpty,
+  tdCursor,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { selectColumns } from '@atlaskit/editor-test-helpers/table';
+
+import {
+  clearHoverSelection,
+  hoverColumns,
+  hoverRows,
+  hoverTable,
+} from '../../plugins/table/commands';
+import {
+  TableDecorations,
+  TableCssClassName as ClassName,
+  TablePluginState,
+} from '../../plugins/table/types';
+import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
+import { getDecorations } from '../../plugins/table/pm-plugins/decorations/plugin';
+import tablePlugin from '../../plugins/table-plugin';
+import { PluginKey } from 'prosemirror-state';
+
+describe('table hover selection plugin', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const preset = new Preset<LightEditorPlugin>().add(tablePlugin);
+
+  const editor = (doc: DocBuilder) =>
+    createEditor<TablePluginState, PluginKey>({
+      doc,
+      preset,
+      pluginKey,
+    });
+
+  const getTableDecorations = (
+    editorView: EditorView,
+    cells: Array<{ pos: number }>,
+    key?: TableDecorations,
+  ) => {
+    const decorationSet = getDecorations(editorView.state);
+
+    if (key) {
+      return decorationSet.find(
+        cells[0].pos,
+        cells[cells.length - 1].pos,
+        (spec) => spec.key.indexOf(key) > -1,
+      );
+    }
+
+    return decorationSet.find(cells[0].pos, cells[cells.length - 1].pos);
+  };
+
+  describe('when table has 3 columns/2 rows', () => {
+    let editorView: EditorView;
+    beforeEach(() => {
+      const mountedEditor = editor(
+        doc(
+          p('text'),
+          table()(
+            tr(tdCursor, tdEmpty, tdEmpty),
+            tr(tdEmpty, tdEmpty, tdEmpty),
+          ),
+        ),
+      );
+
+      editorView = mountedEditor.editorView;
+    });
+
+    describe('selectColumn(1)', () => {
+      const column = 1;
+      beforeEach(() => {
+        selectColumns([column])(editorView.state, editorView.dispatch);
+      });
+
+      it('should add decoration', () => {
+        const cells = getCellsInColumn(column)(editorView.state.selection)!;
+
+        const decor = getTableDecorations(
+          editorView,
+          cells,
+          TableDecorations.COLUMN_SELECTED,
+        );
+
+        expect(decor).toHaveLength(2);
+      });
+    });
+
+    describe('hoverColumn(number)', () => {
+      it('can create a hover selection over multiple columns', () => {
+        hoverColumns([0, 1])(editorView.state, editorView.dispatch);
+        const cells = getCellsInColumn(0)(editorView.state.selection)!.concat(
+          getCellsInColumn(1)(editorView.state.selection)!,
+        );
+
+        expect(
+          getTableDecorations(
+            editorView,
+            cells,
+            TableDecorations.ALL_CONTROLS_HOVER,
+          ),
+        ).toHaveLength(4);
+      });
+
+      describe.each([0, 1, 2])(
+        'when called hoverColumns with [%d]',
+        (column) => {
+          it('should create a hover selection of column', () => {
+            hoverColumns([column])(editorView.state, editorView.dispatch);
+            const decos = getTableDecorations(
+              editorView,
+              getCellsInColumn(column)(editorView.state.selection)!,
+              TableDecorations.ALL_CONTROLS_HOVER,
+            );
+
+            // selection spans 2 cells in the selected column (because we have 2 rows in the table)
+            expect(decos).toHaveLength(2);
+          });
+
+          it('should apply the hovered column class', () => {
+            hoverColumns([column])(editorView.state, editorView.dispatch);
+
+            const decos = getTableDecorations(
+              editorView,
+              getCellsInColumn(column)(editorView.state.selection)!,
+              TableDecorations.ALL_CONTROLS_HOVER,
+            );
+
+            decos.forEach((deco) => {
+              expect(deco).toEqual(
+                expect.objectContaining({
+                  type: expect.objectContaining({
+                    attrs: expect.objectContaining({
+                      class: expect.stringContaining(ClassName.HOVERED_COLUMN),
+                    }),
+                  }),
+                }),
+              );
+            });
+          });
+
+          it('can apply the danger class to the decoration', () => {
+            hoverColumns([column], true)(editorView.state, editorView.dispatch);
+
+            const decos = getTableDecorations(
+              editorView,
+              getCellsInColumn(column)(editorView.state.selection)!,
+              TableDecorations.ALL_CONTROLS_HOVER,
+            );
+
+            expect(decos).toHaveLength(2);
+            const expected = [
+              ClassName.HOVERED_CELL_IN_DANGER,
+              ClassName.HOVERED_COLUMN,
+            ];
+
+            decos.forEach((deco) => {
+              // @ts-ignore
+              expect(deco.type.attrs.class.split(' ')).toEqual(
+                expect.arrayContaining(expected),
+              );
+            });
+          });
+        },
+      );
+    });
+  });
+
+  describe('hoverRow(number)', () => {
+    describe('when table has 3 rows', () => {
+      let editorView: EditorView;
+      beforeEach(() => {
+        const mountedEditor = editor(
+          doc(
+            p('text'),
+            table()(
+              tr(tdCursor, tdEmpty),
+              tr(tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty),
+            ),
+          ),
+        );
+
+        editorView = mountedEditor.editorView;
+      });
+
+      it('can create a hover selection over multiple rows', () => {
+        hoverRows([0, 1])(editorView.state, editorView.dispatch);
+        const cells = getCellsInRow(0)(editorView.state.selection)!.concat(
+          getCellsInRow(1)(editorView.state.selection)!,
+        );
+
+        expect(
+          getTableDecorations(
+            editorView,
+            cells,
+            TableDecorations.ALL_CONTROLS_HOVER,
+          ),
+        ).toHaveLength(4);
+      });
+
+      describe.each([0, 1, 2])('when called hoverRows with [%d]', (row) => {
+        it('should create a hover selection of row', () => {
+          hoverRows([row])(editorView.state, editorView.dispatch);
+          expect(
+            getTableDecorations(
+              editorView,
+              getCellsInRow(row)(editorView.state.selection)!,
+              TableDecorations.ALL_CONTROLS_HOVER,
+            ),
+          ).toHaveLength(2);
+        });
+
+        it('can apply the danger class to the decoration', () => {
+          hoverRows([row], true)(editorView.state, editorView.dispatch);
+          const cells = getCellsInRow(row)(editorView.state.selection)!;
+          const decos = getTableDecorations(
+            editorView,
+            cells,
+            TableDecorations.ALL_CONTROLS_HOVER,
+          );
+
+          expect(decos).toHaveLength(2);
+          decos.forEach((deco) => {
+            // @ts-ignore
+            expect(deco.type.attrs.class.split(' ')).toContain('danger');
+          });
+        });
+      });
+    });
+  });
+
+  describe('hovertable()', () => {
+    describe('when table has 3 rows', () => {
+      it('should create a hover selection of the whole table', () => {
+        const { editorView } = editor(
+          doc(
+            p('text'),
+            table()(
+              tr(tdCursor, tdEmpty),
+              tr(tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty),
+            ),
+          ),
+        );
+
+        hoverTable()(editorView.state, editorView.dispatch);
+
+        // selection should span all 6 cells
+        expect(
+          getTableDecorations(
+            editorView,
+            getCellsInTable(editorView.state.selection)!,
+            TableDecorations.ALL_CONTROLS_HOVER,
+          ),
+        ).toHaveLength(6);
+
+        // reset hover selection plugin to an empty DecorationSet
+        clearHoverSelection()(editorView.state, editorView.dispatch);
+      });
+    });
+  });
+});

package/src/__tests__/unit/index-with-fake-timers.ts

@@ -0,0 +1,107 @@
+// TODO: ensure this works as I have removed sinon here
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  doc,
+  p,
+  table,
+  tr,
+  tdEmpty,
+  tdCursor,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import TableView from '../../plugins/table/nodeviews/table';
+import { TablePluginState, PluginConfig } from '../../plugins/table/types';
+import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+
+// TODO: this doesn't work
+describe.skip('TableView', () => {
+  const createEditor = createEditorFactory<TablePluginState>();
+  const getEditorContainerWidth = () => ({ width: 500 });
+  const fakeGetEditorFeatureFlags = () => ({});
+  const originalHandleRef = (TableView.prototype as any).handleRef;
+  const handleRefInnerMock = jest.fn(originalHandleRef);
+  let handleRefMock: jest.SpyInstance;
+
+  const editor = (doc: DocBuilder) => {
+    const tableOptions = {
+      allowNumberColumn: true,
+      allowHeaderRow: true,
+      allowHeaderColumn: true,
+      permittedLayouts: 'all',
+    } as PluginConfig;
+    return createEditor({
+      doc,
+      editorProps: {
+        allowTables: tableOptions,
+        media: {
+          allowMediaSingle: true,
+        },
+      },
+      pluginKey,
+    });
+  };
+
+  // beforeEach(() => {
+  //   handleRefMock = jest
+  //     .spyOn(Object.getPrototypeOf(TableView), 'handleRef')
+  //     .mockImplementation(() => {
+  //       console.log('getting called?');
+  //       // window.setTimeout(() => handleRefInnerMock.call(this, ref), 0);
+  //     });
+  // });
+  // previous regression involved PM trying to render child DOM elements,
+  // but the NodeView had an undefined contentDOM after the React render finishes
+  // (since render is not synchronous)
+  it('always provides a content DOM', function (this: any) {
+    jest.useFakeTimers();
+
+    // in the tests, handleRef gets called immediately (due to event loop ordering)
+    // however, the ref callback function can be called async from React after
+    // calling render, which can often occur in the browser
+    //
+    // to simulate this, we add a callback to force it to run out-of-order
+    // const handleRefMock = sinon
+    //   // @ts-ignore
+    //   .stub(TableView.prototype, '_handleRef')
+    //   .callsFake((ref: HTMLElement) => {
+    //     window.setTimeout(() => handleRefInnerMock.call(this, ref), 0);
+    //   });
+
+    // create the NodeView
+    const node = table()(tr(tdCursor, tdEmpty, tdEmpty))(defaultSchema);
+    const { editorView, portalProviderAPI } = editor(doc(p()));
+    const eventDispatcher = ({ on: () => {} } as unknown) as EventDispatcher;
+    const tableView = new TableView({
+      node,
+      allowColumnResizing: false,
+      view: editorView,
+      portalProviderAPI,
+      eventDispatcher,
+      getPos: () => 1,
+      getEditorContainerWidth,
+      getEditorFeatureFlags: fakeGetEditorFeatureFlags,
+      hasIntlContext: true,
+    }).init();
+
+    // we expect to have a contentDOM after instanciating the NodeView so that
+    // ProseMirror will render the node's children into the element
+    expect(tableView.contentDOM).toBeDefined();
+
+    // we shouldn't have called the mock yet, since it's behind the window.setTimeout
+    expect(handleRefInnerMock).not.toBeCalled();
+
+    // run the timers through
+    jest.runAllTimers();
+
+    // the timer should have expired now
+    expect(handleRefInnerMock).toBeCalled();
+
+    // ensure we still have a contentDOM
+    expect(tableView.contentDOM).toBeDefined();
+
+    // reset the mock
+    handleRefMock.mockClear();
+  });
+});