Add e2e browser tests for the esplora web ui

shesek · shesek · commit 987eaedf251b · 2022-01-22T08:11:19.000+02:00
diff --git a/.dockerignore b/.dockerignore
@@ -15,3 +15,4 @@ data_bitcoin_regtest
 data_liquid_regtest
 www/libwally
 data_liquid_testnet
+tests
diff --git a/tests/.dockerignore b/tests/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+cypress/videos
+cypress/screenshots
diff --git a/tests/.gitignore b/tests/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+cypress/videos
+cypress/screenshots
diff --git a/tests/Dockerfile b/tests/Dockerfile
@@ -0,0 +1,7 @@
+FROM cypress/base:10
+WORKDIR /tests
+COPY package.json npm-shrinkwrap.json ./
+RUN npm install
+COPY . .
+ENV PATH=./node_modules/.bin:$PATH
+CMD cypress run
diff --git a/tests/cypress/integration/1-home.js b/tests/cypress/integration/1-home.js
@@ -0,0 +1,51 @@
+describe('home page', () => {
+  before(() => {
+    // Make sure we have some transactions to display in the Recent transactions list
+    cy.task('bitcoind:make_tx_bulk', { num_txs: 6 })
+    cy.wait(6000)
+    cy.task('bitcoind:mine')
+  })
+
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('displays the latest blocks', () => {
+    cy.get('.blocks-table .blocks-table-link-row')
+      .should('have.length', 5)
+
+    // verify the last block height matches bitcoin'd block count
+    cy.task('bitcoind', [ 'getblockcount' ]).then(tip_height => {
+      cy.get('.blocks-table .blocks-table-link-row [data-label=Height]')
+        .first().should('have.text', tip_height)
+    })
+  })
+
+  it('displays the latest transactions', () => {
+    cy.scrollTo('bottom')
+    cy.get('.transactions-table .transactions-table-link-row')
+      .should('have.length', 5)
+  })
+
+  it('can click a block to open it', () => {
+    cy.get('.blocks-table .blocks-table-link-row [data-label=Height]').first().then($btn => {
+      const block_height = $btn.text()
+      $btn.click()
+
+      cy.url().should('include', '/block/')
+      cy.get('h1.block-header-title')
+        .should('have.text', `Block ${block_height}`)
+    })
+  })
+
+  it('can click a transaction to open it', () => {
+    cy.get('.transactions-table .transactions-table-link-row [data-label=TXID]').first().then($btn => {
+      const txid = $btn.text()
+      $btn.click()
+
+      cy.url().should('include', `/tx/${txid}`)
+      cy.get('.transaction-box .txn')
+        .should('have.text', txid)
+    })
+  })
+})
diff --git a/tests/cypress/integration/2-block.js b/tests/cypress/integration/2-block.js
@@ -0,0 +1,55 @@
+describe('block page', () => {
+  before(() => {
+    // Prepare a block for inspection (with enough transactions to enable paging)
+    cy.task('bitcoind:make_tx_bulk', { num_txs: 80 })
+    cy.task('bitcoind:mine').then(block_hash => {
+      cy.wait(1000)
+      cy.visit(`/block/${block_hash}`)
+    })
+  })
+
+  it('displays the block header fields', () => {
+    cy.get('.stats-table')
+      .should('contain.text', 'Height')
+      .should('contain.text', 'Status')
+      .should('contain.text', 'Timestamp')
+  })
+
+  it('can toggle advanced details', () => {
+    cy.get('.stats-table')
+      .should('not.contain.text', 'Merkle root')
+      .should('not.contain.text', 'Nonce')
+
+    cy.get('.details-btn[data-toggle-block]')
+      .click()
+
+    cy.get('.stats-table')
+      .should('contain.text', 'Merkle root')
+      .should('contain.text', 'Nonce')
+
+    cy.get('.details-btn[data-toggle-block]')
+      .click()
+
+    cy.get('.stats-table')
+      .should('not.contain.text', 'Merkle root')
+      .should('not.contain.text', 'Nonce')
+  })
+
+  it('displays the block\'s first 25 transactions', () => {
+    cy.get('.transactions .transaction-box')
+      .should('have.length', 25)
+  })
+
+  it('can load more transactions', () => {
+    cy.get('.load-more').click()
+    cy.get('.transactions .transaction-box')
+      .should('have.length', 50)
+
+    cy.get('.load-more').click()
+    cy.get('.transactions .transaction-box')
+      .should('have.length', 75)
+
+    cy.get('h3')
+      .should('have.text', '75 of 81 Transactions')
+  })
+})
diff --git a/tests/cypress/integration/3-transaction.js b/tests/cypress/integration/3-transaction.js
@@ -0,0 +1,47 @@
+describe('transaction page', function() {
+  before(() => {
+    // Prepare a transaction for inspection
+    cy.task('bitcoind:make_tx', { confirmed: true }).as('test_tx').then(test_tx => {
+      cy.wait(6000)
+      cy.visit(`/tx/${test_tx.txid}`)
+    })
+  })
+
+  it('displays the transaction info', function() {
+    cy.get('.stats-table')
+      .should('contain.text', 'Status')
+      .should('contain.text', 'Included in Block')
+      .should('contain.text', 'Transaction fees')
+      .should('contain.text', this.test_tx.block_hash)
+
+    cy.get('.transaction-box .footer')
+      .should('contain.text', '1 Confirmation')
+
+    cy.get('.vout-header-container a')
+      .contains(this.test_tx.addr)
+      .should('exist')
+
+    cy.get('.vout-header-container .amount')
+      .contains(`${this.test_tx.amount} rBTC`)
+      .should('exist')
+  })
+
+  it('can toggle advanced details', () => {
+    function check (is_visible) {
+      let is_not = is_visible ? '' : 'not.'
+      cy.get('.vin .vin-body')
+        .should(is_not + 'exist')
+      cy.get('.vout .vout-body')
+        .should(is_not + 'exist')
+      cy.get('.transaction-box')
+        .should(is_not + 'contain.text', 'Previous output address')
+        .should(is_not + 'contain.text', 'scriptPubKey (asm)')
+    }
+
+    check(false)
+    cy.get('.details-btn').click()
+    check(true)
+    cy.get('.details-btn').click()
+    check(false)
+  })
+})
diff --git a/tests/cypress/plugins/index.js b/tests/cypress/plugins/index.js
@@ -0,0 +1,63 @@
+const fs = require('fs')
+    , urlp = require('url')
+    , assert = require('assert')
+    , BitcoinClient = require('bitcoin-core')
+
+module.exports = (on, config) => {
+  config.baseUrl = config.baseUrl || process.env.BASE_URL
+  config.bitcoindUrl = config.bitcoindUrl || process.env.BITCOIND_URL
+
+  // TODO: auto spawn dev-server for testing
+
+  assert(config.baseUrl && config.bitcoindUrl, 'BASE_URL and BITCOIND_URL are required')
+
+  const bitcoind = new BitcoinClient(bitcoind_opt(config.bitcoindUrl))
+
+  on('task', {
+    bitcoind: async ([ method, ...params ]) =>
+      bitcoind.command(method, ...params)
+
+  , "bitcoind:mine": async () => {
+      const addr = await bitcoind.getNewAddress()
+      return (await bitcoind.generateToAddress(1, addr))[0]
+    }
+
+  , "bitcoind:make_tx": async ({ confirmed }) => {
+      const addr = await bitcoind.getNewAddress()
+          , amount = randAmount()
+          , txid = await bitcoind.sendToAddress(addr, amount)
+          , block_hash = confirmed ? await bitcoind.generateToAddress(1, await bitcoind.getNewAddress()) : null
+      return { txid, addr, amount, block_hash }
+    }
+
+  , "bitcoind:make_tx_bulk": async ({ num_txs }) => {
+      const addr = await bitcoind.getNewAddress()
+          , txids = []
+      for (let i=0; i<num_txs; i++) {
+         txids.push(await bitcoind.sendToAddress(addr, randAmount()))
+      }
+      return { txids, addr }
+    }
+  })
+
+  return config
+}
+
+function bitcoind_opt(url) {
+  const parsed = urlp.parse(url, true)
+      , auth_str = parsed.auth || (parsed.query.cookie && fs.readFileSync(parsed.query.cookie).toString())
+      , auth = auth_str && auth_str.split(':', 2).map(decodeURIComponent)
+
+  return {
+    host: parsed.hostname || 'localhost'
+  , port: parsed.port
+  , ssl: (parsed.protocol == 'https:')
+  , username: auth ? auth[0] : null
+  , password: auth ? auth[1] : null
+  , network:'regtest'
+  , wallet: parsed.query.wallet
+  }
+}
+
+const randAmount = () =>
+  `0.01${Math.random()*10000|0}`.replace(/0+$/, '')
diff --git a/tests/npm-shrinkwrap.json b/tests/npm-shrinkwrap.json
diff --git a/tests/package.json b/tests/package.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+node_modules`
	`2`	`+cypress/videos`
	`3`	`+cypress/screenshots`