@atlaskit/editor-plugin-table 0.0.2 → 0.0.4

package/src/plugins/table/__tests__/integration/copy-button.ts

@@ -0,0 +1,179 @@
+//import { runBlockNodeSelectionTestSuite } from '@atlaskit/editor-test-helpers/integration/selection';
+// import { _getCopyButtonTestSuite } from '@atlaskit/editor-core/src/plugins/copy-button/__tests__/integration/_getCopyButtonTestSuite';
+
+test.todo('TODO: ED-15706 We disabled the copy button');
+// _getCopyButtonTestSuite({
+//   nodeName: 'Table',
+//   editorOptions: {
+//     allowTables: {
+//       advanced: true,
+//     },
+//     defaultValue: {
+//       version: 1,
+//       type: 'doc',
+//       content: [
+//         {
+//           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: 'text',
+//                           text: '1',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableHeader',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '2',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableHeader',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '3',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//             {
+//               type: 'tableRow',
+//               content: [
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '4',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '5',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '6',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//             {
+//               type: 'tableRow',
+//               content: [
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '7',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '8',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '9',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//           ],
+//         },
+//       ],
+//     },
+//   },
+//   nodeSelector: '.pm-table-cell-content-wrap',
+// });

package/src/plugins/table/__tests__/integration/delete-columns.ts

@@ -0,0 +1,95 @@
+import { createIntl } from 'react-intl-next';
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import { documentWithMergedCells } from './__fixtures__/merged-rows-and-cols-document';
+import { TableCssClassName as ClassName } from '@atlaskit/editor-core/src/plugins/table/types';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import messages from '@atlaskit/editor-core/src/plugins/table/ui/messages';
+
+BrowserTestCase(
+  'Should delete merged columns from contextual menu and append missing cells to the table',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    const intl = createIntl({
+      locale: 'en',
+    });
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(documentWithMergedCells),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    const controlSelector = `tbody tr:first-child th:nth-child(2)`;
+    await page.waitForSelector(controlSelector);
+    await page.click(controlSelector);
+
+    const contextMenuTriggerSelector = `.${ClassName.CONTEXTUAL_MENU_BUTTON}`;
+    await page.waitForSelector(contextMenuTriggerSelector);
+    await page.click(contextMenuTriggerSelector);
+
+    const message = await intl.formatMessage(messages.removeColumns, {
+      0: 1,
+    });
+    const contextMenuItemSelector = `span=${message}`;
+    await page.waitForSelector(contextMenuItemSelector);
+    await page.click(contextMenuItemSelector);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Should delete merged columns from contextual menu and decrement colspan of the spanning cell',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    const intl = createIntl({
+      locale: 'en',
+    });
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(documentWithMergedCells),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    const controlSelector = `tbody tr:first-child th:nth-child(3)`;
+    await page.waitForSelector(controlSelector);
+    await page.click(controlSelector);
+
+    const contextMenuTriggerSelector = `.${ClassName.CONTEXTUAL_MENU_BUTTON}`;
+    await page.waitForSelector(contextMenuTriggerSelector);
+    await page.click(contextMenuTriggerSelector);
+
+    const message = await intl.formatMessage(messages.removeColumns, {
+      0: 1,
+    });
+    const contextMenuItemSelector = `span=${message}`;
+    await page.waitForSelector(contextMenuItemSelector);
+    await page.click(contextMenuItemSelector);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);

package/src/plugins/table/__tests__/integration/delete-last-column-in-full-width.ts

