test: playwright test cases for paste option of cell context menu

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -34,6 +34,7 @@ import {
   useI18n,
   useMultiSelect,
   useNuxtApp,
+  usePaste,
   useRoles,
   useRoute,
   useSmartsheetStoreOrThrow,
@@ -41,7 +42,6 @@ import {
   useViewColumnsOrThrow,
   useViewsStore,
   watch,
-  usePaste,
 } from '#imports'
 import type { CellRange, Row } from '#imports'
 

packages/nc-gui/composables/usePaste.ts

@@ -8,7 +8,10 @@ export const usePaste = () => {
       const clipboardText = await navigator.clipboard.readText()
 
       // Create a new paste event
-      const pasteEvent = new Event('paste')
+      const pasteEvent = new Event('paste', {
+        bubbles: false,
+        cancelable: true,
+      })
 
       // Attach clipboard data to the event
       const clipboardData = {

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

@@ -450,4 +450,14 @@ export class GridPage extends BasePage {
     }
     return text;
   }
+
+  async pasteWithMouse({ index, columnHeader }: CellProps) {
+    await this.cell.get({ index, columnHeader }).scrollIntoViewIfNeeded();
+    await this.cell.get({ index, columnHeader }).click({ button: 'right' });
+
+    await this.get().page().getByTestId('context-menu-item-paste').click();
+
+    // kludge: wait for paste to complete
+    await this.rootPage.waitForTimeout(1000);
+  }
 }

tests/playwright/tests/db/general/cellSelection.spec.ts

@@ -28,16 +28,34 @@ test.describe('Verify cell selection', () => {
     expect(await grid.selectedCount()).toBe(9);
     await dashboard.closeAllTabs();
 
-    // #2 when copied with clipboard, it copies correct text
+    // #2 when copied with clipboard, it copies correct text and paste
+    const verifyPastedData = async ({ index }: { index: number }): Promise<void> => {
+      // FirstName column
+      let cellText: string[] = ['MARY', 'PATRICIA'];
+      for (let i = index; i <= index + 1; i++) {
+        await grid.cell.verify({ index: i, columnHeader: 'FirstName', value: cellText[i - index] });
+      }
+
+      // LastName column
+      cellText = ['SMITH', 'JOHNSON'];
+      for (let i = index; i <= index + 1; i++) {
+        await grid.cell.verify({ index: i, columnHeader: 'LastName', value: cellText[i - index] });
+      }
+    };
+
     await dashboard.treeView.openTable({ title: 'Customer' });
     await grid.selectRange({
       start: { index: 0, columnHeader: 'FirstName' },
       end: { index: 1, columnHeader: 'LastName' },
     });
     expect(await grid.copyWithKeyboard()).toBe('MARY\tSMITH\n' + 'PATRICIA\tJOHNSON');
+
+    await grid.pasteWithMouse({ index: 2, columnHeader: 'FirstName' });
+    await verifyPastedData({ index: 2 });
+
     await dashboard.closeAllTabs();
 
-    // #3 when copied with mouse, it copies correct text
+    // #3 when copied with mouse, it copies correct text and paste
     await dashboard.treeView.openTable({ title: 'Customer' });
     await grid.selectRange({
       start: { index: 0, columnHeader: 'FirstName' },
@@ -46,6 +64,9 @@ test.describe('Verify cell selection', () => {
     expect(await grid.copyWithMouse({ index: 0, columnHeader: 'FirstName' })).toBe(
       'MARY\tSMITH\n' + 'PATRICIA\tJOHNSON'
     );
+
+    await grid.pasteWithMouse({ index: 4, columnHeader: 'FirstName' });
+    await verifyPastedData({ index: 4 });
     await dashboard.closeAllTabs();
   });
 
@@ -99,4 +120,18 @@ test.describe('Verify cell selection', () => {
     expect(await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'LastUpdate' }));
     await dashboard.closeAllTabs();
   });
+
+  test('Suite-3', async () => {
+    // #8 when copied with mouse and paste with mouse, it paste correct text
+    await dashboard.treeView.openTable({ title: 'Customer' });
+    await grid.selectRange({
+      start: { index: 0, columnHeader: 'FirstName' },
+      end: { index: 1, columnHeader: 'LastName' },
+    });
+    expect(await grid.copyWithMouse({ index: 0, columnHeader: 'FirstName' })).toBe(
+      'MARY\tSMITH\n' + 'PATRICIA\tJOHNSON'
+    );
+
+    await dashboard.closeAllTabs();
+  });
 });