@atlaskit/editor-plugin-table 0.0.1 → 0.0.3

package/src/plugins/table/__tests__/integration/delete-table-when-selected.ts

@@ -0,0 +1,110 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+  clipboardInput,
+  copyAsPlaintextButton,
+  copyAsHTMLButton,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import {
+  tableSelectors,
+  clickFirstCell,
+  waitForNoTable,
+} from '@atlaskit/editor-test-helpers/page-objects/table';
+
+import basicTableAdf from './__fixtures__/basic-table';
+
+BrowserTestCase(
+  'replaces table with text when user types with a full-table cell selection',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+      },
+      defaultValue: basicTableAdf,
+    });
+
+    await clickFirstCell(page);
+    await page.click(tableSelectors.cornerButton);
+    await page.keys('A');
+
+    await waitForNoTable(page);
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'replaces table with content when user pastes plain text with a full-table cell selection',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await page.waitFor(clipboardInput);
+    await page.type(clipboardInput, 'Some text to copy');
+    await page.click(copyAsPlaintextButton);
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+      },
+      defaultValue: basicTableAdf,
+    });
+
+    await clickFirstCell(page);
+    await page.click(tableSelectors.cornerButton);
+    await page.paste();
+
+    await waitForNoTable(page);
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'replaces table with content when user pastes rich text with a full-table cell selection',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await page.waitFor(clipboardInput);
+    await page.type(
+      clipboardInput,
+      '<p>this is a link <a href="http://www.google.com">www.google.com</a></p><p>more elements with some <strong>format</strong></p><p>some addition<em> formatting</em></p>',
+    );
+    await page.click(copyAsHTMLButton);
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+      },
+      defaultValue: basicTableAdf,
+    });
+
+    await clickFirstCell(page);
+    await page.click(tableSelectors.cornerButton);
+    await page.paste();
+
+    await waitForNoTable(page);
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);

package/src/plugins/table/__tests__/integration/deleting-empty-paragraph-under-table.ts

@@ -0,0 +1,86 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import {
+  fullpage,
+  setProseMirrorTextSelection,
+  expectToMatchSelection,
+  editable,
+  getDocFromElement,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import {
+  emptyParagraphUnderneathTable,
+  emptyParagraphUnderneathTableAtEnd,
+  filledParagraphUnderneathTable,
+} from './__fixtures__/empty-paragraph-underneath-table';
+
+BrowserTestCase(
+  `backspace for an empty paragraph not at the end of the document should delete that paragraph and
+  place cursor inside last cell of table`,
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {},
+      defaultValue: emptyParagraphUnderneathTable,
+    });
+
+    await setProseMirrorTextSelection(page, { anchor: 45 });
+    await page.keys('Backspace');
+    await expectToMatchSelection(page, { type: 'text', to: 40, from: 40 });
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  `backspace for an empty paragraph at the end of the document should only
+  place cursor inside last cell of table`,
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {},
+      defaultValue: emptyParagraphUnderneathTableAtEnd,
+    });
+
+    await setProseMirrorTextSelection(page, { anchor: 45 });
+    await page.keys('Backspace');
+    await expectToMatchSelection(page, { type: 'text', to: 40, from: 40 });
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  `backspace for an filled paragraph not at the end of the document should
+  place cursor inside last cell of table`,
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {},
+      defaultValue: filledParagraphUnderneathTable,
+    });
+
+    await setProseMirrorTextSelection(page, { anchor: 45 });
+    await page.keys('Backspace');
+    await expectToMatchSelection(page, { type: 'text', to: 40, from: 40 });
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);

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

@@ -0,0 +1,72 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+  doubleClickResizeHandle,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  clickFirstCell,
+  selectTable,
+} from '@atlaskit/editor-test-helpers/page-objects/table';
+import {
+  tableWithUnevenColumns,
+  tableWithUnevenColumnsInOverflow,
+} from './__fixtures__/even-columns';
+
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+// moveTo in doubleClickResizeHandle does not work for safari
+BrowserTestCase(
+  'Should even columns on double click on resize handle when table is selected',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableWithUnevenColumns),
+      allowTables: {
+        advanced: true,
+      },
+    });
+    await clickFirstCell(page);
+    await selectTable(page);
+    await doubleClickResizeHandle(page, 2, 2);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+// moveTo in doubleClickResizeHandle does not work for safari
+BrowserTestCase(
+  'Should even columns and remain overflown on double click on resize handle when table is selected',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableWithUnevenColumnsInOverflow),
+      allowTables: {
+        advanced: true,
+      },
+    });
+    await clickFirstCell(page);
+    await selectTable(page);
+    await doubleClickResizeHandle(page, 2, 2);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);

