@atlaskit/editor-plugin-table 1.1.1 → 1.1.3

package/src/__tests__/integration/__fixtures__/nested-in-expand.ts

@@ -0,0 +1,129 @@
+export default {
+  version: 1,
+  type: 'doc',
+  content: [
+    {
+      type: 'expand',
+      attrs: {
+        title: '',
+      },
+      content: [
+        {
+          type: 'table',
+          attrs: {
+            isNumberColumnEnabled: false,
+            layout: 'default',
+            localId: '30bc8b3b-d6b5-42c8-830b-71358eb3ab39',
+          },
+          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: [],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

package/src/__tests__/integration/horizontal-scroll.ts

@@ -0,0 +1,489 @@
+import WebdriverPage from '@atlaskit/webdriver-runner/wd-wrapper';
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import {
+  fullpage,
+  resizeColumn,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import {
+  insertColumn,
+  insertTable,
+} from '@atlaskit/editor-test-helpers/page-objects/table';
+import basicTableAdf from './__fixtures__/basic-table';
+import nestedInExpand from './__fixtures__/nested-in-expand';
+import { nestedInExtension } from './__fixtures__/nested-in-extension';
+import { table as tableInsideLayout } from './__fixtures__/table-inside-layout';
+import { emptyLayout } from './__fixtures__/empty-layout';
+
+// TODO - Add wider screen size here once editor-common fix is made ED-16647
+const screenWidths = [1920];
+
+const breakout = async (
+  page: WebdriverPage,
+  breakoutButton: WebdriverIO.Element,
+) => {
+  let tableContainer = await page.$('.pm-table-container');
+
+  const currentWidth = await tableContainer.getCSSProperty('width');
+  breakoutButton.click();
+
+  await page.waitUntil(async () => {
+    tableContainer = await page.$('.pm-table-container');
+    const updatedWidth = await tableContainer.getCSSProperty('width');
+    return updatedWidth.value !== currentWidth.value;
+  });
+};
+
+const assertTableDoesNotScroll = async (page: WebdriverPage) => {
+  const table = await page.$('.pm-table-wrapper');
+
+  const tableScrollWidth = await table.getProperty('scrollWidth');
+  const tableOffsetWidth = await table.getProperty('offsetWidth');
+
+  expect(tableScrollWidth).toEqual(tableOffsetWidth);
+};
+
+const assertTableDoesScroll = async (page: WebdriverPage) => {
+  const table = await page.$('.pm-table-wrapper');
+
+  const tableScrollWidth = await table.getProperty('scrollWidth');
+  const tableOffsetWidth = (await table.getProperty('offsetWidth')) as number;
+
+  expect(tableScrollWidth).toBeGreaterThan(tableOffsetWidth);
+};
+
+// insertColumn helper doesn't work in Safari
+BrowserTestCase(
+  'Table: Does not scroll when column is resized and a new column is inserted',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: basicTableAdf,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowLayouts: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 2, resizeWidth: -100 });
+      await insertColumn(page, 0, 'right');
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+// insertColumn helper doesn't work in Safari
+BrowserTestCase(
+  'Table: Does not scroll when column is resized and breakout button is clicked 3x',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: basicTableAdf,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 2, resizeWidth: -100 });
+      await insertColumn(page, 0, 'right');
+
+      const breakoutButton = await page.$('[aria-label="Go wide"]');
+
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: Does not scroll when nested in expand, column is resized and breakout button is clicked',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: nestedInExpand,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      const breakoutButton = await page.$('[aria-label="Go wide"]');
+
+      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: -100 });
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: Last column can be resized to remove scroll',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: basicTableAdf,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 2, resizeWidth: 1000 });
+      await assertTableDoesScroll(page);
+      await resizeColumn(page, { cellHandlePos: 10, resizeWidth: -1000 });
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: When nested in expand, last column can be resized to remove scroll',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: nestedInExpand,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: 1000 });
+      await assertTableDoesScroll(page);
+      await resizeColumn(page, { cellHandlePos: 11, resizeWidth: -1000 });
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: When nested in layout, last column can be resized to remove scroll',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: tableInsideLayout,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: 1000 });
+      await assertTableDoesScroll(page);
+      await resizeColumn(page, { cellHandlePos: 16, resizeWidth: -1000 });
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: When nested in bodied macro, last column can be resized to remove scroll',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: nestedInExtension,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+        allowExtension: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: 1000 });
+      await assertTableDoesScroll(page);
+      await resizeColumn(page, { cellHandlePos: 11, resizeWidth: -1000 });
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+// insertColumn helper doesn't work in Safari
+BrowserTestCase(
+  'Table: Scrolls when there are more columns added than can fit the current width',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: basicTableAdf,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      const numberOfColumns = 14;
+      for (const _column of [...Array(numberOfColumns).keys()]) {
+        await insertColumn(page, 0, 'right');
+      }
+
+      await assertTableDoesScroll(page);
+    }
+  },
+);
+
+// insertColumn helper doesn't work in Safari
+BrowserTestCase(
+  'Table: Does not scroll when nested in Bodied Macro, column is resized and breakout button is clicked',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: JSON.stringify(nestedInExtension),
+        allowTables: {
+          advanced: true,
+        },
+        allowExtension: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: -100 });
+      await insertColumn(page, 0, 'right');
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: Does not scroll when nested in layout, column is resized and breakout button is clicked',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: JSON.stringify(tableInsideLayout),
+        allowTables: {
+          advanced: true,
+        },
+        allowLayouts: {
+          allowBreakout: true,
+        },
+        allowBreakout: true,
+      });
+
+      const breakoutButton = await page.$('[aria-label="Go wide"]');
+
+      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: -100 });
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: Does not scroll when nested in single column layout, table column is resized and breakout button is clicked',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: JSON.stringify(tableInsideLayout),
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowLayouts: {
+          allowBreakout: true,
+          UNSAFE_allowSingleColumnLayout: true,
+        },
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: -100 });
+
+      const singleColumnButton = await page.$('[aria-label="Single column"]');
+      singleColumnButton.click();
+
+      const breakoutButton = await page.$('[aria-label="Go wide"]');
+
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: Does not scroll when nested in three columns layout, table column is resized and breakout button is clicked',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: JSON.stringify(tableInsideLayout),
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowLayouts: {
+          allowBreakout: true,
+          UNSAFE_allowSingleColumnLayout: true,
+        },
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: -100 });
+
+      const threeColumnButton = await page.$('[aria-label="Three columns"]');
+      threeColumnButton.click();
+
+      const breakoutButton = await page.$('[aria-label="Go wide"]');
+
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+// insertColumn helper doesn't work in Safari
+BrowserTestCase(
+  'Table: Does not scroll when nested in full-width layout, columns is resized and new column is inserted',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: emptyLayout,
+        allowTables: {
+          advanced: true,
+        },
+        allowLayouts: {
+          allowBreakout: true,
+        },
+        allowBreakout: true,
+      });
+
+      const goWideButton = await page.$('[aria-label="Go wide"]');
+      goWideButton.click();
+      goWideButton.click();
+
+      insertTable(page);
+      await assertTableDoesNotScroll(page);
+      await resizeColumn(page, { cellHandlePos: 4, resizeWidth: -100 });
+      await insertColumn(page, 0, 'right');
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);

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

