@atlaskit/editor-plugin-table 0.0.2 → 0.0.3

package/src/plugins/table/__tests__/integration/arrow-down-into-table.ts

@@ -0,0 +1,38 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import {
+  fullpage,
+  setProseMirrorTextSelection,
+  expectToMatchSelection,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import tableAdf from './__fixtures__/paragraph-and-table-adf.json';
+
+// This keyboard navigation is actually browser functionality
+// But there was a div on our end that caused a bug where the
+// cursor would go behind the table when pressing arrow down
+// https://product-fabric.atlassian.net/browse/ED-14046
+//
+// Skipping in firefox as there is a known bug
+// Needs to be fixed in https://product-fabric.atlassian.net/servicedesk/customer/portal/99/DTR-155?created=true
+BrowserTestCase(
+  'arrow-down-into-table.ts: pressing arrow down above table should move cursor into first row',
+  { skip: ['firefox'] },
+  async (client: any) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {},
+      defaultValue: tableAdf,
+    });
+
+    await setProseMirrorTextSelection(page, { anchor: 5 });
+    await page.keys('ArrowDown');
+    await expectToMatchSelection(page, { type: 'text', to: 10, from: 10 });
+  },
+);

package/src/plugins/table/__tests__/integration/auto-size.ts

@@ -0,0 +1,87 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import sleep from '@atlaskit/editor-test-helpers/sleep';
+
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+
+import {
+  autoSizeToDefaultLayout,
+  autoSizeToWideLayout,
+  autoSizeToFullWidthLayout,
+} from './__fixtures__/auto-size-documents';
+
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+async function loadAndRetrieveDocument(
+  page: any,
+  document: object,
+  expectedLayout = 'default',
+) {
+  await mountEditor(page, {
+    appearance: fullpage.appearance,
+    defaultValue: JSON.stringify(document),
+    allowPanel: true,
+    allowTables: {
+      advanced: true,
+    },
+  });
+
+  await page.waitForSelector(`table[data-layout="${expectedLayout}"]`);
+  await sleep(500);
+
+  const doc = await page.$eval(editable, getDocFromElement);
+  return doc;
+}
+
+BrowserTestCase(
+  'Doesnt scale past default',
+  { skip: ['*'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    const doc = await loadAndRetrieveDocument(page, autoSizeToDefaultLayout);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Scales to wide',
+  { skip: ['*'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    const doc = await loadAndRetrieveDocument(
+      page,
+      autoSizeToWideLayout,
+      'wide',
+    );
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Scales to full-width',
+  { skip: ['safari', 'firefox'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    const doc = await loadAndRetrieveDocument(
+      page,
+      autoSizeToFullWidthLayout,
+      'full-width',
+    );
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);

package/src/plugins/table/__tests__/integration/block-node-selection.ts

@@ -1,164 +1,163 @@
-it.skip('TODO; restore unit', () => {});
-// import { runBlockNodeSelectionTestSuite } from '../../../../__tests__/integration/selection/_blockNodeSelectionTestSuite';
+import { runBlockNodeSelectionTestSuite } from '@atlaskit/editor-test-helpers/integration/selection';
 
-// runBlockNodeSelectionTestSuite({
-//   nodeName: 'table',
-//   editorOptions: {
-//     allowTables: {
-//       advanced: true,
-//     },
-//   },
-//   selector: 'table',
-//   adfNode: {
-//     type: 'table',
-//     attrs: {
-//       isNumberColumnEnabled: false,
-//       layout: 'default',
-//       localId: '15804638-b946-4591-b64c-beffe5122733',
-//     },
-//     content: [
-//       {
-//         type: 'tableRow',
-//         content: [
-//           {
-//             type: 'tableHeader',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableHeader',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableHeader',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//         ],
-//       },
-//       {
-//         type: 'tableRow',
-//         content: [
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//         ],
-//       },
-//       {
-//         type: 'tableRow',
-//         content: [
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//           {
-//             type: 'tableCell',
-//             attrs: {},
-//             content: [
-//               {
-//                 type: 'paragraph',
-//                 content: [],
-//               },
-//             ],
-//           },
-//         ],
-//       },
-//     ],
-//   },
-//   skipTests: {
-//     'Extend selection right two characters to select [block-node] from line above with shift + arrow right': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     'Extend selection left two characters to select [block-node] from line below with shift + arrow left': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     'Extend a selection from end of the document to the start when [block-node] is the first node': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     'Click and drag from the end to start of the document to select [block-node] when [block-node] is the first node': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     'Extend a selection to the end of the document from start when [block-node] is the last node': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     'Click and drag from start of the document to select [block-node] when [block-node] is the last node': [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//     "Extend selection down by one line multiple times to select [block-node]'s in sequence with shift + arrow down": [
-//       'chrome',
-//       'safari',
-//       'firefox',
-//     ],
-//   },
-// });
+runBlockNodeSelectionTestSuite({
+  nodeName: 'table',
+  editorOptions: {
+    allowTables: {
+      advanced: true,
+    },
+  },
+  selector: 'table',
+  adfNode: {
+    type: 'table',
+    attrs: {
+      isNumberColumnEnabled: false,
+      layout: 'default',
+      localId: '15804638-b946-4591-b64c-beffe5122733',
+    },
+    content: [
+      {
+        type: 'tableRow',
+        content: [
+          {
+            type: 'tableHeader',
+            attrs: {},
+            content: [
+              {
+                type: 'paragraph',
+                content: [],
+              },
+            ],
+          },
+          {
+            type: 'tableHeader',
+            attrs: {},
+            content: [
+              {
+                type: 'paragraph',
+                content: [],
+              },
+            ],
+          },
+          {
+            type: 'tableHeader',
+            attrs: {},
+            content: [
+              {
+                type: 'paragraph',
+                content: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: 'tableRow',
+        content: [
+          {
+            type: 'tableCell',
+            attrs: {},
+            content: [
+              {
+                type: 'paragraph',
+                content: [],
+              },
+            ],
+          },
+          {
+            type: 'tableCell',
+            attrs: {},
+            content: [
+              {
+                type: 'paragraph',
+                content: [],
+              },
+            ],
+          },
+          {
+            type: 'tableCell',
+            attrs: {},
+            content: [
+              {
+                type: 'paragraph',
+                content: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: 'tableRow',
+        content: [
+          {
+            type: 'tableCell',
+            attrs: {},
+            content: [
+              {
+                type: 'paragraph',
+                content: [],
+              },
+            ],
+          },
+          {
+            type: 'tableCell',
+            attrs: {},
+            content: [
+              {
+                type: 'paragraph',
+                content: [],
+              },
+            ],
+          },
+          {
+            type: 'tableCell',
+            attrs: {},
+            content: [
+              {
+                type: 'paragraph',
+                content: [],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  skipTests: {
+    'Extend selection right two characters to select [block-node] from line above with shift + arrow right': [
+      'chrome',
+      'safari',
+      'firefox',
+    ],
+    'Extend selection left two characters to select [block-node] from line below with shift + arrow left': [
+      'chrome',
+      'safari',
+      'firefox',
+    ],
+    'Extend a selection from end of the document to the start when [block-node] is the first node': [
+      'chrome',
+      'safari',
+      'firefox',
+    ],
+    'Click and drag from the end to start of the document to select [block-node] when [block-node] is the first node': [
+      'chrome',
+      'safari',
+      'firefox',
+    ],
+    'Extend a selection to the end of the document from start when [block-node] is the last node': [
+      'chrome',
+      'safari',
+      'firefox',
+    ],
+    'Click and drag from start of the document to select [block-node] when [block-node] is the last node': [
+      'chrome',
+      'safari',
+      'firefox',
+    ],
+    "Extend selection down by one line multiple times to select [block-node]'s in sequence with shift + arrow down": [
+      'chrome',
+      'safari',
+      'firefox',
+    ],
+  },
+});

package/src/plugins/table/__tests__/integration/cell-selection.ts

@@ -0,0 +1,101 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import { fullpage } from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+import tableWithTextAndEmptyRow from './__fixtures__/table-with-text-and-empty-row';
+import {
+  multiCellTableSelectionTopLeftToBottomRight,
+  multiCellTableSelectionBottomRightToFirstCell,
+  multiCellTableSelectionBottomRightToMiddleTopCell,
+} from '@atlaskit/editor-test-helpers/page-objects/table';
+import isEqual from 'lodash/isEqual';
+
+BrowserTestCase(
+  'multi cell table selection should correctly highlight entire table selection',
+  { skip: ['chrome'] }, // https://product-fabric.atlassian.net/browse/DTR-330
+  async (client: any) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+      },
+      defaultValue: tableWithTextAndEmptyRow,
+    });
+
+    await multiCellTableSelectionTopLeftToBottomRight(page);
+
+    const selection = await page.execute(() => {
+      const view = (window as any).__editorView;
+      return view.state.selection;
+    });
+
+    const isMatch = isEqual(selection, { type: 'cell', anchor: 2, head: 97 });
+    expect(isMatch).toBe(true);
+  },
+);
+
+BrowserTestCase(
+  'multi cell table selection should correctly highlight table selection from the second row',
+  { skip: ['chrome'] }, // https://product-fabric.atlassian.net/browse/DTR-330
+  async (client: any) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+      },
+      defaultValue: tableWithTextAndEmptyRow,
+    });
+
+    await multiCellTableSelectionBottomRightToFirstCell(page);
+
+    const selection = await page.execute(() => {
+      const view = (window as any).__editorView;
+      return view.state.selection;
+    });
+
+    const isMatch = isEqual(selection, { anchor: 97, head: 31, type: 'cell' });
+    expect(isMatch).toBe(true);
+  },
+);
+
+BrowserTestCase(
+  'multi cell table selection should correctly highlight table selection from the second column',
+  { skip: ['chrome'] }, // https://product-fabric.atlassian.net/browse/DTR-330
+  async (client: any) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+      },
+      defaultValue: tableWithTextAndEmptyRow,
+    });
+
+    await multiCellTableSelectionBottomRightToMiddleTopCell(page);
+
+    const selection = await page.execute(() => {
+      const view = (window as any).__editorView;
+      return view.state.selection;
+    });
+
+    const isMatch = isEqual(selection, { anchor: 97, head: 11, type: 'cell' });
+    expect(isMatch).toBe(true);
+  },
+);

package/src/plugins/table/__tests__/integration/change-date-inside-table.ts

@@ -0,0 +1,47 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+  quickInsert,
+  insertBlockMenuItem,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  mountEditor,
+  goToEditorTestingWDExample,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+const calendar = '[aria-label="calendar"]';
+const nextDate = 'button[aria-selected=true] + button';
+
+BrowserTestCase(
+  'change-date-inside-table.ts: Change date inside table',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowDate: true,
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await page.click(editable);
+
+    // Insert table
+    await quickInsert(page, 'Table');
+    // Insert Date
+    await insertBlockMenuItem(page, 'Date');
+    expect(await page.isExisting(calendar)).toBe(true);
+
+    await page.click(nextDate);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);