@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/src/plugins/table/__tests__/unit/toolbar.ts

@@ -0,0 +1,240 @@
+import {
+  getToolbarMenuConfig,
+  getToolbarCellOptionsConfig,
+} from '../../toolbar';
+import { ToolbarMenuConfig, ToolbarMenuState } from '../../types';
+import { createEditorState } from '@atlaskit/editor-test-helpers/create-editor-state';
+import {
+  doc,
+  p,
+  tr as row,
+  table,
+  td,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import type {
+  Command,
+  DropdownOptionT,
+  FloatingToolbarDropdown,
+} from '@atlaskit/editor-common/types';
+import { splitCell } from '@atlaskit/editor-tables/utils';
+import { canMergeCells } from '../../transforms';
+import { Rect } from '@atlaskit/editor-tables/table-map';
+
+jest.mock('@atlaskit/editor-tables/utils');
+jest.mock('../../transforms');
+
+const formatMessage: (t: unknown) => string = (id) => 'Lorem ipsum';
+const ctx = { formatMessage };
+
+describe('getToolbarMenuConfig', () => {
+  it('hidden by default', () => {
+    const menu = getToolbarMenuConfig({}, {}, ctx, undefined);
+    expect(menu.hidden).toBe(true);
+  });
+
+  it('visible for allowHeaderRow', () => {
+    const menu = getToolbarMenuConfig(
+      { allowHeaderRow: true },
+      {},
+      ctx,
+      undefined,
+    );
+    expect(menu.hidden).toBe(false);
+  });
+
+  it('visible for allowHeaderColumn', () => {
+    const menu = getToolbarMenuConfig(
+      { allowHeaderColumn: true },
+      {},
+      ctx,
+      undefined,
+    );
+    expect(menu.hidden).toBe(false);
+  });
+
+  it('visible for allowNumberColumn', () => {
+    const menu = getToolbarMenuConfig(
+      { allowNumberColumn: true },
+      {},
+      ctx,
+      undefined,
+    );
+    expect(menu.hidden).toBe(false);
+  });
+
+  it('visible for allowCollapse', () => {
+    const menu = getToolbarMenuConfig(
+      { allowCollapse: true },
+      {},
+      ctx,
+      undefined,
+    );
+    expect(menu.hidden).toBe(false);
+  });
+
+  describe('collapse button states', () => {
+    const getCollapseItem = (
+      config: ToolbarMenuConfig,
+      state: ToolbarMenuState,
+    ) => {
+      const menu = getToolbarMenuConfig(config, state, ctx, undefined);
+      const options = (menu as FloatingToolbarDropdown<Command>).options;
+
+      if (Array.isArray(options)) {
+        return options.find(
+          (option) => option.id === 'editor.table.collapseTable',
+        );
+      }
+    };
+
+    it('should show tick if table is collapsed', () => {
+      const item = getCollapseItem(
+        { allowCollapse: true },
+        { isTableCollapsed: true },
+      )!;
+
+      expect(item.selected).toBe(true);
+    });
+    it('should not show tick if table is not collapsed', () => {
+      const item = getCollapseItem(
+        { allowCollapse: true },
+        { isTableCollapsed: false },
+      )!;
+
+      expect(item.selected).toBe(false);
+    });
+
+    it('should be enabled if table can be collapsed', () => {
+      const item = getCollapseItem(
+        { allowCollapse: true },
+        { canCollapseTable: true },
+      )!;
+
+      expect(item.disabled).toBe(false);
+    });
+
+    it('should be disabled if table cannot be collapsed', () => {
+      const item = getCollapseItem(
+        { allowCollapse: true },
+        { canCollapseTable: false },
+      )!;
+
+      expect(item.disabled).toBe(true);
+    });
+
+    it('should be hidden if collapse feature flag is disabled', () => {
+      const item = getCollapseItem({ allowCollapse: false }, {})!;
+
+      expect(item.hidden).toBe(true);
+    });
+  });
+});
+
+describe('getToolbarCellOptionsConfig', () => {
+  const state = createEditorState(doc(table()(row(td()(p('1{cursor}'))))));
+  const getEditorContainerWidth = () => ({ width: 500 });
+  //
+  const formatMessage: (t: { id: string }) => string = (message) =>
+    `${message.id}`;
+  const rect = new Rect(1, 1, 1, 1);
+  const cellOptionsMenu = getToolbarCellOptionsConfig(
+    state,
+    rect,
+    {
+      formatMessage,
+    },
+    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>>;
+    expect(items[0]).toMatchObject({
+      title: 'fabric.editor.insertColumn',
+      selected: false,
+      disabled: false,
+    });
+    expect(items[1]).toMatchObject({
+      title: 'fabric.editor.insertRow',
+      selected: false,
+      disabled: false,
+    });
+    expect(items[2]).toMatchObject({
+      title: 'fabric.editor.removeColumns',
+      selected: false,
+      disabled: false,
+    });
+    expect(items[3]).toMatchObject({
+      title: 'fabric.editor.removeRows',
+      selected: false,
+      disabled: false,
+    });
+    expect(items[4]).toMatchObject({
+      title: 'fabric.editor.mergeCells',
+      selected: false,
+      disabled: true,
+    });
+    expect(items[5]).toMatchObject({
+      title: 'fabric.editor.splitCell',
+      selected: false,
+      disabled: true,
+    });
+    expect(items[6]).toMatchObject({
+      title: 'fabric.editor.clearCells',
+      selected: false,
+      disabled: false,
+    });
+  });
+
+  it('should have enabled merge cells when multiple cells are selected', () => {
+    ((canMergeCells as Function) as jest.Mock<{}>).mockImplementation(
+      () => () => true,
+    );
+    //
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const item = items.find(
+      (item) => item.title === 'fabric.editor.mergeCells',
+    );
+
+    expect(item).toMatchObject({
+      disabled: false,
+    });
+  });
+
+  it('should have enabled split cell when cell can be splitted', () => {
+    ((splitCell as Function) as jest.Mock<{}>).mockImplementation(() => () =>
+      true,
+    );
+    //
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const splitCellItem = items.find(
+      (item) => item.title === 'fabric.editor.splitCell',
+    );
+
+    expect(splitCellItem).toMatchObject({
+      disabled: false,
+    });
+  });
+});

