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

@@ -144,6 +144,7 @@ const CookiesBanner = () => {
         onKeyDown={closeCookiesBannerHandler}
         role="button"
         tabIndex={0}
+        data-testid="accept-preferences"
       >
         Accept preferences >
       </span>

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 />

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>
   </>
 )

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>

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">

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">

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

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} />}
     </>

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}>

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}>

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">

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}

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]} />

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">

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>

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>
 )

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>

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"

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`}
       />

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'

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>