feat: data-test

components/Deposit.vue

@@ -1,14 +1,20 @@
 <template>
-  <b-tab-item :label="$t('deposit')">
+  <b-tab-item :label="$t('deposit')" header-class="button_tab_deposit">
     <fieldset>
-      <b-field :label="$t('token')">
+      <b-field :label="$t('token')" data-test="token_list_dropdown">
         <b-dropdown v-model="selectedToken" expanded aria-role="list">
           <div slot="trigger" class="control">
             <div class="input">
               <span>{{ selectedCurrency }}</span>
             </div>
           </div>
-          <b-dropdown-item v-for="(token, key) in tokens" :key="key" aria-role="listitem" :value="key">
+          <b-dropdown-item
+            v-for="(token, key) in tokens"
+            :key="key"
+            aria-role="listitem"
+            :value="key"
+            :data-test="token.dataTest"
+          >
             {{ token.symbol }}
           </b-dropdown-item>
         </b-dropdown>
@@ -18,7 +24,7 @@
           {{ $t('amount') }}
           <b-tooltip :label="$t('amountTooltip')" size="is-small" position="is-right" multilined>
             <button class="button is-primary has-icon">
-              <span class="icon icon-info"></span>
+              <span class="icon icon-info" data-test="choose_amount_info"></span>
             </button>
           </b-tooltip>
         </template>
@@ -30,13 +36,24 @@
           @input="changeAmount"
         >
           <template v-for="({ amount, address }, key) in amounts">
-            <b-step-item :key="key" :label="shortenAmount(amount)" :clickable="address !== ''"></b-step-item>
+            <b-step-item
+              :key="key"
+              :label="shortenAmount(amount)"
+              :clickable="address !== ''"
+              :header-class="`token-${selectedToken}-${amount}`"
+            ></b-step-item>
           </template>
         </b-steps>
       </b-field>
     </fieldset>
-    <connect-button v-if="!isLoggedIn" type="is-primary is-fullwidth" />
-    <b-button v-else type="is-primary is-fullwidth" :loading="isDepositBtnClicked" @click="onDeposit">
+    <connect-button v-if="!isLoggedIn" type="is-primary is-fullwidth" data-test="button_connect" />
+    <b-button
+      v-else
+      type="is-primary is-fullwidth"
+      :loading="isDepositBtnClicked"
+      data-test="button_deposit"
+      @click="onDeposit"
+    >
       {{ $t('depositButton') }}
     </b-button>
   </b-tab-item>
