Merge pull request #836 from nymtech/feature/add-dataids-wallet

Apply readable ids to elements on Nym Wallet

tauri-wallet/src/components/Confirmation.tsx

@@ -33,7 +33,7 @@ export const Confirmation = ({
       {error === null ? (
         SuccessMessage
       ) : (
-        <Alert severity="error">
+        <Alert severity="error" data-testid="errorMessage">
           <AlertTitle>{error.name}</AlertTitle>
           <strong>{failureMessage}</strong> - {error.message}
         </Alert>

tauri-wallet/src/components/CopyToClipboard.tsx

@@ -40,6 +40,7 @@ export const CopyToClipboard = ({ text }: { text: string }) => {
       size="small"
       variant={copied ? 'text' : 'outlined'}
       aria-label="save"
+      data-testid="copyButton"
       onClick={() => handleCopy({ text, cb: updateCopyStatus })}
       endIcon={copied && <Check />}
       style={copied ? { background: green[500], color: 'white' } : {}}

tauri-wallet/src/components/Error.tsx

@@ -6,11 +6,11 @@ import { Button } from '@material-ui/core'
 export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
   return (
     <div>
-      <Alert severity="error">
+      <Alert severity="error" data-testid="errorMessage">
         <AlertTitle>{error.name}</AlertTitle>
         {error.message}
       </Alert>
-      <Alert severity="error">
+      <Alert severity="error" data-testid="stackTrace">
         <AlertTitle>Stack trace</AlertTitle>
         {error.stack}
       </Alert>

tauri-wallet/src/components/Nav.tsx

@@ -131,7 +131,7 @@ export const Nav = () => {
         )}
 
         <ListItem button onClick={logOut}>
-          <ListItemIcon className={classes.navItem}>
+          <ListItemIcon data-testid="logOut" className={classes.navItem}>
             <ExitToApp />
           </ListItemIcon>
           <ListItemText

tauri-wallet/src/components/NavigationCards.tsx

@@ -28,7 +28,7 @@ export const BalanceCard = () => {
         noPadding
         Action={
           <Tooltip title="Refresh balance">
-            <IconButton onClick={getBalance.fetchBalance} size="small">
+            <IconButton data-testid="refreshBalance" onClick={getBalance.fetchBalance} size="small">
               <Refresh />
             </IconButton>
           </Tooltip>
@@ -71,6 +71,7 @@ export const AddressCard = () => {
         title="Address"
         subheader="Wallet payments address"
         noPadding
+        data-testid="walletAddressHeader"
         Action={
           <Tooltip title={!copyState ? 'Copy address' : 'Copied'}>
             <span>
@@ -106,7 +107,7 @@ export const AddressCard = () => {
         }
       >
         <CardContent>
-          <Typography
+          <Typography data-testid="walletAddress"
             style={{ fontWeight: theme.typography.fontWeightRegular }}
           >
             {truncate(clientDetails?.client_address!, 35)}

tauri-wallet/src/components/NoClientError.tsx

@@ -5,7 +5,7 @@ import { Alert, AlertTitle } from '@material-ui/lab'
 export const NoClientError = () => {
   return (
     <Alert severity="error">
-      <AlertTitle>No client detected</AlertTitle>
+      <AlertTitle data-testid="clientError">No client detected</AlertTitle>
       Have you signed in? Try to go back to{' '}
       <Link to="/signin">the main page</Link> and try again
     </Alert>

tauri-wallet/src/components/NodeTypeSelector.tsx

@@ -34,11 +34,13 @@ export const NodeTypeSelector = ({
           value={EnumNodeType.mixnode}
           control={<Radio />}
           label="Mixnode"
+          data-testid="mixNode"
           disabled={disabled}
         />
         <FormControlLabel
           value={EnumNodeType.gateway}
           control={<Radio />}
+          data-testid="gateWay"
           label="Gateway"
           disabled={disabled}
         />

tauri-wallet/src/routes/balance.tsx

@@ -31,12 +31,13 @@ export const Balance = () => {
 
   return (
     <Layout>
-      <NymCard title="Check Balance">
+      <NymCard title="Check Balance" data-testid="checkBalance">
         <Grid container direction="column" spacing={2}>
           <Grid item>
             {error && (
               <Alert
                 severity="error"
+                data-testid="errorRefresh"
                 action={<RefreshAction />}
                 style={{ padding: theme.spacing(2) }}
               >
@@ -46,6 +47,7 @@ export const Balance = () => {
             {!error && (
               <Alert
                 severity="success"
+                data-testid="refreshSuccess"
                 style={{ padding: theme.spacing(2, 3) }}
                 action={<RefreshAction />}
               >

tauri-wallet/src/routes/bond/BondForm.tsx

@@ -142,7 +142,7 @@ export const BondForm = ({
             </Grid>
             {fees && (
               <Grid item>
-                <Alert severity="info">
+                <Alert severity="info" data-testid="feeAmount">
                   {`A fee of ${
                     watchNodeType === EnumNodeType.mixnode
                       ? fees.mixnode.amount
@@ -369,6 +369,7 @@ export const BondForm = ({
           color="primary"
           type="submit"
           size="large"
+          data-testid="submitButton"
           disableElevation
           onClick={handleSubmit(onSubmit)}
           endIcon={isSubmitting && <CircularProgress size={20} />}

tauri-wallet/src/routes/bond/index.tsx

@@ -43,7 +43,7 @@ export const Bond = () => {
       <NymCard title="Bond" subheader="Bond a node or gateway" noPadding>
         {ownership?.hasOwnership && (
           <Alert
-            severity="warning"
+            severity="warning" 
             action={
               <Button
                 disabled={status === EnumRequestStatus.loading}
@@ -53,6 +53,7 @@ export const Bond = () => {
                   getBalance.fetchBalance()
                   setStatus(EnumRequestStatus.initial)
                 }}
+                data-testid="unBond"
               >
                 Unbond
               </Button>
@@ -93,10 +94,10 @@ export const Bond = () => {
             <RequestStatus
               status={status}
               Success={
-                <Alert severity="success">Successfully bonded node</Alert>
+                <Alert severity="success" data-testid="bondSuccess">Successfully bonded node</Alert>
               }
               Error={
-                <Alert severity="error">
+                <Alert severity="error" data-testid="bondError">
                   An error occurred with the request: {message}
                 </Alert>
               }

tauri-wallet/src/routes/delegate/DelegateForm.tsx

@@ -97,7 +97,7 @@ export const DelegateForm = ({
               />
             </Grid>
             <Grid item>
-              <Alert severity="info">
+              <Alert severity="info" data-testid="feeAmount">
                 {`A fee of ${
                   watchNodeType === EnumNodeType.mixnode
                     ? fees.mixnode.amount
@@ -153,6 +153,7 @@ export const DelegateForm = ({
         <Button
           onClick={handleSubmit(onSubmit)}
           disabled={isSubmitting}
+          data-testid="delegateButton"
           variant="contained"
           color="primary"
           type="submit"

tauri-wallet/src/routes/delegate/index.tsx

@@ -41,6 +41,7 @@ export const Delegate = () => {
         title="Delegate"
         subheader="Delegate to mixnode or gateway"
         noPadding
+        data-testid="delegateCard"
       >
         {isLoading && (
           <Box
@@ -72,13 +73,13 @@ export const Delegate = () => {
               <RequestStatus
                 status={status}
                 Error={
-                  <Alert severity="error">
+                  <Alert severity="error" data-testid="delegateError">
                     An error occurred with the request:
                     <Box style={{ wordBreak: 'break-word' }}>{message}</Box>
                   </Alert>
                 }
                 Success={
-                  <Alert severity="success">
+                  <Alert severity="success" data-testid="delegateSuccess">
                     <AlertTitle>Delegation complete</AlertTitle>
                     {message}
                   </Alert>
@@ -95,6 +96,7 @@ export const Delegate = () => {
                 }}
               >
                 <Button
+                  data-testid="finishButton"
                   onClick={() => {
                     setStatus(EnumRequestStatus.initial)
                   }}

tauri-wallet/src/routes/receive.tsx

@@ -17,7 +17,7 @@ export const Receive = () => {
       <NymCard title="Receive Nym">
         <Grid container direction="column" spacing={1}>
           <Grid item>
-            <Alert severity="info">
+            <Alert severity="info" data-testid="receiveNym">
               You can receive tokens by providing this address to the sender
             </Alert>
           </Grid>
@@ -40,6 +40,7 @@ export const Receive = () => {
               >
                 <Grid item>
                   <Typography
+                    data-testid="clientAddress"
                     variant={matches ? 'h5' : 'subtitle1'}
                     style={{
                       wordBreak: 'break-word',
@@ -61,7 +62,7 @@ export const Receive = () => {
                     component="div"
                   >
                     {clientDetails && (
-                      <QRCode value={clientDetails.client_address} />
+                      <QRCode data-testid="qrCode" value={clientDetails.client_address} />
                     )}
                   </Box>
                 </Grid>

tauri-wallet/src/routes/send/SendConfirmation.tsx

@@ -46,7 +46,7 @@ export const SendConfirmation = ({
                 marginBottom: theme.spacing(1),
               }}
             />
-            <Typography>Transaction complete</Typography>
+            <Typography data-testid="transactionComplete">Transaction complete</Typography>
           </div>
 
           <Card
@@ -60,7 +60,7 @@ export const SendConfirmation = ({
                 </Typography>
               </div>
               <div style={{ wordBreak: 'break-all' }}>
-                <Typography>{data.to_address}</Typography>
+                <Typography data-testid="toAddress">{data.to_address}</Typography>
               </div>
             </div>
             <div style={{ display: 'flex' }}>
@@ -70,7 +70,7 @@ export const SendConfirmation = ({
                 </Typography>
               </div>
               <div>
-                <Typography>{data.amount.amount + ' punks'}</Typography>
+                <Typography data-testid="sendAmount">{data.amount.amount + ' punks'}</Typography>
               </div>
             </div>
           </Card>

tauri-wallet/src/routes/send/SendError.tsx

@@ -37,7 +37,7 @@ export const SendError = ({ message }: { message?: string }) => {
           variant="outlined"
           style={{ width: '100%', padding: theme.spacing(2) }}
         >
-          <Alert severity="error">
+          <Alert severity="error" data-testid="transactioError">
             An error occured during the request {message}
           </Alert>
         </Card>

tauri-wallet/src/routes/send/SendReview.tsx

@@ -44,19 +44,19 @@ export const SendReview = () => {
       ) : (
         <Grid container spacing={2}>
           <Grid item xs={12}>
-            <SendReviewField title="From" subtitle={values.from} />
+            <SendReviewField title="From" subtitle={values.from} data-testid="fromAddress" />
           </Grid>
           <Grid item xs={12}>
             <Divider light />
           </Grid>
           <Grid item xs={12}>
-            <SendReviewField title="To" subtitle={values.to} />
+            <SendReviewField title="To" subtitle={values.to} data-testid="toAddress"/>
           </Grid>
           <Grid item xs={12}>
             <Divider light />
           </Grid>
           <Grid item xs={12}>
-            <SendReviewField title="Amount" subtitle={values.amount} />
+            <SendReviewField title="Amount" subtitle={values.amount} data-testid="transferAmount"/>
           </Grid>
           <Grid item xs={12}>
             <Divider light />
@@ -65,6 +65,7 @@ export const SendReview = () => {
             <SendReviewField
               title="Transfer fee"
               subtitle={transferFee + ' PUNK'}
+              data-testid="transferFee"
             />
           </Grid>
         </Grid>

tauri-wallet/src/routes/send/SendWizard.tsx

@@ -148,6 +148,7 @@ export const SendWizard = () => {
               disableElevation
               style={{ marginRight: theme.spacing(1) }}
               onClick={handlePreviousStep}
+              data-testid="backButton"
             >
               Back
             </Button>
@@ -156,6 +157,7 @@ export const SendWizard = () => {
             variant={activeStep > 0 ? 'contained' : 'text'}
             color={activeStep > 0 ? 'primary' : 'default'}
             disableElevation
+            data-testid="button"
             onClick={
               activeStep === 0
                 ? handleNextStep

tauri-wallet/src/routes/sign-in.tsx

@@ -239,7 +239,7 @@ const CreateAccountContent = ({ showSignIn }: { showSignIn: () => void }) => {
                 />
                 <Typography>Wallet setup complete</Typography>
               </div>
-              <Alert severity="info" style={{ marginBottom: theme.spacing(2) }}>
+              <Alert severity="info" style={{ marginBottom: theme.spacing(2) }} data-testid="mnemonicWarning">
                 Please store your <strong>mnemonic</strong> in a safe place.
                 You'll need it to access your wallet
               </Alert>
@@ -257,7 +257,7 @@ const CreateAccountContent = ({ showSignIn }: { showSignIn: () => void }) => {
                     </Typography>
                   </Grid>
                   <Grid item>
-                    <Typography>{accountDetails.mnemonic}</Typography>
+                    <Typography data-testid="mnemonicPhrase">{accountDetails.mnemonic}</Typography>
                     <div
                       style={{ display: 'flex', justifyContent: 'flex-end' }}
                     >
@@ -273,7 +273,7 @@ const CreateAccountContent = ({ showSignIn }: { showSignIn: () => void }) => {
                     </Typography>
                   </Grid>
                   <Grid item>
-                    <Typography>{accountDetails.client_address}</Typography>
+                    <Typography data-testid="walletAdress">{accountDetails.client_address}</Typography>
                   </Grid>
                 </Grid>
               </Card>
@@ -282,7 +282,7 @@ const CreateAccountContent = ({ showSignIn }: { showSignIn: () => void }) => {
         </Grid>
         {error && (
           <Grid item style={{ marginTop: theme.spacing(1) }}>
-            <Alert severity="error">{error}</Alert>
+            <Alert severity="error" data-testid="error">{error}</Alert>
           </Grid>
         )}
         <Grid item>
@@ -293,6 +293,7 @@ const CreateAccountContent = ({ showSignIn }: { showSignIn: () => void }) => {
               variant="contained"
               color="primary"
               type="submit"
+              data-testid="createButton"
               disableElevation
               style={{ marginBottom: theme.spacing(1) }}
               disabled={isLoading}
@@ -304,6 +305,7 @@ const CreateAccountContent = ({ showSignIn }: { showSignIn: () => void }) => {
             fullWidth
             variant="text"
             onClick={showSignIn}
+            data-testid="signInButton"
             startIcon={<ArrowBack />}
           >
             Sign in

tauri-wallet/src/routes/unbond/index.tsx

@@ -29,8 +29,10 @@ export const Unbond = () => {
         {ownership?.hasOwnership && (
           <Alert
             severity="warning"
+            data-testid="bondNoded"
             action={
               <Button
+                data-testid="unBond"
                 disabled={isLoading}
                 onClick={async () => {
                   setIsLoading(true)
@@ -48,7 +50,7 @@ export const Unbond = () => {
           </Alert>
         )}
         {!ownership.hasOwnership && (
-          <Alert severity="info" style={{ margin: theme.spacing(3) }}>
+          <Alert severity="info" style={{ margin: theme.spacing(3) }} data-testid="noBond">
             You don't currently have a bonded node
           </Alert>
         )}

tauri-wallet/src/routes/undelegate/UndelegateForm.tsx

@@ -84,7 +84,7 @@ export const UndelegateForm = ({
               />
             </Grid>
             <Grid item>
-              <Alert severity="info">
+              <Alert severity="info" data-testid="feeAmount">
                 {`A fee of ${
                   watchNodeType === EnumNodeType.mixnode
                     ? fees.mixnode.amount
@@ -140,6 +140,7 @@ export const UndelegateForm = ({
           variant="contained"
           color="primary"
           type="submit"
+          data-testid="submitButton"
           disableElevation
           disabled={isSubmitting}
           endIcon={isSubmitting && <CircularProgress size={20} />}

tauri-wallet/src/routes/undelegate/index.tsx

@@ -102,14 +102,14 @@ export const Undelegate = () => {
               <RequestStatus
                 status={status}
                 Error={
-                  <Alert severity="error">
+                  <Alert severity="error" data-testid="requestError">
                     An error occurred with the request: {message}
                   </Alert>
                 }
                 Success={
                   <Alert severity="success">
                     {' '}
-                    <AlertTitle>Undelegation complete</AlertTitle>
+                    <AlertTitle data-testid="undelegateSuccess">Undelegation complete</AlertTitle>
                     {message}
                   </Alert>
                 }
@@ -125,6 +125,7 @@ export const Undelegate = () => {
                 }}
               >
                 <Button
+                  data-testid="finishButton"
                   onClick={() => {
                     setStatus(EnumRequestStatus.initial)
                     initialize()