Merge pull request #4552 from nocodb/feat/copy-paste-cell

Copy paste cell more tests added

tests/playwright/pages/Dashboard/Grid/Column/index.ts

@@ -34,7 +34,7 @@ export class ColumnPageObject extends BasePage {
     childColumn = '',
     relationType = '',
     rollupType = '',
-    format = '',
+    format,
     insertAfterColumnTitle,
     insertBeforeColumnTitle,
   }: {
@@ -81,12 +81,14 @@ export class ColumnPageObject extends BasePage {
         });
         break;
       case 'Duration':
+        if (format) {
           await this.get().locator('.ant-select-single').nth(1).click();
           await this.rootPage
             .locator(`.ant-select-item`, {
               hasText: format,
             })
             .click();
+        }
         break;
       case 'Formula':
         await this.get().locator('.nc-formula-input').fill(formula);

tests/playwright/pages/Dashboard/common/Cell/RatingCell.ts

@@ -14,6 +14,14 @@ export class RatingCellPageObject extends BasePage {
     return this.cell.get({ index, columnHeader });
   }
 
+  async select({ index, columnHeader, rating }: { index?: number; columnHeader: string; rating: number }) {
+    await this.waitForResponse({
+      uiAction: this.get({ index, columnHeader }).locator('.ant-rate-star > div').nth(rating).click(),
+      httpMethodsToMatch: ['POST', 'PATCH'],
+      requestUrlPathToMatch: 'api/v1/db/data/noco/',
+    });
+  }
+
   async verify({ index, columnHeader, rating }: { index?: number; columnHeader: string; rating: number }) {
     await expect(await this.get({ index, columnHeader }).locator(`div[role="radio"][aria-checked="true"]`)).toHaveCount(
       rating

tests/playwright/pages/Dashboard/common/Cell/index.ts

@@ -51,7 +51,20 @@ export class CellPageObject extends BasePage {
       index,
       columnHeader,
     });
+    const isInputBox = async () => (await this.get({ index, columnHeader }).locator('input').count()) > 0;
+
+    for (let i = 0; i < 10; i++) {
+      if (await isInputBox()) {
+        break;
+      }
+      await this.rootPage.waitForTimeout(200);
+    }
+
+    if (await isInputBox()) {
       await this.get({ index, columnHeader }).locator('input').fill(text);
+    } else {
+      await this.get({ index, columnHeader }).locator('textarea').fill(text);
+    }
   }
 
   async inCellExpand({ index, columnHeader }: { index: number; columnHeader: string }) {
@@ -192,7 +205,9 @@ export class CellPageObject extends BasePage {
     ...clickOptions: Parameters<Locator['click']>
   ) {
     await this.get({ index, columnHeader }).click(...clickOptions);
+    await (await this.get({ index, columnHeader }).elementHandle()).waitForElementState('stable');
 
     await this.get({ index, columnHeader }).press((await this.isMacOs()) ? 'Meta+C' : 'Control+C');
+    await this.verifyToast({ message: 'Copied to clipboard' });
   }
 }

tests/playwright/tests/gridOperations.spec.ts

