@atlaskit/editor-plugin-table 5.3.21 → 5.3.22

package/src/__tests__/integration/layout.ts

@@ -1,219 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  animationFrame,
-  changeSelectedNodeLayout,
-  editable,
-  fullpage,
-  getDocFromElement,
-  toggleBreakout,
-} from '@atlaskit/editor-test-helpers/integration/helpers';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { clickFirstCell } from '@atlaskit/editor-test-helpers/page-objects/table';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  goToEditorTestingWDExample,
-  mountEditor,
-} from '@atlaskit/editor-test-helpers/testing-example-page';
-import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
-
-import {
-  defaultTableInOverflow,
-  defaultTableResizedTable,
-  nestedTables,
-} from './__fixtures__/layout-documents';
-
-BrowserTestCase(
-  'Avoid overflow when table scale to wide',
-  { skip: ['safari', 'firefox'] },
-  async (client: any, testName: string) => {
-    const page = await goToEditorTestingWDExample(
-      client,
-      'editor-plugin-table',
-    );
-
-    await mountEditor(page, {
-      appearance: fullpage.appearance,
-      defaultValue: JSON.stringify(defaultTableInOverflow),
-      allowTables: {
-        advanced: true,
-      },
-    });
-
-    await clickFirstCell(page);
-    await toggleBreakout(page, 1);
-
-    const doc = await page.$eval(editable, getDocFromElement);
-    expect(doc).toMatchCustomDocSnapshot(testName);
-  },
-);
-
-BrowserTestCase(
-  'Avoid overflow when table scale to full width',
-  { skip: ['safari', 'firefox'] },
-  async (client: any, testName: string) => {
-    const page = await goToEditorTestingWDExample(
-      client,
-      'editor-plugin-table',
-    );
-
-    await mountEditor(page, {
-      appearance: fullpage.appearance,
-      defaultValue: JSON.stringify(defaultTableInOverflow),
-      allowTables: {
-        advanced: true,
-      },
-    });
-
-    await clickFirstCell(page);
-    await toggleBreakout(page, 2);
-
-    const doc = await page.$eval(editable, getDocFromElement);
-    expect(doc).toMatchCustomDocSnapshot(testName);
-  },
-);
-
-BrowserTestCase(
-  'Maintains the wide layout size without overflow',
-  { 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(defaultTableResizedTable),
-      allowTables: {
-        advanced: true,
-      },
-    });
-
-    await clickFirstCell(page);
-    await toggleBreakout(page, 1);
-
-    const doc = await page.$eval(editable, getDocFromElement);
-    expect(doc).toMatchCustomDocSnapshot(testName);
-  },
-);
-
-BrowserTestCase(
-  'Maintains the full-width layout size without overflow',
-  { 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(defaultTableResizedTable),
-      allowTables: {
-        advanced: true,
-      },
-    });
-
-    await clickFirstCell(page);
-    await toggleBreakout(page, 2);
-
-    const doc = await page.$eval(editable, getDocFromElement);
-    expect(doc).toMatchCustomDocSnapshot(testName);
-  },
-);
-
-BrowserTestCase(
-  'Maintains the default layout size without overflow when toggling through layouts',
-  { skip: ['safari', 'firefox'] },
-  async (client: any, testName: string) => {
-    const page = await goToEditorTestingWDExample(
-      client,
-      'editor-plugin-table',
-    );
-
-    await mountEditor(page, {
-      appearance: fullpage.appearance,
-      defaultValue: JSON.stringify(defaultTableResizedTable),
-      allowTables: {
-        advanced: true,
-      },
-    });
-
-    await clickFirstCell(page);
-    await toggleBreakout(page, 3);
-
-    const doc = await page.$eval(editable, getDocFromElement);
-    expect(doc).toMatchCustomDocSnapshot(testName);
-  },
-);
-
-BrowserTestCase(
-  'Scales down column sizes when bodied extension parent layout changes',
-  { 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(nestedTables),
-      allowTables: {
-        advanced: true,
-      },
-      allowExtension: {
-        allowBreakout: true,
-      },
-      allowLayouts: {
-        allowBreakout: true,
-      },
-      allowBreakout: true,
-    });
-
-    await page.waitForSelector('.extension-container p');
-    await page.click('.extension-container p');
-    await changeSelectedNodeLayout(page, 'Back to center');
-    await animationFrame(page);
-
-    const doc = await page.$eval(editable, getDocFromElement);
-    expect(doc).toMatchCustomDocSnapshot(testName);
-  },
-);
-
-BrowserTestCase(
-  'Scales down column sizes when parent layout changes breakout',
-  { 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(nestedTables),
-      allowTables: {
-        advanced: true,
-      },
-      allowExtension: {
-        allowBreakout: true,
-      },
-      allowLayouts: {
-        allowBreakout: true,
-      },
-      allowBreakout: true,
-    });
-
-    await page.waitForSelector('div[data-layout-section]');
-    // Clicking at the paragraph inside of the left layout column
-    await page.click(
-      'div[data-layout-section] [data-layout-column="true"]:nth-child(2) [data-layout-content="true"] > p',
-    );
-    await toggleBreakout(page, 2);
-    await animationFrame(page);
-
-    const doc = await page.$eval(editable, getDocFromElement);
-    expect(doc).toMatchCustomDocSnapshot(testName);
-  },
-);

