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(null); useGridNavigation({ tableRole, pageSize: 2, getTable: () => tableRef.current });