From 7b3f1921a265b3d644c1c3c0f46cfec19c61fe6c Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Mon, 31 Jul 2023 15:10:45 +0200
Subject: [PATCH] add integration tests

---
 .../__integ__/grid-navigation.test.ts         | 48 +++++++++++++++++++
 .../__tests__/use-grid-navigation.test.tsx    |  2 -
 2 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 src/table/table-role/__integ__/grid-navigation.test.ts

diff --git a/src/table/table-role/__integ__/grid-navigation.test.ts b/src/table/table-role/__integ__/grid-navigation.test.ts
new file mode 100644
index 0000000000..fbcba6a867
--- /dev/null
+++ b/src/table/table-role/__integ__/grid-navigation.test.ts
@@ -0,0 +1,48 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+test(
+  'cell action remains focused when row re-renders',
+  useBrowser({ width: 1800, height: 800 }, async browser => {
+    const page = new BasePageObject(browser);
+    await browser.url('#/light/table-fragments/grid-navigation-custom');
+    await page.waitForVisible('table');
+
+    await page.click('button[aria-label="Update item"]');
+    await expect(page.isFocused('button[aria-label="Update item"]')).resolves.toBe(true);
+  })
+);
+
+test(
+  'cell focus stays in the same position when row gets removed',
+  useBrowser({ width: 1800, height: 800 }, async browser => {
+    const page = new BasePageObject(browser);
+    await browser.url('#/light/table-fragments/grid-navigation-custom');
+    await page.waitForVisible('table');
+
+    await page.click('button[aria-label="Delete item"]');
+    await expect(page.isFocused('button[aria-label="Delete item"]')).resolves.toBe(true);
+  })
+);
+
+test(
+  'last grid cell remains focusable after new items are added',
+  useBrowser({ width: 1800, height: 800 }, async browser => {
+    const page = new BasePageObject(browser);
+    await browser.url('#/light/table-fragments/grid-navigation-custom');
+    await page.waitForVisible('table');
+
+    const initialLastElementSelector = 'tr[aria-rowindex="26"] > td[aria-colindex="9"]';
+
+    await expect(page.getElementAttribute(initialLastElementSelector, 'tabIndex')).resolves.toBe('0');
+
+    await page.click('button[aria-label="Duplicate item"]');
+    const newLastElementSelector = 'tr[aria-rowindex="27"] > td[aria-colindex="9"]';
+
+    await expect(page.getElementAttribute(initialLastElementSelector, 'tabIndex')).resolves.toBe('-1');
+    await expect(page.getElementAttribute(newLastElementSelector, 'tabIndex')).resolves.toBe('0');
+  })
+);
diff --git a/src/table/table-role/__tests__/use-grid-navigation.test.tsx b/src/table/table-role/__tests__/use-grid-navigation.test.tsx
index a4e33b5d79..f278a451b2 100644
--- a/src/table/table-role/__tests__/use-grid-navigation.test.tsx
+++ b/src/table/table-role/__tests__/use-grid-navigation.test.tsx
@@ -6,8 +6,6 @@ import { render, fireEvent } from '@testing-library/react';
 import { useGridNavigation } from '../use-grid-navigation';
 import { KeyCode } from '../../../internal/keycode';
 
-// TODO: test mutation observer logic with integ test
-
 function SimpleTable({ tableRole = 'grid' }: { tableRole?: 'grid' | 'table' }) {
   const tableRef = useRef<HTMLTableElement>(null);
   useGridNavigation({ tableRole, pageSize: 2, getTable: () => tableRef.current });