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

Author: pan-kot

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

@@ -269,17 +269,20 @@ function useTableData() {
 
   // Imitate server-side delay when items update.
   const memoItems = useEqualsMemo(collectionResult.items);
-  const [readyItems, setReadyItems] = useState(memoItems);
+  const [delayedItems, setDelayedItems] = 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);
+        setDelayedItems(memoItems);
+        setError(settings.emulateServerError);
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getServerResponse, memoItems, setLoading, setError, setReadyItems]);
+  }, [getServerResponse, memoItems, setLoading, setError, setDelayedItems]);
 
   // Decorate path options to only show the last node and not the full path.
   collectionResult.propertyFilterProps.filteringOptions = collectionResult.propertyFilterProps.filteringOptions.map(

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,17 @@ 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 () => {
+      let awsuiMarks: PerformanceMark[] = [];
       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');
+      await page.waitForAssertion(async () => {
+        const marks = await browser.execute(() => performance.getEntriesByType('mark') as PerformanceMark[]);
+        awsuiMarks = marks.filter(m => m.detail?.source === 'awsui');
+        expect(awsuiMarks).not.toHaveLength(0);
+      });
+      return awsuiMarks;
     };
     const isElementPerformanceMarkExisting = (id: string) =>
       page.isExisting(`[data-analytics-performance-mark="${id}"]`);

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

@@ -331,7 +331,7 @@ test(
   })
 );
 
-(process.env.REACT_VERSION !== '18' ? test : test.skip)(
+test(
   'should recover column widths when the inner state is reset',
   setupTest(async page => {
     await page.resizeColumn(2, 100);

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