test(extension): add tests for shared wallet feature [LW-12755] (#1860)

* test(extension): add LW-11818 and LW-11819

* test(extension): disable LW-11822 on Firefox

* test(extension): update selectors after upgrading UI-toolkit

* test(extension): update UI toolkit dependencies and selectors

Author: wklos-iohk

packages/core/package.json

@@ -46,7 +46,7 @@
     "@cardano-sdk/crypto": "0.2.3",
     "@cardano-sdk/wallet": "0.52.6",
     "@cardano-sdk/web-extension": "0.39.6",
-    "@input-output-hk/lace-ui-toolkit": "3.5.0",
+    "@input-output-hk/lace-ui-toolkit": "3.8.0",
     "@lace/cardano": "0.1.0",
     "@lace/common": "0.1.0",
     "@lace/translation": "0.1.0",

packages/core/src/shared-wallets/add-shared-wallet/SharedWalletLayout/SharedWalletLayout.tsx

@@ -91,7 +91,7 @@ export const SharedWalletLayout = <Key extends string>(props: SharedWalletLayout
     <Flex h="$fill" w="$fill" className={styles.root}>
       <Timeline className={styles.timeline}>
         {parseTimelineSteps(timelineSteps, timelineCurrentStep).map(({ current, marked, name }) => (
-          <Timeline.Item key={name} active={marked}>
+          <Timeline.Item key={name} active={marked} data-testid={`${marked ? 'active' : 'inactive'}-onboarding-step`}>
             <Box className={cn({ [`${styles.activeText}`]: current })}>{name}</Box>
           </Timeline.Item>
         ))}

packages/core/src/shared-wallets/add-shared-wallet/creation-flow/AddCoSigners/AddCoSignerInput.tsx

@@ -73,6 +73,7 @@ export const AddCoSignerInput = ({
           errorMessage={(dirty?.name && errorMessage.name) || undefined}
           onChange={makeChangeHandler('name')}
           w="$fill"
+          data-testid="identifier"
         />
       </Box>
       <Box>
@@ -83,6 +84,7 @@ export const AddCoSignerInput = ({
           onChange={makeChangeHandler('sharedWalletKey')}
           w="$fill"
           disabled={keyFieldDisabled}
+          data-testid="shared-wallet-key"
         />
       </Box>
     </>

packages/core/src/shared-wallets/add-shared-wallet/creation-flow/ImportantInfoDialog/ImportantInfoDialog.tsx

@@ -21,27 +21,33 @@ export const ImportantInfoDialog = ({ onBack, onNext, open, zIndex }: Props): JS
       </Dialog.Title>
       <Dialog.Description>
         <>
-          <Text.Body.Normal weight="$medium">
+          <Text.Body.Normal weight="$medium" data-testid="dialog-subtitle">
             {t('sharedWallets.addSharedWallet.importantInfo.subtitle')}
           </Text.Body.Normal>
           <Flex>
             <Box mt="$4">
-              <Checkbox checked={checked} onClick={() => setChecked(!checked)} />
+              <Checkbox checked={checked} onClick={() => setChecked(!checked)} data-testid="dialog-checkbox" />
             </Box>
             <Box ml="$10" onClick={() => setChecked(!checked)} className={styles.checkBoxLabel}>
-              <Text.Body.Small weight="$semibold">
+              <Text.Body.Small weight="$semibold" data-testid="dialog-checkbox-label">
                 {t('sharedWallets.addSharedWallet.importantInfo.checkBoxLabel')}
               </Text.Body.Small>
             </Box>
           </Flex>
         </>
       </Dialog.Description>
       <Dialog.Actions>
-        <Dialog.Action cancel label={t('sharedWallets.addSharedWallet.importantInfo.button.back')} onClick={onBack} />
+        <Dialog.Action
+          cancel
+          label={t('sharedWallets.addSharedWallet.importantInfo.button.back')}
+          onClick={onBack}
+          testId="dialog-back-button"
+        />
         <Dialog.Action
           disabled={!checked}
           label={t('sharedWallets.addSharedWallet.importantInfo.button.next')}
           onClick={onNext}
+          testId="dialog-next-button"
         />
       </Dialog.Actions>
     </Dialog.Root>

packages/core/src/shared-wallets/add-shared-wallet/creation-flow/Quorum/QuorumOption.component.tsx

@@ -137,12 +137,15 @@ export const QuorumOption = ({
                         onChange={onNumberOfCosignerChange}
                         showArrow
                         zIndex={1001}
+                        triggerTestId="number-of-cosigners-dropdown-trigger"
                       >
                         {cosignersNumberPickerOptions.map((num) => (
-                          <Select.Item key={num} value={num} title={num} />
+                          <Select.Item key={num} value={num} title={num} testId={num} />
                         ))}
                       </Select.Root>
-                      <Text.Body.Small>{translations.cosignersAmountPickerText}</Text.Body.Small>
+                      <Text.Body.Small data-testid="total-signatures-label">
+                        {translations.cosignersAmountPickerText}
+                      </Text.Body.Small>
                     </Flex>
                   </Flex>
                 </Card.Outlined>

packages/core/src/shared-wallets/add-shared-wallet/creation-flow/SetupSharedWallet/SetupSharedWallet.tsx

@@ -85,10 +85,16 @@ export const SetupSharedWallet = ({
         errorMessage={walletNameErrorMessage}
       />
       <Box mt="$12" mb="$20">
-        <Text.Body.Normal weight="$semibold">{translations.body}</Text.Body.Normal>
+        <Text.Body.Normal weight="$semibold" data-testid="active-lace-wallet-notice">
+          {translations.body}
+        </Text.Body.Normal>
       </Box>
       <FlowCard.Card flowCardClassName={styles.walletCard ?? ''}>
-        <FlowCard.Profile icon={<ProfileDropdown.WalletIcon type={walletKind} />} name={activeWalletName} />
+        <FlowCard.Profile
+          icon={<ProfileDropdown.WalletIcon type={walletKind} testId="active-lace-wallet-icon" />}
+          name={activeWalletName}
+          testId="active-lace-wallet"
+        />
         <FlowCard.Details
           subtitle={addEllipsis(activeWalletAddress, ADDRESS_FIRST_PART_LENGTH, ADDRESS_LAST_PART_LENGTH)}
         />

packages/core/src/shared-wallets/add-shared-wallet/creation-flow/ShareWalletDetails/ShareWalletDetails.tsx

@@ -41,14 +41,15 @@ export const ShareWalletDetails = ({
       isNextEnabled
     >
       <Box mt="$12">
-        <Text.Body.Normal>{translations.body}</Text.Body.Normal>
+        <Text.Body.Normal data-testid="download-notice">{translations.body}</Text.Body.Normal>
       </Box>
       <Divider my="$20" />
       <ActionCard
         title={[{ text: translations.label, weight: '$semibold' }]}
         description={FILENAME}
         rootClassName={styles.root}
         iconClassName={styles.icon}
+        testId="shared-wallet-setup-file"
         icon={
           <Button
             block
@@ -59,7 +60,7 @@ export const ShareWalletDetails = ({
             color="gradient"
             data-testid="download-json-btn"
           >
-            <DownloadFileIcon />
+            <DownloadFileIcon data-testid="download-icon" />
             <Text.Body.Normal weight="$semibold">{translations.cta}</Text.Body.Normal>
           </Button>
         }

packages/core/src/shared-wallets/add-shared-wallet/generate-key-flow/CopyKey/CopyKey.tsx

@@ -37,21 +37,25 @@ export const CopyKey: VFC<CopyKeysProps> = ({ onClose, onCopyKey, sharedWalletKe
           label={t('sharedWallets.addSharedWallet.keyGeneration.copyKeys.backButtonLabel')}
           icon={<CopyIcon />}
           onClick={copyKeys}
+          data-testid="copy-key-to-clipboard-button"
         />
       }
       customNextButton={
         <Button.Secondary
           onClick={onClose}
           label={t('sharedWallets.addSharedWallet.keyGeneration.copyKeys.nextButtonLabel')}
+          data-testid="close-button"
         />
       }
     >
       <Card.Greyed>
         <Flex p="$16" gap="$4" flexDirection="column">
-          <Text.Body.Large weight="$bold">
+          <Text.Body.Large weight="$bold" data-testid="shared-wallet-keys-label">
             {t('sharedWallets.addSharedWallet.keyGeneration.copyKeys.keyBoxTitle')}
           </Text.Body.Large>
-          <Text.Body.Small className={styles.keyBox}>{sharedWalletKey}</Text.Body.Small>
+          <Text.Body.Small className={styles.keyBox} data-testid="shared-wallet-keys-value">
+            {sharedWalletKey}
+          </Text.Body.Small>
         </Flex>
       </Card.Greyed>
     </SharedWalletLayout>

packages/core/src/shared-wallets/add-shared-wallet/generate-key-flow/EnterPassword/EnterPassword.tsx

@@ -38,8 +38,8 @@ const errorsMap: Record<PasswordErrorType, CoreTranslationKey | SharedWalletsTra
 };
 
 const mapOfWalletTypeIconProperties: Record<WalletKind, ReactElement> = {
-  cold: <ColdWalletIcon />,
-  hot: <HotWalletIcon />,
+  cold: <ColdWalletIcon data-testid="cold-wallet-icon" />,
+  hot: <HotWalletIcon data-testid="hot-wallet-icon" />,
 };
 
 type EnterPasswordProps = {
@@ -109,10 +109,12 @@ export const EnterPassword: VFC<EnterPasswordProps> = ({
             {icon}
           </Flex>
           <Flex flexDirection="column">
-            <Text.Address color="secondary">
+            <Text.Address color="secondary" data-testid="wallet-type">
               {t('sharedWallets.addSharedWallet.keyGeneration.enterPassword.activeWalletLabel')}
             </Text.Address>
-            <Text.Body.Large weight="$bold">{walletName}</Text.Body.Large>
+            <Text.Body.Large weight="$bold" data-testid="wallet-name">
+              {walletName}
+            </Text.Body.Large>
           </Flex>
         </Flex>
         {!isHW && (

packages/core/src/shared-wallets/add-shared-wallet/restore-flow/SharedWalletRestorationFlow.tsx

@@ -115,6 +115,7 @@ export const SharedWalletRestorationFlow: VFC<SharedWalletRestorationProps> = ({
           files={file ? [file.name] : undefined}
           onRemove={() => setFile(undefined)}
           key={file ? file.name : ''}
+          data-testid="file-upload"
         />
       </SharedWalletLayout>
       <Dialog.Root open={error?.message === FileErrorMessage.UNRECOGNIZED} zIndex={1000} setOpen={() => void 0}>