@@ -0,0 +1,70 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+  quickInsert,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import { TableCssClassName as ClassName } from '@atlaskit/editor-core/src/plugins/table/types';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+// ED-6231
+BrowserTestCase(
+  'Delete last table column in full-width mode',
+  // Only Chrome has logging support in BrowserStack now
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(
+      page,
+      {
+        appearance: fullpage.appearance,
+        allowTables: {
+          advanced: true,
+        },
+      },
+      { i18n: { locale: 'en' } },
+    );
+
+    await page.click(editable);
+
+    // Insert table
+    await quickInsert(page, 'Table');
+
+    // Change layout to full-width
+    await page.waitForSelector(`.${ClassName.LAYOUT_BUTTON}`);
+    await page.click(`.${ClassName.LAYOUT_BUTTON}`);
+    await page.click(`.${ClassName.LAYOUT_BUTTON}`);
+
+    await page.click(editable);
+
+    // Select button wrapper from last column
+    const controlSelector = `.${ClassName.COLUMN_CONTROLS_DECORATIONS}[data-start-index="2"]`;
+    await page.waitForSelector(controlSelector);
+    await page.hover(controlSelector);
+    await page.click(controlSelector);
+
+    // Click on delete row button
+    const deleteButtonSelector = `.${ClassName.CONTROLS_DELETE_BUTTON_WRAP} .${ClassName.CONTROLS_DELETE_BUTTON}`;
+    await page.waitForVisible(deleteButtonSelector);
+    await page.click(deleteButtonSelector);
+
+    //    await page.checkConsoleErrors({
+    //      ignoreErrors: [
+    //        /is potentially unsafe when doing server-side rendering\. Try changing it to/,
+    //      ],
+    //    });
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+it.todo('ED-15748: Test is not working properly with checkConsoleErrors');

package/src/plugins/table/__tests__/integration/delete-last-column-with-empty-action.ts

@@ -0,0 +1,58 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+  quickInsert,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import { TableCssClassName as ClassName } from '@atlaskit/editor-core/src/plugins/table/types';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+BrowserTestCase(
+  'delete-last-column-with-empty-action.ts: Delete last table column with empty action',
+  {},
+  async (client: any, testName: string) => {
+    const LAST_HEADER_FROM_FIRST_ROW =
+      'table > tbody > tr:first-child > th:last-child';
+
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await page.click(editable);
+
+    // Insert table and click on last cell of first row
+    await quickInsert(page, 'Table');
+    await page.waitForSelector(LAST_HEADER_FROM_FIRST_ROW);
+    await page.click(LAST_HEADER_FROM_FIRST_ROW);
+
+    // Add empty action on first cell from last row
+    await quickInsert(page, 'Action item');
+
+    // Select button wrapper from last column
+    const controlSelector = `.${ClassName.COLUMN_CONTROLS_DECORATIONS}[data-start-index="2"]`;
+    await page.waitForSelector(controlSelector);
+    // We need to move the mouse to the column control first
+    await page.hover(controlSelector, { x: 10, y: 1 });
+    await page.click(controlSelector);
+
+    // Click on delete row button
+    const deleteButtonSelector = `.${ClassName.CONTROLS_DELETE_BUTTON_WRAP} .${ClassName.CONTROLS_DELETE_BUTTON}`;
+    await page.waitForVisible(deleteButtonSelector);
+    await page.click(deleteButtonSelector);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);

package/src/plugins/table/__tests__/integration/delete-last-row-with-empty-action.ts

@@ -0,0 +1,97 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+  quickInsert,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import { TableCssClassName as ClassName } from '@atlaskit/editor-core/src/plugins/table/types';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+BrowserTestCase(
+  'delete-last-row.ts: Delete last table row with empty action',
+  { skip: ['chrome'] },
+  async (client: any, testName: string) => {
+    const FIRST_CELL_FROM_LAST_ROW =
+      'table > tbody > tr:last-child > td:first-child';
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await page.click(editable);
+
+    // Insert table and click on first cell
+    await quickInsert(page, 'Table');
+    await page.waitForSelector(FIRST_CELL_FROM_LAST_ROW);
+    await page.click(FIRST_CELL_FROM_LAST_ROW);
+
+    // Add empty action on first cell from last row
+    await quickInsert(page, 'Action item');
+
+    // Select button wrapper from last row
+    const controlSelector = `.${ClassName.ROW_CONTROLS_WRAPPER} .${ClassName.ROW_CONTROLS_BUTTON_WRAP}:last-child .${ClassName.CONTROLS_BUTTON}`;
+    await page.waitForSelector(controlSelector);
+    await page.click(controlSelector);
+
+    // Click on delete row button
+    const deleteButtonSelector = `.${ClassName.CONTROLS_DELETE_BUTTON_WRAP} .${ClassName.CONTROLS_DELETE_BUTTON}`;
+    await page.waitForVisible(deleteButtonSelector);
+    await page.click(deleteButtonSelector);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'delete-last-row.ts: Delete last table row with empty action, chrome',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const FIRST_CELL_FROM_LAST_ROW =
+      'table > tbody > tr:last-child > td:first-child';
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await page.click(editable);
+
+    // Insert table and click on first cell
+    await quickInsert(page, 'Table');
+    await page.waitForSelector(FIRST_CELL_FROM_LAST_ROW);
+    await page.click(FIRST_CELL_FROM_LAST_ROW);
+
+    // Add empty action on first cell from last row
+    await quickInsert(page, 'Action item');
+
+    // Select button wrapper from last row
+    const controlSelector = `.${ClassName.ROW_CONTROLS_WRAPPER} .${ClassName.ROW_CONTROLS_BUTTON_WRAP}:last-child .${ClassName.CONTROLS_BUTTON}`;
+    await page.waitForSelector(controlSelector);
+    await page.click(controlSelector);
+
+    // Click on delete row button
+    const deleteButtonSelector = `.${ClassName.CONTROLS_DELETE_BUTTON_WRAP} .${ClassName.CONTROLS_DELETE_BUTTON}`;
+    await page.waitForVisible(deleteButtonSelector);
+    await page.click(deleteButtonSelector);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);

package/src/plugins/table/__tests__/integration/delete-rows.ts

@@ -0,0 +1,122 @@
+import { createIntl } from 'react-intl-next';
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import { documentWithMergedCells } from './__fixtures__/merged-rows-and-cols-document';
+import { nestedInExtension } from './__fixtures__/nested-in-extension';
+import { TableCssClassName as ClassName } from '@atlaskit/editor-core/src/plugins/table/types';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import messages from '@atlaskit/editor-core/src/plugins/table/ui/messages';
+import { deleteRow } from '@atlaskit/editor-test-helpers/page-objects/table';
+
+BrowserTestCase(
+  'Should delete merged rows from contextual menu and append missing cells to the table',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    const intl = createIntl({
+      locale: 'en',
+    });
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(documentWithMergedCells),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    const controlSelector = `tbody tr:nth-child(2) td:first-child`;
+    await page.waitForSelector(controlSelector);
+    await page.click(controlSelector);
+
+    const contextMenuTriggerSelector = `.${ClassName.CONTEXTUAL_MENU_BUTTON}`;
+    await page.waitForSelector(contextMenuTriggerSelector);
+    await page.click(contextMenuTriggerSelector);
+
+    const message = await intl.formatMessage(messages.removeRows, {
+      0: 1,
+    });
+    const contextMenuItemSelector = `span=${message}`;
+    await page.waitForSelector(contextMenuItemSelector);
+    await page.click(contextMenuItemSelector);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Should delete merged rows from contextual menu and decrement rowspan of the spanning cell',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    const intl = createIntl({
+      locale: 'en',
+    });
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(documentWithMergedCells),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    const controlSelector = `tbody tr:nth-child(3) td:first-child`;
+    await page.waitForSelector(controlSelector);
+    await page.click(controlSelector);
+
+    const contextMenuTriggerSelector = `.${ClassName.CONTEXTUAL_MENU_BUTTON}`;
+    await page.waitForSelector(contextMenuTriggerSelector);
+    await page.click(contextMenuTriggerSelector);
+
+    const message = await intl.formatMessage(messages.removeRows, {
+      0: 1,
+    });
+    const contextMenuItemSelector = `span=${message}`;
+    await page.waitForSelector(contextMenuItemSelector);
+    await page.click(contextMenuItemSelector);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Should delete a row when table is nested inside bodied extension',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(nestedInExtension),
+      allowTables: {
+        advanced: true,
+      },
+      allowExtension: true,
+    });
+
+    await deleteRow(page, 1);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);