@@ -1,117 +0,0 @@
-import { expect, test } from '@playwright/test';
-import { DashboardPage } from '../pages/Dashboard';
-import setup from '../setup';
-
-test.describe('Grid operations', () => {
-  let dashboard: DashboardPage;
-  let context: any;
-
-  test.beforeEach(async ({ page }) => {
-    context = await setup({ page });
-    dashboard = new DashboardPage(page, context.project);
-  });
-
-  test('Clipboard support', async () => {
-    // close 'Team & Auth' tab
-    await dashboard.closeTab({ title: 'Team & Auth' });
-
-    await dashboard.treeView.createTable({ title: 'Sheet1' });
-
-    await dashboard.grid.column.create({
-      title: 'Number',
-      type: 'Number',
-    });
-    await dashboard.grid.column.create({
-      title: 'Checkbox',
-      type: 'Checkbox',
-    });
-    await dashboard.grid.column.create({
-      title: 'Date',
-      type: 'Date',
-    });
-    await dashboard.grid.column.create({
-      title: 'Attachment',
-      type: 'Attachment',
-    });
-
-    await dashboard.grid.addNewRow({
-      index: 0,
-    });
-    await dashboard.grid.cell.click({
-      index: 0,
-      columnHeader: 'Number',
-    });
-    await dashboard.grid.cell.fillText({
-      index: 0,
-      columnHeader: 'Number',
-      text: '123',
-    });
-    await dashboard.grid.cell.click({
-      index: 0,
-      columnHeader: 'Checkbox',
-    });
-
-    const today = new Date().toISOString().slice(0, 10);
-    await dashboard.grid.cell.date.open({
-      index: 0,
-      columnHeader: 'Date',
-    });
-    await dashboard.grid.cell.date.selectDate({
-      date: today,
-    });
-    await dashboard.grid.cell.date.close();
-
-    await dashboard.grid.cell.attachment.addFile({
-      index: 0,
-      columnHeader: 'Attachment',
-      filePath: `${process.cwd()}/fixtures/sampleFiles/1.json`,
-    });
-
-    await dashboard.grid.cell.copyToClipboard({
-      index: 0,
-      columnHeader: 'Title',
-    });
-    expect(await dashboard.grid.cell.getClipboardText()).toBe('Row 0');
-
-    await dashboard.grid.cell.copyToClipboard({
-      index: 0,
-      columnHeader: 'Number',
-    });
-    expect(await dashboard.grid.cell.getClipboardText()).toBe('123');
-
-    await dashboard.grid.cell.copyToClipboard(
-      {
-        index: 0,
-        columnHeader: 'Checkbox',
-      },
-      { position: { x: 1, y: 1 } }
-    );
-    await new Promise(resolve => setTimeout(resolve, 5000));
-    expect(await dashboard.grid.cell.getClipboardText()).toBe('true');
-
-    await dashboard.grid.cell.click({
-      index: 0,
-      columnHeader: 'Checkbox',
-    });
-    await dashboard.grid.cell.copyToClipboard(
-      {
-        index: 0,
-        columnHeader: 'Checkbox',
-      },
-      { position: { x: 1, y: 1 } }
-    );
-    expect(await dashboard.grid.cell.getClipboardText()).toBe('false');
-
-    await dashboard.grid.cell.copyToClipboard({
-      index: 0,
-      columnHeader: 'Date',
-    });
-    expect(await dashboard.grid.cell.getClipboardText()).toBe(today);
-
-    await dashboard.grid.cell.copyToClipboard({
-      index: 0,
-      columnHeader: 'Attachment',
-    });
-    // expect(await dashboard.grid.cell.getClipboardText()).toBe('1.json');
-  });
-});

tests/playwright/tests/keyboardShortcuts.spec.ts

@@ -101,4 +101,354 @@ test.describe('Verify shortcuts', () => {
     await page.waitForTimeout(2000);
     await grid.cell.verify({ index: 1, columnHeader: 'Country', value: 'NewAlgeria' });
   });
