Headless Browser testing using tape-run

.travis.yml

@@ -3,12 +3,11 @@ node_js:
   - '4'
   - '5'
   - '6'
-  - '7'
-  - '8'
+  - '7' # Node.js 7 is most stable version
 env:
   - CXX=g++-4.8
 before_script:
-  - npm install grunt-cli -g
+  - npm install grunt-cli -g # for "grunt build"
 script:
   - npm test
   - grunt build
@@ -18,3 +17,8 @@ addons:
       - ubuntu-toolchain-r-test
     packages:
       - g++-4.8
+      - xvfb # for tape-run
+install:
+  - export DISPLAY=':99.0' # for tape-run
+  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 & # for tape-run
+  - npm install # for tape-run

package.json

@@ -4,7 +4,7 @@
   "description": "A modular JavaScript image manipulation library modeled on a storyboard.",
   "main": "dist/image-sequencer.js",
   "scripts": {
-    "test": "tape test/*.js"
+    "test": "tape test/*.js | tap-spec; browserify test/image-sequencer.js test/chain.js | tape-run --render=\"tap-spec\""
   },
   "repository": {
     "type": "git",
@@ -39,7 +39,9 @@
     "matchdep": "^0.3.0",
     "plotly.js": "~1.21.2",
     "save-pixels": "~2.3.4",
-    "tape": ">=4.7.0"
+    "tap-spec": "^4.1.1",
+    "tape": ">=4.7.0",
+    "tape-run": "^3.0.0"
   },
   "homepage": "https://github.com/publiclab/image-sequencer"
 }

test/chain.js

@@ -13,64 +13,64 @@ var red = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQ
 
 test('loadImages/loadImage has a name generator.', function (t){
   sequencer.loadImage(red);
-  t.equal(sequencer.images.image1.steps.length, 1, "It Does!");
+  t.equal(sequencer.images.image1.steps.length, 1, "Initial Step Created");
   t.end();
 });
 
 test('loadImages/loadImage returns a wrapper.', function (t){
   var returnval = sequencer.loadImage(red);
-  t.equal(returnval.name,"ImageSequencer Wrapper", "It Does!");
-  t.equal(returnval.images[0],"image2");
+  t.equal(returnval.name,"ImageSequencer Wrapper", "Wrapper is returned");
+  t.equal(returnval.images[0],"image2","Image scope is defined");
   t.end();
 });
 
 test('addSteps is two-way chainable.', function (t){
   var returnval = sequencer.loadImage(red).addSteps('invert');
-  t.equal(returnval.name,"ImageSequencer Wrapper");
-  t.equal(returnval.images[0],"image3");
-  t.equal(sequencer.images.image3.steps.length,2);
-  t.equal(sequencer.images.image3.steps[1].options.name,"invert");
-  t.equal(sequencer.images.image2.steps.length,1);
-  t.equal(sequencer.images.image1.steps.length,1);
+  t.equal(returnval.name,"ImageSequencer Wrapper", "Wrapper is returned");
+  t.equal(returnval.images[0],"image3","Image scope is defined");
+  t.equal(sequencer.images.image3.steps.length,2,"Loaded image is affected");
+  t.equal(sequencer.images.image3.steps[1].options.name,"invert","Correct Step Added");
+  t.equal(sequencer.images.image2.steps.length,1,"Other images are not affected");
+  t.equal(sequencer.images.image1.steps.length,1,"Other images are not affected");
   t.end();
 });
 
 test('addSteps is two-way chainable without loadImages.', function (t){
   var returnval = sequencer.addSteps("image3","ndvi-red");
-  t.equal(returnval.name,"ImageSequencer");
-  t.equal(sequencer.images.image3.steps.length,3);
-  t.equal(sequencer.images.image3.steps[2].options.name,"ndvi-red");
+  t.equal(returnval.name,"ImageSequencer","Sequencer is returned");
+  t.equal(sequencer.images.image3.steps.length,3,"Step length increased");
+  t.equal(sequencer.images.image3.steps[2].options.name,"ndvi-red","Correct Step Added");
   t.end();
 });
 
 test('removeSteps is two-way chainable.', function (t){
   var returnval = sequencer.loadImage(red).addSteps('invert').removeSteps(1);
-  t.equal(returnval.name,"ImageSequencer Wrapper");
-  t.equal(returnval.images[0],"image4");
+  t.equal(returnval.name,"ImageSequencer Wrapper", "Wrapper is returned");
+  t.equal(returnval.images[0],"image4","Image scope is defined");
   t.equal(sequencer.images.image4.steps.length,1);
   t.end();
 });
 
 test('removeSteps is two-way chainable without loadImages.', function (t){
   var returnval = sequencer.removeSteps("image3",1);
-  t.equal(returnval.name,"ImageSequencer");
+  t.equal(returnval.name,"ImageSequencer","Sequencer is returned");
   t.equal(sequencer.images.image3.steps.length,2);
   t.end();
 });
 
 test('insertSteps is two-way chainable.', function (t){
   var returnval = sequencer.loadImage(red).insertSteps(1,'invert');
-  t.equal(returnval.name,"ImageSequencer Wrapper");
-  t.equal(returnval.images[0],"image5");
+  t.equal(returnval.name,"ImageSequencer Wrapper","Wrapper is returned");
+  t.equal(returnval.images[0],"image5","Image scope is defined");
   t.equal(sequencer.images.image5.steps.length,2);
-  t.equal(sequencer.images.image5.steps[1].options.name,"invert");
+  t.equal(sequencer.images.image5.steps[1].options.name,"invert","Correct Step Inserrted");
   t.end();
 });
 
 test('insertSteps is two-way chainable without loadImages.', function (t){
   var returnval = sequencer.insertSteps("image5",1,"ndvi-red");
-  t.equal(returnval.name,"ImageSequencer");
+  t.equal(returnval.name,"ImageSequencer","Sequencer is returned");
   t.equal(sequencer.images.image5.steps.length,3);
-  t.equal(sequencer.images.image5.steps[1].options.name,"ndvi-red");
+  t.equal(sequencer.images.image5.steps[1].options.name,"ndvi-red","Correct Step Inserrted");
   t.end();
 });

