Feature/e2e testing (#50)

* Setup cypress. Add simple sample test

* Setup cy env var to use as target in functional tests

* Add and config cypress webpack-preprocessor

* Add node and sandbox page objects

* Add node spec

* Remove simple_spec

* Read node ids from sandbox data

* Add favicon to sandbox

* Add start script to serve sandbox with npm http-server

* Update yarn.lock

* Update travis.yml to include functional tests run in CI pipeline

* Rename node.spec.js to node.e2e.js

* Rename functional:run task to functional

* Update .npmignore

Author: danielcaldas

.gitignore

@@ -72,3 +72,4 @@ gen-docs
 .DS_Store
 **/.DS_Store
 .vscode
+cypress/videos/

.npmignore

@@ -1,16 +1,22 @@
-.babelrc
-.DS_Store
-.eslintrc.js
 .git
 .gitignore
-.travis.yml
+.github
+.vscode
 coverage
+cypress
 docs
 gen-docs
-package.json
 sandbox
-src
 test
+.babelrc
+.editorconfig
+.eslintrc.js
+.eslintrc.test.config.js
+.travis.yml
+cypress.json
+package-lock.json
+RELEASE_PROCESS
 webpack.config.dist.js
 webpack.config.js
 yarn.lock
+.DS_Store

.travis.yml

@@ -3,7 +3,10 @@ node_js:
     - "8.9.0"
 install:
     - yarn install
+before_script:
+    - npm start -- --silent &
 script:
     - npm run lint
     - npm run test
     - npm run dist:sandbox
+    - npm run functional

cypress.json

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

cypress/common/page-objects/node.po.js

@@ -0,0 +1,17 @@
+/**
+ * Page Object for interacting with Node component.
+ * @param {string} id the id of the node.
+ * @returns {undefined}
+ */
+function NodePO (id) {
+    this.id = id;
+    this.path = `#${this.id} > path`;
+    this.text = `#${this.id} > text`;
+
+    this.getPath = () => cy.get(this.path);
+    this.getLabel = () => cy.get(this.text);
+    this.getColor = () => cy.get(this.path).invoke('attr', 'fill');
+    this.getFontSize = () => cy.get(this.text).invoke('attr', 'font-size');
+}
+
+module.exports = NodePO;

cypress/common/page-objects/sandbox.po.js

@@ -0,0 +1,19 @@
+/**
+ * Page Object for interacting with sandbox interface.
+ * @returns {undefined}
+ */
+function SandboxPO () {
+    // whitelist checkbox inputs
+    this.checkboxes = [ 'node.renderLabel' ];
+    
+    // actions
+    this.playGraph = () => cy.get('.container__graph > :nth-child(1) > :nth-child(2)').click();
+    this.pauseGraph = () => cy.get('.container__graph > :nth-child(1) > :nth-child(3)').click();
+
+    // element getters
+    this.getFieldInput = (field) => this.checkboxes.includes(field)
+        ? cy.contains(field).children('input')
+        : cy.contains(field).siblings('.form-control');
+}
+
+module.exports = SandboxPO;

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/node.e2e.js

@@ -0,0 +1,78 @@
+const NodePO = require('../common/page-objects/node.po');
+const SandboxPO = require('../common/page-objects/sandbox.po');
+const SANDBOX_URL = Cypress.env('SANDBOX_URL');
+let nodes = require('./../../sandbox/data').nodes.map(({id}) => id);
+
+describe('[rd3g-node] node tests', function () {
+    before(function () {
+        this.sandboxPO = new SandboxPO();
+        // visit sandbox
+        cy.visit(SANDBOX_URL);
+        // sleep 2 seconds
+        cy.wait(2000);
+        // pause the graph
+        this.sandboxPO.pauseGraph();
+
+        // @TODO: Could add this to a global scope
+        // NOTE: https://github.com/cypress-io/cypress/issues/300
+        // cy.window().then((win) => {
+        //     cy.spy(win.console, 'log')
+        // });
+    });
+
+    describe('when setting specific node color', function () {
+        beforeEach(function () {
+            // scroll down to node.color config
+            cy.contains('node.color').scrollIntoView();
+            // input text 'green'
+            this.sandboxPO.getFieldInput('node.color')
+                .clear()
+                .type('green');
+        });
+
+        it('all nodes should have the selected color', function () {
+            nodes.forEach(function (n) {
+                const nodePO = new NodePO(n);
+
+                // below alternative using async/await
+                // expect(await nodePO.getColor()).to.eq('green');
+                nodePO.getColor().should('eq', 'green');
+            });
+        });
+    });
+
+    describe('when setting specific node label fontSize', function () {
+        beforeEach(function () {
+            // scroll down to node.fontSize config
+            cy.contains('node.fontSize').scrollIntoView();
+            // input text '14'
+            this.sandboxPO.getFieldInput('node.fontSize')
+                .clear()
+                .type('14');
+        });
+
+        it('all nodes labels should have the selected fontSize', function () {
+            nodes.forEach(function (n) {
+                const nodePO = new NodePO(n);
+
+                nodePO.getFontSize().should('eq', '14');
+            });
+        });
+    });
+
+    describe('when toggling off render label', function () {
+        beforeEach(function () {
+            // scroll down to node.renderLabel config & click
+            cy.contains('node.renderLabel').scrollIntoView();
+            this.sandboxPO.getFieldInput('node.renderLabel').click();
+        });
+
+        it('all node labels should disappear', function () {
+            nodes.forEach(n => {
+                const nodePO = new NodePO(n);
+
+                nodePO.getLabel().should('not.be.visible');
+            });
+        });
+    });
+});

cypress/plugins/index.js

@@ -0,0 +1,23 @@
+// ***********************************************************
+// 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 webpack = require('@cypress/webpack-preprocessor');
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  const options = webpack.defaultOptions;
+  options.entry = ['babel-polifyll'];
+  options.webpackOptions.module.rules[0].test = '/\.spec.js$/';
+
+  on('file:preprocessor', webpack(options));
+}

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) => { ... })