Tests now run in browser

JAW-DROP · Apr 6, 2015 · 792c90c · 792c90c
1 parent 4e5f4ad
commit 792c90c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-bower_components
+bower_components
+test/test.browserify.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -10,6 +10,7 @@ var sourcemaps = require('gulp-sourcemaps');
 var stylish = require('jshint-stylish');
 var uglify = require('gulp-uglify');
 var buffer = require('vinyl-buffer');
+var open = require('open');
 
 var production = process.env.NODE_ENV == 'production';
 
@@ -39,10 +40,23 @@ gulp.task('browserify', ['jshint'], function() {
     .pipe(gulp.dest('dist'));
 });
 
+gulp.task('browser-test', ['jshint'], function() {
+  var testBundler = browserify('./test/test.js', {
+    standalone: 'Trianglify',
+    cache: {},
+    packageCache: {},
+    fullPaths: true
+  });
+
+  return testBundler.bundle()
+  .pipe(source('test.browserify.js'))
+  .pipe(gulp.dest('test'));
+});
+
 // Check source for syntax errors and style issues
 // TODO notifications. Probably need to look into switching to gulp-notify
 gulp.task('jshint', function() {
-  return gulp.src(['lib/**/*.js', 'test/**/*.js', 'gulpfile.js'])
+  return gulp.src(['lib/**/*.js', 'test/**/*.js', '!test/test.browserify.js', 'gulpfile.js'])
     .pipe(jshint())
     .pipe(jshint.reporter('jshint-stylish'))
     .pipe(jshint.reporter('fail'));

diff --git a/test/test.html b/test/test.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Trianglify tests</title>
+  <link rel="stylesheet" media="all" href="../node_modules/mocha/mocha.css">
+  <style type="text/css">
+  #mocha {
+  	max-width: 800px;
+  	margin: 60px auto;
+  }
+  </style>
+</head>
+<body>
+	<div id="mocha"></div>
+	<script src="../node_modules/mocha/mocha.js"></script>
+	<script>mocha.setup('bdd');</script>
+	<script src="test.browserify.js"></script>
+	<script>mocha.run();</script>
+</body>
+</html>
diff --git a/test/test.js b/test/test.js
@@ -1,8 +1,10 @@
-var should = require('chai').should();
-var expect = require('chai').expect;
+var chai = require('chai');
+var should = chai.should();
+var expect = chai.expect;
 var doc = (typeof document !== "undefined") ? document : require('jsdom').jsdom('<html/>');
 
 var Trianglify = require('../lib/trianglify');
+module.exports = Trianglify;
 var Pattern = require('../lib/pattern');
 
 describe('Trianglify', function(){
@@ -47,13 +49,13 @@ describe('Trianglify', function(){
   });
 
   it('should behave as a pure function when given a seed for the RNG', function() {
-    var svg1 = Trianglify({seed: 'foobar', x_colors: 'random', y_colors: 'random'}).svg().outerHTML;
-    var svg2 = Trianglify({seed: 'foobar', x_colors: 'random', y_colors: 'random'}).svg().outerHTML;
-    svg1.should.equal(svg2);
+    var svg1 = Trianglify({seed: 'foobar', x_colors: 'random', y_colors: 'random'}).svg();
+    var svg2 = Trianglify({seed: 'foobar', x_colors: 'random', y_colors: 'random'}).svg();
+    expect(svg1.isEqualNode(svg2)).to.equal(true);
   });
 
   it('should seed with random data by default', function() {
-    Trianglify().svg().outerHTML.should.not.equal(Trianglify().svg().outerHTML);
+    expect(Trianglify().svg().isEqualNode(Trianglify().svg())).to.equal(false);
   });
 
   it('should support custom color functions', function() {
@@ -75,7 +77,7 @@ describe('Trianglify', function(){
   it('should match_x when asked to', function() {
     var a = Trianglify({x_colors: 'YlGn', y_colors: 'match_x', height: 100, width: 100, cell_size: 20, seed: 'foo'});
     var b = Trianglify({x_colors: 'YlGn', y_colors: 'YlGn', height: 100, width: 100, cell_size: 20, seed: 'foo'});
-    a.svg().outerHTML.should.equal(b.svg().outerHTML);
+    a.svg().isEqualNode(b.svg()).should.equal(true);
   });
 
   it('should draw from a random palette if provided', function() {
@@ -93,13 +95,13 @@ describe('Pattern', function() {
   describe('#svg', function() {
     //Not 100% sure how to test this
     it('should return an SVG DOM node', function() {
-      Trianglify().svg().tagName.should.eql('svg');
+      Trianglify().svg().tagName.toLowerCase().should.eql('svg');
     });
   });
 
   describe('#canvas', function() {
     it('should return a canvas DOM node', function() {
-      Trianglify().canvas().tagName.should.eql('canvas');
+      Trianglify().canvas().tagName.toLowerCase().should.eql('canvas');
     });
   });