@atlaskit/editor-plugin-table 0.0.6 → 0.0.8

package/src/__tests__/unit/layout.ts

@@ -0,0 +1,196 @@
+import { findTable } from '@atlaskit/editor-tables/utils';
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+  LightEditorPlugin,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import { bodiedExtensionData } from '@atlaskit/editor-test-helpers/mock-extension-data';
+
+import {
+  doc,
+  p,
+  table,
+  tr,
+  td,
+  th,
+  tdCursor,
+  tdEmpty,
+  bodiedExtension,
+  layoutSection,
+  layoutColumn,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import { TableLayout } from '@atlaskit/adf-schema';
+import {
+  PermittedLayoutsDescriptor,
+  TablePluginState,
+} from '../../plugins/table/types';
+import { toggleTableLayout } from '../../plugins/table/commands';
+import { isLayoutSupported } from '../../plugins/table/utils';
+import { getPluginState } from '../../plugins/table/pm-plugins/plugin-factory';
+import { pluginKey as tablePluginKey } from '../../plugins/table/pm-plugins/plugin-key';
+import tablePlugin from '../../plugins/table-plugin';
+import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
+import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
+import layoutPlugin from '@atlaskit/editor-core/src/plugins/layout';
+import { PluginKey } from 'prosemirror-state';
+
+describe('table toolbar', () => {
+  const tableOptions = {
+    allowNumberColumn: true,
+    allowHeaderRow: true,
+    allowHeaderColumn: true,
+    permittedLayouts: 'all' as PermittedLayoutsDescriptor,
+  };
+
+  const createEditor = createProsemirrorEditorFactory();
+  const preset = new Preset<LightEditorPlugin>()
+    .add([tablePlugin, { tableOptions }])
+    .add(expandPlugin)
+    .add(extensionPlugin)
+    .add(layoutPlugin);
+
+  const editor = (doc: DocBuilder) => {
+    return createEditor<TablePluginState, PluginKey>({
+      doc,
+      preset,
+      pluginKey: tablePluginKey,
+    });
+  };
+
+  describe('table layouts', () => {
+    it('should update the table node layout attribute', () => {
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty, tdEmpty))),
+      );
+
+      const nodeInitial = findTable(editorView.state.selection)!.node;
+      expect(nodeInitial).toBeDefined();
+      expect(nodeInitial!.attrs.layout).toBe('default');
+
+      toggleTableLayout(editorView.state, editorView.dispatch);
+
+      const { node } = findTable(editorView.state.selection)!;
+
+      expect(node).toBeDefined();
+      expect(node!.attrs.layout).toBe('wide');
+    });
+
+    it('can set the data-layout attribute on the table DOM element', () => {
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty, tdEmpty))),
+      );
+
+      let tableElement = editorView.dom.querySelector('table');
+      expect(tableElement!.getAttribute('data-layout')).toBe('default');
+
+      toggleTableLayout(editorView.state, editorView.dispatch);
+      tableElement = editorView.dom.querySelector('table');
+      expect(tableElement!.getAttribute('data-layout')).toBe('wide');
+    });
+
+    it('applies the initial data-layout attribute on the table DOM element', () => {
+      const { editorView } = editor(
+        doc(table({ layout: 'full-width' })(tr(tdCursor, tdEmpty, tdEmpty))),
+      );
+
+      const tables = editorView.dom.getElementsByTagName('table');
+      expect(tables.length).toBe(1);
+      const tableElement = tables[0];
+
+      expect(tableElement.getAttribute('data-layout')).toBe('full-width');
+    });
+
+    ['default', 'wide', 'full-width'].forEach((currentLayout) => {
+      describe(`#toggleTableLayout`, () => {
+        it('should toggle table layout attribute', () => {
+          const { editorView } = editor(
+            doc(
+              table({ layout: currentLayout as TableLayout })(
+                tr(tdCursor, tdEmpty, tdEmpty),
+              ),
+            ),
+          );
+          toggleTableLayout(editorView.state, editorView.dispatch);
+          const { tableNode } = getPluginState(editorView.state);
+          let nextLayout;
+          switch (currentLayout) {
+            case 'default':
+              nextLayout = 'wide';
+              break;
+            case 'wide':
+              nextLayout = 'full-width';
+              break;
+            case 'full-width':
+              nextLayout = 'default';
+              break;
+          }
+          expect(tableNode).toBeDefined();
+          expect(tableNode!.attrs.layout).toBe(nextLayout);
+        });
+      });
+    });
+
+    it('applies the initial data-layout attribute on the table DOM element', () => {
+      const { editorView } = editor(
+        doc(table({ layout: 'full-width' })(tr(tdCursor, tdEmpty, tdEmpty))),
+      );
+
+      const tables = editorView.dom.getElementsByTagName('table');
+      expect(tables.length).toBe(1);
+      const tableElement = tables[0];
+
+      expect(tableElement.getAttribute('data-layout')).toBe('full-width');
+    });
+  });
+
+  describe('#isLayoutSupported', () => {
+    (['default', 'wide', 'full-width'] as TableLayout[]).forEach((layout) => {
+      describe(`when called with "${layout}"`, () => {
+        it('returns true if permittedLayouts="all"', () => {
+          const { editorView } = editor(
+            doc(
+              table()(
+                tr(th()(p('{<>}1')), th()(p('2'))),
+                tr(td()(p('3')), td()(p('4'))),
+              ),
+            ),
+          );
+
+          expect(isLayoutSupported(editorView.state)).toBe(true);
+        });
+        it('returns false if table is nested in bodiedExtension', () => {
+          const { editorView } = editor(
+            doc(
+              bodiedExtension(bodiedExtensionData[0].attrs)(
+                table()(
+                  tr(th()(p('{<>}1')), th()(p('2'))),
+                  tr(td()(p('3')), td()(p('4'))),
+                ),
+              ),
+            ),
+          );
+
+          expect(isLayoutSupported(editorView.state)).toBe(false);
+        });
+        it('returns false if table is nested in Columns', () => {
+          const { editorView } = editor(
+            doc(
+              layoutSection(
+                layoutColumn({ width: 50 })(
+                  table()(
+                    tr(th()(p('{<>}1')), th()(p('2'))),
+                    tr(td()(p('3')), td()(p('4'))),
+                  ),
+                ),
+                layoutColumn({ width: 50 })(p('text')),
+              ),
+            ),
+          );
+          expect(isLayoutSupported(editorView.state)).toBe(false);
+        });
+      });
+    });
+  });
+});

