metamask-extension/test/e2e/threebox.spec.js

const assert = require('assert')
const webdriver = require('selenium-webdriver')
const getPort = require('get-port')

const { By, until } = webdriver
const enLocaleMessages = require('../../app/_locales/en/messages.json')
const { tinyDelayMs, regularDelayMs, largeDelayMs } = require('./helpers')
const { buildWebDriver } = require('./webdriver')
const Ganache = require('./ganache')

const ganacheServer = new Ganache()

describe('MetaMask', function () {
  let driver

  const testSeedPhrase =
    'forum vessel pink push lonely enact gentle tail admit parrot grunt dress'

  this.timeout(0)
  this.bail(true)

  before(async function () {
    await ganacheServer.start({
      accounts: [
        {
          secretKey:
            '0x53CB0AB5226EEBF4D872113D98332C1555DC304443BEE1CF759D15798D3C55A9',
          balance: 25000000000000000000,
        },
      ],
    })
    const result = await buildWebDriver({ port: await getPort() })
    driver = result.driver
    await driver.navigate()
  })

  afterEach(async function () {
    if (process.env.SELENIUM_BROWSER === 'chrome') {
      const errors = await driver.checkBrowserForConsoleErrors(driver)
      if (errors.length) {
        const errorReports = errors.map((err) => err.message)
        const errorMessage = `Errors found in browser console:\n${errorReports.join(
          '\n',
        )}`
        console.error(new Error(errorMessage))
      }
    }
    if (this.currentTest.state === 'failed') {
      await driver.verboseReportOnFailure(this.currentTest.title)
    }
  })

  after(async function () {
    await ganacheServer.quit()
    await driver.quit()
  })

  describe('set up data to be restored by 3box', function () {
    describe('First time flow starting from an existing seed phrase', function () {
      it('clicks the continue button on the welcome screen', async function () {
        await driver.findElement(By.css('.welcome-page__header'))
        await driver.clickElement(
          By.xpath(
            `//button[contains(text(), '${enLocaleMessages.getStarted.message}')]`,
          ),
        )
        await driver.delay(largeDelayMs)
      })

      it('clicks the "Import Wallet" option', async function () {
        await driver.clickElement(
          By.xpath(`//button[contains(text(), 'Import wallet')]`),
        )
        await driver.delay(largeDelayMs)
      })

      it('clicks the "No thanks" option on the metametrics opt-in screen', async function () {
        await driver.clickElement(By.css('.btn-default'))
        await driver.delay(largeDelayMs)
      })

      it('imports a seed phrase', async function () {
        const [seedTextArea] = await driver.findElements(
          By.css('input[placeholder="Paste seed phrase from clipboard"]'),
        )
        await seedTextArea.sendKeys(testSeedPhrase)
        await driver.delay(regularDelayMs)

        const [password] = await driver.findElements(By.id('password'))
        await password.sendKeys('correct horse battery staple')
        const [confirmPassword] = await driver.findElements(
          By.id('confirm-password'),
        )
        confirmPassword.sendKeys('correct horse battery staple')

        await driver.clickElement(By.css('.first-time-flow__terms'))

        await driver.clickElement(
          By.xpath(`//button[contains(text(), 'Import')]`),
        )
        await driver.delay(regularDelayMs)
      })

      it('clicks through the success screen', async function () {
        await driver.findElement(
          By.xpath(`//div[contains(text(), 'Congratulations')]`),
        )
        await driver.clickElement(
          By.xpath(
            `//button[contains(text(), '${enLocaleMessages.endOfFlowMessage10.message}')]`,
          ),
        )
        await driver.delay(regularDelayMs)
      })

      it('balance renders', async function () {
        const balance = await driver.findElement(
          By.css('[data-testid="wallet-balance"] .list-item__heading'),
        )
        await driver.wait(until.elementTextMatches(balance, /25\s*ETH/u))
        await driver.delay(regularDelayMs)
      })
    })

    describe('turns on threebox syncing', function () {
      it('goes to the settings screen', async function () {
        await driver.clickElement(By.css('.account-menu__icon'))
        await driver.delay(regularDelayMs)

        await driver.clickElement(
          By.xpath(`//div[contains(text(), 'Settings')]`),
        )
      })

      it('turns on threebox syncing', async function () {
        await driver.clickElement(
          By.xpath(`//div[contains(text(), 'Advanced')]`),
        )
        await driver.clickElement(
          By.css('[data-testid="advanced-setting-3box"] .toggle-button div'),
        )
      })
    })

    describe('updates settings and address book', function () {
      it('navigates to General settings', async function () {
        await driver.clickElement(
          By.xpath(`//div[contains(text(), 'General')]`),
        )
      })

      it('turns on use of blockies', async function () {
        await driver.clickElement(By.css('.toggle-button > div'))
      })

      it('adds an address to the contact list', async function () {
        await driver.clickElement(
          By.xpath(`//div[contains(text(), 'Contacts')]`),
        )

        await driver.clickElement(By.css('.address-book-add-button__button'))
        await driver.delay(tinyDelayMs)

        const addAddressInputs = await driver.findElements(By.css('input'))
        await addAddressInputs[0].sendKeys('Test User Name 11')

        await driver.delay(tinyDelayMs)

        await addAddressInputs[1].sendKeys(
          '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
        )

        await driver.delay(largeDelayMs * 2)

        await driver.clickElement(
          By.xpath(`//button[contains(text(), 'Save')]`),
        )

        await driver.findElement(
          By.xpath(`//div[contains(text(), 'Test User Name 11')]`),
        )
        await driver.delay(regularDelayMs)
      })
    })
  })

  describe('restoration from 3box', function () {
    let driver2

    before(async function () {
      const result = await buildWebDriver({ port: await getPort() })
      driver2 = result.driver
      await driver2.navigate()
    })

    after(async function () {
      await driver2.quit()
    })

    describe('First time flow starting from an existing seed phrase', function () {
      it('clicks the continue button on the welcome screen', async function () {
        await driver2.findElement(By.css('.welcome-page__header'))
        await driver2.clickElement(
          By.xpath(
            `//button[contains(text(), '${enLocaleMessages.getStarted.message}')]`,
          ),
        )
        await driver2.delay(largeDelayMs)
      })

      it('clicks the "Import Wallet" option', async function () {
        await driver2.clickElement(
          By.xpath(`//button[contains(text(), 'Import wallet')]`),
        )
        await driver2.delay(largeDelayMs)
      })

      it('clicks the "No thanks" option on the metametrics opt-in screen', async function () {
        await driver2.clickElement(By.css('.btn-default'))
        await driver2.delay(largeDelayMs)
      })

      it('imports a seed phrase', async function () {
        const [seedTextArea] = await driver2.findElements(
          By.css('input[placeholder="Paste seed phrase from clipboard"]'),
        )
        await seedTextArea.sendKeys(testSeedPhrase)
        await driver2.delay(regularDelayMs)

        const [password] = await driver2.findElements(By.id('password'))
        await password.sendKeys('correct horse battery staple')
        const [confirmPassword] = await driver2.findElements(
          By.id('confirm-password'),
        )
        confirmPassword.sendKeys('correct horse battery staple')

        await driver2.clickElement(By.css('.first-time-flow__terms'))

        await driver2.clickElement(
          By.xpath(`//button[contains(text(), 'Import')]`),
        )
        await driver2.delay(regularDelayMs)
      })

      it('clicks through the success screen', async function () {
        await driver2.findElement(
          By.xpath(`//div[contains(text(), 'Congratulations')]`),
        )
        await driver2.clickElement(
          By.xpath(
            `//button[contains(text(), '${enLocaleMessages.endOfFlowMessage10.message}')]`,
          ),
        )
        await driver2.delay(regularDelayMs)
      })

      it('balance renders', async function () {
        const balance = await driver2.findElement(
          By.css('[data-testid="wallet-balance"] .list-item__heading'),
        )
        await driver2.wait(until.elementTextMatches(balance, /25\s*ETH/u))
        await driver2.delay(regularDelayMs)
      })
    })

    describe('restores 3box data', function () {
      it('confirms the 3box restore notification', async function () {
        await driver2.clickElement(By.css('.home-notification__accept-button'))
      })

      it('goes to the settings screen', async function () {
        await driver2.clickElement(By.css('.account-menu__icon'))
        await driver2.delay(regularDelayMs)

        await driver2.clickElement(
          By.xpath(`//div[contains(text(), 'Settings')]`),
        )
      })

      it('finds the blockies toggle turned on', async function () {
        await driver2.delay(regularDelayMs)
        const toggleLabel = await driver2.findElement(
          By.css('.toggle-button__status'),
        )
        const toggleLabelText = await toggleLabel.getText()
        assert.equal(toggleLabelText, 'ON')
      })

      it('finds the restored address in the contact list', async function () {
        await driver2.clickElement(
          By.xpath(`//div[contains(text(), 'Contacts')]`),
        )
        await driver2.delay(regularDelayMs)

        await driver2.findElement(
          By.xpath(`//div[contains(text(), 'Test User Name 11')]`),
        )
        await driver2.delay(regularDelayMs)
      })
    })
  })
})