chore: (WIP) Fixes table integ tests for React 18

Author: pan-kot

pages/table/expandable-rows-test.page.tsx

@@ -269,15 +269,18 @@ function useTableData() {
 
   // Imitate server-side delay when items update.
   const memoItems = useEqualsMemo(collectionResult.items);
-  const [readyItems, setReadyItems] = useState(memoItems);
+  const [delayedItems, setReadyItems] = useState(memoItems);
+  const readyItems = settings.manualServerMock ? memoItems : delayedItems;
   useEffect(() => {
-    setLoading(true);
-    setError(false);
-    return getServerResponse(() => {
-      setLoading(false);
-      setReadyItems(memoItems);
-      setError(settings.emulateServerError);
-    });
+    if (!settings.manualServerMock) {
+      setLoading(true);
+      setError(false);
+      return getServerResponse(() => {
+        setLoading(false);
+        setReadyItems(memoItems);
+        setError(settings.emulateServerError);
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [getServerResponse, memoItems, setLoading, setError, setReadyItems]);
 
@@ -490,6 +493,7 @@ function PageSettings() {
 function useEqualsMemo<T>(value: T): T {
   const ref = useRef<T>(value);
   if (!isEqual(value, ref.current)) {
+    console.log(ref.current, value);
     ref.current = value;
   }
   return ref.current;

src/table/__integ__/expandable-rows.test.ts

@@ -45,7 +45,7 @@ describe('Expandable rows', () => {
     })
   );
 
-  (process.env.REACT_VERSION !== '18' ? test : test.skip)(
+  test(
     'uses items loader on the first expandable item',
     setupTest({ useProgressiveLoading: true, useServerMock: true }, async page => {
       const targetCluster = 'cluster-33387b6c';

src/table/__integ__/performance-marks.test.ts

@@ -13,15 +13,19 @@ function setupTest(
   }) => Promise<void>
 ) {
   return useBrowser(async browser => {
-    if (process.env.REACT_VERSION === '18') {
-      return;
-    }
     const page = new BasePageObject(browser);
     await browser.url(`#/light/table/performance-marks${!inViewport ? '?outsideOfViewport=true' : ''}`);
     const getMarks = async () => {
-      await new Promise(r => setTimeout(r, 200));
-      const marks = await browser.execute(() => performance.getEntriesByType('mark') as PerformanceMark[]);
-      return marks.filter(m => m.detail?.source === 'awsui');
+      let awsuiMarks: PerformanceMark[] = [];
+      await page.waitForAssertion(async () => {
+        await new Promise(r => setTimeout(r, 200));
+        const marks = await browser.execute(() => performance.getEntriesByType('mark') as PerformanceMark[]);
+        awsuiMarks = marks.filter(m => m.detail?.source === 'awsui');
+        if (awsuiMarks.length === 0) {
+          throw new Error('No awsui marks available.');
+        }
+      });
+      return awsuiMarks;
     };
     const isElementPerformanceMarkExisting = (id: string) =>
       page.isExisting(`[data-analytics-performance-mark="${id}"]`);

src/table/__integ__/resizable-columns.test.ts

@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { range } from 'lodash';
+
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
@@ -131,7 +133,7 @@ const setupTest = (testFn: (page: TablePage) => Promise<void>, config?: PageConf
   return useBrowser({ ...defaultScreen }, async browser => {
     const page = new TablePage(browser);
     const params = new URLSearchParams({
-      visualRefresh: 'false',
+      visualRefresh: 'true',
       stickyHeader: config?.stickyHeader !== undefined ? String(config.stickyHeader) : 'false',
       withColumnIds: config?.withColumnIds !== undefined ? String(config.withColumnIds) : 'true',
       withSelection: config?.withSelection !== undefined ? String(config.withSelection) : 'false',
@@ -331,8 +333,8 @@ test(
   })
 );
 
-(process.env.REACT_VERSION !== '18' ? test : test.skip)(
-  'should recover column widths when the inner state is reset',
+test.each(range(0, 100))(
+  'should recover column widths when the inner state is reset, %s',
   setupTest(async page => {
     await page.resizeColumn(2, 100);
     const oldWidth = await page.getColumnWidth(2);

src/table/__integ__/table.test.ts

@@ -61,7 +61,7 @@ test(
   })
 );
 
-(process.env.REACT_VERSION !== '18' ? test : test.skip)(
+test(
   'sets role=region and aria-label on scrollable wrapper when overflowing',
   useBrowser(async browser => {
     const tableWrapper = createWrapper().findTable();
@@ -84,6 +84,6 @@ test(
     ariaLabelledby = await page.getElementAttribute(scrollableWrapperSelector, 'aria-labelledby');
     expect(role).toEqual('region');
     expect(ariaLabelledby).not.toBeFalsy();
-    await expect(page.getElementsText(`#${ariaLabelledby}`)).resolves.toEqual([tableHeading]);
+    await expect(page.getElementsText(`#${CSS.escape(ariaLabelledby)}`)).resolves.toEqual([tableHeading]);
   })
 );