PP-729: add id/class to html elements to simplify test automation (#61)

* fix: add id/class to html elements to simplify test automation * fix: run prettier for ts/tsx staged files
rsksmart · Mar 8, 2023 · 8bca74a · 8bca74a
1 parent 4a9456a
commit 8bca74a
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
   },
   "lint-staged": {
     "*.{ts,tsx}": "eslint --cache --fix",
-    "*.{js,css,md}": "prettier --write",
+    "*.{ts,tsx, js,css,md}": "prettier --write",
     "package.json": "npx sort-package-json"
   },
   "browserslist": {

diff --git a/src/modals/Deploy.tsx b/src/modals/Deploy.tsx
@@ -169,6 +169,7 @@ function Deploy() {
         waves='green'
         onClick={handleDeploySmartWalletButtonClick}
         disabled={deployLoading}
+        className='deploy-btn-deploy'
       >
         Deploy
         <LoadingButton show={deployLoading} />
@@ -179,11 +180,18 @@ function Deploy() {
         waves='green'
         onClick={handleEstimateDeploySmartWalletButtonClick}
         disabled={estimateLoading}
+        className='deploy-btn-estimate'
       >
         Estimate
         <LoadingButton show={estimateLoading} />
       </Button>,
-      <Button flat modal='close' node='button' waves='green'>
+      <Button
+        flat
+        modal='close'
+        node='button'
+        waves='green'
+        className='deploy-btn-cancel'
+      >
         Cancel
       </Button>,
     ];
@@ -209,6 +217,7 @@ function Deploy() {
               onChange={(event) => {
                 changeValue(event.target.value, 'fees');
               }}
+              id='deploy-input-fee'
             />
           </Col>
         </form>

diff --git a/src/modals/Execute.tsx b/src/modals/Execute.tsx
@@ -230,6 +230,7 @@ function Execute() {
       waves='green'
       onClick={handleExecuteSmartWalletButtonClick}
       disabled={executeLoading}
+      className='execute-btn-execute'
     >
       Execute
       <LoadingButton show={executeLoading} />
@@ -240,11 +241,18 @@ function Execute() {
       waves='green'
       onClick={handleEstimateSmartWalletButtonClick}
       disabled={estimateLoading}
+      className='execute-btn-estimate'
     >
       Estimate
       <LoadingButton show={estimateLoading} />
     </Button>,
-    <Button flat modal='close' node='button' waves='green'>
+    <Button
+      flat
+      modal='close'
+      node='button'
+      waves='green'
+      className='execute-btn-cancel'
+    >
       Cancel
     </Button>,
   ];
@@ -268,13 +276,14 @@ function Execute() {
               onChange={(event) => {
                 changeValue(event.currentTarget.value, 'address');
               }}
+              id='execute-input-address'
             />
           </Col>
           <Col s={1}>
             <Button
               onClick={pasteRecipientAddress}
               waves='light'
-              className='indigo accent-2'
+              className='indigo accent-2 execute-btn-past'
               tooltip='Paste'
               node='div'
             >
@@ -291,6 +300,7 @@ function Execute() {
               onChange={(event) => {
                 changeValue(event.currentTarget.value, 'function');
               }}
+              id='execute-input-function'
             />
           </Col>
           <Col s={4}>
@@ -301,17 +311,19 @@ function Execute() {
               onChange={(event) => {
                 changeValue(event.currentTarget.checked, 'show');
               }}
+              id='execute-switch-return-data'
             />
           </Col>
           <Col s={8}>
             <TextInput
-              label='Contrac function values'
+              label='Contract function values'
               placeholder='e.g. recipientAddr,amount'
               value={execute.value}
               validate
               onChange={(event) => {
                 changeValue(event.currentTarget.value, 'value');
               }}
+              id='execute-input-function-values'
             />
           </Col>
           <Col s={8}>
@@ -324,6 +336,7 @@ function Execute() {
               onChange={(event) => {
                 changeValue(event.currentTarget.value, 'fees');
               }}
+              id='execute-input-fee'
             />
           </Col>
           <Col s={4}>
@@ -334,6 +347,7 @@ function Execute() {
               onChange={(event) => {
                 changeValue(event.currentTarget.checked, 'check');
               }}
+              id='execute-switch-rbtc'
             />
           </Col>
           <Col s={12}>

diff --git a/src/modals/Transfer.tsx b/src/modals/Transfer.tsx
@@ -196,6 +196,7 @@ function Transfer() {
       waves='green'
       onClick={handleTransferSmartWalletButtonClick}
       disabled={transferLoading}
+      className='transfer-btn-transfer'
     >
       Transfer
       <LoadingButton show={transferLoading} />
@@ -206,11 +207,18 @@ function Transfer() {
       waves='green'
       onClick={handleEstimateTransferButtonClick}
       disabled={estimateLoading}
+      className='transfer-btn-estimate'
     >
       Estimate
       <LoadingButton show={estimateLoading} />
     </Button>,
-    <Button flat modal='close' node='button' waves='green'>
+    <Button
+      flat
+      modal='close'
+      node='button'
+      waves='green'
+      className='transfer-btn-cancel'
+    >
       Cancel
     </Button>,
   ];
@@ -234,13 +242,14 @@ function Transfer() {
               onChange={(event) => {
                 changeValue(event.currentTarget.value, 'address');
               }}
+              id='transfer-input-to'
             />
           </Col>
           <Col s={1}>
             <Button
               onClick={pasteRecipientAddress}
               waves='light'
-              className='indigo accent-2'
+              className='indigo accent-2 transfer-btn-paste'
               tooltip='Paste'
               node='div'
             >
@@ -257,6 +266,7 @@ function Transfer() {
               onChange={(event) => {
                 changeValue(event.currentTarget.value, 'amount');
               }}
+              id='transfer-input-amount'
             />
           </Col>
           <Col s={4}>
@@ -267,6 +277,7 @@ function Transfer() {
               onChange={(event) => {
                 changeValue(event.currentTarget.checked, 'check');
               }}
+              id='transfer-switch-rbtc'
             />
           </Col>
           <Col s={10}>
@@ -279,6 +290,7 @@ function Transfer() {
               onChange={(event) => {
                 changeValue(event.currentTarget.value, 'fees');
               }}
+              id='transfer-input-fee'
             />
           </Col>
         </form>

diff --git a/src/modals/Validate.tsx b/src/modals/Validate.tsx
@@ -146,11 +146,18 @@ function Validate() {
         waves='green'
         onClick={handleValidateButtonClick}
         disabled={validateLoading}
+        className='validate-btn-validate'
       >
         {validate.check ? 'Import' : 'Create'}
         <LoadingButton show={validateLoading} />
       </Button>,
-      <Button flat modal='close' node='button' waves='green'>
+      <Button
+        flat
+        modal='close'
+        node='button'
+        waves='green'
+        className='validate-btn-cancel'
+      >
         Cancel
       </Button>,
     ];