add e2e tests with react

.travis.yml

@@ -1,7 +1,29 @@
-language: node_js
-node_js:
-  - '8'
-  - '7'
-
-after_script:
-  - 'cat coverage/lcov.info | ./node_modules/.bin/coveralls'
+matrix:
+  include:
+    # Unit Tests Node 8
+    - language: node_js
+      node_js: 8
+      install:
+      - yarn install
+      script:
+      - yarn test
+      after_script:
+      - 'cat coverage/lcov.info | ./node_modules/.bin/coveralls'
+
+    # E2E Web
+    - services:
+      - docker
+      env:
+        - CI=false
+        - NODE_VERSION="8.7"
+      install:
+      - cd e2e-tests/react
+      - yarn install
+      before_script:
+      - yarn run build
+      - docker run -d -p 9411:9411 openzipkin/zipkin
+      - ./node_modules/.bin/serve -p 3000 -s build & SERVER_PID=$!
+      script:
+      - yarn test
+      after_script:
+      - kill -9 $SERVER_PID

e2e-tests/react/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+cypress/videos/

e2e-tests/react/README.md

@@ -0,0 +1,35 @@
+This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
+
+Below you will find some information on how to perform common tasks.<br>
+You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
+
+## Table of Contents
+
+- [Available Scripts](#available-scripts)
+  - [npm start](#npm-start)
+  - [npm test](#npm-test)
+  - [npm run build](#npm-run-build)
+
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the E2E tests
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+

e2e-tests/react/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "projectId": "5gpnqw"
+}

e2e-tests/react/cypress/fixtures/example.json

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

e2e-tests/react/cypress/integration/basic_spec.js

@@ -0,0 +1,32 @@
+require("babel-polyfill");
+import fetch from "node-fetch";
+
+const getTraceAmount = () =>
+  fetch("http://localhost:9411/api/v2/traces")
+    .then(res => res.json())
+    .then(res => res.length);
+
+describe("Basic", () => {
+  describe("Setup", () => {
+    it("should be able to access zipkin", async () => {
+      const response = await fetch("http://localhost:9411/api/v2/traces");
+      expect(response.status).to.equal(200);
+    });
+
+    it("should be able interact with the basic example", async () => {
+      const before = await getTraceAmount();
+
+      cy.visit("/");
+      cy.get("#Basic").click();
+      cy.get("#buttonLabel").should($p => {
+        expect($p.first()).to.contain("Not-Pressed");
+      });
+      cy.get("#basicButton").click();
+      cy.get("#buttonLabel").should(async $p => {
+        expect($p.first()).to.contain("Is-Pressed");
+        const after = await getTraceAmount();
+        expect(after - before).to.equal(1);
+      });
+    });
+  });
+});

e2e-tests/react/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 is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

e2e-tests/react/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')

e2e-tests/react/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-example",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "opentracing": "^0.14.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-scripts": "^1.0.16",
+    "zipkin": "^0.10.1",
+    "zipkin-javascript-opentracing": "file:../../",
+    "zipkin-transport-http": "^0.10.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject",
+    "test:build": "serve -p 3000 -s build",
+    "test": "cypress run --record --key $CYPRESS_KEY"
+  },
+  "devDependencies": {
+    "babel-polyfill": "^6.26.0",
+    "cypress": "^1.0.3",
+    "node-fetch": "^1.7.3",
+    "serve": "^6.4.0"
+  }
+}

e2e-tests/react/public/index.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

e2e-tests/react/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

e2e-tests/react/src/App.css

@@ -0,0 +1,32 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-title {
+  font-size: 1.5em;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

e2e-tests/react/src/App.js

@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+import "./App.css";
+import { Basic } from "./screens";
+
+class App extends Component {
+  state = {
+    screen: false
+  };
+
+  renderScreenButton(title, component) {
+    return (
+      <a
+        id={title}
+        onClick={() => {
+          this.setState({ screen: component });
+        }}
+      >
+        <span style={{ color: "blue", marginBottom: 20 }}>{title}</span>
+      </a>
+    );
+  }
+
+  render() {
+    if (!this.state.screen) {
+      return (
+        <div className="App">{this.renderScreenButton("Basic", Basic)}</div>
+      );
+    }
+
+    const Screen = this.state.screen;
+    return <Screen />;
+  }
+}
+
+export default App;

e2e-tests/react/src/index.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

e2e-tests/react/src/index.js

@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+
+ReactDOM.render(<App />, document.getElementById("root"));