package/src/plugins/table/__tests__/integration/insert-cell-header-with-strong-mark.ts

@@ -0,0 +1,40 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+  quickInsert,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  mountEditor,
+  goToEditorTestingWDExample,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+BrowserTestCase(
+  'inside-table.ts: Insert panel into table, add text, change panel type',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowPanel: true,
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await page.click(editable);
+
+    // Insert table
+    await quickInsert(page, 'Table');
+
+    await page.type(editable, 'this has a strong mark');
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);

package/src/plugins/table/__tests__/integration/insert-long-smart-link.ts

@@ -0,0 +1,52 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import Page from '@atlaskit/webdriver-runner/wd-wrapper';
+import { waitForInlineCard } from '@atlaskit/media-integration-test-helpers';
+import { inlineCardLongNameSlowResolveUrl } from '@atlaskit/editor-test-helpers/card-provider';
+import {
+  copyToClipboard,
+  gotoEditor,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  clickFirstCell,
+  insertTable,
+  tableSelectors,
+} from '@atlaskit/editor-test-helpers/page-objects/table';
+
+BrowserTestCase(
+  'table row controls should be same height as table body after a long title smart link finishes async rendering',
+  { skip: ['safari'] },
+  async (client: any) => {
+    let page = new Page(client);
+    await copyToClipboard(page, inlineCardLongNameSlowResolveUrl);
+    await gotoEditor(page);
+    await insertTable(page);
+    await clickFirstCell(page);
+    await page.paste();
+    await waitForInlineCard(page);
+
+    const { tableBodyHeight, tableRowControlsHeight } = await page.evaluate<{
+      tableBodyHeight: number;
+      tableRowControlsHeight: number;
+    }>(
+      (tableRowControlsSelector, tableBodySelector) => {
+        const tableRowControls = document.querySelector(
+          tableRowControlsSelector,
+        ) as HTMLElement;
+        const tableBody = document.querySelector(tableBodySelector);
+        if (!tableBody || !tableRowControls) {
+          throw new Error(
+            'Missing tableBody or tableRowControls, exiting test',
+          );
+        }
+        return {
+          tableBodyHeight: Math.round(tableBody.offsetHeight),
+          tableRowControlsHeight: Math.round(tableRowControls.offsetHeight),
+        };
+      },
+      tableSelectors.rowControlsForTableBody,
+      tableSelectors.tableBody,
+    );
+
+    expect(tableBodyHeight).toBe(tableRowControlsHeight);
+  },
+);

package/src/plugins/table/__tests__/integration/insert-row-inside-layout.ts

@@ -0,0 +1,47 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import {
+  editable,
+  animationFrame,
+  getDocFromElement,
+  fullpage,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import { insertRow } from '@atlaskit/editor-test-helpers/page-objects/table';
+import { table as tableInsideLayout } from './__fixtures__/table-inside-layout';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+import { clickFirstCell } from '@atlaskit/editor-test-helpers/page-objects/table';
+
+BrowserTestCase(
+  'Should scale remaining columns when adding a new column preventing from going to overflow',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableInsideLayout),
+      allowTables: {
+        advanced: true,
+      },
+      allowLayouts: {
+        allowBreakout: true,
+      },
+      allowBreakout: true,
+    });
+
+    await clickFirstCell(page);
+    await animationFrame(page);
+    await animationFrame(page);
+    await insertRow(page, 1);
+    await page.type(editable, 'should be inside of the table');
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);

package/src/plugins/table/__tests__/integration/layout.ts

@@ -0,0 +1,224 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+  changeSelectedNodeLayout,
+  animationFrame,
+  toggleBreakout,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+
+import { clickFirstCell } from '@atlaskit/editor-test-helpers/page-objects/table';
+
+import {
+  defaultTableInOverflow,
+  defaultTableResizedTable,
+  nestedTables,
+} from './__fixtures__/layout-documents';
+
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+import messages from '@atlaskit/editor-core/src/messages';
+
+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,
+      messages.layoutFixedWidth.defaultMessage,
+    );
+    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);
+  },
+);