Merge pull request #1102 from gnosis/AddingTestId

(e2e Tests) Add necessary attributes for Send Funds workflow

src/components/AddressInfo/index.tsx

@@ -64,7 +64,7 @@ const AddressInfo = ({ ethBalance, safeAddress, safeName }: Props) => {
         {ethBalance && (
           <StyledBlock>
             <Paragraph noMargin>
-              Balance: <Bold>{`${ethBalance} ETH`}</Bold>
+              Balance: <Bold data-testid="current-eth-balance">{`${ethBalance} ETH`}</Bold>
             </Paragraph>
           </StyledBlock>
         )}

src/components/Header/components/ProviderInfo/ProviderAccessible.tsx

@@ -72,7 +72,7 @@ const ProviderInfo = ({ classes, connected, network, provider, userAddress }) =>
         >
           {providerText}
         </Paragraph>
-        <Paragraph className={classes.address} color={color} noMargin size="xs">
+        <Paragraph className={classes.address} color={color} noMargin size="xs" data-testid="cut-address">
           {cutAddress}
         </Paragraph>
       </Col>

src/routes/opening/components/Footer.tsx

@@ -23,6 +23,7 @@ export const GenericFooter = ({ safeCreationTxHash }: { safeCreationTxHash: stri
         href={getEtherScanLink('tx', safeCreationTxHash)}
         rel="noopener noreferrer"
         target="_blank"
+        data-testid="safe-create-etherscan-link"
       >
         Etherscan.io
       </EtherScanLink>

src/routes/safe/components/Balances/Coins/index.tsx

@@ -72,7 +72,7 @@ const Coins = (props) => {
                     break
                   }
                   case BALANCE_TABLE_BALANCE_ID: {
-                    cellItem = <div>{row[id]}</div>
+                    cellItem = <div data-testid={`balance-${row[BALANCE_TABLE_ASSET_ID].symbol}`}>{row[id]}</div>
                     break
                   }
                   case BALANCE_TABLE_VALUE_ID: {

src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx

@@ -110,6 +110,7 @@ const ChooseTxType = ({ onClose, recipientAddress, setActiveScreen }) => {
             minWidth={260}
             onClick={() => setActiveScreen('sendFunds')}
             variant="contained"
+            testId="modal-send-funds-btn"
           >
             <Img alt="Send funds" className={classNames(classes.leftIcon, classes.iconSmall)} src={Token} />
             Send funds
@@ -122,6 +123,7 @@ const ChooseTxType = ({ onClose, recipientAddress, setActiveScreen }) => {
               minWidth={260}
               onClick={() => setActiveScreen('sendCollectible')}
               variant="contained"
+              testId="modal-send-collectible-btn"
             >
               <Img
                 alt="Send collectible"
@@ -138,6 +140,7 @@ const ChooseTxType = ({ onClose, recipientAddress, setActiveScreen }) => {
             minWidth={260}
             onClick={() => setActiveScreen('contractInteraction')}
             variant="outlined"
+            testId="modal-contract-interaction-btn"
           >
             <Img
               alt="Contract Interaction"

src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx

@@ -105,7 +105,7 @@ const ReviewTx = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }) => {
 
   return (
     <>
-      <Row align="center" className={classes.heading} grow>
+      <Row align="center" className={classes.heading} grow data-testid="send-funds-review-step">
         <Paragraph className={classes.headingText} noMargin weight="bolder">
           Send Funds
         </Paragraph>
@@ -136,7 +136,12 @@ const ReviewTx = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }) => {
           </Col>
           <Col layout="column" xs={11}>
             <Block justify="left">
-              <Paragraph className={classes.address} noMargin weight="bolder">
+              <Paragraph
+                className={classes.address}
+                noMargin
+                weight="bolder"
+                data-testid="recipient-address-review-step"
+              >
                 {tx.recipientAddress}
               </Paragraph>
               <CopyBtn content={tx.recipientAddress} />
@@ -151,12 +156,12 @@ const ReviewTx = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }) => {
         </Row>
         <Row align="center" margin="md">
           <Img alt={txToken.name} height={28} onError={setImageToPlaceholder} src={txToken.logoUri} />
-          <Paragraph className={classes.amount} noMargin size="md">
+          <Paragraph className={classes.amount} noMargin size="md" data-testid={`amount-${txToken.symbol}-review-step`}>
             {tx.amount} {txToken.symbol}
           </Paragraph>
         </Row>
         <Row>
-          <Paragraph>
+          <Paragraph data-testid="fee-meg-review-step">
             {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ETH in this wallet to fund this confirmation.`}
           </Paragraph>
         </Row>

src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/index.tsx

@@ -57,7 +57,11 @@ const TokenSelectField = ({ classes, initialValue, isValid, tokens }) => (
         <ListItemIcon>
           <Img alt={token.name} height={28} onError={setImageToPlaceholder} src={token.logoUri} />
         </ListItemIcon>
-        <ListItemText primary={token.name} secondary={`${formatAmount(token.balance)} ${token.symbol}`} />
+        <ListItemText
+          primary={token.name}
+          secondary={`${formatAmount(token.balance)} ${token.symbol}`}
+          data-testid={`select-token-${token.name}`}
+        />
       </MenuItem>
     ))}
   </Field>

src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx

@@ -84,7 +84,7 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
 
   return (
     <>
-      <Row align="center" className={classes.heading} grow>
+      <Row align="center" className={classes.heading} grow data-testid="modal-title-send-funds">
         <Paragraph className={classes.manage} noMargin weight="bolder">
           Send Funds
         </Paragraph>
@@ -221,7 +221,11 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
                     <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
                       Amount
                     </Paragraph>
-                    <ButtonLink onClick={() => mutators.setMax(selectedTokenRecord.balance)} weight="bold">
+                    <ButtonLink
+                      onClick={() => mutators.setMax(selectedTokenRecord.balance)}
+                      weight="bold"
+                      testId="send-max-btn"
+                    >
                       Send max
                     </ButtonLink>
                   </Col>
@@ -239,6 +243,7 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
                       placeholder="Amount*"
                       text="Amount*"
                       type="text"
+                      testId="amount-input"
                       validate={composeValidators(
                         required,
                         mustBeFloat,

src/routes/safe/components/Balances/dataFetcher.ts

@@ -40,6 +40,7 @@ export const getBalanceData = (activeTokens, currencySelected, currencyValues, c
       name: token.name,
       logoUri: token.logoUri,
       address: token.address,
+      symbol: token.symbol,
     },
     [buildOrderFieldFrom(BALANCE_TABLE_ASSET_ID)]: token.name,
     [BALANCE_TABLE_BALANCE_ID]: `${formatAmount(token.balance)} ${token.symbol}`,

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx

@@ -147,6 +147,7 @@ const ApproveTxModal = ({
                 <FormControlLabel
                   control={<Checkbox checked={approveAndExecute} color="primary" onChange={handleExecuteCheckbox} />}
                   label="Execute transaction"
+                  data-testid="execute-checkbox"
                 />
               )}
             </>

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx

@@ -144,9 +144,16 @@ const OwnersColumn = ({
 
   return (
     <Col className={classes.rightCol} layout="block" xs={6}>
-      <Block className={cn(classes.ownerListTitle, (thresholdReached || tx.isExecuted) && classes.ownerListTitleDone)}>
+      <Block
+        className={cn(classes.ownerListTitle, (thresholdReached || tx.isExecuted) && classes.ownerListTitleDone)}
+        data-testid={`confirmed-${tx.confirmations.size}-out-of-${txThreshold}`}
+      >
         <div className={classes.circleState}>
-          <Img alt="" src={thresholdReached || tx.isExecuted ? CheckLargeFilledGreenCircle : ConfirmLargeGreenCircle} />
+          <Img
+            alt=""
+            src={thresholdReached || tx.isExecuted ? CheckLargeFilledGreenCircle : ConfirmLargeGreenCircle}
+            data-testid={thresholdReached || tx.isExecuted ? 'confirmed-tx-check' : 'not-confirmed-tx-check'}
+          />
         </div>
         {tx.isExecuted
           ? `Confirmed [${tx.confirmations.size}/${tx.confirmations.size}]`
@@ -169,6 +176,7 @@ const OwnersColumn = ({
           classes.ownerListTitle,
           (cancelThresholdReached || cancelTx.isExecuted) && classes.ownerListTitleCancelDone,
         )}
+        data-testid={`rejected-${cancelTx.confirmations.size}-out-of-${cancelThreshold}`}
       >
         <div
           className={cn(classes.verticalLine, tx.isExecuted ? classes.verticalLineDone : classes.verticalLinePending)}

src/routes/safe/components/Transactions/TxsTable/Status/index.tsx

@@ -42,7 +42,7 @@ const Status = ({ classes, status }) => {
   return (
     <Block className={`${classes.container} ${classes[status]}`}>
       {typeof Icon === 'object' ? Icon : <Img alt={statusToLabel[status]} src={Icon} style={statusIconStyle} />}
-      <Paragraph className={classes.statusText} noMargin>
+      <Paragraph className={classes.statusText} noMargin data-testid={`tx-status-${statusToLabel[status]}`}>
         {statusToLabel[status]}
       </Paragraph>
     </Block>