Fixed tests

app/renderer/components/preferences/payment/bitcoinDashboard.js

@@ -241,7 +241,7 @@ class BitcoinDashboard extends ImmutableComponent {
     window.addEventListener('message', this.onMessage.bind(this), false)
 
     // TODO remove bitcoinDashboard class
-    return <div className='bitcoinDashboard'>
+    return <div className='bitcoinDashboard' data-test-id='bitcoinDashboard'>
       {
         this.props.bitcoinOverlayVisible
           ? <ModalOverlay

app/renderer/components/preferences/payment/disabledContent.js

@@ -21,7 +21,7 @@ const CoinBase2 = require('../../../../extensions/brave/img/coinbase_2x.png')
 class DisabledContent extends ImmutableComponent {
   render () {
     return <div>
-      <div className={css(styles.paymentsMessage, styles.walletBarMargin)}>
+      <div className={css(styles.paymentsMessage, styles.walletBarMargin)} data-test-id='paymentsMessage'>
         <h3 className={css(styles.h3)} data-l10n-id='paymentsWelcomeTitle' />
         <div className={css(styles.text)} data-l10n-id='paymentsWelcomeText1' />
         <div className={css(styles.boldText, styles.text)} data-l10n-id='paymentsWelcomeText2' />

app/renderer/components/preferences/payment/enabledContent.js

@@ -21,6 +21,7 @@ const LedgerTable = require('./ledgerTable')
 // style
 const globalStyles = require('../../styles/global')
 const {paymentStyles} = require('../../styles/payment')
+const commonStyles = require('../../styles/commonStyles')
 const cx = require('../../../../../js/lib/classSet')
 
 // other
@@ -39,14 +40,13 @@ class EnabledContent extends ImmutableComponent {
       ? this.props.showOverlay.bind(this, 'addFunds')
       : (ledgerData.get('creating') ? () => {} : this.createWallet(ledgerData))
 
-    return <Button data-test-id={buttonText}
+    return <Button
+      testId='addFunds'
       l10nId={buttonText}
-      className={cx({
-        primaryButton: true,
-        [css(styles.addFunds)]: true
-      })}
+      className={css(commonStyles.buttonPrimary, styles.addFunds)}
       onClick={onButtonClick.bind(this)}
-      disabled={ledgerData.get('creating')} />
+      disabled={ledgerData.get('creating')}
+    />
   }
 
   paymentHistoryButton (ledgerData) {
@@ -71,6 +71,7 @@ class EnabledContent extends ImmutableComponent {
     const onButtonClick = this.props.showOverlay.bind(this, 'paymentHistory')
 
     return <Button
+      data-test-id='paymentHistoryButton'
       className={css(styles.paymentHistoryButton)}
       l10nId={buttonText}
       l10nArgs={l10nDataArgs}
@@ -233,7 +234,10 @@ class EnabledContent extends ImmutableComponent {
                 }
               </td>
               <td className={css(styles.tableTd)}>
-                <div data-l10n-id={walletStatus.id} data-l10n-args={walletStatus.args ? JSON.stringify(walletStatus.args) : null} />
+                <div data-test-id='walletStatus'
+                  data-l10n-id={walletStatus.id}
+                  data-l10n-args={walletStatus.args ? JSON.stringify(walletStatus.args) : null}
+                />
                 {this.nextReconcileMessage(ledgerData)}
               </td>
             </tr>

app/renderer/components/preferences/payment/ledgerRecovery.js

@@ -69,7 +69,7 @@ class LedgerRecoveryContent extends ImmutableComponent {
       {
         (recoverySucceeded === false && recoveryError && isNetworkError)
           ? <div className={css(styles.recoveryOverlay)}>
-            <h1 className={css(styles.recoveryOverlay__h1)} data-l10n-id='ledgerRecoveryNetworkFailedTitle' />
+            <h1 className={css(styles.recoveryOverlay__h1)} data-l10n-id='ledgerRecoveryNetworkFailedTitle' data-test-id='recoveryError' />
             <p className={css(styles.recoveryOverlay__p, styles.spaceAround)}
               data-l10n-id='ledgerRecoveryNetworkFailedMessage'
             />

app/renderer/components/preferences/payment/ledgerTable.js

@@ -150,7 +150,7 @@ class LedgerTable extends ImmutableComponent {
     if (!this.synopsis || !this.synopsis.size) {
       return null
     }
-    return <div>
+    return <div data-test-id='ledgerTable'>
       <div className={css(styles.hideExcludedSites)}>
         <div className={css(styles.columnOffset)} />
         <div className={css(styles.rightColumn)}>

app/renderer/components/preferences/paymentsTab.js

@@ -166,7 +166,7 @@ class PaymentsTab extends ImmutableComponent {
           <span className='sectionSubTitle'>beta</span>
         </div>
         <div className={css(styles.paymentsSwitches)}>
-          <div className={css(styles.switchWrap)}>
+          <div className={css(styles.switchWrap)} data-test-id='enablePaymentsSwitch'>
             <span data-l10n-id='off' />
             <SettingCheckbox dataL10nId='on'
               prefKey={settings.PAYMENTS_ENABLED}

js/components/button.js

@@ -11,6 +11,7 @@ class Button extends ImmutableComponent {
     if (this.props.iconClass) {
       return <button disabled={this.props.disabled}
         data-l10n-id={this.props.l10nId}
+        data-test-id={this.props.testId}
         style={this.props.inlineStyles}
         data-button-value={this.props.dataButtonValue}
         className={cx({
@@ -23,6 +24,7 @@ class Button extends ImmutableComponent {
     }
     return <button disabled={this.props.disabled}
       data-l10n-id={this.props.l10nId}
+      data-test-id={this.props.testId}
       data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
       style={this.props.inlineStyles}
       className={cx({

test/lib/selectors.js

@@ -66,28 +66,28 @@ module.exports = {
   doneButton: '[data-l10n-id="done"]',
   homepageInput: '[data-l10n-id="homepageInput"]',
   syncSwitch: '.syncContainer .switchBackground',
-  walletSwitch: '.enablePaymentsSwitch .switchBackground',
-  addFundsButton: '.addFunds',
-  advancedSettings: '.advancedSettings',
+  walletSwitch: '[data-test-id="enablePaymentsSwitch"] .switchBackground',
+  addFundsButton: '[data-test-id="addFunds"]',
+  advancedSettings: '[data-l10n-id="advancedSettings"]',
   fundsSelectBox: '[data-test-id="fundsSelectBox"]',
-  paymentsStatus: '.walletStatus',
+  paymentsStatus: '[data-test-id="walletStatus"]',
   siteSettingItem: '.siteSettingItem',
-  ledgerTable: '.ledgerTable',
-  bitcoinDashboard: '.bitcoinDashboard',
+  ledgerTable: '[data-test-id="ledgerTable"]',
+  bitcoinDashboard: '[data-test-id="bitcoinDashboard"]',
   advancedSettingsButton: '[data-l10n-id="advancedSettings"]',
   backupWallet: '[data-l10n-id="backupLedger"]',
   recoverWallet: '[data-l10n-id="recoverLedger"]',
   recoverWalletFromFileButton: '[data-l10n-id="recoverFromFile"]',
   recoveryOverlayOkButton: '.recoveryOverlay [data-l10n-id="ok"]',
   saveWalletFile: '[data-l10n-id="saveRecoveryFile"]',
   balanceRecovered: '[data-l10n-id="balanceRecovered"]',
-  balanceNotRecovered: '.recoveryError',
+  balanceNotRecovered: '[data-test-id="recoveryError"]',
   modalCloseButton: 'button.close',
   coinbaseBuyButton: '[data-l10n-id="add"]',
   paymentQRCode: '[title="Brave wallet QR code"]',
   removeButton: '[data-l10n-id="remove"]',
-  paymentHistoryButton: '.paymentHistoryButton',
-  paymentsWelcomePage: '.paymentsMessage',
+  paymentHistoryButton: '[data-test-id="paymentHistoryButton"]',
+  paymentsWelcomePage: '[data-test-id="paymentsMessage"',
   autofillAddressPanel: '.autofillAddressPanel',
   autofillCreditCardPanel: '.autofillCreditCardPanel',
   allowRunInsecureContentButton: '.allowRunInsecureContentButton',

test/unit/about/preferencesTest.js

@@ -35,6 +35,7 @@ describe('Preferences component', function () {
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_advanced.svg', 'browser_prefs_advanced.svg')
     mockery.registerMock('../../../extensions/brave/img/ledger/verified_green_icon.svg')
     mockery.registerMock('../../../extensions/brave/img/ledger/verified_white_icon.svg')
+    mockery.registerMock('../../../extensions/brave/img/private_internet_access.png', 'private_internet_access.png')
 
     window.chrome = fakeElectron
     window.CustomEvent = {}

test/unit/app/renderer/paymentsTabTest.js

@@ -34,6 +34,7 @@ describe('PaymentsTab component', function () {
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_payments.svg', 'browser_prefs_payments.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_sync.svg', 'browser_prefs_sync.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_advanced.svg', 'browser_prefs_advanced.svg')
+    mockery.registerMock('../../../extensions/brave/img/private_internet_access.png', 'private_internet_access.png')
 
     mockery.registerMock('electron', fakeElectron)
     mockery.registerMock('../../../../js/settings', fakeSettings)