Extracting UI E2E (#49)

* Commented out package-lock.json

* Moved over changes from https://github.com/poanetwork/bridge-ui/pull/217

* Brought back package-lock.json used in e2e.

* Edited postinstall to work for sub-repo npm install

* Using local oracle

* Moved ui/e2e-script to ui-e2e

* Introduced ui-e2e workspace.

* Updated paths,. removed bridge dockerfile.

* Updated e2e script after extracting.

* Introduced ui-e2e into CI

* Disabled ui-e2e

* Updated readme.

.circleci/config.yml

@@ -40,6 +40,15 @@ jobs:
         - checkout
         - setup_remote_docker
         - run: yarn run oracle-e2e
+  ui-e2e:
+    docker:
+      - image: circleci/node:10.15-browsers
+    steps:
+        - checkout
+        - run: git submodule update --init
+        - run: yarn
+        - setup_remote_docker
+        - run: yarn run ui-e2e
 
 workflows:
   version: 2
@@ -49,3 +58,4 @@ workflows:
       - test
       - ansible-lint
       - oracle-e2e
+      # - ui-e2e

README.md

@@ -23,6 +23,8 @@ Sub-repositories maintained within this monorepo are listed below.
 | [UI](ui/README.md) | DApp interface to transfer tokens and coins between chains. |
 | [Monitor](monitor/README.md) | Tool for checking balances and unprocessed events in bridged networks. |
 | [Deployment](deployment/README.md) | Ansible playbooks for deploying cross-chain bridges. |
+| [Oracle-E2E]() | End to end tests for the Oracle |
+| [UI-E2E]() | End to end tests for the UI |
 
 Additionally there are [Solidity contracts](https://github.com/poanetwork/poa-bridge-contracts) used to manage bridge validators, collect signatures, and confirm asset relay and disposal.
 

package.json

@@ -13,15 +13,17 @@
     "oracle",
     "oracle-e2e",
     "ui",
+    "ui-e2e",
     "monitor",
     "contracts"
   ],
   "scripts": {
     "build": "yarn workspace poa-parity-bridge-contracts run compile && yarn workspace ui run build",
-    "lint": "yarn wsrun --exclude oracle-e2e --exclude poa-parity-bridge-contracts lint",
+    "lint": "yarn wsrun --exclude oracle-e2e --exclude ui-e2e --exclude poa-parity-bridge-contracts lint",
-    "test": "yarn wsrun --exclude monitor --exclude oracle-e2e test",
+    "test": "yarn wsrun --exclude monitor --exclude oracle-e2e --exclude ui-e2e test",
     "ansible-lint": "./deployment/lint.sh",
     "oracle-e2e": "./oracle-e2e/run-tests.sh",
+    "ui-e2e": "./ui-e2e/run-tests.sh",
     "clean": "rm -rf ./node_modules ./**/node_modules",
     "postinstall": "ln -s $(pwd)/node_modules/openzeppelin-solidity/ contracts/node_modules/openzeppelin-solidity"
   }

ui-e2e/MetaMask.js

@@ -127,12 +127,12 @@ class MetaMask extends Page {
     let url;
     switch (provider) {
       case 77: {
-        url = "http://10.1.0.102:8545";
+        url = "http://localhost:8541";
         networks.push(177);
         break;
       }
       case 42: {
-        url = "http://10.1.0.103:8545";
+        url = "http://localhost:8542";
         networks.push(142);
         break;
       }

ui-e2e/README.md

@@ -1,6 +1,7 @@
-### e2e script for bridge-ui
+### ui-e2e
-Configure startURL, homeAccount, foreignAccount in ```config.json```
+End to end tests for the UI
 
+- Configure startURL, homeAccount, foreignAccount in ```config.json```
 
 #### Tests
 
@@ -16,11 +17,4 @@ Configure startURL, homeAccount, foreignAccount in ```config.json```
 7. User is able to send tokens from Foreign account to Home account
 8. Foreign POA balance has correctly changed after transaction
 9. Home account has received correct amount of tokens after transaction
-
 ```
-
-
- 
- 
- 
- 

ui-e2e/Utils.js

@@ -1,7 +1,7 @@
 const webdriver = require('selenium-webdriver'),
   chrome = require('selenium-webdriver/chrome');
 const fs = require('fs-extra');
-const configFile = './e2e-script/config.json';
+const configFile = './config.json';
 
 class Utils {
 
@@ -51,7 +51,7 @@ class Utils {
   }
 
   static async startBrowserWithMetamask() {
-    let source = './e2e-script/MetaMask.crx';
+    let source = './MetaMask.crx';
     let options = new chrome.Options();
     await options.addExtensions(source);
     await options.addArguments('disable-popup-blocking');

ui-e2e/config.json

@@ -0,0 +1,7 @@
+{
+  "startUrl" : "http://localhost:3000",
+  "erc20Url" : "http://localhost:3001",
+  "erc20NativeUrl" : "http://localhost:3002",
+  "homeAccount": "./accounts/user77_7FC1.json",
+  "foreignAccount": "./accounts/user42_7FC1.json"
+}

ui-e2e/docker-compose.yml

@@ -2,37 +2,25 @@ version: '3'
 services:
   parity1:
     build: parity
-    networks:
-      testnet:
-        ipv4_address: 10.1.0.102
     ports:
     - "8541:8545"
   parity2:
     build:
       context: parity
       dockerfile: Dockerfile-foreign
-    networks:
-      testnet:
-        ipv4_address: 10.1.0.103
     ports:
     - "8542:8545"
   contracts:
     build: contracts
-    networks:
-    - testnet
     command: "true"
   redis:
     image: "redis:4"
-    networks:
-    - testnet
   rabbit:
     image: "rabbitmq:3-management"
-    networks:
-    - testnet
     ports:
     - "15672:15672"
   bridge:
-    build: bridge
+    build: ../oracle
     environment:
     - NODE_ENV=production
     - BRIDGE_MODE=NATIVE_TO_ERC
@@ -57,11 +45,9 @@ services:
     - HOME_POLLING_INTERVAL=500
     - FOREIGN_POLLING_INTERVAL=500
     - ALLOW_HTTP=yes
-    networks:
-    - testnet
     command: "true"
   bridge-erc20:
-    build: bridge
+    build: ../oracle
     environment:
     - NODE_ENV=production
     - BRIDGE_MODE=ERC_TO_ERC
@@ -87,11 +73,9 @@ services:
     - HOME_POLLING_INTERVAL=500
     - FOREIGN_POLLING_INTERVAL=500
     - ALLOW_HTTP=yes
-    networks:
-    - testnet
     command: "true"
   bridge-erc20-native:
-    build: bridge
+    build: ../oracle
     environment:
     - NODE_ENV=production
     - BRIDGE_MODE=ERC_TO_NATIVE
@@ -117,16 +101,14 @@ services:
     - HOME_POLLING_INTERVAL=500
     - FOREIGN_POLLING_INTERVAL=500
     - ALLOW_HTTP=yes
-    networks:
-    - testnet
     command: "true"
   ui:
-    build: ..
+    build: ../ui
     environment:
     - REACT_APP_HOME_BRIDGE_ADDRESS=0x32198D570fffC7033641F8A9094FFDCaAEF42624
     - REACT_APP_FOREIGN_BRIDGE_ADDRESS=0x2B6871b9B02F73fa24F4864322CdC78604207769
-    - REACT_APP_FOREIGN_HTTP_PARITY_URL=http://10.1.0.103:8545
+    - REACT_APP_FOREIGN_HTTP_PARITY_URL=http://localhost:8542
-    - REACT_APP_HOME_HTTP_PARITY_URL=http://10.1.0.102:8545
+    - REACT_APP_HOME_HTTP_PARITY_URL=http://localhost:8541
     - REACT_APP_HOME_NATIVE_NAME=POA
     - REACT_APP_HOME_NETWORK_NAME=Sokol
     - REACT_APP_FOREIGN_NETWORK_NAME=Kovan
@@ -142,19 +124,14 @@ services:
     - REACT_APP_FOREIGN_GAS_PRICE_SPEED_TYPE=standard
     - REACT_APP_FOREIGN_GAS_PRICE_FALLBACK=5000000000
     - REACT_APP_FOREIGN_GAS_PRICE_UPDATE_INTERVAL=15000
-    ports:
-    - "3000:3000"
-    networks:
-      testnet:
-        ipv4_address: 10.1.0.101
     command: "true"
   ui-erc20:
-    build: ..
+    build: ../ui
     environment:
     - REACT_APP_HOME_BRIDGE_ADDRESS=0x1feB40aD9420b186F019A717c37f5546165d411E
     - REACT_APP_FOREIGN_BRIDGE_ADDRESS=0x4a58D6d8D416a5fBCAcf3dC52eb8bE8948E25127
-    - REACT_APP_FOREIGN_HTTP_PARITY_URL=http://10.1.0.103:8545
+    - REACT_APP_FOREIGN_HTTP_PARITY_URL=http://localhost:8542
-    - REACT_APP_HOME_HTTP_PARITY_URL=http://10.1.0.102:8545
+    - REACT_APP_HOME_HTTP_PARITY_URL=http://localhost:8541
     - REACT_APP_HOME_NATIVE_NAME=POA
     - REACT_APP_HOME_NETWORK_NAME=Sokol
     - REACT_APP_FOREIGN_NETWORK_NAME=Kovan
@@ -170,19 +147,14 @@ services:
     - REACT_APP_FOREIGN_GAS_PRICE_SPEED_TYPE=standard
     - REACT_APP_FOREIGN_GAS_PRICE_FALLBACK=5000000000
     - REACT_APP_FOREIGN_GAS_PRICE_UPDATE_INTERVAL=15000
-    ports:
-    - "3001:3000"
-    networks:
-      testnet:
-        ipv4_address: 10.1.0.104
     command: "true"
   ui-erc20-native:
-    build: ..
+    build: ../ui
     environment:
     - REACT_APP_HOME_BRIDGE_ADDRESS=0x488Af810997eD1730cB3a3918cD83b3216E6eAda
     - REACT_APP_FOREIGN_BRIDGE_ADDRESS=0x488Af810997eD1730cB3a3918cD83b3216E6eAda
-    - REACT_APP_FOREIGN_HTTP_PARITY_URL=http://10.1.0.103:8545
+    - REACT_APP_FOREIGN_HTTP_PARITY_URL=http://localhost:8542
-    - REACT_APP_HOME_HTTP_PARITY_URL=http://10.1.0.102:8545
+    - REACT_APP_HOME_HTTP_PARITY_URL=http://localhost:8541
     - REACT_APP_HOME_NATIVE_NAME=POA
     - REACT_APP_HOME_NETWORK_NAME=Sokol
     - REACT_APP_FOREIGN_NETWORK_NAME=Kovan
@@ -198,16 +170,4 @@ services:
     - REACT_APP_FOREIGN_GAS_PRICE_SPEED_TYPE=standard
     - REACT_APP_FOREIGN_GAS_PRICE_FALLBACK=5000000000
     - REACT_APP_FOREIGN_GAS_PRICE_UPDATE_INTERVAL=15000
-    ports:
-    - "3002:3000"
-    networks:
-      testnet:
-        ipv4_address: 10.1.0.105
     command: "true"
-networks:
-  testnet:
-    driver: bridge
-    ipam:
-      driver: default
-      config:
-      - subnet: 10.1.0.0/24

ui-e2e/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "ui-e2e",
+  "version": "0.0.1",
+  "license": "MIT",
+  "private": true,
+  "devDependencies": {
+    "mocha": "^5.1.1"
+  }
+}

ui-e2e/run-tests.sh

@@ -1,8 +1,8 @@
 #!/usr/bin/env bash
+cd $(dirname $0)
 docker-compose up -d --build --force-recreate
-cd ..
+node ./scripts/blocks.js &
-npm run start:blocks &
+
-cd e2e-script
 docker-compose run contracts ./deploy.sh
 docker-compose run -d bridge npm run watcher:signature-request
 docker-compose run -d bridge npm run watcher:collected-signatures
@@ -15,13 +15,12 @@ docker-compose run -d bridge-erc20-native npm run watcher:collected-signatures
 docker-compose run -d bridge-erc20-native npm run watcher:affirmation-request
 docker-compose run -d bridge npm run sender:home
 docker-compose run -d bridge npm run sender:foreign
-docker-compose run -d ui npm start
+docker-compose run -d -p 3000:3000 ui npm start
-docker-compose run -d ui-erc20 npm start
+docker-compose run -d -p 3001:3000 ui-erc20 npm start
-docker-compose run -d ui-erc20-native npm start
+docker-compose run -d -p 3002:3000 ui-erc20-native npm start
-cd ..
+
-npm run startE2e
+yarn mocha -b ./test.js
 rc=$?
-cd e2e-script
 ps | grep node | grep -v grep | awk '{print "kill " $1}' | sh
 docker-compose down
 exit $rc

ui-e2e/scripts/blocks.js

@@ -1,7 +1,7 @@
 const Web3 = require('web3')
 
-const homeWeb3 = new Web3(new Web3.providers.HttpProvider('http://10.1.0.102:8545'))
+const homeWeb3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8541'))
-const foreignWeb3 = new Web3(new Web3.providers.HttpProvider('http://10.1.0.103:8545'))
+const foreignWeb3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8542'))
 const account = '0x7FC1442AB55Da569940Eb750AaD2BAA63DA4010E'
 const privateKey = '0x460635eb4ac4287de2d2393985e19b4a9f948ac533453a1044ab8d50330b0df9'
 homeWeb3.eth.accounts.wallet.add(privateKey)

ui/e2e-script/bridge/Dockerfile

@@ -1,14 +0,0 @@
-FROM node:8
-
-RUN apt-get update
-RUN apt-get install -y build-essential
-RUN apt-get install -y libc6-dev
-RUN apt-get install -y libc6-dev-i386
-RUN apt-get install -y wget
-RUN apt-get clean
-
-RUN git clone https://github.com/poanetwork/bridge-nodejs.git
-WORKDIR /bridge-nodejs
-RUN git fetch && git checkout develop
-RUN cd submodules/poa-bridge-contracts && git submodule update --init --recursive
-RUN npm install

ui/e2e-script/config.json

@@ -1,7 +0,0 @@
-{
-  "startUrl" : "http://10.1.0.101:3000",
-  "erc20Url" : "http://10.1.0.104:3000",
-  "erc20NativeUrl" : "http://10.1.0.105:3000",
-  "homeAccount": "./e2e-script/accounts/user77_7FC1.json",
-  "foreignAccount": "./e2e-script/accounts/user42_7FC1.json"
-}

ui/package.json

@@ -40,15 +40,13 @@
     "build": "npm run compile:contracts && npm run build-css && npm run select-css-theme && react-app-rewired build",
     "test": "react-app-rewired test --env=jsdom --no-watch",
     "test:watch": "react-app-rewired test --env=jsdom",
-    "startE2e": "mocha -b ./e2e-script/test.js",
-    "start:blocks": "node ./e2e-script/scripts/blocks.js",
     "coverage": "react-app-rewired test --env=jsdom --coverage",
     "coveralls": "cat ./coverage/lcov.info | node node_modules/.bin/coveralls",
     "eject": "react-app-rewired eject",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build -o origin",
     "compile:contracts": "cd submodules/poa-bridge-contracts && npm install && npm run compile && cd ../../ && rm -r -f src/contracts && cp -r submodules/poa-bridge-contracts/build/contracts src/contracts",
-    "postinstall": "cp lib/web3-eth/index.js ../node_modules/web3-eth/src && npm run compile:contracts"
+    "postinstall": "(cp lib/web3-eth/index.js ../node_modules/web3-eth/src || cp lib/web3-eth/index.js ./node_modules/web3-eth/src) && npm run compile:contracts"
   },
   "devDependencies": {
     "eslint": "5.12.0",