test/image-manip.js

@@ -9,20 +9,17 @@ require('../src/ImageSequencer.js');
 
 var sequencer = ImageSequencer({ ui: "none" });
 var image = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";
-sequencer.loadImages({images:{
-  test1: image,
-  test2: image
-}, callback:function(){}});
+sequencer.loadImages(image);
 
-sequencer.addSteps("test1", ['do-nothing-pix','invert','invert']);
+sequencer.addSteps(['do-nothing-pix','invert','invert']);
 sequencer.run();
 
 test("Inverted image isn't identical", function (t) {
-  t.notEqual(sequencer.images.test1.steps[1].output.src, sequencer.images.test1.steps[2].output.src);
+  t.notEqual(sequencer.images.image1.steps[1].output.src, sequencer.images.image1.steps[2].output.src);
   t.end();
 });
 
 test("Twice inverted image is identical to original image", function (t) {
-  t.equal(sequencer.images.test1.steps[1].output.src, sequencer.images.test1.steps[3].output.src);
+  t.equal(sequencer.images.image1.steps[1].output.src, sequencer.images.image1.steps[3].output.src);
   t.end();
 });

test/image-sequencer.js

@@ -12,126 +12,129 @@ var sequencer = ImageSequencer({ ui: "none" });
 var red = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";
 
 test('Image Sequencer has tests', function (t) {
-  t.equal(true, true);
+  t.equal(true, true, "Initial Test");
   t.end();
 });
 
 test('loadImages loads a DataURL image and creates a step.', function (t){
   sequencer.loadImages('test',red);
-  t.equal(sequencer.images.test.steps.length, 1, "It Does!");
+  t.equal(sequencer.images.test.steps.length, 1, "Initial Step Created");
+  t.equal(typeof(sequencer.images.test.steps[0].output.src), "string", "Initial output exists");
   t.end();
 });
 
 test('loadImages loads a PATH image and creates a step. (NodeJS)', function (t){
   if(sequencer.options.inBrowser){
-    t.equal("not applicable","not applicable");
+    t.equal("not applicable","not applicable","Not applicable for Browser");
     t.end();
   }
   else {
     sequencer.loadImages(red);
-    t.equal(sequencer.images.test.steps.length, 1, "It Does!");
+    t.equal(sequencer.images.image1.steps.length, 1, "Initial Step Created");
+    t.equal(typeof(sequencer.images.image1.steps[0].output.src), "string", "Initial output exists");
     t.end();
   }
 });
 
 test('loadImage works too.', function (t){
   sequencer.loadImage('test2',red);
-  t.equal(sequencer.images.test2.steps.length, 1, "It Does!");
+  t.equal(sequencer.images.test2.steps.length, 1, "Initial Step Created");
+  t.equal(typeof(sequencer.images.test2.steps[0].output.src), "string", "Initial output exists");
   t.end();
 });
 
 test('addSteps("image","name") adds a step', function (t) {
   sequencer.addSteps('test','do-nothing');
-  t.equal(sequencer.images.test.steps[1].options.name, "do-nothing");
-  t.equal(sequencer.images.test.steps.length, 2, "It Does!")
+  t.equal(sequencer.images.test.steps.length, 2, "Length of steps increased")
+  t.equal(sequencer.images.test.steps[1].options.name, "do-nothing", "Correct Step Added");
   t.end();
 });
 
 test('addSteps("name") adds a step', function (t) {
   sequencer.addSteps('do-nothing');
-  t.equal(sequencer.images.test.steps[2].options.name, "do-nothing");
-  t.equal(sequencer.images.test.steps.length, 3, "It Does!")
+  t.equal(sequencer.images.test.steps.length, 3, "Length of steps increased");
+  t.equal(sequencer.images.test.steps[2].options.name, "do-nothing", "Correct Step Added");
   t.end();
 });
 
 test('addSteps(["name"]) adds a step', function (t) {
   sequencer.addSteps(['do-nothing','do-nothing-pix']);
-  t.equal(sequencer.images.test.steps[3].options.name, "do-nothing");
-  t.equal(sequencer.images.test.steps[4].options.name, "do-nothing-pix");
-  t.equal(sequencer.images.test.steps.length, 5, "It Does!")
+  t.equal(sequencer.images.test.steps.length, 5, "Length of steps increased by two")
+  t.equal(sequencer.images.test.steps[3].options.name, "do-nothing", "Correct Step Added");
+  t.equal(sequencer.images.test.steps[4].options.name, "do-nothing-pix", "Correct Step Added");
   t.end();
 });
 
 test('addSteps("name",o) adds a step', function (t) {
   sequencer.addSteps('do-nothing',{});
-  t.equal(sequencer.images.test.steps[5].options.name, "do-nothing");
-  t.equal(sequencer.images.test.steps.length, 6, "It Does!")
+  t.equal(sequencer.images.test.steps.length, 6, "Length of steps increased");
+  t.equal(sequencer.images.test.steps[5].options.name, "do-nothing", "Correct Step Added");
   t.end();
 });
 
 test('addSteps("image","name",o) adds a step', function (t) {
   sequencer.addSteps('test','do-nothing',{});
-  t.equal(sequencer.images.test.steps[6].options.name, "do-nothing");
-  t.equal(sequencer.images.test.steps.length, 7, "It Does!")
+  t.equal(sequencer.images.test.steps.length, 7, "Length of steps increased");
+  t.equal(sequencer.images.test.steps[6].options.name, "do-nothing", "Correct Step Added");
   t.end();
 });
 
 test('removeSteps("image",position) removes a step', function (t) {
   sequencer.removeSteps('test',1);
-  t.equal(sequencer.images.test.steps.length, 6, "It Does!");
+  t.equal(sequencer.images.test.steps.length, 6, "Length of steps reduced");
   t.end();
 });
 
 test('removeSteps({image: [positions]}) removes steps', function (t) {
   sequencer.removeSteps('test',[1,2]);
-  t.equal(sequencer.images.test.steps.length, 4, "It Does!");
+  t.equal(sequencer.images.test.steps.length, 4, "Length of steps reduced");
   t.end();
 });
 
 test('removeSteps(position) removes steps', function (t) {
   sequencer.removeSteps([1,2]);
-  t.equal(sequencer.images.test.steps.length, 2, "It Does!");
+  t.equal(sequencer.images.test.steps.length, 2, "Length of steps reduced");
   t.end();
 });
 
 test('insertSteps("image",position,"module",options) inserts a step', function (t) {
   sequencer.insertSteps('test',1,'do-nothing',{});
-  t.equal(sequencer.images.test.steps[1].options.name, "do-nothing");
-  t.equal(sequencer.images.test.steps.length, 3, "It Does!");
+  t.equal(sequencer.images.test.steps.length, 3, "Length of Steps increased");
+  t.equal(sequencer.images.test.steps[1].options.name, "do-nothing", "Correct Step Inserted");
   t.end();
 });
 
 test('insertSteps("image",position,"module") inserts a step', function (t) {
   sequencer.insertSteps('test',1,'do-nothing');
-  t.equal(sequencer.images.test.steps[1].options.name, "do-nothing");
-  t.equal(sequencer.images.test.steps.length, 4, "It Does!");
+  t.equal(sequencer.images.test.steps.length, 4, "Length of Steps increased");
+  t.equal(sequencer.images.test.steps[1].options.name, "do-nothing", "Correct Step Inserted");
   t.end();
 });
 
 test('insertSteps(position,"module") inserts a step', function (t) {
   sequencer.insertSteps(1,'do-nothing');
-  t.equal(sequencer.images.test.steps[1].options.name, "do-nothing");
-  t.equal(sequencer.images.test.steps.length, 5, "It Does!");
+  t.equal(sequencer.images.test.steps.length, 5, "Length of Steps increased");
+  t.equal(sequencer.images.test.steps[1].options.name, "do-nothing", "Correct Step Inserted");
   t.end();
 });
 
 test('insertSteps({image: {index: index, name: "module", o: options} }) inserts a step', function (t) {
   sequencer.insertSteps({test: {index:1, name:'do-nothing', o:{} } });
-  t.equal(sequencer.images.test.steps[1].options.name, "do-nothing");
-  t.equal(sequencer.images.test.steps.length, 6, "It Does!");
+  t.equal(sequencer.images.test.steps.length, 6, "Length of Steps increased");
+  t.equal(sequencer.images.test.steps[1].options.name, "do-nothing", "Correct Step Inserted");
   t.end();
 });
 
 test('run() runs the sequencer and returns output to callback', function (t) {
   sequencer.run('test',function(out){
-    t.equal(typeof(sequencer.images.test.steps[sequencer.images.test.steps.length - 1].output), "object", "It Does!");
-    t.equal(out,sequencer.images.test.steps[sequencer.images.test.steps.length - 1].output.src, "It Does!");
+    t.equal(typeof(sequencer.images.test.steps[sequencer.images.test.steps.length - 1].output), "object", "Output is Generated");
+    t.equal(out,sequencer.images.test.steps[sequencer.images.test.steps.length - 1].output.src, "Output callback works");
   });
   t.end();
 });
 
 test('replaceImage returns false in NodeJS', function (t) {
-  var returnvalue = sequencer.replaceImage("#selector","test");
-  t.equal(returnvalue,false);
+  var returnvalue = (sequencer.options.inBrowser)?false:sequencer.replaceImage("#selector","test");
+  t.equal(returnvalue,false,"It does.");
   t.end();
 });