@@ -79,7 +96,14 @@ export default {
       }
     },
     tokens() {
-      return this.networkConfig.tokens
+      return Object.keys(this.networkConfig.tokens).reduce((acc, curr) => {
+        const item = this.networkConfig.tokens[curr]
+        acc[curr] = {
+          ...item,
+          dataTest: `token_list_${item.symbol.toLowerCase()}`
+        }
+        return acc
+      }, {})
     },
     selectedToken: {
       get() {

components/DepositModalBox.vue

@@ -46,7 +46,9 @@
       </i18n>
     </b-checkbox>
     <template v-if="!isSetupAccount || !isEncrypted">
-      <b-checkbox v-model="isBackuped">{{ $t('iBackedUpTheNote') }}</b-checkbox>
+      <b-checkbox v-model="isBackuped" data-test="backup_note_checkbox">{{
+        $t('iBackedUpTheNote')
+      }}</b-checkbox>
       <div v-if="isBackuped && isIPFS" class="notice is-warning">
         <div class="notice__p">{{ $t('yourNoteWontBeSaved') }}</div>
       </div>
@@ -56,6 +58,7 @@
       v-else
       type="is-primary is-fullwidth"
       :disabled="disableButton || (!isValidGasPrice && !eipSupported)"
+      data-test="send_deposit_button"
       @click="_sendDeposit"
     >
       {{ $t('sendDeposit') }}

components/EncryptedTx.vue

@@ -30,7 +30,12 @@
       <div class="column is-hash" :data-label="$t('txHash')">
         <div class="details">
           <p class="detail">
-            <a class="detail-description" :href="txExplorerUrl(tx.txHash)" target="_blank">
+            <a
+              data-test="txhash_text"
+              class="detail-description"
+              :href="txExplorerUrl(tx.txHash)"
+              target="_blank"
+            >
               {{ tx.txHash }}
             </a>
           </p>
@@ -42,6 +47,7 @@
         <b-tooltip :active="activeCopyTooltip" :label="tooltipCopy" position="is-left" multilined>
           <b-button
             type="is-primary hide-icon-desktop"
+            data-test="decrypt_note_button"
             size="is-small"
             icon-left="decrypt"
             :disabled="disableCopyButton"
@@ -50,7 +56,13 @@
             {{ $t('decrypt') }}
           </b-button>
         </b-tooltip>
-        <b-button type="is-dark" size="is-small" icon-right="remove" @click="onClose" />
+        <b-button
+          type="is-dark"
+          data-test="remove_note_button"
+          size="is-small"
+          icon-right="remove"
+          @click="onClose"
+        />
       </div>
     </div>
   </div>

components/Job.vue

@@ -14,7 +14,12 @@
         <b-skeleton v-if="!job.txHash && job.status !== 'FAILED'" />
         <div v-else class="details">
           <p class="detail">
-            <a class="detail-description" :href="txExplorerUrl(job.txHash)" target="_blank">
+            <a
+              data-test="txhash_text"
+              class="detail-description"
+              :href="txExplorerUrl(job.txHash)"
+              target="_blank"
+            >
               {{ job.txHash }}
             </a>
           </p>

components/Loaders/Loader.vue

@@ -1,7 +1,7 @@
 <template>
   <b-loading v-model="enabled">
     <div class="loading-container">
-      <div class="loading-tornado"></div>
+      <div class="loading-tornado" data-test="tornado_loader"></div>
       <div class="loading-message">{{ message }}...</div>
       <approve-loader v-if="isApprove" />
     </div>

components/Navbar.vue

@@ -1,7 +1,7 @@
 <template>
   <b-navbar wrapper-class="container" class="header">
     <template slot="brand">
-      <b-navbar-item tag="router-link" to="/" active-class="">
+      <b-navbar-item tag="router-link" to="/" data-test="tornado_main_page" active-class="">
         <Logo />
       </b-navbar-item>
     </template>
@@ -27,9 +27,16 @@
       <b-navbar-item tag="div">
         <div class="buttons">
           <network-navbar-icon />
-          <metamask-navbar-icon />
-          <indicator />
-          <b-button icon-left="settings" type="is-primary" outlined @mousedown.prevent @click="onAccount">
+          <metamask-navbar-icon data-test="metamask_connection_state" />
+          <indicator data-test="note_account_connection_state" />
+          <b-button
+            icon-left="settings"
+            type="is-primary"
+            outlined
+            data-test="button_settings"
+            @mousedown.prevent
+            @click="onAccount"
+          >
             {{ $t('settings') }}
           </b-button>
         </div>

components/NetworkModal.vue

@@ -6,10 +6,11 @@
     </header>
     <div class="networks">
       <div
-        v-for="{ name, chainId } in networks"
+        v-for="{ name, chainId, dataTest } in networks"
         :key="chainId"
         class="item"
         :class="{ 'is-active': chainId === netId }"
+        :data-test="dataTest"
         @click="setNetwork(chainId)"
       >
         <b-icon class="network-icon" :icon="`${name}`.replace(/\)?\s\(?/g, '-').toLowerCase()" />
@@ -39,6 +40,7 @@ export default {
       return Object.keys(this.networkConfig).map((key) => {
         return {
           name: this.networkConfig[key].networkName,
+          dataTest: `${this.networkConfig[key].networkName.split(' ').join('_')}__network`,
           chainId: Number(key.replace('netId', ''))
         }
       })

components/NetworkNavbarIcon.vue

@@ -1,5 +1,7 @@
 <template>
-  <b-button :icon-left="iconName" class="network-button" @click="onClick">{{ shortNetworkName }}</b-button>
+  <b-button :icon-left="iconName" class="network-button" data-test="button_network" @click="onClick">{{
+    shortNetworkName
+  }}</b-button>
 </template>
 
 <script>

components/Notices.vue

@@ -21,7 +21,7 @@
       <a v-if="notice.nova" href="https://nova.tornadocash.eth.link" target="_blank">
         Tornado Cash Nova
       </a>
-      <a v-if="notice.txHash" :href="txExplorerUrl(notice.txHash)" target="_blank">
+      <a v-if="notice.txHash" :href="txExplorerUrl(notice.txHash)" target="_blank" data-test="popup_message">
         {{ $t('viewOnEtherscan') }}
       </a>
       <n-link v-else-if="notice.routerLink" v-bind="notice.routerLink.params" @onClick="$forceUpdate()">

components/Settings.vue

@@ -5,7 +5,7 @@
       <button type="button" class="delete" @click="$parent.cancel('escape')" />
     </header>
     <div class="field">
-      <b-field :label="$t('rpc')" class="has-custom-field">
+      <b-field :label="$t('rpc')" class="has-custom-field" data-test="rpc_endpoint_dropdown">
         <b-dropdown v-model="selectedRpc" expanded aria-role="list">
           <div slot="trigger" class="control" :class="{ 'is-loading': checkingRpc && !isCustomRpc }">
             <div class="input">
@@ -17,11 +17,17 @@
             :key="name"
             :value="name"
             aria-role="listitem"
+            :data-test="`rpc_endpoint_${name}`"
             @click="checkRpc({ name, url })"
           >
             {{ name }}
           </b-dropdown-item>
-          <b-dropdown-item value="custom" aria-role="listitem" @click="checkRpc({ name: 'custom' })">
+          <b-dropdown-item
+            value="custom"
+            aria-role="listitem"
+            data-test="rpc_endpoint_custom"
+            @click="checkRpc({ name: 'custom' })"
+          >
             {{ $t('customRpc') }}
           </b-dropdown-item>
         </b-dropdown>
@@ -42,10 +48,10 @@
       </p>
     </div>
     <div class="buttons buttons__halfwidth">
-      <b-button type="is-primary" outlined @mousedown.prevent @click="onReset">
+      <b-button type="is-primary" outlined data-test="button_reset_rpc" @mousedown.prevent @click="onReset">
         {{ $t('reset') }}
       </b-button>
-      <b-button type="is-primary" :disabled="isDisabledSave" @click="onSave">
+      <b-button type="is-primary" :disabled="isDisabledSave" data-test="save_rpc_button" @click="onSave">
         {{ $t('save') }}
       </b-button>
     </div>

components/Tx.vue

@@ -22,7 +22,12 @@
       <div class="column is-hash" :data-label="$t('txHash')">
         <div class="details">
           <p class="detail">
-            <a class="detail-description" :href="txExplorerUrl(tx.txHash)" target="_blank">
+            <a
+              class="detail-description"
+              data-test="txhash_text"
+              :href="txExplorerUrl(tx.txHash)"
+              target="_blank"
+            >
               {{ tx.txHash }}
             </a>
           </p>
@@ -39,11 +44,18 @@
             size="is-small"
             :disabled="!tx.note"
             icon-left="copy"
+            data-test="copy_note_button"
           >
             {{ $t('note') }}
           </b-button>
         </b-tooltip>
-        <b-button type="is-dark" size="is-small" icon-right="remove" @click="onClose" />
+        <b-button
+          data-test="remove_note_button"
+          type="is-dark"
+          size="is-small"
+          icon-right="remove"
+          @click="onClose"
+        />
       </div>
     </div>
   </div>

components/settings/tabs/RelayerTab.vue

@@ -1,7 +1,7 @@
 <template>
-  <b-tab-item :label="$t('relayer')" value="relayer">
+  <b-tab-item :label="$t('relayer')" value="relayer" header-class="withdrawal_settings_relayer_tab">
     <div class="field">
-      <b-field :label="$t('relayer')">
+      <b-field :label="$t('relayer')" data-test="withdrawal_settings_relayer_dropdown">
         <b-dropdown v-model="selectedRelayer" expanded aria-role="list" @change="onChangeRelayer">
           <div slot="trigger" class="control" :class="{ 'is-loading': checkingRelayer || isLoadingRelayers }">
             <div class="input">
@@ -27,6 +27,7 @@
           ref="customInput"
           v-model="customRelayerUrl"
           type="url"
+          data-test="enter_relayer_url_field"
           :placeholder="$t('pasteYourRelayerUrlorEnsRecord')"
           :custom-class="hasErrorRelayer.type"
           :use-html5-validation="false"
@@ -56,13 +57,20 @@
       :service-fee="relayer.tornadoServiceFee"
     />
     <div class="buttons buttons__halfwidth mt-5">
-      <b-button type="is-primary" outlined @mousedown.prevent @click="onReset">
+      <b-button
+        type="is-primary"
+        outlined
+        data-test="withdrawal_settings_reset_button"
+        @mousedown.prevent
+        @click="onReset"
+      >
         {{ $t('reset') }}
       </b-button>
       <b-button
         type="is-primary"
         :disabled="isDisabledSave"
         :loading="checkingRelayer || isLoadingRelayers"
+        data-test="withdrawal_settings_save_button"
         @click="onSave"
       >
         {{ $t('save') }}

components/settings/tabs/WalletTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-tab-item :label="$t('wallet')" value="wallet">
+  <b-tab-item :label="$t('wallet')" value="wallet" header-class="withdrawal_settings_wallet_tab">
     <fieldset :disabled="isNotLoggedIn">
       <div class="notice is-warning">
         <div class="notice__p">{{ $t('withdrawWalletWarning', { currency: networkCurrency }) }}</div>

components/web3Connect/Modal.vue

@@ -2,7 +2,7 @@
   <div class="modal-card box box-modal is-wallet-modal">
     <header class="box-modal-header is-spaced">
       <div class="box-modal-title">{{ $t('yourWallet') }}</div>
-      <button type="button" class="delete" @click="$emit('close')" />
+      <button type="button" class="delete" data-test="close_popup_button" @click="$emit('close')" />
     </header>
     <div class="note">
       {{ $t('pleaseSelectYourWeb3Wallet') }}
@@ -22,11 +22,16 @@
         <button
           v-show="isMetamask"
           class="button is-small is-background is-metamask"
+          data-test="choose_metamask_option"
           @click="_web3Connect('metamask')"
         >
           Metamask
         </button>
-        <button class="button is-small is-background is-walletConnect" @click="_web3Connect('walletConnect')">
+        <button
+          class="button is-small is-background is-walletConnect"
+          data-test="choose_wallet_option"
+          @click="_web3Connect('walletConnect')"
+        >
           WalletConnect
         </button>
       </div>

components/withdraw/Withdraw.vue

@@ -1,10 +1,16 @@
 <template>
-  <b-tab-item :label="$t('withdraw')">
+  <b-tab-item :label="$t('withdraw')" header-class="button_tab_withdraw">
     <div class="field">
       <div class="label-with-buttons">
         <div class="label">
           {{ $t('note') }}
-          <b-tooltip :label="$t('noteTooltip')" size="is-small" position="is-right" multilined>
+          <b-tooltip
+            :label="$t('noteTooltip')"
+            size="is-small"
+            position="is-right"
+            multilined
+            data-test="enter_note_info"
+          >
             <button class="button is-primary has-icon">
               <span class="icon icon-info"></span>
             </button>
@@ -25,7 +31,12 @@
             <LinkIcon />
           </b-tooltip>
         </a>
-        <button v-show="shouldSettingsShow" class="button is-icon" @click="onSettings">
+        <button
+          v-show="shouldSettingsShow"
+          class="button is-icon"
+          data-test="withdrawal_settings_button"
+          @click="onSettings"
+        >
           <b-tooltip :label="$t('withdrawalSettings')" size="is-small" position="is-right" multilined>
             <SettingsIcon />
           </b-tooltip>
@@ -36,6 +47,7 @@
         v-model="withdrawNote"
         :placeholder="$t('pleaseEnterYourNote')"
         :custom-class="hasErrorNote ? hasErrorNote.type : 'is-primary'"
+        data-test="enter_note_field"
       ></b-input>
       <div v-if="hasErrorNote" class="help" :class="hasErrorNote.type">
         <!-- eslint-disable vue/no-v-html -->
@@ -45,7 +57,8 @@
     <div v-if="!hasErrorNote && depositTxHash" class="field field-withdraw">
       <div class="withdraw-data">
         <div class="withdraw-data-item">
-          {{ $t('amount') }} <span>{{ selectedAmount }} {{ selectedStatisticCurrency }}</span>
+          {{ $t('amount') }}
+          <span data-test="note_tokens_amount">{{ selectedAmount }} {{ selectedStatisticCurrency }}</span>
         </div>
         <div class="withdraw-data-item">
           {{ $t('timePassed') }}
@@ -91,6 +104,7 @@
           v-model="withdrawAddress"
           :placeholder="$t('pleasePasteAddressHere')"
           :size="!withdrawAddress ? '' : isValidAddress ? 'is-primary' : 'is-warning'"
+          data-test="recipient_address_field"
         ></b-input>
         <p class="help">
           <span class="has-text-warning">{{ error.type }}</span> {{ error.message }}
@@ -119,6 +133,7 @@
           :disabled="isWithdrawalButtonDisable"
           :loading="isLoadingRelayers || isLoading"
           @click="onWithdraw"
+          data-test="button_start_withdraw"
         >
           {{ $t('withdrawButton') }}
         </b-button>

components/withdraw/WithdrawModalBox.vue

@@ -4,10 +4,10 @@
       <div class="box-modal-title">{{ $t('withdrawalConfirmation') }}</div>
       <button type="button" class="delete" @click="$emit('close')" />
     </header>
-    <div class="note">
+    <div class="note" data-test="withdrawal_confirmation_text">
       {{ message }}
     </div>
-    <b-button type="is-primary is-fullwidth" @click="_sendWithdraw">
+    <b-button type="is-primary is-fullwidth" data-test="withdrawal_confirm_button" @click="_sendWithdraw">
       {{ $t('confirm') }}
     </b-button>
   </div>
@@ -57,7 +57,7 @@ export default {
       deep: true
     }
   },
-  mounted() {
+  beforeCreate() {
     this.$store.dispatch('loading/enable', { message: this.$t('generatingProof') })
   },
   methods: {

components/withdraw/WithdrawTotal.vue

@@ -17,15 +17,15 @@
       </div>
       <div v-if="withdrawType === 'relayer'" class="withdraw-data-item">
         {{ $t('networkFee') }}
-        <span>{{ toDecimals(networkFee, null, 6) }} {{ networkCurrency }}</span>
+        <span data-test="label_network_fee">{{ toDecimals(networkFee, null, 6) }} {{ networkCurrency }}</span>
       </div>
       <div v-if="withdrawType === 'relayer'" class="withdraw-data-item">
         {{ $t('relayerFee') }}
-        <span>{{ toDecimals(relayerFee, null, 6) }} {{ currency }}</span>
+        <span data-test="label_relayer_fee">{{ toDecimals(relayerFee, null, 6) }} {{ currency }}</span>
       </div>
       <div v-if="withdrawType === 'relayer'" class="withdraw-data-item">
         {{ $t('totalFee') }}
-        <span>{{ toDecimals(totalRelayerFee, null, 6) }} {{ currency }}</span>
+        <span data-test="label_total_fee">{{ toDecimals(totalRelayerFee, null, 6) }} {{ currency }}</span>
       </div>
       <div v-if="isTokenSelected" class="withdraw-data-item">
         {{ $t('ethPurchase', { currency: networkCurrency }) }}
@@ -34,7 +34,7 @@
       <hr v-if="withdrawType === 'relayer'" />
       <div class="withdraw-data-item">
         {{ $t('tokensToReceive') }}
-        <span>{{ total }} {{ currency }}</span>
+        <span data-test="label_tokens_to_receive">{{ total }} {{ currency }}</span>
       </div>
       <div v-if="isTokenSelected" class="withdraw-data-item">
         <span class="is-alone">{{ ethToReceiveFromWei }} {{ networkCurrency }}</span>