From 8b84350a217cfe1ec206b8346e1b3bc75e02b8ad Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 13 Feb 2024 06:22:10 +0000
Subject: [PATCH] test: keyboard interactions on on tables: tab, arrowDown,
 arrowUp

---
 .../components/smartsheet/grid/Table.vue      |  6 +-
 .../smartsheet/grid/usePaginationShortcuts.ts |  1 -
 .../db/features/keyboardShortcuts.spec.ts     | 55 +++++++++++++++++++
 3 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 2885aab673..08d061c85f 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -208,7 +208,7 @@ const { onDrag, onDragStart, onDragEnd, draggedCol, dragColPlaceholderDomRef, to
   gridWrapper,
 })
 
-const { onLeft, onRight, onUp, onDown, changePageWithLoading } = usePaginationShortcuts({
+const { onLeft, onRight, onUp, onDown } = usePaginationShortcuts({
   paginationDataRef,
   changePage: changePage as any,
 })
@@ -977,8 +977,8 @@ function scrollToCell(row?: number | null, col?: number | null) {
 async function resetAndChangePage(row: number, col: number, pageChange?: number) {
   clearSelectedRange()
 
-  if (pageChange !== undefined) {
-    await changePage?.(paginationDataRef.value?.page! + pageChange)
+  if (pageChange !== undefined && paginationDataRef.value?.page) {
+    await changePage?.(paginationDataRef.value.page + pageChange)
     await nextTick()
     makeActive(row, col)
   } else {
diff --git a/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts b/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts
index 5a6cbd1b18..9eff4121c4 100644
--- a/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts
+++ b/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts
@@ -75,7 +75,6 @@ const usePaginationShortcuts = ({
     onRight,
     onUp,
     onDown,
-    changePageWithLoading,
   }
 }
 
diff --git a/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts b/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts
index 73795f3c90..7a3a72e012 100644
--- a/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts
+++ b/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts
@@ -137,6 +137,61 @@ test.describe('Verify shortcuts', () => {
     await page.keyboard.press((await grid.isMacOs()) ? 'Meta+Enter' : 'Control+Enter');
     await page.reload();
     await grid.cell.verify({ index: 1, columnHeader: 'Country', value: 'NewAlgeria' });
+
+    // Tab:
+    // If current page is not last page and and current cell is last column of last row and user press `Tab` then current page will be incremented by 1
+    await grid.cell.click({ index: 24, columnHeader: 'Cities' });
+    await page.keyboard.press('Tab');
+    await grid.verifyActivePage({ pageNumber: '2' });
+    await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
+
+    // If current page is last page and and current cell is last column of last row and user press `Tab` then new empty row will be added
+    await grid.clickPagination({ type: 'last-page' });
+    await grid.cell.click({ index: 8, columnHeader: 'Cities' });
+    await page.keyboard.press('Tab');
+    await grid.verifyRowCount({ count: 10 });
+    await grid.cell.verifyCellActiveSelected({ index: 9, columnHeader: 'Country' });
+
+    // If current page is not first page and and current cell is first column of first row and user press `Shift+Tab` then current page will be decremented by 1
+    await grid.cell.click({ index: 0, columnHeader: 'Country' });
+    await page.keyboard.press('Shift+Tab');
+    await grid.verifyActivePage({ pageNumber: '4' });
+    await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Cities' });
+
+    // If current page is first page and and current cell is first column of first row and user press `Shift+Tab` then current page will not change
+    await grid.clickPagination({ type: 'first-page' });
+    await grid.cell.click({ index: 0, columnHeader: 'Country' });
+    await page.keyboard.press('Shift+Tab');
+    await grid.verifyActivePage({ pageNumber: '1' });
+    await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
+
+    // ArrowDown:
+    // If current page is not last page and and current cell is in last row and user press `ArrowDown` then current page will be incremented by 1
+    await grid.cell.click({ index: 24, columnHeader: 'Cities' });
+    await page.keyboard.press('ArrowDown');
+    await grid.verifyActivePage({ pageNumber: '2' });
+    await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Cities' });
+
+    // If current page is last page and and current cell is in last row and user press `ArrowDown` then new empty row will be added
+    await grid.clickPagination({ type: 'last-page' });
+    await grid.cell.click({ index: 8, columnHeader: 'Cities' });
+    await page.keyboard.press('ArrowDown');
+    await grid.verifyRowCount({ count: 10 });
+    await grid.cell.verifyCellActiveSelected({ index: 9, columnHeader: 'Country' });
+
+    // ArrowUp:
+    // If current page is not first page and and current cell is in first row and user press `ArrwoUp` then current page will be decremented by 1
+    await grid.cell.click({ index: 0, columnHeader: 'Cities' });
+    await page.keyboard.press('ArrowUp');
+    await grid.verifyActivePage({ pageNumber: '4' });
+    await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Cities' });
+
+    // If current page is first page and and current cell is in first row and user press `ArrwoUp` then current page will not change
+    await grid.clickPagination({ type: 'first-page' });
+    await grid.cell.click({ index: 0, columnHeader: 'Cities' });
+    await page.keyboard.press('ArrowUp');
+    await grid.verifyActivePage({ pageNumber: '1' });
+    await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Cities' });
   });
 });