Merge pull request flowhub#315 from flowhub/tests

Initial test setup

.gitignore

@@ -2,4 +2,5 @@ bower_components/
 node_modules/
 /.idea
 /build
-npm-debug.log
+npm-debug.log
+/spec/*.js

.travis.yml

@@ -4,6 +4,7 @@ node_js:
 - '4.2'
 before_script:
 - npm install -g grunt-cli
+script: grunt crossbrowser
 deploy:
   provider: npm
   email: [email protected]
@@ -12,3 +13,7 @@ deploy:
   on:
     tags: true
     repo: flowhub/the-graph
+env:
+  global:
+  - secure: L+J5DJ4NL9pThNmt9L5QMy4YL3gvkUG9cyp7c+0PEaK+EoN8uFGgFIWpgFpTHoS7F9FD913EFjljoeOWWHhl6H3caQg4aYdNw5yqxQAitRmzY1i7NgO/gMo1KaC7tgTGh8/bWCxoYOzWf41o3T068hI6JR1V+IfM05oM97ZwU+o=
+  - secure: SmafZtuZT2C+nbg+HnEG1jPKP48uKpD7HkcwE+96qc3lotsH4aKFvAoaK8xvf3cE+Yt+fnSWe5I9IY42wH/FRGTm8n2WsSaP4Yb8tpxlqNm9tVuLF4ohUChhzzX6eg9poikASDsaUQy6EazLDwchjwLVwa8wUCnP4U8660mzJJc=

Gruntfile.js

@@ -10,7 +10,8 @@
       scripts: ['Gruntfile.js', 'the-*/*.js', 'the-*/*.html'],
       // elements: ['the-*/*.html'],
       stylus: ['themes/*/*.styl'],
-      css: ['themes/*.css']
+      css: ['themes/*.css'],
+      tests: ['spec/*.coffee', 'spec/runner.html']
     };
 
     var glob = require('glob');
@@ -35,6 +36,18 @@
           command: 'node ./scripts/build-font-awesome-javascript.js'
         }
       },
+      coffee: {
+        specs: {
+          options: {
+            bare: true
+          },
+          expand: true,
+          cwd: 'spec',
+          src: ['**.coffee'],
+          dest: 'spec',
+          ext: '.js'
+        }
+      },
       browserify: {
         libs: {
           files: {
@@ -92,6 +105,31 @@
           options: {
             livereload: true
           }
+        },
+        tests: {
+          files: sources.tests,
+          tasks: ['coffee'],
+          options: {
+            livereload: false
+          }
+        },
+      },
+      'saucelabs-mocha': {
+        all: {
+          options: {
+            urls: ['http://127.0.0.1:3000/spec/runner.html'],
+            browsers: [
+              {
+                browserName: 'googlechrome',
+                version: '39'
+              }
+            ],
+            build: process.env.TRAVIS_JOB_ID,
+            testname: 'the-graph browser tests',
+            tunnelTimeout: 5,
+            concurrency: 1,
+            detailedError: true
+          }
         }
       }
     });
@@ -101,11 +139,14 @@
     this.loadNpmTasks('grunt-contrib-watch');
     this.loadNpmTasks('grunt-contrib-jshint');
     this.loadNpmTasks('grunt-contrib-connect');
+    this.loadNpmTasks('grunt-contrib-coffee');
     this.loadNpmTasks('grunt-browserify');
+    this.loadNpmTasks('grunt-saucelabs');
 
-    this.registerTask('dev', ['test', 'connect:server', 'watch']);
+    this.registerTask('dev', ['test', 'watch']);
     this.registerTask('build', ['bower-install-simple', 'exec:build_stylus', 'exec:build_fa', 'browserify:libs']);
-    this.registerTask('test', ['jshint:all', 'build']);
+    this.registerTask('test', ['jshint:all', 'build', 'coffee', 'connect:server']);
+    this.registerTask('crossbrowser', ['test', 'saucelabs-mocha']);
     this.registerTask('default', ['test']);
   };
 

package.json