+
+  test('Clipboard support for cells', async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: 'Team & Auth' });
+
+    await dashboard.treeView.createTable({ title: 'Sheet1' });
+
+    await dashboard.grid.column.create({
+      title: 'SingleLineText',
+      type: 'SingleLineText',
+    });
+    await dashboard.grid.column.create({
+      title: 'LongText',
+      type: 'LongText',
+    });
+    await dashboard.grid.column.create({
+      title: 'Number',
+      type: 'Number',
+    });
+    await dashboard.grid.column.create({
+      title: 'PhoneNumber',
+      type: 'PhoneNumber',
+    });
+    await dashboard.grid.column.create({
+      title: 'Email',
+      type: 'Email',
+    });
+    await dashboard.grid.column.create({
+      title: 'URL',
+      type: 'URL',
+    });
+    await dashboard.grid.column.create({
+      title: 'Decimal',
+      type: 'Decimal',
+    });
+    await dashboard.grid.column.create({
+      title: 'Percent',
+      type: 'Percent',
+    });
+    await dashboard.grid.column.create({
+      title: 'Currency',
+      type: 'Currency',
+    });
+    await dashboard.grid.column.create({
+      title: 'Duration',
+      type: 'Duration',
+    });
+    await dashboard.grid.column.create({
+      title: 'Rating',
+      type: 'Rating',
+    });
+    await dashboard.grid.column.create({
+      title: 'SingleSelect',
+      type: 'SingleSelect',
+    });
+    await dashboard.grid.column.create({
+      title: 'MultiSelect',
+      type: 'MultiSelect',
+    });
+    await dashboard.grid.column.create({
+      title: 'Checkbox',
+      type: 'Checkbox',
+    });
+    await dashboard.grid.column.create({
+      title: 'Date',
+      type: 'Date',
+    });
+    await dashboard.grid.column.create({
+      title: 'Attachment',
+      type: 'Attachment',
+    });
+
+    // ########################################
+
+    await dashboard.grid.addNewRow({
+      index: 0,
+    });
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'SingleLineText',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'SingleLineText',
+      text: 'SingleLineText',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'LongText',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'LongText',
+      text: 'LongText',
+    });
+
+    await grid.cell.selectOption.select({ index: 0, columnHeader: 'SingleSelect', option: 'Option 1' });
+    await grid.cell.selectOption.select({
+      index: 0,
+      columnHeader: 'MultiSelect',
+      option: 'Option 2',
+      multiSelect: true,
+    });
+    await grid.cell.selectOption.select({
+      index: 0,
+      columnHeader: 'MultiSelect',
+      option: 'Option 1',
+      multiSelect: true,
+    });
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Number',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Number',
+      text: '123',
+    });
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'PhoneNumber',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'PhoneNumber',
+      text: '987654321',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Email',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Email',
+      text: 'test@example.com',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'URL',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'URL',
+      text: 'nocodb.com',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Decimal',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Decimal',
+      text: '1.1',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Percent',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Percent',
+      text: '80',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Currency',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Currency',
+      text: '20',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Duration',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Duration',
+      text: '0008',
+    });
+
+    await dashboard.grid.cell.rating.select({
+      index: 0,
+      columnHeader: 'Rating',
+      rating: 3,
+    });
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Checkbox',
+    });
+
+    const today = new Date().toISOString().slice(0, 10);
+    await dashboard.grid.cell.date.open({
+      index: 0,
+      columnHeader: 'Date',
+    });
+    await dashboard.grid.cell.date.selectDate({
+      date: today,
+    });
+    await dashboard.grid.cell.date.close();
+
+    await dashboard.grid.cell.attachment.addFile({
+      index: 0,
+      columnHeader: 'Attachment',
+      filePath: `${process.cwd()}/fixtures/sampleFiles/1.json`,
+    });
+
+    // ########################################
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'SingleLineText',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('SingleLineText');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'LongText',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('LongText');
+
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'SingleSelect',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('Option 1');
+
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'MultiSelect',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    expect(await dashboard.grid.cell.getClipboardText()).toContain('Option 1');
+    expect(await dashboard.grid.cell.getClipboardText()).toContain('Option 2');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Title',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('Row 0');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Number',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('123');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'PhoneNumber',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('987654321');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Email',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('test@example.com');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'URL',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('nocodb.com');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Decimal',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('1.1');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Percent',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('80');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Currency',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('20');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Duration',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('480');
+
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'Rating',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('4');
+
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'Checkbox',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    await new Promise(resolve => setTimeout(resolve, 5000));
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('true');
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Checkbox',
+    });
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'Checkbox',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('false');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Date',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe(today);
+
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'Attachment',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    const attachmentsInfo = JSON.parse(await dashboard.grid.cell.getClipboardText());
+    expect(attachmentsInfo[0]['title']).toBe('1.json');
+  });
 });