@atlaskit/editor-plugin-table 0.0.6 → 0.0.7

package/src/__tests__/unit/collab.ts

@@ -0,0 +1,76 @@
+import {
+  doc,
+  p,
+  table,
+  tr,
+  td,
+  th,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { removeColumnAt } from '@atlaskit/editor-tables/utils';
+import { TablePluginState, PluginConfig } from '../../plugins/table/types';
+
+import { setResizeHandlePos } from '../../plugins/table/pm-plugins/table-resizing/commands';
+import { pluginKey as tablePluginKey } from '../../plugins/table/pm-plugins/plugin-key';
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import tablePlugin from '../../plugins/table-plugin';
+const TABLE_LOCAL_ID = 'test-table-local-id';
+
+describe('Tables with Collab editing', () => {
+  const createEditor = createEditorFactory<TablePluginState>();
+  const tableOptions = {
+    allowNumberColumn: true,
+    allowHeaderRow: true,
+    allowHeaderColumn: true,
+    permittedLayouts: 'all',
+    allowColumnResizing: true,
+  } as PluginConfig;
+
+  const editor = (doc: DocBuilder) => {
+    return createEditor({
+      doc,
+      editorProps: {
+        allowTables: false,
+        dangerouslyAppendPlugins: {
+          __plugins: [tablePlugin({ tableOptions })],
+        },
+      },
+      pluginKey: tablePluginKey,
+    });
+  };
+
+  it('applies colwidths to cells and sets autosize to false', () => {
+    const { editorView: view } = editor(
+      doc(
+        table({ localId: TABLE_LOCAL_ID })(
+          tr(th()(p('{<>}1')), th()(p('2')), th()(p('3'))),
+          tr(td()(p('4')), td()(p('5')), td()(p('6'))),
+          tr(td()(p('7')), td()(p('8')), td()(p('9'))),
+        ),
+      ),
+    );
+
+    // Trigger table resizing mouse down handlers.
+    setResizeHandlePos(2)(view.state, view.dispatch);
+    const mousedownEvent = new MouseEvent('mousedown', { clientX: 50 });
+    view.dom.dispatchEvent(mousedownEvent);
+
+    // Simulate collab change, delete col.
+    const documentChangeTr = removeColumnAt(1)(view.state.tr);
+    view.updateState(view.state.apply(documentChangeTr));
+
+    // Trigger table resizing finish handlers
+    const mouseupEvent = new MouseEvent('mouseup', { clientX: 150 });
+    window.dispatchEvent(mouseupEvent);
+
+    expect(view.state.doc).toEqualDocument(
+      doc(
+        table({ localId: TABLE_LOCAL_ID })(
+          tr(th()(p('1')), th()(p('3'))),
+          tr(td()(p('4')), td()(p('6'))),
+          tr(td()(p('7')), td()(p('9'))),
+        ),
+      ),
+    );
+  });
+});

package/src/__tests__/unit/commands/sort.ts

@@ -0,0 +1,230 @@
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  doc,
+  p,
+  table,
+  td,
+  th,
+  tr,
+  mention,
+  date,
+  a,
+  status,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { EditorView } from 'prosemirror-view';
+import { mentionResourceProvider } from '@atlaskit/util-data-test/mention-story-data';
+import { sortByColumn } from '../../../plugins/table/commands/sort';
+import { uuid } from '@atlaskit/adf-schema';
+import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+import tablePlugin from '../../../plugins/table-plugin';
+
+const TABLE_LOCAL_ID = 'test-table-local-id';
+
+describe('Sort Table', () => {
+  beforeAll(() => {
+    uuid.setStatic(TABLE_LOCAL_ID);
+  });
+
+  afterAll(() => {
+    uuid.setStatic(false);
+  });
+
+  const createEditor = createEditorFactory();
+  it('should test a basic table with heading', () => {
+    const { editorView } = createEditor({
+      editorProps: {
+        dangerouslyAppendPlugins: {
+          __plugins: [tablePlugin({ tableOptions: { allowHeaderRow: true } })],
+        },
+      },
+      doc: doc(
+        table()(
+          tr(th({})(p('Number{<>}'))),
+          tr(td({})(p('10{<>}'))),
+          tr(td({})(p('0'))),
+          tr(td({})(p('5'))),
+        ),
+      ),
+    });
+    sortByColumn(0)(editorView.state, editorView.dispatch);
+
+    expect(editorView.state.doc).toEqualDocument(
+      doc(
+        table({ localId: TABLE_LOCAL_ID })(
+          tr(th({})(p('Number'))),
+          tr(td({})(p('10'))),
+          tr(td({})(p('5'))),
+          tr(td({})(p('0'))),
+        ),
+      ),
+    );
+  });
+
+  it('should test a basic table descending', () => {
+    const { editorView } = createEditor({
+      editorProps: {
+        dangerouslyAppendPlugins: {
+          __plugins: [tablePlugin({ tableOptions: { allowHeaderRow: true } })],
+        },
+      },
+      doc: doc(
+        table()(tr(td({})(p('2{<>}'))), tr(td({})(p('5'))), tr(td({})(p('4')))),
+      ),
+    });
+    sortByColumn(0)(editorView.state, editorView.dispatch);
+
+    expect(editorView.state.doc).toEqualDocument(
+      doc(
+        table({ localId: TABLE_LOCAL_ID })(
+          tr(td({})(p('5'))),
+          tr(td({})(p('4'))),
+          tr(td({})(p('2'))),
+        ),
+      ),
+    );
+  });
+
+  it('should test a basic table ascending', () => {
+    const { editorView } = createEditor({
+      editorProps: {
+        dangerouslyAppendPlugins: {
+          __plugins: [tablePlugin({ tableOptions: { allowHeaderRow: true } })],
+        },
+      },
+      doc: doc(
+        table()(tr(td({})(p('2{<>}'))), tr(td({})(p('5'))), tr(td({})(p('4')))),
+      ),
+    });
+    sortByColumn(0, SortOrder.ASC)(editorView.state, editorView.dispatch);
+
+    expect(editorView.state.doc).toEqualDocument(
+      doc(
+        table({ localId: TABLE_LOCAL_ID })(
+          tr(td({})(p('2'))),
+          tr(td({})(p('4'))),
+          tr(td({})(p('5'))),
+        ),
+      ),
+    );
+  });
+
+  describe('mixed content ordering', () => {
+    let editorView: EditorView;
+
+    beforeEach(() => {
+      ({ editorView } = createEditor({
+        editorProps: {
+          allowStatus: true,
+          allowDate: true,
+          dangerouslyAppendPlugins: {
+            __plugins: [
+              tablePlugin({ tableOptions: { allowHeaderRow: true } }),
+            ],
+          },
+          mentionProvider: Promise.resolve(mentionResourceProvider),
+        },
+        doc: doc(
+          table()(
+            tr(th({})(p('Mixed{<>}'))),
+            tr(td({})(p(a({ href: '' })('LinkB')))),
+            tr(td({})(p('a1'))),
+            tr(
+              td({})(
+                p(status({ text: 'statusB', color: '#FFF', localId: 'a' })),
+              ),
+            ),
+            tr(td({})(p('10'))),
+            tr(td({})(p('b1'))),
+            tr(td({})(p(mention({ id: 'a', text: 'MentionA' })()))),
+            tr(td({})(p('20'))),
+            tr(
+              td({})(p(date({ timestamp: new Date('2019-01-01').getTime() }))),
+            ),
+            tr(td({})(p(a({ href: '' })('LinkA')))),
+            tr(td({})(p(mention({ id: 'a', text: 'MentionB' })()))),
+            tr(
+              td({})(
+                p(status({ text: 'statusA', color: '#FFF', localId: 'a' })),
+              ),
+            ),
+            tr(
+              td({})(p(date({ timestamp: new Date('2020-01-01').getTime() }))),
+            ),
+          ),
+        ),
+      }));
+    });
+
+    it('should test a basic table ascending', () => {
+      sortByColumn(0, SortOrder.ASC)(editorView.state, editorView.dispatch);
+
+      expect(editorView.state.doc).toEqualDocument(
+        doc(
+          table({ localId: TABLE_LOCAL_ID })(
+            tr(th({})(p('Mixed{<>}'))),
+            tr(td({})(p('10'))),
+            tr(td({})(p('20'))),
+            tr(td({})(p('a1'))),
+            tr(td({})(p('b1'))),
+            tr(td({})(p(mention({ id: 'a', text: 'MentionA' })()))),
+            tr(td({})(p(mention({ id: 'a', text: 'MentionB' })()))),
+            tr(
+              td({})(p(date({ timestamp: new Date('2019-01-01').getTime() }))),
+            ),
+            tr(
+              td({})(p(date({ timestamp: new Date('2020-01-01').getTime() }))),
+            ),
+            tr(
+              td({})(
+                p(status({ text: 'statusA', color: '#FFF', localId: 'a' })),
+              ),
+            ),
+            tr(
+              td({})(
+                p(status({ text: 'statusB', color: '#FFF', localId: 'a' })),
+              ),
+            ),
+            tr(td({})(p(a({ href: '' })('LinkA')))),
+            tr(td({})(p(a({ href: '' })('LinkB')))),
+          ),
+        ),
+      );
+    });
+
+    it('should test a basic table descending', () => {
+      sortByColumn(0, SortOrder.DESC)(editorView.state, editorView.dispatch);
+
+      expect(editorView.state.doc).toEqualDocument(
+        doc(
+          table({ localId: TABLE_LOCAL_ID })(
+            tr(th({})(p('Mixed{<>}'))),
+            tr(td({})(p(a({ href: '' })('LinkB')))),
+            tr(td({})(p(a({ href: '' })('LinkA')))),
+            tr(
+              td({})(
+                p(status({ text: 'statusB', color: '#FFF', localId: 'a' })),
+              ),
+            ),
+            tr(
+              td({})(
+                p(status({ text: 'statusA', color: '#FFF', localId: 'a' })),
+              ),
+            ),
+            tr(
+              td({})(p(date({ timestamp: new Date('2020-01-01').getTime() }))),
+            ),
+            tr(
+              td({})(p(date({ timestamp: new Date('2019-01-01').getTime() }))),
+            ),
+            tr(td({})(p(mention({ id: 'a', text: 'MentionB' })()))),
+            tr(td({})(p(mention({ id: 'a', text: 'MentionA' })()))),
+            tr(td({})(p('b1'))),
+            tr(td({})(p('a1'))),
+            tr(td({})(p('20'))),
+            tr(td({})(p('10'))),
+          ),
+        ),
+      );
+    });
+  });
+});