package/src/__tests__/integration/resize-handler.ts

@@ -1,104 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  fullpage,
-  hoverResizeHandler,
-  quickInsert,
-} from '@atlaskit/editor-test-helpers/integration/helpers';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  clickFirstCell,
-  getSelectorForTableCell,
-} from '@atlaskit/editor-test-helpers/page-objects/table';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  goToEditorTestingWDExample,
-  mountEditor,
-} from '@atlaskit/editor-test-helpers/testing-example-page';
-import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
-
-interface BBoxWithId {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-  id: string;
-}
-
-function calcOffset(
-  element: 'start' | 'target',
-  side: 'left' | 'top',
-  rect: BBoxWithId,
-): number {
-  if (element === 'target' && side === 'left') {
-    return -(rect.width / 2);
-  } else if (element === 'start' && side === 'left') {
-    return +(rect.width * 0.8);
-  }
-
-  return 0;
-}
-
-/*
- * This is a regression test.
- *
- * The goal of this test is to make sure
- * we can resize the table after a CellSelectio, and here is the why:
- *
- *
- * Given this cell A1
- *
- * ```
- *    ▁▁▁▁▁▁▁▁▁▁▁▁▁
- *   |           ▒▒|
- *   |     A1    ▒▒|
- *   |           ▒▒|
- *    ▔▔▔▔▔▔▔▔▔▔▔▔▔
- * ```
- *
- * This element is a div, and every time the user hovers it, we should display a resize line.
- * However, keeping a div for each cell in a table increases the HTML a lot,
- * resulting in performance degradation to any DOM diff action.
- * To avoid that, we decided to add the div on demand.
- * Then, when the user comes close to that gap, we added a DIV.
- * Next, we needed to check if the handle was already there using the resizeHandleColumnIndex from the PluginState.
- * However, if that state was not clean properly, we could end up not adding the DIV element,
- * then the user could not resize the column until they hover another one.
- *
- * We solved this problem search for the decorations too: if the DIV is not there, we will add it.
- */
-BrowserTestCase(
-  'Should display the resizer handler after a cellselection',
-  // We are skipping other browsers because this test relies on drag and drop,
-  // and this API isn't stable in other browsers
-  { skip: ['firefox', 'safari'] },
-  async (client: any, testName: string) => {
-    const page = await goToEditorTestingWDExample(
-      client,
-      'editor-plugin-table',
-    );
-
-    await mountEditor(page, {
-      appearance: fullpage.appearance,
-      allowTables: {
-        advanced: true,
-      },
-    });
-    await quickInsert(page, 'Table');
-
-    await clickFirstCell(page);
-
-    const firstCell = getSelectorForTableCell({
-      row: 2,
-      cell: 1,
-    });
-    const lastCell = getSelectorForTableCell({ row: 2, cell: 2 });
-    await hoverResizeHandler(page, 2, 1);
-
-    await page.simulateUserSelection(firstCell, lastCell, calcOffset);
-
-    // if it is not possible to resize this method will fail
-    await hoverResizeHandler(page, 2, 1);
-
-    expect(true).toBe(true);
-  },
-);