add integration tests

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');
+  })
+);

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 });