@@ -58,9 +58,9 @@ describe('table plugin: insert', () => {
         doc(
           table({ localId: TABLE_LOCAL_ID })(
             tr(
-              td({ colwidth: [200] })(p('')),
-              td({ colwidth: [200] })(p('')),
-              td({ colwidth: [200] })(p('')),
+              td({ colwidth: [230] })(p('')),
+              td({ colwidth: [230] })(p('')),
+              td({ colwidth: [230] })(p('')),
             ),
           ),
         ),

package/src/__tests__/unit/keymap.ts

@@ -57,6 +57,7 @@ import tablePlugin from '../../plugins/table';
 import { TablePluginState } from '../../plugins/table/types';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import featureFlagsPlugin from '@atlaskit/editor-core/src/plugins/feature-flags-context';
+import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -101,7 +102,8 @@ describe('table keymap', () => {
     .add([statusPlugin, { menuDisabled: false }])
     .add([mediaPlugin, { allowMediaSingle: true }])
     .add([analyticsPlugin, { createAnalyticsEvent }])
-    .add([featureFlagsPlugin, {}]);
+    .add([featureFlagsPlugin, {}])
+    .add(widthPlugin);
 
   const editor = (doc: DocBuilder) =>
     createEditor<TablePluginState, PluginKey>({

package/src/__tests__/unit/pm-plugins/table-resizing/colgroup.ts

@@ -1,5 +1,6 @@
 import { p, table, tr, td } from '@atlaskit/editor-test-helpers/doc-builder';
 import defaultSchema from '@atlaskit/editor-test-helpers/schema';
+import { isMinCellWidthTable } from '../../../../plugins/table/pm-plugins/table-resizing/utils/colgroup';
 import { generateColgroup } from '../../../../plugins/table/pm-plugins/table-resizing/utils';
 
 describe('table-resizing/colgroup', () => {
@@ -83,4 +84,41 @@ describe('table-resizing/colgroup', () => {
       }
     });
   });
+
+  //isMinCellWidthTable function test
+  describe('#isMinCellWidthTable', () => {
+    describe('check if a table has all the columns with minimum width', () => {
+      it('when input table has all columns in minimum width', () => {
+        const result = isMinCellWidthTable(getMinCellWidthTable());
+
+        expect(result).toEqual(true);
+      });
+
+      it('when input table has a column that is not minimum width', () => {
+        const result = isMinCellWidthTable(getNonMinCellWidthTable());
+
+        expect(result).toEqual(false);
+      });
+
+      function getMinCellWidthTable() {
+        return table()(
+          tr(
+            td({ colwidth: [48] })(p('')),
+            td({ colwidth: [48] })(p('')),
+            td({ colwidth: [48] })(p('')),
+          ),
+        )(defaultSchema);
+      }
+
+      function getNonMinCellWidthTable() {
+        return table()(
+          tr(
+            td({ colwidth: [200] })(p('')),
+            td({ colwidth: [200] })(p('')),
+            td({ colwidth: [48] })(p('')),
+          ),
+        )(defaultSchema);
+      }
+    });
+  });
 });