From b02924f5ef0f32707b35c924ef3fe87f563ee111 Mon Sep 17 00:00:00 2001
From: francovenica <francovenica@gmail.com>
Date: Fri, 19 Jun 2020 19:06:53 -0300
Subject: [PATCH 1/2] Adding test (feature) (#1030)

* data-testid for load and create safe

* fix connect button id

* removed buttons data-testid property
---
 src/components/CookiesBanner/index.tsx        |  1 +
 src/components/Header/components/Layout.tsx   |  2 +-
 .../ProviderDetails/ConnectDetails.tsx        |  2 +-
 .../ProviderDetails/UserDetails.tsx           |  9 +++++-
 .../ProviderInfo/ProviderAccessible.tsx       |  9 +++++-
 .../ProviderInfo/ProviderDisconnected.tsx     |  9 +++++-
 .../components/SafeListHeader/index.tsx       |  2 +-
 .../ScanQRModal/ScanQRWrapper/index.tsx       |  1 +
 .../load/components/DetailsForm/index.tsx     |  4 ++-
 .../load/components/OwnerList/index.tsx       |  5 ++--
 .../components/ReviewInformation/index.tsx    | 13 +++++++--
 src/routes/open/components/Layout.tsx         |  4 ++-
 .../components/ReviewInformation/index.tsx    | 28 +++++++++++++++----
 .../open/components/SafeNameForm/index.tsx    |  1 +
 .../SafeOwnersConfirmationsForm/index.tsx     | 18 ++++++++----
 src/routes/opening/components/Footer.tsx      |  8 +++++-
 src/routes/opening/index.tsx                  |  6 ++--
 .../safe/components/Layout/Header/index.tsx   |  9 +++++-
 .../safe/components/Layout/Tabs/index.tsx     |  3 +-
 src/routes/safe/components/Layout/index.tsx   |  1 +
 src/routes/welcome/components/Layout.tsx      |  4 ++-
 21 files changed, 110 insertions(+), 29 deletions(-)

diff --git a/src/components/CookiesBanner/index.tsx b/src/components/CookiesBanner/index.tsx
index e3dea138..054e9727 100644
--- a/src/components/CookiesBanner/index.tsx
+++ b/src/components/CookiesBanner/index.tsx
@@ -144,6 +144,7 @@ const CookiesBanner = () => {
         onKeyDown={closeCookiesBannerHandler}
         role="button"
         tabIndex={0}
+        data-testid="accept-preferences"
       >
         Accept preferences &gt;
       </span>
diff --git a/src/components/Header/components/Layout.tsx b/src/components/Header/components/Layout.tsx
index 6354ff0c..ad934501 100644
--- a/src/components/Header/components/Layout.tsx
+++ b/src/components/Header/components/Layout.tsx
@@ -61,7 +61,7 @@ const Layout = openHoc(({ classes, clickAway, open, providerDetails, providerInf
   <Row className={classes.summary}>
     <Col className={classes.logo} middle="xs" start="xs">
       <Link to="/">
-        <Img alt="Gnosis Team Safe" height={32} src={logo} />
+        <Img alt="Gnosis Team Safe" height={32} src={logo} testId="heading-gnosis-logo" />
       </Link>
     </Col>
     <Divider />
diff --git a/src/components/Header/components/ProviderDetails/ConnectDetails.tsx b/src/components/Header/components/ProviderDetails/ConnectDetails.tsx
index 9d2d47f8..845aaeaa 100644
--- a/src/components/Header/components/ProviderDetails/ConnectDetails.tsx
+++ b/src/components/Header/components/ProviderDetails/ConnectDetails.tsx
@@ -45,7 +45,7 @@ const ConnectDetails = ({ classes }) => (
       <CircleDot center circleSize={75} dotRight={25} dotSize={25} dotTop={50} keySize={32} mode="error" />
     </Row>
     <Block className={classes.connect}>
-      <ConnectButton />
+      <ConnectButton data-testid="heading-connect-btn" />
     </Block>
   </>
 )
diff --git a/src/components/Header/components/ProviderDetails/UserDetails.tsx b/src/components/Header/components/ProviderDetails/UserDetails.tsx
index cea78155..73fbdf7c 100644
--- a/src/components/Header/components/ProviderDetails/UserDetails.tsx
+++ b/src/components/Header/components/ProviderDetails/UserDetails.tsx
@@ -163,7 +163,14 @@ const UserDetails = ({ classes, connected, network, onDisconnect, openDashboard,
         </Row>
       )}
       <Row className={classes.disconnect}>
-        <Button color="primary" fullWidth onClick={onDisconnect} size="medium" variant="contained">
+        <Button
+          color="primary"
+          fullWidth
+          onClick={onDisconnect}
+          size="medium"
+          variant="contained"
+          data-testid="disconnect-btn"
+        >
           <Paragraph className={classes.disconnectText} color="white" noMargin size="md">
             Disconnect
           </Paragraph>
diff --git a/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx b/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
index c259336b..fa1ce9c9 100644
--- a/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
+++ b/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
@@ -62,7 +62,14 @@ const ProviderInfo = ({ classes, connected, network, provider, userAddress }) =>
       )}
       {!connected && <CircleDot circleSize={35} dotRight={11} dotSize={16} dotTop={24} keySize={14} mode="warning" />}
       <Col className={classes.account} layout="column" start="sm">
-        <Paragraph className={classes.network} noMargin size="xs" transform="capitalize" weight="bolder">
+        <Paragraph
+          className={classes.network}
+          noMargin
+          size="xs"
+          transform="capitalize"
+          weight="bolder"
+          data-testid="connected-wallet"
+        >
           {providerText}
         </Paragraph>
         <Paragraph className={classes.address} color={color} noMargin size="xs">
diff --git a/src/components/Header/components/ProviderInfo/ProviderDisconnected.tsx b/src/components/Header/components/ProviderInfo/ProviderDisconnected.tsx
index 3e177c18..bcd3a285 100644
--- a/src/components/Header/components/ProviderInfo/ProviderDisconnected.tsx
+++ b/src/components/Header/components/ProviderInfo/ProviderDisconnected.tsx
@@ -29,7 +29,14 @@ const ProviderDisconnected = ({ classes }) => (
   <>
     <CircleDot circleSize={35} dotRight={11} dotSize={16} dotTop={24} keySize={17} mode="error" />
     <Col className={classes.account} end="sm" layout="column" middle="xs">
-      <Paragraph className={classes.network} noMargin size="sm" transform="capitalize" weight="bold">
+      <Paragraph
+        className={classes.network}
+        noMargin
+        size="sm"
+        transform="capitalize"
+        weight="bold"
+        data-testid="not-connected-wallet"
+      >
         Not Connected
       </Paragraph>
       <Paragraph className={classes.connect} color="fancy" noMargin size="sm">
diff --git a/src/components/Header/components/SafeListHeader/index.tsx b/src/components/Header/components/SafeListHeader/index.tsx
index c9022c8c..d4c81e23 100644
--- a/src/components/Header/components/SafeListHeader/index.tsx
+++ b/src/components/Header/components/SafeListHeader/index.tsx
@@ -44,7 +44,7 @@ const SafeListHeader = ({ safesCount }) => {
   return (
     <Col className={classes.container} middle="xs" start="xs">
       Safes
-      <Paragraph className={classes.counter} size="xs">
+      <Paragraph className={classes.counter} size="xs" data-testid="safe-counter-heading">
         {safesCount}
       </Paragraph>
       <IconButton
diff --git a/src/components/ScanQRModal/ScanQRWrapper/index.tsx b/src/components/ScanQRModal/ScanQRWrapper/index.tsx
index 00c9fd1c..9982e6c4 100644
--- a/src/components/ScanQRModal/ScanQRWrapper/index.tsx
+++ b/src/components/ScanQRModal/ScanQRWrapper/index.tsx
@@ -39,6 +39,7 @@ export const ScanQRWrapper = (props) => {
         }}
         role="button"
         src={QRIcon}
+        testId="qr-icon"
       />
       {qrModalOpen && <ScanQRModal isOpen={qrModalOpen} onClose={closeQrModal} onScan={onScanFinished} />}
     </>
diff --git a/src/routes/load/components/DetailsForm/index.tsx b/src/routes/load/components/DetailsForm/index.tsx
index d8d953ba..c38d0ad1 100644
--- a/src/routes/load/components/DetailsForm/index.tsx
+++ b/src/routes/load/components/DetailsForm/index.tsx
@@ -100,6 +100,7 @@ const Details = ({ classes, errors, form }) => {
             text="Safe name"
             type="text"
             validate={required}
+            testId="load-safe-name-field"
           />
         </Col>
       </Block>
@@ -114,7 +115,7 @@ const Details = ({ classes, errors, form }) => {
               noErrorsOn(FIELD_LOAD_ADDRESS, errors) && {
                 endAdornment: (
                   <InputAdornment position="end">
-                    <CheckCircle className={classes.check} />
+                    <CheckCircle className={classes.check} data-testid="valid-address" />
                   </InputAdornment>
                 ),
               }
@@ -123,6 +124,7 @@ const Details = ({ classes, errors, form }) => {
             placeholder="Safe Address*"
             text="Safe Address"
             type="text"
+            testId="load-safe-address-field"
           />
         </Col>
         <Col center="xs" className={classes} middle="xs" xs={1}>
diff --git a/src/routes/load/components/OwnerList/index.tsx b/src/routes/load/components/OwnerList/index.tsx
index f7e671a9..536550f8 100644
--- a/src/routes/load/components/OwnerList/index.tsx
+++ b/src/routes/load/components/OwnerList/index.tsx
@@ -109,7 +109,7 @@ const OwnerListComponent = (props) => {
   return (
     <>
       <Block className={classes.title}>
-        <Paragraph color="primary" noMargin size="md">
+        <Paragraph color="primary" noMargin size="md" data-testid="load-safe-step-two">
           {`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`}
         </Paragraph>
       </Block>
@@ -122,7 +122,7 @@ const OwnerListComponent = (props) => {
         <Hairline />
         <Block margin="md" padding="md">
           {owners.map((address, index) => (
-            <Row className={classes.owner} key={address}>
+            <Row className={classes.owner} key={address} data-testid="owner-row">
               <Col className={classes.ownerName} xs={4}>
                 <Field
                   className={classes.name}
@@ -133,6 +133,7 @@ const OwnerListComponent = (props) => {
                   text="Owner Name"
                   type="text"
                   validate={required}
+                  testId={`load-safe-owner-name-${index}`}
                 />
               </Col>
               <Col xs={8}>
diff --git a/src/routes/load/components/ReviewInformation/index.tsx b/src/routes/load/components/ReviewInformation/index.tsx
index 57313d85..38707609 100644
--- a/src/routes/load/components/ReviewInformation/index.tsx
+++ b/src/routes/load/components/ReviewInformation/index.tsx
@@ -109,7 +109,7 @@ class ReviewComponent extends React.PureComponent<any> {
           <Col className={classes.detailsColumn} layout="column" xs={4}>
             <Block className={classes.details}>
               <Block margin="lg">
-                <Paragraph color="primary" noMargin size="lg">
+                <Paragraph color="primary" noMargin size="lg" data-testid="load-safe-step-three">
                   Review details
                 </Paragraph>
               </Block>
@@ -117,7 +117,14 @@ class ReviewComponent extends React.PureComponent<any> {
                 <Paragraph color="disabled" noMargin size="sm">
                   Name of the Safe
                 </Paragraph>
-                <Paragraph className={classes.name} color="primary" noMargin size="lg" weight="bolder">
+                <Paragraph
+                  className={classes.name}
+                  color="primary"
+                  noMargin
+                  size="lg"
+                  weight="bolder"
+                  data-testid="load-form-review-safe-name"
+                >
                   {values[FIELD_LOAD_NAME]}
                 </Paragraph>
               </Block>
@@ -168,7 +175,7 @@ class ReviewComponent extends React.PureComponent<any> {
                     </Col>
                     <Col xs={11}>
                       <Block className={classNames(classes.name, classes.userName)}>
-                        <Paragraph noMargin size="lg">
+                        <Paragraph noMargin size="lg" data-testid="load-safe-review-owner-name">
                           {values[getOwnerNameBy(index)]}
                         </Paragraph>
                         <Block className={classes.user} justify="center">
diff --git a/src/routes/open/components/Layout.tsx b/src/routes/open/components/Layout.tsx
index f9be1d8f..20719b9f 100644
--- a/src/routes/open/components/Layout.tsx
+++ b/src/routes/open/components/Layout.tsx
@@ -87,7 +87,9 @@ const Layout = (props) => {
             <IconButton disableRipple onClick={back} style={iconStyle}>
               <ChevronLeft />
             </IconButton>
-            <Heading tag="h2">Create New Safe</Heading>
+            <Heading tag="h2" testId="create-safe-form-title">
+              Create New Safe
+            </Heading>
           </Row>
           <Stepper
             initialValues={initialValues}
diff --git a/src/routes/open/components/ReviewInformation/index.tsx b/src/routes/open/components/ReviewInformation/index.tsx
index 72f31126..c918189b 100644
--- a/src/routes/open/components/ReviewInformation/index.tsx
+++ b/src/routes/open/components/ReviewInformation/index.tsx
@@ -112,7 +112,7 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
         <Col className={classes.detailsColumn} layout="column" xs={4}>
           <Block className={classes.details}>
             <Block margin="lg">
-              <Paragraph color="primary" noMargin size="lg">
+              <Paragraph color="primary" noMargin size="lg" data-testid="create-safe-step-three">
                 Details
               </Paragraph>
             </Block>
@@ -120,7 +120,14 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
               <Paragraph color="disabled" noMargin size="sm">
                 Name of new Safe
               </Paragraph>
-              <Paragraph className={classes.name} color="primary" noMargin size="lg" weight="bolder">
+              <Paragraph
+                className={classes.name}
+                color="primary"
+                noMargin
+                size="lg"
+                weight="bolder"
+                data-testid="create-safe-review-name"
+              >
                 {values[FIELD_NAME]}
               </Paragraph>
             </Block>
@@ -128,7 +135,13 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
               <Paragraph color="disabled" noMargin size="sm">
                 Any transaction requires the confirmation of:
               </Paragraph>
-              <Paragraph color="primary" noMargin size="lg" weight="bolder">
+              <Paragraph
+                color="primary"
+                noMargin
+                size="lg"
+                weight="bolder"
+                data-testid={`create-safe-review-req-owners-${values[FIELD_CONFIRMATIONS]}`}
+              >
                 {`${values[FIELD_CONFIRMATIONS]} out of ${numOwners} owners`}
               </Paragraph>
             </Block>
@@ -150,11 +163,16 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
                   </Col>
                   <Col xs={11}>
                     <Block className={classNames(classes.name, classes.userName)}>
-                      <Paragraph noMargin size="lg">
+                      <Paragraph noMargin size="lg" data-testid={`create-safe-owner-name-${index}`}>
                         {name}
                       </Paragraph>
                       <Block className={classes.user} justify="center">
-                        <Paragraph color="disabled" noMargin size="md">
+                        <Paragraph
+                          color="disabled"
+                          noMargin
+                          size="md"
+                          data-testid={`create-safe-owner-address-${index}`}
+                        >
                           {addresses[index]}
                         </Paragraph>
                         <CopyBtn content={addresses[index]} />
diff --git a/src/routes/open/components/SafeNameForm/index.tsx b/src/routes/open/components/SafeNameForm/index.tsx
index 53f9cf99..a9659f43 100644
--- a/src/routes/open/components/SafeNameForm/index.tsx
+++ b/src/routes/open/components/SafeNameForm/index.tsx
@@ -45,6 +45,7 @@ const SafeName = ({ classes, safeName }) => (
         text="Safe name"
         type="text"
         validate={required}
+        testId="create-safe-name-field"
       />
     </Block>
     <Block margin="lg">
diff --git a/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx b/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
index d71df4ad..4f2912ae 100644
--- a/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
+++ b/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
@@ -99,7 +99,7 @@ const SafeOwners = (props) => {
   return (
     <>
       <Block className={classes.title}>
-        <Paragraph color="primary" noMargin size="md">
+        <Paragraph color="primary" noMargin size="md" data-testid="create-safe-step-two">
           Your Safe will have one or more owners. We have prefilled the first owner with your connected wallet details,
           but you are free to change this to a different owner.
           <br />
@@ -120,7 +120,7 @@ const SafeOwners = (props) => {
           const addressName = getOwnerAddressBy(index)
 
           return (
-            <Row className={classes.owner} key={`owner${index}`}>
+            <Row className={classes.owner} key={`owner${index}`} data-testid={`create-safe-owner-row`}>
               <Col className={classes.ownerName} xs={4}>
                 <Field
                   className={classes.name}
@@ -130,6 +130,7 @@ const SafeOwners = (props) => {
                   text="Owner Name"
                   type="text"
                   validate={required}
+                  testId={`create-safe-owner-name-field-${index}`}
                 />
               </Col>
               <Col className={classes.ownerAddress} xs={6}>
@@ -142,7 +143,7 @@ const SafeOwners = (props) => {
                     noErrorsOn(addressName, errors) && {
                       endAdornment: (
                         <InputAdornment position="end">
-                          <CheckCircle className={classes.check} />
+                          <CheckCircle className={classes.check} data-testid={`valid-address-${index}`} />
                         </InputAdornment>
                       ),
                     }
@@ -152,6 +153,7 @@ const SafeOwners = (props) => {
                   text="Owner Address"
                   type="text"
                   validators={[getAddressValidator(otherAccounts, index)]}
+                  testId={`create-safe-address-field-${index}`}
                 />
               </Col>
               <Col center="xs" className={classes.remove} middle="xs" xs={1}>
@@ -191,14 +193,20 @@ const SafeOwners = (props) => {
               validate={composeValidators(required, mustBeInteger, minValue(1))}
             >
               {[...Array(Number(validOwners))].map((x, index) => (
-                <MenuItem key={`selectOwner${index}`} value={`${index + 1}`}>
+                <MenuItem key={`selectOwner${index}`} value={`${index + 1}`} data-testid={`input-${index + 1}`}>
                   {index + 1}
                 </MenuItem>
               ))}
             </Field>
           </Col>
           <Col className={classes.ownersAmountItem} xs={10}>
-            <Paragraph className={classes.owners} color="primary" noMargin size="lg">
+            <Paragraph
+              className={classes.owners}
+              color="primary"
+              noMargin
+              size="lg"
+              data-testid={`create-safe-req-conf-${validOwners}`}
+            >
               out of {validOwners} owner(s)
             </Paragraph>
           </Col>
diff --git a/src/routes/opening/components/Footer.tsx b/src/routes/opening/components/Footer.tsx
index 9e007b65..439bc3a3 100644
--- a/src/routes/opening/components/Footer.tsx
+++ b/src/routes/opening/components/Footer.tsx
@@ -38,7 +38,13 @@ export const ContinueFooter = ({
   continueButtonDisabled: boolean
   onContinue: (event: SyntheticEvent) => void
 }) => (
-  <Button color="primary" disabled={continueButtonDisabled} onClick={onContinue} variant="contained">
+  <Button
+    color="primary"
+    disabled={continueButtonDisabled}
+    onClick={onContinue}
+    variant="contained"
+    data-testid="continue-btn"
+  >
     Continue
   </Button>
 )
diff --git a/src/routes/opening/index.tsx b/src/routes/opening/index.tsx
index f73effdb..2e740717 100644
--- a/src/routes/opening/index.tsx
+++ b/src/routes/opening/index.tsx
@@ -302,7 +302,9 @@ const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, provider
 
   return (
     <Wrapper>
-      <Title tag="h2">Safe creation process</Title>
+      <Title tag="h2" testId="safe-creation-process-title">
+        Safe creation process
+      </Title>
       <Nav>
         <Stepper activeStepIndex={stepIndex} error={error} orientation="vertical" steps={steps} />
       </Nav>
@@ -336,7 +338,7 @@ const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, provider
           ) : null}
         </BodyFooter>
       </Body>
-      <BackButton color="primary" minWidth={140} onClick={onCancel}>
+      <BackButton color="primary" minWidth={140} onClick={onCancel} data-testid="safe-creation-back-btn">
         Back
       </BackButton>
     </Wrapper>
diff --git a/src/routes/safe/components/Layout/Header/index.tsx b/src/routes/safe/components/Layout/Header/index.tsx
index f3bbad71..cedb0bd6 100644
--- a/src/routes/safe/components/Layout/Header/index.tsx
+++ b/src/routes/safe/components/Layout/Header/index.tsx
@@ -38,7 +38,13 @@ const LayoutHeader = (props) => {
             {!granted && <Block className={classes.readonly}>Read Only</Block>}
           </Row>
           <Block className={classes.user} justify="center">
-            <Paragraph className={classes.address} color="disabled" noMargin size="md">
+            <Paragraph
+              className={classes.address}
+              color="disabled"
+              noMargin
+              size="md"
+              data-testid="safe-address-heading"
+            >
               {address}
             </Paragraph>
             <CopyBtn content={address} />
@@ -54,6 +60,7 @@ const LayoutHeader = (props) => {
           onClick={() => showSendFunds('')}
           size="small"
           variant="contained"
+          testId="main-send-btn"
         >
           <CallMade
             alt="Send Transaction"
diff --git a/src/routes/safe/components/Layout/Tabs/index.tsx b/src/routes/safe/components/Layout/Tabs/index.tsx
index 33c304b2..1cd25189 100644
--- a/src/routes/safe/components/Layout/Tabs/index.tsx
+++ b/src/routes/safe/components/Layout/Tabs/index.tsx
@@ -10,6 +10,7 @@ import {
   ADDRESS_BOOK_TAB_BTN_TEST_ID,
   BALANCES_TAB_BTN_TEST_ID,
   SETTINGS_TAB_BTN_TEST_ID,
+  APPS_TAB_BTN_TEST_ID,
   TRANSACTIONS_TAB_BTN_TEST_ID,
 } from 'src/routes/safe/components/Layout'
 import SettingsTab from 'src/routes/safe/components/Layout/Tabs/SettingsTab'
@@ -105,7 +106,7 @@ const TabsComponent = (props: Props) => {
           selected: classes.tabWrapperSelected,
           wrapper: classes.tabWrapper,
         }}
-        data-testid={TRANSACTIONS_TAB_BTN_TEST_ID}
+        data-testid={APPS_TAB_BTN_TEST_ID}
         label={AppsLabel}
         value={`${match.url}/apps`}
       />
diff --git a/src/routes/safe/components/Layout/index.tsx b/src/routes/safe/components/Layout/index.tsx
index 81aaccce..c86ea47c 100644
--- a/src/routes/safe/components/Layout/index.tsx
+++ b/src/routes/safe/components/Layout/index.tsx
@@ -21,6 +21,7 @@ import { wrapInSuspense } from 'src/utils/wrapInSuspense'
 
 export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
 export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
+export const APPS_TAB_BTN_TEST_ID = 'apps-tab-btn'
 export const TRANSACTIONS_TAB_BTN_TEST_ID = 'transactions-tab-btn'
 export const ADDRESS_BOOK_TAB_BTN_TEST_ID = 'address-book-tab-btn'
 export const SAFE_VIEW_NAME_HEADING_TEST_ID = 'safe-name-heading'
diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index 430aa77b..a76ec82f 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -35,6 +35,7 @@ export const CreateSafe = ({ provider, size }: any) => (
     size={size || 'medium'}
     to={OPEN_ADDRESS}
     variant="contained"
+    testId="create-new-safe-btn"
   >
     <Img alt="Safe" height={14} src={plus} />
     <div style={buttonStyle}>Create new Safe</div>
@@ -50,6 +51,7 @@ export const LoadSafe = ({ provider, size }) => (
     size={size || 'medium'}
     to={LOAD_ADDRESS}
     variant="outlined"
+    testId="load-existing-safe-btn"
   >
     <Img alt="Safe" height={14} src={safe} />
     <div style={buttonStyle}>Load existing Safe</div>
@@ -108,7 +110,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: any) => {
           <Heading align="center" margin="md" tag="h3">
             Get Started by Connecting a Wallet
           </Heading>
-          <ConnectButton minHeight={42} minWidth={240} />
+          <ConnectButton minHeight={42} minWidth={240} data-testid="connect-btn" />
         </Block>
       )}
     </Block>

From 2f46268fdfbe61687cc8885b882fb6d47b5ae354 Mon Sep 17 00:00:00 2001
From: nicolas <nicosampler@users.noreply.github.com>
Date: Mon, 22 Jun 2020 11:12:03 -0300
Subject: [PATCH 2/2] Fix condition in TX sent from safe-apps (#1037)

* fix condition

* add type
---
 .../safe/components/Apps/confirmTransactions.tsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/routes/safe/components/Apps/confirmTransactions.tsx b/src/routes/safe/components/Apps/confirmTransactions.tsx
index 66e01ec2..b1afcf8d 100644
--- a/src/routes/safe/components/Apps/confirmTransactions.tsx
+++ b/src/routes/safe/components/Apps/confirmTransactions.tsx
@@ -3,7 +3,6 @@ import { BigNumber } from 'bignumber.js'
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 
-import { getWeb3 } from 'src/logic/wallets/getWeb3'
 import AddressInfo from 'src/components/AddressInfo'
 import DividerLine from 'src/components/DividerLine'
 import Collapse from 'src/components/Collapse'
@@ -55,17 +54,12 @@ const IconText = styled.div`
     margin-right: 4px;
   }
 `
-const isTxValid = (t): boolean => {
-  try {
-    if (!['string', 'number'].includes(typeof t.value)) {
-      return false
-    }
+const isTxValid = (t: SafeAppTx): boolean => {
+  if (!['string', 'number'].includes(typeof t.value)) {
+    return false
+  }
 
-    if (typeof t.value === 'string') {
-      const web3 = getWeb3()
-      web3.eth.abi.decodeParameter('uint256', t.value)
-    }
-  } catch (error) {
+  if (typeof t.value === 'string' && !/^\d+$/.test(t.value)) {
     return false
   }