From 8bca74a9294fb9e3de73604c8c6805e3afc92a8d Mon Sep 17 00:00:00 2001
From: Antonio Morrone <dev@antomor.com>
Date: Wed, 8 Mar 2023 10:42:47 +0100
Subject: [PATCH] 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
---
 package.json            |  2 +-
 src/modals/Deploy.tsx   | 11 ++++++++++-
 src/modals/Execute.tsx  | 20 +++++++++++++++++---
 src/modals/Transfer.tsx | 16 ++++++++++++++--
 src/modals/Validate.tsx |  9 ++++++++-
 5 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 07d830b..7da4074 100644
--- 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
index ad7584e..c5f420b 100644
--- 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
index 46b0224..53c52f2 100644
--- 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
index 2a220c2..8ae4ed6 100644
--- 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
index 7d2ade3..6d7a0e5 100644
--- 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>,
     ];