new demo site with integrated capture and graph/download, plus Cypress tests

.travis.yml

@@ -1,16 +1,28 @@
 language: node_js
 node_js:
-  - '8'
-before_script: grunt build
-script: grunt jasmine
-before_install:
-  - npm install -g grunt-cli bower
-  - bower install
+  - '12'
+cache:
+  # Caches $HOME/.npm when npm ci is default script command
+  # Caches node_modules in all other cases
+  npm: true
+  directories:
+    # we also need to cache folder with Cypress binary
+    - ~/.cache
+install:
+  - npm ci
+before_script:
+  - grunt build
+  - node_modules/http-server/bin/http-server &
+script:
+  - $(npm bin)/cypress run --record
+  - grunt jasmine
 env:
- - CXX=g++-4.8
+  - CXX=g++-4.8
 addons:
- apt:
-  sources:
-   - ubuntu-toolchain-r-test
-  packages:
-   - g++-4.8
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-4.8
+      # Ubuntu 16+ does not install this dependency by default, so we need to install it ourselves
+      - libgconf-2-4

Gruntfile.js

@@ -64,10 +64,10 @@ module.exports = function(grunt) {
               specs: 'spec/javascripts/*spec.js',
               vendor: [
                 'node_modules/jquery/dist/jquery.min.js',
-                'bower_components/d3/d3.js',
-                'bower_components/nvd3/build/nv.d3.js',
-                'bower_components/bootstrap-css/js/bootstrap.min.js',
-                'bower_components/moment/moment.js',
+                'node_modules/d3/d3.js',
+                'node_modules/nvd3/build/nv.d3.js',
+                'node_modules/bootstrap/dist/js/bootstrap.min.js',
+                'node_modules/moment/moment.js',
                 'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
                 'node_modules/jasmine-ajax/lib/mock-ajax.js',
                 'spec/javascripts/helpers/test_responses.js'

cypress.json

@@ -0,0 +1,3 @@
+{
+  "projectId": "128076ed-9868-4e98-9cef-98dd8b705d75"
+}

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"
+}

cypress/integration/spectral-workbench-demo.spec.js

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+
+context('Actions', () => {
+
+  beforeEach(() => {
+    cy.visit('http://127.0.0.1:8080/examples/new-capture/')
+  })
+
+
+  it('It reach the default landing page', () => {
+    cy.get('#landing-page-content').contains('Spectral WorkBench');
+    cy.get('#landing-page-content').contains('What is Spectral Workbench?');
+  })
+
+  it('The header navigation stepper is present and it is in the correct order', () => {
+    cy.get('.bs-stepper-header')
+    cy.get('.bs-stepper-header>div').eq(0).contains('Home Page')
+    cy.get('.bs-stepper-header>div').eq(2).contains('Settings')
+    cy.get('.bs-stepper-header>div').eq(4).contains('Capture')
+    cy.get('.bs-stepper-header>div').eq(6).contains('Plotting')
+  });
+
+  it('The default Home page step should be highlighted but not the rest', () => {
+    cy.get('.bs-stepper-header')
+    cy.get('.bs-stepper-header>div').eq(0).should('have.class', 'active')
+    cy.get('.bs-stepper-header>div').eq(2).not('have.class', 'active')
+    cy.get('.bs-stepper-header>div').eq(4).not('have.class', 'active')
+    cy.get('.bs-stepper-header>div').eq(6).not('have.class', 'active')
+  });
+
+
+})

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <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)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

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

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')

dist/spectral-workbench.js

@@ -5371,29 +5371,37 @@ SpectralWorkbench.Graph = Class.extend({
       d3.selectAll('g.nv-focus g.nv-line > g > g.nv-groups g') 
         //.addClass('main-line') // we should do this (or the d3 equiv.) for later selections. Or if nvd3 offers a ready-made selection
         .attr("id", function(datum, index) {
-          var id = d3.select('svg').data()[0][index].id; // this is the real d3 DOM-stored data
-          return 'spectrum-line-' + id;
+          if (index < 4) {
+            var id = d3.select('svg').data()[0][index].id; // this is the real d3 DOM-stored data
+            return 'spectrum-line-' + id;
+          }
         });
 
       // zoom graph lines
       d3.selectAll('g.nv-context g.nv-line > g > g.nv-groups g') 
         .attr("id", function(datum, index) {
-          var id = d3.select('svg').data()[0][index].id; // this is the real d3 DOM-stored data
-          return 'spectrum-line-' + id;
+          if (index < 4) {
+            var id = d3.select('svg').data()[0][index].id; // this is the real d3 DOM-stored data
+            return 'spectrum-line-' + id;
+          }
         });
 
       // graph line hover circles for main graph lines
       d3.selectAll('g.nv-focus g.nv-scatterWrap g.nv-groups g') 
         .attr("id", function(datum, index) {
-          var id = d3.select('svg').data()[0][index].id; // this is the real d3 DOM-stored data
-          return 'spectrum-hover-' + id;
+          if (index < 4) {
+            var id = d3.select('svg').data()[0][index].id; // this is the real d3 DOM-stored data
+            return 'spectrum-hover-' + id;
+          }
         });
 
       // graph line hover circles for zoom graph lines
       d3.selectAll('g.nv-context g.nv-scatterWrap g.nv-groups g') 
         .attr("id", function(datum, index) {
-          var id = d3.select('svg').data()[0][index].id; // this is the real d3 DOM-stored data
-          return 'spectrum-hover-' + id;
+          if (index < 4) {
+            var id = d3.select('svg').data()[0][index].id; // this is the real d3 DOM-stored data
+            return 'spectrum-hover-' + id;
+          }
         });
 
       if (_graph.dataType == "spectrum") {

examples/index.html

@@ -26,8 +26,9 @@
     jQuery(document).ready(function($) {
 
       var data = {
-        "data": { 
-          "name": "Test spectrum",
+       "id": 9,
+       "title": "Test spectrum",
+       "data": { 
           "lines":[ // as many data points as you like may be entered here:
             {"average":64.3333,"r":69,"g":46,"b":78,"wavelength":269.089},
             {"average":64.3333,"r":70,"g":46,"b":77,"wavelength":270.815},