feat: [LW-11556] add tests for advanced mode receive screen (#1444)

* feat: [LW-11556] add tests for advanced mode receive screen * feat: [LW-11556] fixes after review * feat: [LW-11556] fixes after review
input-output-hk · Sep 25, 2024 · 62bfcee · 62bfcee
1 parent d64c6b5
commit 62bfcee
Show file tree

Hide file tree

Showing 17 changed files with 574 additions and 54 deletions.
diff --git a/apps/browser-extension-wallet/package.json b/apps/browser-extension-wallet/package.json
@@ -50,7 +50,7 @@
     "@cardano-sdk/wallet": "0.44.3",
     "@cardano-sdk/web-extension": "0.34.2",
     "@emurgo/cip14-js": "~3.0.1",
-    "@input-output-hk/lace-ui-toolkit": "1.19.0",
+    "@input-output-hk/lace-ui-toolkit": "1.21.0",
     "@lace/cardano": "0.1.0",
     "@lace/common": "0.1.0",
     "@lace/core": "0.1.0",

diff --git a/...ension-wallet/src/views/browser-view/components/QRInfoWalletDrawer/QRInfoWalletDrawer.tsx b/...ension-wallet/src/views/browser-view/components/QRInfoWalletDrawer/QRInfoWalletDrawer.tsx
@@ -278,7 +278,9 @@ export const QRInfoWalletDrawer = (): React.ReactElement => {
               />
             )}
             {isAdditionalAddressesVisible && (
-              <Divider orientation="center">{translations.additionalAddressesTitle}</Divider>
+              <Divider orientation="center" data-testid="additional-addresses-divider">
+                {translations.additionalAddressesTitle}
+              </Divider>
             )}
             {usedAddresses?.length > 1 && (
               <>
@@ -338,6 +340,7 @@ export const QRInfoWalletDrawer = (): React.ReactElement => {
             icon={<PlusCircleOutlined />}
             onClick={generateUnusedAddress}
             label={translations.addNewAddressBtn}
+            data-testid="add-new-address-button"
           />
         </Flex>
       )}

diff --git a/...ension-wallet/src/views/browser-view/components/TransactionCTAsBox/TransactionCTAsBox.tsx b/...ension-wallet/src/views/browser-view/components/TransactionCTAsBox/TransactionCTAsBox.tsx
@@ -58,6 +58,7 @@ export const TransactionCTAsBox = (): React.ReactElement => {
               defaultChecked={isReceiveInAdvancedMode}
               label={t('qrInfo.advancedMode.toggle.label')}
               onCheckedChange={(isChecked) => setIsReceiveInAdvancedMode(isChecked)}
+              testId="advanced-mode-"
             />
           )}
         </Flex>

diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "trim-off-newlines": "^1.0.3"
   },
   "dependencies": {
-    "@input-output-hk/lace-ui-toolkit": "1.19.0",
+    "@input-output-hk/lace-ui-toolkit": "1.21.0",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {

diff --git a/packages/core/src/ui/components/AddressCard/AddressCard.tsx b/packages/core/src/ui/components/AddressCard/AddressCard.tsx
@@ -102,7 +102,7 @@ export const AddressCard = ({
 
     const { handles } = metadata;
 
-    const adaHandleIcon = <AdaHandleIcon width={ICON_SIZE} height={ICON_SIZE} />;
+    const adaHandleIcon = <AdaHandleIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-ada-handle-icon" />;
 
     if (handles.length === 1) {
       return (
@@ -112,14 +112,15 @@ export const AddressCard = ({
           action="copy"
           tooltipLabel={t('core.addressCard.handle.copy.tooltip')}
           onCopy={doToast}
+          testId="address-ada-handle"
         />
       );
     }
 
     const items: MenuProps['items'] = handles.map((item, idx) => ({
       label: (
         <Flex gap="$8" alignItems="center" justifyContent="space-between">
-          <span>{item}</span>
+          <span data-testid="adress-ada-handle-dropdown-item">{item}</span>
           <Tooltip title={t('core.addressCard.handle.copy.tooltip')}>
             <CopyToClipboard text={item}>
               <CopyIcon
@@ -137,7 +138,7 @@ export const AddressCard = ({
       icon: adaHandleIcon
     }));
 
-    return <AddressDisplayItem label={items.length} icon={adaHandleIcon} items={items} />;
+    return <AddressDisplayItem label={items.length} icon={adaHandleIcon} items={items} testId="address-ada-handle" />;
   }, [metadata, doToast, t]);
 
   const renderBalanceData = useMemo(() => {
@@ -146,7 +147,11 @@ export const AddressCard = ({
     }
 
     return (
-      <AddressDisplayItem label={metadata.balance} icon={<AdaSymbolIcon width={ICON_SIZE} height={ICON_SIZE} />} />
+      <AddressDisplayItem
+        label={metadata.balance}
+        icon={<AdaSymbolIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-ada-icon" />}
+        testId="address-ada"
+      />
     );
   }, [metadata]);
 
@@ -155,12 +160,12 @@ export const AddressCard = ({
       {
         label: `${metadata.tokens.amount} ${t('core.addressCard.tokens.label')}`,
         key: 'tokens',
-        icon: <TokensIcon width={ICON_SIZE} height={ICON_SIZE} />
+        icon: <TokensIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-tokens-icon" />
       },
       {
         label: `${metadata.tokens.nfts || 0} ${t('core.addressCard.nfts.label')}`,
         key: 'nfts',
-        icon: <NftsIcon width={ICON_SIZE} height={ICON_SIZE} />
+        icon: <NftsIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-nfts-icon" />
       }
     ],
     [metadata, t]
@@ -174,8 +179,10 @@ export const AddressCard = ({
     const items: MenuProps['items'] = getTokenMenuItems();
 
     const customDropdownRender = (menu: React.ReactElement) => (
-      <Box className={styles.customRender}>
-        <Box py="$4">{t('core.addressCard.nativeTokens.label')}</Box>
+      <Box className={styles.customRender} testId="address-tokens-dropdown">
+        <Box py="$4" testId="address-tokens-dropdown-label">
+          {t('core.addressCard.nativeTokens.label')}
+        </Box>
         <Divider h="$1" className={styles.divider} />
         {React.cloneElement(menu)}
       </Box>
@@ -185,8 +192,9 @@ export const AddressCard = ({
       <AddressDisplayItem
         label={items.length}
         items={items}
-        icon={<AssetsIcon width={ICON_SIZE} height={ICON_SIZE} />}
+        icon={<AssetsIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-tokens-icon" />}
         dropdownRender={customDropdownRender}
+        testId="address-tokens"
       />
     );
   }, [metadata, isMetadataGrouped, getTokenMenuItems, t]);
@@ -207,7 +215,7 @@ export const AddressCard = ({
           return {
             label: metadata.stakePool,
             key: 'stake-pool',
-            icon: <StakePoolIcon width={ICON_SIZE} height={ICON_SIZE} />
+            icon: <StakePoolIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-stake-pool-icon" />
           };
         }
       });
@@ -216,7 +224,10 @@ export const AddressCard = ({
       <AddressDisplayItem
         label={t('core.addressCard.more.label')}
         items={items}
-        icon={<MoreIcon className={styles.moreIcon} width={ICON_SIZE} height={ICON_SIZE} />}
+        icon={
+          <MoreIcon className={styles.moreIcon} width={ICON_SIZE} height={ICON_SIZE} data-testid="address-more-icon" />
+        }
+        testId="address-more"
       />
     );
   }, [metadata, getTokenMenuItems, t]);
@@ -226,14 +237,14 @@ export const AddressCard = ({
       <div className={styles.qrCodeContainer} data-testid="address-card-qr-code-container">
         <QRCode data={address} options={useMemo(() => getQRCodeOptions?.(), [getQRCodeOptions])} />
       </div>
-      <Flex className={styles.infoContainer} flexDirection="column" gap="$8">
+      <Flex className={styles.infoContainer} flexDirection="column" gap="$8" testId="address-card-details">
         <Flex justifyContent="space-between" alignItems="center" w="$fill">
           {!name && tagWith && (
-            <Flex alignItems="center" className={styles.tag}>
+            <Flex alignItems="center" className={styles.tag} testId="address-card-title">
               {tagWith.label}
               {tagWith.tooltip && (
                 <Tooltip title={tagWith.tooltip}>
-                  <InfoCircleOutlined />
+                  <InfoCircleOutlined data-testid="address-card-title-info-icon" />
                 </Tooltip>
               )}
             </Flex>
@@ -258,11 +269,12 @@ export const AddressCard = ({
         <p className={styles.address} data-testid="address-card-address">
           {isPopupView ? addEllipsis(address, ADDRESS_HEAD_ELLIPSIS_LENGTH, ADDRESS_TAIL_ELLIPSIS_LENGTH) : address}
         </p>
-        <Flex style={{ flexWrap: 'wrap' }}>
+        <Flex style={{ flexWrap: 'wrap' }} testId="address-card-assets">
           {isUnused && (
             <AddressDisplayItem
               label={t('core.addressCard.unused.label')}
-              icon={<CheckIcon width={ICON_SIZE} height={ICON_SIZE} />}
+              icon={<CheckIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-card-unused-address-icon" />}
+              testId="address-card-unused-address"
             />
           )}
           {metadata?.handles?.length > 0 && renderHandleData}
@@ -272,6 +284,7 @@ export const AddressCard = ({
             <AddressDisplayItem
               label={metadata.stakePool}
               icon={<StakePoolIcon width={ICON_SIZE} height={ICON_SIZE} />}
+              testId="address-stake-pool"
             />
           )}
           {isMetadataGrouped && renderAdditionalData}

diff --git a/packages/core/src/ui/components/AddressCard/AddressDisplayItem.tsx b/packages/core/src/ui/components/AddressCard/AddressDisplayItem.tsx
@@ -18,6 +18,7 @@ type Props = {
   tooltipLabel?: string;
   dropdownRender?: (menus: ReactNode) => ReactNode;
   onCopy?: () => void;
+  testId: string;
 };
 
 export const AddressDisplayItem = ({
@@ -27,26 +28,31 @@ export const AddressDisplayItem = ({
   items,
   tooltipLabel,
   dropdownRender,
-  onCopy
+  onCopy,
+  testId
 }: Props): JSX.Element => {
   const displayAsMenu = !!items;
 
   const actionToIcon = useMemo(() => {
     if (displayAsMenu) {
-      return <ChevronDownComponent />;
+      return <ChevronDownComponent data-testid={`${testId}-chevron`} />;
     }
 
     if (action === 'copy') {
-      return <CopyToClipboard text={`${label}`}>{actionIconMap[action]}</CopyToClipboard>;
+      return (
+        <CopyToClipboard text={`${label}`} data-testid={`${testId}-copy-button`}>
+          {actionIconMap[action]}
+        </CopyToClipboard>
+      );
     }
 
     return actionIconMap[action];
-  }, [action, displayAsMenu, label]);
+  }, [action, displayAsMenu, label, testId]);
 
   const content = (
-    <Flex justifyContent="space-between" alignItems="center" gap="$8" className={styles.item}>
+    <Flex justifyContent="space-between" alignItems="center" gap="$8" className={styles.item} testId={testId}>
       {icon}
-      {label}
+      <span data-testid={`${testId}-label`}>{label}</span>
       {tooltipLabel && !displayAsMenu ? (
         <Tooltip title={tooltipLabel}>
           <Box w="$20" h="$20" onClick={action === 'copy' && onCopy}>