test: multi cell copy paste

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

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

@@ -167,12 +167,13 @@ export class GridPage extends BasePage {
     await this.dashboard.waitForLoaderToDisappear();
   }
 
-  async addRowRightClickMenu(index: number) {
+  async addRowRightClickMenu(index: number, columnHeader = 'Title') {
     const rowCount = await this.get().locator('.nc-grid-row').count();
-    await this.get().locator(`td[data-testid="cell-Title-${index}"]`).click();
-    await this.get().locator(`td[data-testid="cell-Title-${index}"]`).click({
-      button: 'right',
-    });
+
+    const cell = await this.get().locator(`td[data-testid="cell-${columnHeader}-${index}"]`).last();
+    await cell.click();
+    await cell.click({ button: 'right' });
+
     // Click text=Insert New Row
     await this.rootPage.locator('text=Insert New Row').click();
     await expect(await this.get().locator('.nc-grid-row')).toHaveCount(rowCount + 1);

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

@@ -39,9 +39,9 @@ export class CellPageObject extends BasePage {
 
   get({ index, columnHeader }: CellProps): Locator {
     if (this.parent instanceof SharedFormPage) {
-      return this.parent.get().locator(`[data-testid="nc-form-input-cell-${columnHeader}"]`);
+      return this.parent.get().locator(`[data-testid="nc-form-input-cell-${columnHeader}"]`).first();
     } else {
-      return this.parent.get().locator(`td[data-testid="cell-${columnHeader}-${index}"]`);
+      return this.parent.get().locator(`td[data-testid="cell-${columnHeader}-${index}"]`).first();
     }
   }
 

tests/playwright/tests/db/keyboardShortcuts.spec.ts

@@ -108,6 +108,45 @@ test.describe('Verify shortcuts', () => {
   test.describe('Copy Paste', () => {
     const today = new Date().toISOString().slice(0, 10);
 
+    async function verifyCellContents({ rowIndex }: { rowIndex: number }) {
+      const responseTable = [
+        { type: 'SingleLineText', value: 'SingleLineText' },
+        { type: 'LongText', value: '"LongText"' },
+        { type: 'SingleSelect', value: 'Option1' },
+        { type: 'MultiSelect', value: 'Option1,Option2' },
+        { type: 'Number', value: '123' },
+        { type: 'PhoneNumber', value: '987654321' },
+        { type: 'Email', value: 'test@example.com' },
+        { type: 'URL', value: 'nocodb.com' },
+        { type: 'Decimal', value: '1.12' },
+        { type: 'Percent', value: '80' },
+        { type: 'Currency', value: 20, options: { parseInt: true } },
+        { type: 'Duration', value: 480, options: { parseInt: true } },
+        { type: 'Rating', value: '4' },
+        { type: 'Checkbox', value: 'true' },
+        { type: 'Date', value: today },
+        { type: 'Attachment', value: '1.json', options: { jsonParse: true } },
+      ];
+
+      for (const { type, value, options } of responseTable) {
+        await dashboard.grid.cell.copyToClipboard(
+          {
+            index: rowIndex,
+            columnHeader: type,
+          },
+          { position: { x: 1, y: 1 } }
+        );
+        if (options?.parseInt) {
+          expect(parseInt(await dashboard.grid.cell.getClipboardText())).toBe(value);
+        } else if (options?.jsonParse) {
+          const attachmentsInfo = JSON.parse(await dashboard.grid.cell.getClipboardText());
+          expect(attachmentsInfo[0]['title']).toBe('1.json');
+        } else {
+          expect(await dashboard.grid.cell.getClipboardText()).toBe(value);
+        }
+      }
+    }
+
     test.beforeEach(async () => {
       api = new Api({
         baseURL: `http://localhost:8080/`,
@@ -254,9 +293,11 @@ test.describe('Verify shortcuts', () => {
       });
     });
 
-    test('Clipboard support for cells', async () => {
+    test('Clipboard support: single cell', async () => {
       // ########################################
 
+      await verifyCellContents({ rowIndex: 0 });
+
       const responseTable = [
         { type: 'SingleLineText', value: 'SingleLineText' },
         { type: 'LongText', value: '"LongText"' },
@@ -294,5 +335,24 @@ test.describe('Verify shortcuts', () => {
         }
       }
     });
+
+    test('Clipboard support: multiple cells', async ({ page }) => {
+      // click first cell, press `Ctrl A` and `Ctrl C`
+      await grid.cell.click({ index: 0, columnHeader: 'Id' });
+      await page.keyboard.press((await grid.isMacOs()) ? 'Meta+a' : 'Control+a');
+      await page.keyboard.press((await grid.isMacOs()) ? 'Meta+c' : 'Control+c');
+
+      /////////////////////////////////////////////////////////////////////////
+
+      // horizontal multiple cells selection : copy paste
+      // add new row, click on first cell, paste
+      await grid.addRowRightClickMenu(0, 'Id');
+      await page.keyboard.press((await grid.isMacOs()) ? 'Meta+v' : 'Control+v');
+      await verifyCellContents({ rowIndex: 1 });
+
+      // reload page
+      await dashboard.rootPage.reload();
+      await dashboard.grid.verifyRowCount({ count: 2 });
+    });
   });
 });