chore: Fixes some integ tests for React 18 (#3897)

Author: pan-kot

src/anchor-navigation/__integ__/anchor-navigation.test.ts

@@ -20,6 +20,7 @@ describe('AnchorNavigation', () => {
     return useBrowser(async browser => {
       const page = new AnchorNavigationPage(browser);
       await browser.url('#/light/anchor-navigation/basic');
+      await page.waitForVisible(wrapper.toSelector());
       await testFn(page);
     });
   }
@@ -65,11 +66,6 @@ describe('AnchorNavigation', () => {
   test(
     'scrolling to the end of the page makes the last anchor item active',
     setupTest(async page => {
-      // TODO: fix test for React 18
-      if ((await page.getReactVersion()) === '18') {
-        return;
-      }
-
       const lastAnchorLink = wrapper.findAnchorLinkByHref('#section-1-2-1-1');
       await page.windowScrollTo({ top: 99999 }); // Very high value to ensure we are scrolled to the end
       return expect(await page.getElementAttribute(lastAnchorLink.toSelector(), 'aria-current')).toBe('true');

src/app-layout/__integ__/app-layout-focus-delegation.test.ts

@@ -48,10 +48,6 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
         'should not focus panels on page load',
         setupTest(
           async page => {
-            // TODO: fix test for React 18
-            if ((await page.getReactVersion()) === '18') {
-              return;
-            }
             await expect(page.isFocused('body')).resolves.toBe(true);
           },
           { pageName: 'with-split-panel', theme, mobile }

src/app-layout/classic.tsx

@@ -137,9 +137,9 @@ const ClassicAppLayout = React.forwardRef(
       loseFocus: loseDrawersFocus,
     } = useFocusControl(!!activeDrawerId, true, activeDrawerId);
 
-    const onNavigationToggle = useStableCallback((open: boolean) => {
-      focusNavButtons();
-      fireNonCancelableEvent(onNavigationChange, { open });
+    const onNavigationToggle = useStableCallback(({ isOpen, autoFocus }: { isOpen: boolean; autoFocus: boolean }) => {
+      focusNavButtons({ force: false, autoFocus });
+      fireNonCancelableEvent(onNavigationChange, { open: isOpen });
     });
 
     const onNavigationClick = (event: React.MouseEvent) => {
@@ -148,14 +148,14 @@ const ClassicAppLayout = React.forwardRef(
         node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href
       );
       if (hasLink) {
-        onNavigationToggle(false);
+        onNavigationToggle({ isOpen: false, autoFocus: true });
       }
     };
 
     useEffect(() => {
       // Close navigation drawer on mobile so that the main content is visible
       if (isMobile) {
-        onNavigationToggle(false);
+        onNavigationToggle({ isOpen: false, autoFocus: false });
       }
     }, [isMobile, onNavigationToggle]);
 
@@ -367,17 +367,17 @@ const ClassicAppLayout = React.forwardRef(
       openTools: () => onToolsToggle(true),
       closeNavigationIfNecessary: () => {
         if (isMobile) {
-          onNavigationToggle(false);
+          onNavigationToggle({ isOpen: false, autoFocus: true });
         }
       },
       focusToolsClose: () => {
         if (hasDrawers) {
-          focusDrawersButtons(true);
+          focusDrawersButtons({ force: true });
         } else {
-          focusToolsButtons(true);
+          focusToolsButtons({ force: true });
         }
       },
-      focusActiveDrawer: () => focusDrawersButtons(true),
+      focusActiveDrawer: () => focusDrawersButtons({ force: true }),
       focusSplitPanel: () => splitPanelRefs.slider.current?.focus(),
     }));
 
@@ -404,7 +404,7 @@ const ClassicAppLayout = React.forwardRef(
             ariaLabels={ariaLabels}
             navigationHide={navigationHide}
             toolsHide={toolsHide}
-            onNavigationOpen={() => onNavigationToggle(true)}
+            onNavigationOpen={() => onNavigationToggle({ isOpen: true, autoFocus: true })}
             onToolsOpen={() => onToolsToggle(true)}
             unfocusable={anyPanelOpen}
             mobileBarRef={mobileBarRef}
@@ -433,7 +433,7 @@ const ClassicAppLayout = React.forwardRef(
               isMobile={isMobile}
               isOpen={navigationOpen}
               onClick={isMobile ? onNavigationClick : undefined}
-              onToggle={onNavigationToggle}
+              onToggle={isOpen => onNavigationToggle({ isOpen, autoFocus: true })}
               toggleRefs={navigationRefs}
               type="navigation"
               width={navigationWidth}

src/app-layout/utils/use-focus-control.ts

@@ -14,7 +14,7 @@ export interface FocusControlRefs {
 
 export interface FocusControlState {
   refs: FocusControlRefs;
-  setFocus: (force?: boolean) => void;
+  setFocus: (options?: { force: boolean; autoFocus?: boolean }) => void;
   loseFocus: () => void;
 }
 
@@ -132,10 +132,12 @@ export function useFocusControl(
     shouldFocus.current = false;
   };
 
-  const setFocus = (force?: boolean) => {
-    shouldFocus.current = true;
+  const setFocus = ({ force, autoFocus = true }: { force: boolean; autoFocus?: boolean } = { force: false }) => {
     if (force && isOpen) {
+      shouldFocus.current = true;
       doFocus();
+    } else if (autoFocus) {
+      shouldFocus.current = true;
     }
   };
 
@@ -185,10 +187,10 @@ export function useAsyncFocusControl(
     }
   };
 
-  const setFocus = (force?: boolean) => {
+  const setFocus = ({ force, autoFocus = true }: { force: boolean; autoFocus?: boolean } = { force: false }) => {
     if (force && isOpen) {
       doFocus();
-    } else {
+    } else if (autoFocus) {
       shouldFocus.current = true;
     }
   };

src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx

@@ -227,19 +227,19 @@ export const useAppLayout = (
   const navigationFocusControl = useAsyncFocusControl(navigationOpen, navigationTriggerHide);
   const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);
 
-  const onNavigationToggle = useStableCallback((open: boolean) => {
+  const onNavigationToggle = useStableCallback(({ isOpen, autoFocus }: { isOpen: boolean; autoFocus: boolean }) => {
     setNavigationAnimationDisabled(false);
-    navigationFocusControl.setFocus();
-    fireNonCancelableEvent(onNavigationChange, { open });
+    navigationFocusControl.setFocus({ force: false, autoFocus });
+    fireNonCancelableEvent(onNavigationChange, { open: isOpen });
   });
 
   useImperativeHandle(forwardRef, () => ({
-    closeNavigationIfNecessary: () => isMobile && onNavigationToggle(false),
+    closeNavigationIfNecessary: () => isMobile && onNavigationToggle({ isOpen: false, autoFocus: true }),
     openTools: () => onToolsToggle(true),
-    focusToolsClose: () => drawersFocusControl.setFocus(true),
-    focusActiveDrawer: () => drawersFocusControl.setFocus(true),
+    focusToolsClose: () => drawersFocusControl.setFocus({ force: true }),
+    focusActiveDrawer: () => drawersFocusControl.setFocus({ force: true }),
     focusSplitPanel: () => splitPanelFocusControl.setLastInteraction({ type: 'open' }),
-    focusNavigation: () => navigationFocusControl.setFocus(true),
+    focusNavigation: () => navigationFocusControl.setFocus({ force: true }),
   }));
 
   const resolvedStickyNotifications = !!stickyNotifications && !isMobile;
@@ -322,7 +322,7 @@ export const useAppLayout = (
     setToolbarHeight,
     setNotificationsHeight,
     onSplitPanelToggle: onSplitPanelToggleHandler,
-    onNavigationToggle,
+    onNavigationToggle: isOpen => onNavigationToggle({ isOpen, autoFocus: true }),
     onActiveDrawerChange: onActiveDrawerChangeHandler,
     onActiveDrawerResize,
     splitPanelAnimationDisabled,
@@ -377,7 +377,7 @@ export const useAppLayout = (
   useEffect(() => {
     // Close navigation drawer on mobile so that the main content is visible
     if (isMobile) {
-      onNavigationToggle(false);
+      onNavigationToggle({ isOpen: false, autoFocus: false });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMobile]);
@@ -414,7 +414,7 @@ export const useAppLayout = (
     const hasHorizontalScroll = scrollWidth > placement.inlineSize;
     if (hasHorizontalScroll) {
       if (!navigationHide && navigationOpen) {
-        onNavigationToggle(false);
+        onNavigationToggle({ isOpen: false, autoFocus: false });
         return;
       }
 

src/app-layout/visual-refresh/context.tsx

@@ -139,15 +139,17 @@ export const AppLayoutInternalsProvider = React.forwardRef(
 
     const { refs: navigationRefs, setFocus: focusNavButtons } = useFocusControl(navigationOpen);
 
-    const handleNavigationClick = useStableCallback(function handleNavigationChange(isOpen: boolean) {
-      focusNavButtons();
-      fireNonCancelableEvent(props.onNavigationChange, { open: isOpen });
-    });
+    const handleNavigationClick = useStableCallback(
+      ({ isOpen, autoFocus }: { isOpen: boolean; autoFocus: boolean }) => {
+        focusNavButtons({ force: false, autoFocus });
+        fireNonCancelableEvent(props.onNavigationChange, { open: isOpen });
+      }
+    );
 
     useEffect(() => {
       // Close navigation drawer on mobile so that the main content is visible
       if (isMobile) {
-        handleNavigationClick(false);
+        handleNavigationClick({ isOpen: false, autoFocus: false });
       }
     }, [isMobile, handleNavigationClick]);
 
@@ -168,7 +170,7 @@ export const AppLayoutInternalsProvider = React.forwardRef(
       function handleToolsChange(isOpen: boolean, skipFocusControl?: boolean) {
         setIsToolsOpen(isOpen);
         if (!skipFocusControl) {
-          focusToolsButtons();
+          focusToolsButtons({ force: false });
         }
         fireNonCancelableEvent(props.onToolsChange, { open: isOpen });
       },
@@ -476,23 +478,23 @@ export const AppLayoutInternalsProvider = React.forwardRef(
         return {
           closeNavigationIfNecessary: function () {
             if (isMobile) {
-              handleNavigationClick(false);
+              handleNavigationClick({ isOpen: false, autoFocus: true });
             }
           },
           openTools: function () {
             handleToolsClick(true, hasDrawers);
             if (hasDrawers) {
-              focusDrawersButtons(true);
+              focusDrawersButtons({ force: true });
             }
           },
           focusToolsClose: () => {
             if (hasDrawers) {
-              focusDrawersButtons(true);
+              focusDrawersButtons({ force: true });
             } else {
-              focusToolsButtons(true);
+              focusToolsButtons({ force: true });
             }
           },
-          focusActiveDrawer: () => focusDrawersButtons(true),
+          focusActiveDrawer: () => focusDrawersButtons({ force: true }),
           focusSplitPanel: () => splitPanelRefs.slider.current?.focus(),
         };
       },
@@ -528,7 +530,7 @@ export const AppLayoutInternalsProvider = React.forwardRef(
           footerHeight: placement.insetBlockEnd,
           hasDrawerViewportOverlay,
           handleDrawersClick,
-          handleNavigationClick,
+          handleNavigationClick: isOpen => handleNavigationClick({ isOpen, autoFocus: true }),
           handleSplitPanelClick,
           handleSplitPanelPreferencesChange,
           handleSplitPanelResize,

src/property-filter/__integ__/async-loading.test.ts

@@ -128,7 +128,7 @@ const testCases: TestCase[] = [
     ],
   ],
   [
-    'request for property specific suggestions from the search input',
+    'request for property specific suggestions from the search input React=16',
     false,
     'property',
     [
@@ -146,6 +146,22 @@ const testCases: TestCase[] = [
       },
     ],
   ],
+  [
+    'request for property specific suggestions from the search input React=18',
+    false,
+    'property',
+    [
+      { command: 'open-filtering-input', result: [] },
+      {
+        command: 'type-in-filtering-input',
+        param: 'label=',
+        result: [
+          { filteringText: 'l', firstPage: false, samePage: false },
+          { filteringProperty, filteringOperator: '=', filteringText: '', firstPage: true, samePage: false },
+        ],
+      },
+    ],
+  ],
   [
     'request for properties from the property selector in the edit popover',
     true,
@@ -187,8 +203,14 @@ const testCases: TestCase[] = [
   ],
 ];
 
-test.each<TestCase>(testCases)('%p', (_, asyncProperties, token, scenario) =>
+test.each<TestCase>(testCases)('%p', (scenarioName, asyncProperties, token, scenario) =>
   setupTest(asyncProperties, token, async page => {
+    if (scenarioName.includes('React=16') && (await page.getReactVersion()) !== '16') {
+      return;
+    }
+    if (scenarioName.includes('React=18') && (await page.getReactVersion()) !== '18') {
+      return;
+    }
     for (let i = 0; i < scenario.length; i++) {
       const { command, result, param = '' } = scenario[i];
       switch (command) {