TW-1162: Fix e2e tests. Fix <DropdownWrapper />

madfish-solutions · Nov 3, 2023 · c170ce7 · c170ce7
1 parent f53d625
commit c170ce7
Show file tree

Hide file tree

Showing 7 changed files with 255 additions and 223 deletions.
diff --git a/e2e/src/utils/search.utils.ts b/e2e/src/utils/search.utils.ts
@@ -35,7 +35,7 @@ export const findChildElement = async (
 };
 
 export const findElementBySelectors = async (selectors: string, timeout = MEDIUM_TIMEOUT, errorTitle?: string) => {
-  const element = await BrowserContext.page.waitForSelector(selectors, { visible: true, timeout }).catch(error => {
+  const element = await BrowserContext.page.waitForSelector(selectors, { timeout }).catch(error => {
     if (errorTitle && error instanceof Error) {
       error.message = `${errorTitle}\n` + error.message;
     }

diff --git a/package.json b/package.json
@@ -166,7 +166,7 @@
     "react-qr-svg": "2.2.2",
     "react-redux": "^8.0.2",
     "react-text-mask": "^5.5.0",
-    "react-transition-group": "4.4.2",
+    "react-transition-group": "4.4.5",
     "react-virtualized": "^9.22.3",
     "redux-observable": "^2.0.0",
     "redux-persist": "^6.0.0",

diff --git a/src/app/atoms/DropdownWrapper.tsx b/src/app/atoms/DropdownWrapper.tsx
@@ -1,9 +1,10 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, { FC, HTMLAttributes, useCallback, useRef, useState } from 'react';
 
 import classNames from 'clsx';
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 type DropdownWrapperProps = HTMLAttributes<HTMLDivElement> & {
+  isNetworks?: boolean;
   opened: boolean;
   design?: Design;
   hiddenOverflow?: boolean;
@@ -15,6 +16,8 @@ const DESIGN_CLASS_NAMES = {
   dark: 'bg-gray-910 border-gray-850'
 };
 
+const ANIMATION_DURATION = 100;
+
 type Design = keyof typeof DESIGN_CLASS_NAMES;
 
 const DropdownWrapper: FC<DropdownWrapperProps> = ({
@@ -24,34 +27,56 @@ const DropdownWrapper: FC<DropdownWrapperProps> = ({
   scaleAnimation = true,
   className,
   style = {},
+  isNetworks,
   ...rest
-}) => (
-  <CSSTransition
-    in={opened}
-    timeout={100}
-    classNames={{
-      enter: classNames('transform opacity-0', scaleAnimation && 'scale-95'),
-      enterActive: classNames(
-        'transform opacity-100',
-        scaleAnimation && 'scale-100',
-        'transition ease-out duration-100'
-      ),
-      exit: classNames('transform opacity-0', scaleAnimation && 'scale-95', 'transition ease-in duration-100')
-    }}
-    unmountOnExit
-  >
-    <div
-      className={classNames(
-        'mt-2 border rounded-md shadow-xl',
-        hiddenOverflow && 'overflow-hidden',
-        process.env.TARGET_BROWSER === 'firefox' && 'grayscale-firefox-fix',
-        DESIGN_CLASS_NAMES[design],
-        className
-      )}
-      style={style}
-      {...rest}
-    />
-  </CSSTransition>
-);
+}) => {
+  // Recommended: https://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
+
+  const [key, setKey] = useState(0);
+
+  const onExiting = useCallback(() => {
+    // Transition component does not propperly update, when Suspense is involved.
+    // E.g. happens when new node RPC is selected & chainId is being fetched (see: `useCustomChainId` hook).
+    // Status `exited` & `unmounted` never arrive in such case!
+    // See: https://github.com/reactjs/react-transition-group/issues/817#issuecomment-1122997210
+    // We will re-create it every time ourselves via different key.
+    setTimeout(() => setKey(key => (key % 2) + 1), 2 * ANIMATION_DURATION);
+  }, []);
+
+  return (
+    <CSSTransition
+      nodeRef={nodeRef}
+      key={key}
+      in={opened}
+      timeout={ANIMATION_DURATION}
+      classNames={{
+        enter: classNames('transform opacity-0', scaleAnimation && 'scale-95'),
+        enterActive: classNames(
+          'transform opacity-100',
+          scaleAnimation && 'scale-100',
+          'transition ease-out duration-100'
+        ),
+        exit: classNames('transform opacity-0', scaleAnimation && 'scale-95', 'transition ease-in duration-100')
+      }}
+      mountOnEnter
+      unmountOnExit
+      onExiting={onExiting}
+    >
+      <div
+        ref={nodeRef}
+        className={classNames(
+          'mt-2 border rounded-md shadow-xl',
+          hiddenOverflow && 'overflow-hidden',
+          process.env.TARGET_BROWSER === 'firefox' && 'grayscale-firefox-fix',
+          DESIGN_CLASS_NAMES[design],
+          className
+        )}
+        style={style}
+        {...rest}
+      />
+    </CSSTransition>
+  );
+};
 
 export default DropdownWrapper;
diff --git a/src/app/layouts/PageLayout/Header/NetworkSelect/index.tsx b/src/app/layouts/PageLayout/Header/NetworkSelect/index.tsx
@@ -71,7 +71,7 @@ const NetworkSelect: FC<NetworkSelectProps> = () => {
       placement="bottom-end"
       strategy="fixed"
       popup={({ opened, setOpened }) => (
-        <DropdownWrapper opened={opened} design="dark" className="origin-top-right p-2">
+        <DropdownWrapper isNetworks={true} opened={opened} design="dark" className="origin-top-right p-2">
           <div className={styles.scroll}>
             <h2
               className={classNames(