package/src/__tests__/unit/nodeviews/cell.ts

@@ -0,0 +1,167 @@
+import {
+  setCellAttrs,
+  findCellClosestToPos,
+} from '@atlaskit/editor-tables/utils';
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  doc,
+  p,
+  table,
+  tr,
+  td,
+  tdEmpty,
+  DocBuilder,
+  thEmpty,
+  th,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import {
+  tableBackgroundColorNames,
+  rgbToHex,
+  uuid,
+} from '@atlaskit/adf-schema';
+import { TablePluginState, PluginConfig } from '../../../plugins/table/types';
+import { mergeCells } from '../../../plugins/table/transforms';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import TableCellViews from '../../../plugins/table/nodeviews/tableCell';
+import sendKeyToPm from '@atlaskit/editor-test-helpers/send-key-to-pm';
+import * as domHelpers from '../../../plugins/table/pm-plugins/sticky-headers/nodeviews/dom';
+import tablePlugin from '../../../plugins/table-plugin';
+
+jest.mock('@atlaskit/editor-common/utils', () => ({
+  ...jest.requireActual<Object>('@atlaskit/editor-common/utils'),
+  browser: {
+    chrome: false,
+  },
+}));
+
+describe('table -> nodeviews -> tableCell.tsx', () => {
+  const TABLE_LOCAL_ID = 'test-table-local-id';
+  const createEditor = createEditorFactory<TablePluginState>();
+
+  const editor = (doc: DocBuilder, props?: PluginConfig) =>
+    createEditor({
+      doc,
+      editorProps: {
+        dangerouslyAppendPlugins: {
+          __plugins: [
+            tablePlugin({ tableOptions: { advanced: true, ...props } }),
+          ],
+        },
+      },
+      pluginKey,
+    });
+
+  describe('when background color is set to "red"', () => {
+    beforeAll(() => {
+      uuid.setStatic(TABLE_LOCAL_ID);
+    });
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should update cell DOM node style attribute with the new color', () => {
+      const {
+        editorView,
+        refs: { pos },
+      } = editor(
+        doc(p('text'), table()(tr(td()(p('{pos}text')), tdEmpty, tdEmpty))),
+      );
+      const { state, dispatch } = editorView;
+      const cell = findCellClosestToPos(state.doc.resolve(pos))!;
+      const background = tableBackgroundColorNames.get('red');
+      dispatch(setCellAttrs(cell, { background })(state.tr));
+      const cellDomNode = document.querySelector('td')!;
+      expect(rgbToHex(cellDomNode.style.backgroundColor!)).toEqual(background);
+    });
+  });
+
+  describe('when background color is set to "white"', () => {
+    it('should remove backgroundColor style attribute from cell DOM node ', () => {
+      const {
+        editorView,
+        refs: { pos },
+      } = editor(
+        doc(
+          p('text'),
+          table()(
+            tr(td({ background: 'red' })(p('{pos}text')), tdEmpty, tdEmpty),
+          ),
+        ),
+      );
+      const { state, dispatch } = editorView;
+      const cell = findCellClosestToPos(state.doc.resolve(pos))!;
+      const background = tableBackgroundColorNames.get('white');
+      dispatch(setCellAttrs(cell, { background })(state.tr));
+      const cellDomNode = document.querySelector('td')!;
+      expect(cellDomNode.style.backgroundColor).toEqual('');
+    });
+  });
+
+  describe('with tableCellOptimization on', () => {
+    describe('nodeview update', () => {
+      it('should not recreate nodeviews on attrs update', () => {
+        const {
+          editorView,
+          refs: { pos },
+        } = editor(
+          doc(p('text'), table()(tr(td()(p('{pos}text')), tdEmpty, tdEmpty))),
+          {
+            tableCellOptimization: true,
+          },
+        );
+        const { state, dispatch } = editorView;
+        const cell = findCellClosestToPos(state.doc.resolve(pos))!;
+        const background = tableBackgroundColorNames.get('red');
+        const updateSpy = jest.spyOn(TableCellViews.prototype, 'update');
+        dispatch(setCellAttrs(cell, { background })(state.tr));
+        expect(updateSpy).toHaveReturnedWith(true);
+        const cellDomNode = document.querySelector('td')!;
+        expect(rgbToHex(cellDomNode.style.backgroundColor!)).toEqual(
+          background,
+        );
+      });
+
+      it('preserves correct rowspan and colspan after merge cells and undo', () => {
+        jest.spyOn(domHelpers, 'getTop').mockImplementation(() => 0);
+
+        const originalDoc = doc(
+          table({ localId: TABLE_LOCAL_ID })(
+            tr(th()(p('{<cell}')), thEmpty, thEmpty),
+            tr(td()(p('{cell>}')), tdEmpty, tdEmpty),
+            tr(tdEmpty, tdEmpty, tdEmpty),
+          ),
+        );
+        const { editorView } = editor(originalDoc, {
+          stickyHeaders: true,
+          tableCellOptimization: true,
+        });
+        const { state, dispatch } = editorView;
+
+        dispatch(mergeCells(state.tr));
+        expect(editorView.state.doc).toEqualDocument(
+          doc(
+            table({ localId: TABLE_LOCAL_ID })(
+              tr(th({ rowspan: 2 })(p('')), thEmpty, thEmpty),
+              tr(tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+            ),
+          ),
+        );
+
+        sendKeyToPm(editorView, 'Mod-z');
+        validateUnmergedDomCells();
+        expect(editorView.state.doc).toEqualDocument(originalDoc);
+      });
+
+      // make sure all colspan/rowspan attributes are removed from cells
+      function validateUnmergedDomCells() {
+        const cells = document.querySelectorAll('table td, table th');
+        Array.from(cells).forEach((cell) => {
+          expect(cell.getAttribute('rowspan')).toBeFalsy();
+          expect(cell.getAttribute('colspan')).toBeFalsy();
+        });
+      }
+    });
+  });
+});

package/src/__tests__/unit/pm-plugins/table-resizing/utils/resize-state.ts

@@ -0,0 +1,33 @@
+import { updateColgroup } from '../../../../../plugins/table/pm-plugins/table-resizing/utils/resize-state';
+import { ResizeState } from '../../../../../plugins/table/pm-plugins/table-resizing/utils/types';
+
+describe('table-resizing/utils/resize-state', () => {
+  describe('#updateColgroup', () => {
+    it('should not throw exception when the dom cols does not exist', () => {
+      const state = {
+        cols: [{ width: 100 }],
+      };
+      const tableRef = document.createElement('div');
+
+      const func = () => {
+        updateColgroup(state as ResizeState, tableRef);
+      };
+
+      expect(func).not.toThrow();
+    });
+
+    it('should not throw exception when the column is null', () => {
+      const state = {
+        cols: [null],
+      };
+      const tableRef = document.createElement('div');
+
+      const func = () => {
+        // @ts-ignore
+        updateColgroup(state, tableRef);
+      };
+
+      expect(func).not.toThrow();
+    });
+  });
+});