WIP - cypress not waiting for request, maybe add a second 'done' requ…

…est in the app to indicate finish?

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,60 @@
+require("babel-polyfill");
+import { getSpan } from "../../utils";
+
+describe("Basic", () => {
+  before(() => {
+    cy.server();
+    cy
+      .route({
+        url: "/api/v1/**",
+        onRequest: xhr => {
+          xhr.url = "http://localhost:9411" + xhr.url;
+        }
+      })
+      .as("zipkinAPICall");
+  });
+
+  describe("Setup", () => {
+    it("should be able to access zipkin", async () => {
+      const response = await fetch("http://localhost:9411/api/v1/traces");
+      expect(response.status).to.equal(200);
+    });
+  });
+
+  describe("Span", () => {
+    // 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);
+    // });
+
+    it("should be able to get the right span name", async () => {
+      const spanName = "span1-" + +new Date();
+      cy.visit("/");
+      cy.get("#Basic").click();
+      cy.get("#buttonLabel").should($p => {
+        expect($p.first()).to.contain("Not-Pressed");
+      });
+      cy.get("#spanNameInput").type(spanName);
+      cy.get("#basicButton").click();
+
+      cy.get("#buttonLabel").should(async $p => {
+        expect($p.first()).to.contain("Is-Pressed");
+      });
+
+      cy.wait("@zipkinAPICall");
+      const span = await getSpan("basicservice", spanName);
+      expect(span.name).to.equal(spanName);
+      expect(JSON.stringify(span)).to.equal("asdas");
+    });
+  });
+});

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

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

e2e-tests/react/src/screens/Basic.js

@@ -7,7 +7,7 @@ const tracer = new ZipkinJavascriptOpentracing({
   serviceName: "BasicService",
   recorder: new BatchRecorder({
     logger: new HttpLogger({
-      endpoint: "http://localhost:9411/api/v1/spans"
+      endpoint: "/api/v1/spans"
     })
   }),
   kind: "client"

e2e-tests/react/utils.js

@@ -1,9 +1,8 @@
 import fetch from "node-fetch";
-import log from "npmlog";
-import { setTimeout } from "core-js/library/web/timers";
+const log = window.console;
 
 export function getContent(page, selector) {
-  log.info("utils.getContent", "query selector: %s", selector);
+  log.info("utils.getContent", "query selector:", selector);
   return page.evaluate(
     selector => document.querySelector(selector).textContent,
     selector
@@ -14,14 +13,15 @@ export function getSpan(serviceName, spanName) {
   return new Promise(async (resolve, reject) => {
     log.info(
       "utils.getSpan",
-      "serviceName/spanName => %s/%s",
+      "serviceName/spanName => ",
       serviceName,
+      "/",
       spanName
     );
     const traceResult = await fetch(
       "http://localhost:9411/api/v1/traces?serviceName=" + serviceName
     ).then(res => res.json());
-    log.info("utils.getSpan", "traceResult => %s", JSON.stringify(traceResult));
+    log.info("utils.getSpan", "traceResult => ", traceResult);
     if (!traceResult.length) {
       return reject("Empty result set");
     }
@@ -30,23 +30,11 @@ export function getSpan(serviceName, spanName) {
     if (!traceList.length) {
       return reject("Empty traceList set");
     }
+    log.info("utils.getSpan", "traceResult => ", traceList);
 
     // Filter for right name, we assume there is only one
     const trace = traceList.filter(({ name }) => name === spanName)[0];
-    log.info("utils.getSpan", "extracted trace => %s", JSON.stringify(trace));
+    log.info("utils.getSpan", "extracted trace => ", trace);
     resolve(trace);
   });
 }
-
-export function waitForSpan(serviceName, spanName, timeout = 20000) {
-  return Promise.race(
-    (async function querySpan() {
-      try {
-        return await getSpan(serviceName, spanName);
-      } catch (e) {
-        return querySpan();
-      }
-    })(),
-    new Promise(resolve => setTimeout(() => resolve(), timeout))
-  );
-}