move test infrastructure from cypress to puppeteer

cypress had a weird way to handle asynchronosity and
also strange behaviour for failing, puppeteer on top
of jest seems to be a way more stable alternative

.travis.yml

@@ -11,11 +11,26 @@ matrix:
       - 'cat coverage/lcov.info | ./node_modules/.bin/coveralls'
 
     # E2E Web
-    - services:
-      - docker
+    - language: node_js
+      node_js: 8.7
+      services:
+        - docker
+      cache:
+        yarn: true
+        directories:
+          - node_modules
+      dist: trusty
+      addons:
+        apt:
+          packages:
+            # This is required to run new chrome on old trusty
+            - libnss3
       env:
         - CI=false
         - NODE_VERSION="8.7"
+      before_install:
+      - "export DISPLAY=:99.0"
+      - "sh -e /etc/init.d/xvfb start"
       install:
       - yarn install
       - cd e2e-tests/react
@@ -27,4 +42,4 @@ matrix:
       script:
       - yarn test
       after_script:
-      - kill -9 $SERVER_PID
+      - kill -9 $SERVER_PID

e2e-tests/react/__tests__/0-setup.js

@@ -0,0 +1,31 @@
+import fetch from "node-fetch";
+import puppeteer from "puppeteer";
+import { getContent } from "../utils";
+
+describe("Setup", () => {
+  let browser, page;
+  beforeAll(async () => {
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+  });
+
+  it("should be able to access zipkin", async () => {
+    const response = await fetch("http://localhost:9411/api/v2/traces");
+    expect(response.status).toBe(200);
+  });
+
+  it("should reach the demo page", async () => {
+    await page.goto("http://localhost:3000");
+    await page.click("#Basic");
+
+    const before = await getContent(page, "#buttonLabel");
+    expect(before).toBe("Not-Pressed");
+
+    await page.click("#basicButton");
+
+    const after = await getContent(page, "#buttonLabel");
+    expect(after).toBe("Is-Pressed");
+
+    await browser.close();
+  });
+});

e2e-tests/react/__tests__/1-basic.js

@@ -0,0 +1,24 @@
+import fetch from "node-fetch";
+import puppeteer from "puppeteer";
+
+describe("Basic: Spans", () => {
+  let browser, page;
+  beforeAll(async () => {
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+  });
+
+  beforeEach(async () => {
+    await page.goto("http://localhost:3000");
+    await page.click("#Basic");
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  it("only starting one should not add a new span");
+  it("starting and finishing a span should register one in the server");
+  it("span should have a name");
+  it("span should have a service set");
+});

e2e-tests/react/package.json

@@ -16,12 +16,14 @@
     "build": "react-scripts build",
     "eject": "react-scripts eject",
     "test:build": "serve -p 3000 -s build",
-    "test": "cypress run --record --key $CYPRESS_KEY"
+    "test": "jest --runInBand"
   },
   "devDependencies": {
     "babel-polyfill": "^6.26.0",
-    "cypress": "^1.0.3",
+    "jest": "^21.2.1",
     "node-fetch": "^1.7.3",
+    "npmlog": "^4.1.2",
+    "puppeteer": "^0.12.0",
     "serve": "^6.4.0"
   }
 }

e2e-tests/react/utils.js

@@ -0,0 +1,9 @@
+import log from "npmlog";
+
+export function getContent(page, selector) {
+  log.info("utils", "query selector: %s", selector);
+  return page.evaluate(
+    selector => document.querySelector(selector).textContent,
+    selector
+  );
+}