@@ -17,15 +17,20 @@
   },
   "devDependencies": {
     "bower": "^1.7.9",
+    "chai": "^3.5.0",
+    "coffee-script": "^1.12.2",
     "coffeeify": "^2.0.1",
     "glob": "^7.0.6",
     "grunt": "~1.0.1",
     "grunt-bower-install-simple": "^1.2.3",
     "grunt-browserify": "~5.0.0",
-    "grunt-contrib-connect": "~1.0.2",
+    "grunt-contrib-coffee": "^1.0.0",
+    "grunt-contrib-connect": "^1.0.2",
     "grunt-contrib-jshint": "~1.0.0",
     "grunt-contrib-watch": "~1.0.0",
     "grunt-exec": "~1.0.1",
+    "grunt-saucelabs": "^9.0.0",
+    "mocha": "^3.2.0",
     "stylus": "~0.54.5"
   },
   "scripts": {

spec/basics.coffee

@@ -0,0 +1,58 @@
+
+chai = window.chai or require 'chai'
+
+parseFBP = (fbpString, callback) ->
+  fbpGraph = window.fbpGraph or require 'fbp-graph'
+  fbpGraph.graph.loadFBP fbpString, (err, n) ->
+    if err instanceof fbpGraph.Graph
+      # legacy NoFlo, no error argument
+      [err, n] = [null, err]
+    return callback err if err
+    return callback null, n.toJSON()
+
+findSvgRoot = (editor) ->
+  graph = editor.$.graph
+  container = graph.$.svgcontainer
+  apps = container.getElementsByClassName('app-svg')
+  console.log 'g', apps
+  return apps[0]
+
+waitReady = (editor, callback) ->
+  setTimeout callback, 1000 # HACK
+
+describeRender = (editor) ->
+  svgRoot = findSvgRoot editor
+  d =
+    nodes: svgRoot.getElementsByClassName 'node'
+    edges: svgRoot.getElementsByClassName 'edge'
+    initials: svgRoot.getElementsByClassName 'iip'
+
+describe 'Basics', ->
+
+  editor = null
+  before (done) ->
+    editor = document.getElementById 'editor'
+    chai.expect(editor).to.exist
+    return done()
+
+  after (done) ->
+    return done()
+
+  describe 'loading a simple graph', ->
+    render = null
+    before (done) ->
+      example = "'42' -> CONFIG foo(Foo) OUT -> IN bar(Bar)"
+      parseFBP example, (err, graph) ->
+        chai.expect(err).to.not.exist
+        editor.graph = graph
+        waitReady editor, (err) ->
+          return err if err
+          render = describeRender editor
+          return done()
+
+    it 'should render 2 nodes', ->
+      chai.expect(render.nodes).to.have.length 2
+    it 'should render 1 edge', ->
+      chai.expect(render.edges).to.have.length 1
+    it 'should render 1 IIP', ->
+      chai.expect(render.initials).to.have.length 1

spec/editing.coffee

@@ -0,0 +1,4 @@
+
+describe 'Editing ', ->
+  describe 'adding a node', ->
+    it 'should work'

spec/graphchanges.coffee

@@ -0,0 +1,19 @@
+# Changing the graph programatically,
+# verifying that editor updates correctly
+describe 'Graph changes', ->
+  describe 'adding node', ->
+    it 'should update editor'
+  describe 'removing node', ->
+    it 'should update editor'
+  describe 'adding edge', ->
+    it 'should update editor'
+  describe 'removing edge', ->
+    it 'should update editor'
+  describe 'adding inport', ->
+    it 'should update editor'
+  describe 'removing inport', ->
+    it 'should update editor'
+  describe 'adding outport', ->
+    it 'should update editor'
+  describe 'removing outport', ->
+    it 'should update editor'

spec/runmocha.coffee

@@ -0,0 +1,23 @@
+
+runner = mocha.run()
+failedTests = []
+
+flattenTitles = (test) ->
+  titles = []
+  while test.parent.title
+    titles.push test.parent.title
+    test = test.parent
+  return titles.reverse()
+
+runner.on 'fail', (test, err) ->
+  info =
+    name: test.title
+    result: false
+    message: err.message
+    stack: err.stack
+    titles: flattenTitles test
+  failedTests.push info
+
+runner.on 'end', ->
+  window.mochaResults = runner.stats
+  window.mochaResults.reports = failedTests

spec/runner.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>the-graph browser tests</title>
+    <link rel="stylesheet" href="../node_modules/mocha/mocha.css">
+
+    <!-- Bower Libraries -->
+    <script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
+    <script src="../bower_components/react/react-with-addons.js"></script>
+    <script src="../bower_components/react/react-dom.js"></script>
+    <script src="../bower_components/klayjs-noflo/klay-noflo.js"></script>
+    <script src="../bower_components/hammerjs/hammer.min.js"></script>
+    <script src="../bower_components/ease-djdeath/index.js"></script>
+    <script src="../bower_components/react.animate-djdeath/react.animate.js"></script>
+
+    <!-- Browserify Libraries -->
+    <script src="../build/the-graph.js"></script>
+
+    <!-- Custom elements -->
+    <link rel="import" href="../bower_components/polymer/polymer.html">
+    <link rel="import" href="../the-graph-editor/the-graph-editor.html">
+
+    <style type="text/css">
+      #editor {
+        width: 400px;
+        height: 300px;
+        position: absolute;
+        top: 0;
+        right: 400px;
+        border: none;
+      }
+    </style>
+    <script src="../node_modules/mocha/mocha.js"></script>
+    <script src="../node_modules/chai/chai.js"></script>
+    <script>
+      if (window.initMochaPhantomJS) {
+        window.initMochaPhantomJS();
+      }
+      mocha.setup('bdd');
+    </script>
+  </head>
+  <body>
+    <div id="mocha"></div>
+
+    <!-- Stuff under test -->
+   <the-graph-editor id="editor"
+      width="400" height="300"
+      grid="72"
+      snap="36"
+      theme="dark">
+    </the-graph-editor>
+
+    <the-graph-nav id="nav" width="216" height="162"></the-graph-nav>
+
+    <script src="basics.js"></script>
+    <script src="editing.js"></script>
+    <script src="graphchanges.js"></script>
+    <script src="runmocha.js"></script>
+  </body>
+</html>