chore(other): add cypress and example test (#92)

Add the cyprus e2e testing library and a test of the help page.

.eslintrc

@@ -2,11 +2,17 @@
   "parser": "babel-eslint",
   "env": {
     "browser": true,
-    "node": true,
-    "jasmine": true
+    "cypress/globals": true,
+    "jasmine": true,
+    "node": true
   },
   "plugins": ["prettier"],
-  "extends": ["airbnb", "prettier", "prettier/react"],
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/react",
+    "plugin:cypress/recommended"
+  ],
   "rules": {
     "prettier/prettier": "error",
     "react/jsx-props-no-spreading": "off"

.gitignore

@@ -18,4 +18,7 @@ build/
 
 # misc
 .DS_Store
-junit.xml
+junit.xml
+
+# cypress
+cypress/videos/

.travis.yml

@@ -1,36 +1,63 @@
 language: node_js
+notifications:
+  email:
+    recipients:
+    - [email protected]
+    on_success: change
+    on_failure: always
 
 jobs:
   include:
-    - stage: test
+    - stage: "Tests"
+      node_js: 8
+      name: "Node JS 8"
       script: npm run test
-      node_js: 10
+    - node_js: 10
+      name: "Node JS 10"
       script: npm run test
     - node_js: 12
+      name: "Node JS 12"
       script: npm run ci
-
+    - stage: "Cypress Tests"
+      node_js: 10
+      addons:
+        apt:
+          packages:
+            # Ubuntu 16+ does not install this dependency by default, so we need to install it ourselves
+            - libgconf-2-4
+      cache:
+        # Caches $HOME/.npm when npm ci is default script commandK
+        # Caches node_modules in all other cases
+        npm: true
+        directories:
+          # we also need to cache folder with Cypress binary
+          - ~/.cache
+      install:
+        - npm ci
+      before_script:
+        - npm run build:ci
+        # The server from create-react-app doesn't work well with travis
+        - npm i -g http-server
+        # Necessary because create-react-app assumes you want to deploy to /caravan
+        - mkdir ./build/caravan
+        - shopt -s extglob
+        - mv ./build/!(caravan) ./build/caravan/
+        - http-server build -p 3000 -c-1 --silent &
+      script:
+        - $(npm bin)/cypress run --env configFile=travis
     - stage: build
       node_js: 10
       script: npm run build:ci
       node_js: 12
       script: npm run build:ci
-
-deploy:
-  provider: script
-  script: "npm run deploy"
-  skip_cleanup: true
-  on:
-    tags: true
-    branch: master
-
-notifications:
-  email:
-    recipients:
-    - [email protected]
-    on_success: change
-    on_failure: always
-
-before_deploy:
-- git remote set-url origin https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
-- git config --global user.email "Travis CI<[email protected]>"
-- git config --global user.name "TravisCI"
+      before_deploy:
+        - git remote set-url origin https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
+        - git config --global user.email "Travis CI<[email protected]>"
+        - git config --global user.name "TravisCI"
+      deploy:
+        provider: script
+        script: "npm run deploy"
+        skip_cleanup: true
+        on:
+          tags: true
+          branch: master

cypress.json

@@ -0,0 +1 @@
+{}

cypress/config/development.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "https://localhost:3000/caravan#/",
+  "chromeWebSecurity": false
+}

cypress/config/travis.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3000/caravan/#/",
+  "chromeWebSecurity": false
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/HelpPage.spec.js

@@ -0,0 +1,38 @@
+describe("Help Page", () => {
+  beforeEach(() => {
+    cy.visit("/help");
+  });
+
+  it("Has a link to setup wallet", () => {
+    cy.get('[data-cy=setup-wallet-button]').click();
+    cy.url().should('include', '/wallet');
+  });
+
+  it("Has a link to setup address", () => {
+    cy.get('[data-cy=setup-address-button]').click();
+    cy.url().should('include', '/address');
+  });
+
+  it("Has links to Learn More resources", () => {
+    cy.get('a[href="https://www.unchained-capital.com/blog/the-caravan-arrives/"]').should('have.attr', 'target', '_blank');
+    cy.get('a[href="https://www.youtube.com/playlist?list=PLUM8mrUjWoPRsVGEZ1gTntqPd4xrQZoiH"]').should('have.attr', 'target', '_blank');
+    cy.get('a[href="https://github.com/unchained-capital/caravan"]').should('have.attr', 'target', '_blank');
+  });
+
+  it("Has links to supported devices and browsers", () => {
+    cy.get('a[href="https://shop.trezor.io/product/trezor-one-white"]').should('have.attr', 'target', '_blank');
+    cy.get('a[href="https://shop.trezor.io/product/trezor-model-t"]').should('have.attr', 'target', '_blank');
+    cy.get('a[href="https://www.ledger.com/products/ledger-nano-s"]').should('have.attr', 'target', '_blank');
+    cy.get('a[href="https://www.ledger.com/products/ledger-nano-x"]').should('have.attr', 'target', '_blank');
+
+    cy.get('a[href="https://www.google.com/chrome/"]').should('have.attr', 'target', '_blank');
+    cy.get('a[href="https://www.mozilla.org/en-US/firefox/new/"]').should('have.attr', 'target', '_blank');
+  });
+
+  it("Has a link to report an issue and run tests", () => {
+    cy.get('a[href="https://github.com/unchained-capital/caravan/issues"]');
+
+    cy.get('[data-cy=run-tests-button]').click();
+    cy.url().should('include', '/test');
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,34 @@
+// / <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const fs = require("fs-extra");
+const path = require("path");
+
+function getConfigurationByFile(file) {
+  const pathToConfigFile = path.resolve("cypress", "config", `${file}.json`);
+
+  return fs.readJson(pathToConfigFile);
+}
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  // accept a configFile value or use development by default
+  const file = config.env.configFile || "development";
+
+  return getConfigurationByFile(file);
+};

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')