package/src/plugins/table/__tests__/unit/utils/collapse.ts

@@ -0,0 +1,74 @@
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+  LightEditorPlugin,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  table,
+  tdEmpty,
+  tr,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import tablePlugin from '../../../../table';
+import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
+
+import {
+  isTableCollapsible,
+  collapseSelectedTable,
+} from '../../../utils/collapse';
+
+describe('collapse', () => {
+  const createEditor = createProsemirrorEditorFactory();
+
+  const editor = (doc: DocBuilder, expandInPlugins?: boolean) => {
+    const preset = new Preset<LightEditorPlugin>().add([tablePlugin]);
+
+    const finalPreset = expandInPlugins ? preset.add([expandPlugin]) : preset;
+
+    return createEditor({ doc, preset: finalPreset });
+  };
+
+  describe('isTableCollapsible', () => {
+    it('should not mutate a transaction when using isTableCollapsible', () => {
+      const editorData = editor(doc(table()(tr(tdEmpty, tdEmpty))));
+      const editorView = editorData.editorView;
+      const newTr = editorView.state.tr;
+
+      expect(newTr.steps.length).toEqual(0);
+
+      const isTableCollapsibleRes = isTableCollapsible(newTr);
+
+      expect(newTr.steps.length).toEqual(0);
+      expect(isTableCollapsibleRes.tableIsCollapsible).toEqual(false);
+    });
+
+    it('should allow collapsing a table when expands are in schema', () => {
+      const editorData = editor(doc(table()(tr(tdEmpty, tdEmpty))), true);
+      const editorView = editorData.editorView;
+      const newTr = editorView.state.tr;
+
+      expect(newTr.steps.length).toEqual(0);
+
+      const isTableCollapsibleRes = isTableCollapsible(newTr);
+
+      expect(newTr.steps.length).toEqual(0);
+      expect(isTableCollapsibleRes.tableIsCollapsible).toEqual(true);
+    });
+  });
+
+  describe('collapseSelectedTable', () => {
+    it('should add steps to tr when called', () => {
+      const editorData = editor(doc(table()(tr(tdEmpty, tdEmpty))), true);
+      const editorView = editorData.editorView;
+      const newTr = editorView.state.tr;
+
+      expect(newTr.steps.length).toEqual(0);
+
+      const collapseTr = collapseSelectedTable(newTr);
+      expect(collapseTr).toBeDefined();
+      expect(collapseTr!.steps.length).toEqual(1);
+    });
+  });
+});

package/src/plugins/table/__tests__/unit/utils/column-controls.ts

@@ -0,0 +1,61 @@
+import { colWidthsForRow } from '../../../utils/column-controls';
+
+const createRow = (colCount: number, childType = 'td') => {
+  const tr = document.createElement('tr');
+  for (let i = 0; i < colCount; i++) {
+    const child = document.createElement(childType);
+    child.innerText = `Cell ${i}`;
+    tr.appendChild(child);
+  }
+
+  return tr;
+};
+
+describe('table utilities', () => {
+  let table: HTMLTableElement;
+  let tbody: HTMLElement;
+  let colgroup: HTMLTableColElement;
+
+  beforeEach(() => {
+    table = document.createElement('table');
+
+    tbody = document.createElement('tbody');
+    table.appendChild(tbody);
+
+    colgroup = document.createElement('colgroup');
+    table.appendChild(colgroup);
+  });
+
+  afterEach(() => {
+    table.remove();
+  });
+
+  describe('pctWidthsForRow', () => {
+    it('returns nothing for an empty table and empty row', () => {
+      expect(colWidthsForRow(colgroup, createRow(0))).toEqual('');
+    });
+
+    describe('unresized table/no colgroup', () => {
+      it('returns 100% for single cell', () => {
+        expect(colWidthsForRow(colgroup, createRow(1))).toEqual('100%');
+      });
+
+      it('returns split 50% for two cells', () => {
+        expect(colWidthsForRow(colgroup, createRow(2))).toEqual('50% 50%');
+      });
+
+      it('works for merged cells', () => {
+        const rowWithColspan = createRow(2);
+
+        // first column should spans 3
+        rowWithColspan.children[0].setAttribute('colspan', '3');
+
+        // last row should still span 1 row
+        // giving 4 visual rows, and only 2 in DOM
+
+        // colgroup is still empty
+        expect(colWidthsForRow(colgroup, rowWithColspan)).toEqual('75% 25%');
+      });
+    });
+  });
+});