Merge branch 'master' into audit

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

@@ -31,6 +31,7 @@
         <div class="details">
           <p class="detail">
             <a
+              data-test="txhash_text"
               class="detail-description"
               :href="txExplorerUrl(tx.txHash)"
               target="_blank"
@@ -47,6 +48,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"
@@ -55,7 +57,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

@@ -15,6 +15,7 @@
         <div v-else class="details">
           <p class="detail">
             <a
+              data-test="txhash_text"
               class="detail-description"
               :href="txExplorerUrl(job.txHash)"
               target="_blank"

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>
@@ -10,17 +10,19 @@
         v-if="isEnabledGovernance"
         tag="router-link"
         to="/governance"
+        data-test="voting_link"
         :active="$route.path.includes('governance')"
         class="has-tag"
       >
         {{ $t('governance') }} <span v-if="hasActiveProposals" class="navbar-item--tag"></span>
       </b-navbar-item>
-      <b-navbar-item tag="router-link" to="/compliance">
+      <b-navbar-item tag="router-link" to="/compliance" data-test="compliance_link">
         {{ $t('compliance') }}
       </b-navbar-item>
       <b-navbar-item
         href="https://docs.tornado.cash"
         target="_blank"
+        data-test="docs_link"
         rel="noopener noreferrer"
         class="has-tag"
       >
@@ -32,9 +34,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

@@ -26,7 +26,13 @@
       >
         Tornado Cash Nova
       </a>
-      <a v-if="notice.txHash" :href="txExplorerUrl(notice.txHash)" target="_blank" rel="noopener noreferrer">
+      <a
+        v-if="notice.txHash"
+        :href="txExplorerUrl(notice.txHash)"
+        target="_blank"
+        data-test="popup_message"
+        rel="noopener noreferrer"
+      >
         {{ $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

@@ -24,6 +24,7 @@
           <p class="detail">
             <a
               class="detail-description"
+              data-test="txhash_text"
               :href="txExplorerUrl(tx.txHash)"
               target="_blank"
               rel="noopener noreferrer"
@@ -44,11 +45,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/governance/Metrics.vue

@@ -35,6 +35,7 @@
             type="is-text"
             :icon-left="isDataLoading ? '' : 'settings'"
             :loading="isDataLoading"
+            data-test="button_manage_torn"
             @click.native="onManage"
           >
             {{ $t('manage') }}

components/governance/manage/ManageBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="modal-card box box-modal has-delete">
     <button type="button" class="delete" @click="$emit('close')" />
-    <b-tabs v-model="activeTab" :animated="false" class="is-modal">
+    <b-tabs v-model="activeTab" :data-test="`tab_${activeTab}`" :animated="false" class="is-modal">
       <LockTab />
       <UnlockTab />
       <DelegateTab />

components/governance/manage/tabs/DelegateTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-tab-item :label="$t('delegate')">
+  <b-tab-item :label="$t('delegate')" header-class="delegate_tab">
     <div class="p">
       {{ $t('delegateTabDesc') }}
     </div>

components/governance/manage/tabs/LockTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-tab-item :label="$t('lock')">
+  <b-tab-item :label="$t('lock')" header-class="lock_torn_tab">
     <div class="p">
       {{ $t('lockTabDesc') }}
     </div>
@@ -7,6 +7,7 @@
       <b-field :class="hasErrorAmount ? 'is-warning' : ''">
         <b-input
           v-model="computedAmountToLock"
+          data-test="input_torn_amount_to_lock"
           step="0.01"
           :min="minAmount"
           :max="maxAmountToLock"
@@ -18,6 +19,7 @@
         <div class="control has-button">
           <button
             class="button is-primary is-small is-outlined"
+            data-test="button_max_torn_amount_to_lock"
             @mousedown.prevent
             @click="setMaxAmountToLock"
           >
@@ -27,13 +29,26 @@
       </b-field>
     </b-field>
     <div class="label-with-value">
-      {{ $t('availableBalance') }}: <span><number-format :value="maxAmountToLock" /> TORN</span>
+      {{ $t('availableBalance') }}:
+      <span><number-format data-test="info_available_balance" :value="maxAmountToLock" /> TORN</span>
     </div>
     <div class="buttons buttons__halfwidth">
-      <b-button type="is-primary is-fullwidth" outlined :disabled="disabledApprove" @click="onApprove">
+      <b-button
+        type="is-primary is-fullwidth"
+        outlined
+        data-test="button_approve_torn"
+        :disabled="disabledApprove"
+        @click="onApprove"
+      >
         {{ $t('approve') }}
       </b-button>
-      <b-button type="is-primary is-fullwidth" outlined :disabled="disabledLock" @click="onLock">
+      <b-button
+        type="is-primary is-fullwidth"
+        outlined
+        data-test="button_lock_torn"
+        :disabled="disabledLock"
+        @click="onLock"
+      >
         {{ $t('lock') }}
       </b-button>
     </div>

components/governance/manage/tabs/UnlockTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-tab-item :label="$t('unlock')">
+  <b-tab-item :label="$t('unlock')" header-class="unlock_torn_tab">
     <div class="p">
       {{ $t('unlockTabDesc') }}
     </div>
@@ -7,6 +7,7 @@
       <b-field :class="hasErrorAmount ? 'is-warning' : ''">
         <b-input
           v-model="computedAmountToUnlock"
+          data-test="input_torn_amount_to_unlock"
           step="0.01"
           :min="minAmount"
           :max="maxAmountToUnlock"
@@ -18,6 +19,7 @@
         <div class="control has-button">
           <button
             class="button is-primary is-small is-outlined"
+            data-test="button_max_torn_amount_to_unlock"
             @mousedown.prevent
             @click="setMaxAmountToUnlock"
           >
@@ -27,7 +29,8 @@
       </b-field>
     </b-field>
     <div class="label-with-value">
-      {{ $t('lockedBalance') }}: <span><number-format :value="maxAmountToUnlock" /> TORN</span>
+      {{ $t('lockedBalance') }}:
+      <span><number-format data-test="info_locked_balance" :value="maxAmountToUnlock" /> TORN</span>
     </div>
     <b-tooltip
       class="is-block"
@@ -36,7 +39,13 @@
       :active="!hasLockedBalance || !canWithdraw"
       multilined
     >
-      <b-button :disabled="disableUnlock" type="is-primary is-fullwidth" outlined @click="onUnlock">
+      <b-button
+        :disabled="disableUnlock"
+        type="is-primary is-fullwidth"
+        outlined
+        data-test="button_unlock_torn"
+        @click="onUnlock"
+      >
         {{ $t('unlock') }}
       </b-button>
     </b-tooltip>

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>
@@ -26,7 +32,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>
@@ -37,6 +48,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 -->
@@ -46,7 +58,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') }}
@@ -92,6 +105,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 }}
@@ -120,6 +134,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>