Automate client tests with karma

.istanbul.yml

@@ -0,0 +1,2 @@
+reporting:
+  dir: ./coverage/server

.travis.yml

@@ -1,6 +1,12 @@
 language: node_js
 node_js:
   - "node"
+before_install:
+  - export CHROME_BIN=chromium-browser
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
 after_success:
   - istanbul cover ./node_modules/mocha/bin/_mocha
-  - cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
+  - karma start
+  - lcov-result-merger 'coverage/**/lcov.info' 'coverage/fullCoverage.info'
+  - cat ./coverage/fullCoverage.info | ./node_modules/.bin/coveralls

karma.conf.js

@@ -0,0 +1,50 @@
+// Karma configuration
+
+module.exports = function(config) {
+  var configuration = {
+    basePath: '',
+    frameworks: ['mocha'],
+    files: [
+      'teddy.js',
+      'test/models/*.js',
+      'node_modules/chai/chai.js',
+      'node_modules/chai-string/chai-string.js',
+      {pattern: 'test/templates/**/*', included: false},
+      'test/*.js',
+      'test/client.html'
+    ],
+    reporters: ['progress', 'coverage'],
+    port: 8000,
+    proxies: {
+      '/templates/': '/base/test/templates/',
+    },
+    preprocessors: {
+      'teddy.js': ['coverage']
+    },
+    coverageReporter: {
+      type: 'lcov',
+      dir: 'coverage/',
+      subdir: function(browser) {
+        return browser.toLowerCase().split(/[ /-]/)[0];
+      }
+    },
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: false,
+    singleRun: true,
+    browsers: ['Chrome'],
+    customLaunchers: {
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
+    concurrency: 1
+  };
+
+  if (process.env.TRAVIS) {
+    configuration.browsers = ['Chrome_travis_ci'];
+  }
+
+  config.set(configuration);
+};

package.json

@@ -14,14 +14,21 @@
   "dependencies": {
   },
   "devDependencies": {
-    "eslint": "3.13.1",
+    "eslint": "3.19.0",
     "mocha": "3.2.0",
     "chai": "3.5.0",
     "chai-string": "1.3.0",
     "istanbul": "0.4.5",
     "mocha-lcov-reporter": "1.3.0",
-    "coveralls": "2.12.0",
-    "cross-env": "4.0.0"
+    "coveralls": "2.13.0",
+    "cross-env": "4.0.0",
+    "karma": "1.6.0",
+    "karma-cli": "1.0.1",
+    "karma-mocha": "1.3.0",
+    "karma-coverage": "1.1.1",
+    "karma-chrome-launcher": "2.0.0",
+    "karma-coverage-allsources": "0.0.4",
+    "lcov-result-merger": "^1.2.0"
   },
   "eslintConfig": {
     "env": {
@@ -56,7 +63,8 @@
   "scripts": {
     "test": "cross-env NODE_ENV=test mocha --recursive test",
     "eslint": "eslint .",
-    "cover": "cross-env NODE_ENV=cover istanbul cover _mocha --recursive test"
+    "cover": "cross-env NODE_ENV=cover istanbul cover _mocha --recursive test",
+    "karma": "karma start"
   },
   "pre-commit": [
     "test",

test/client.html

@@ -328,13 +328,21 @@ <h2>Warning: these tests can only be run from a web server.</h2>
     <script src='../node_modules/mocha/mocha.js'></script>
     <script src='../node_modules/chai/chai.js'></script>
     <script src='../node_modules/chai-string/chai-string.js'></script>
+
+    <!-- include mocha tests -->
+    <script>mocha.setup('bdd');</script>
+    <script src='conditionals.js'></script>
+    <script src='includes.js'></script>
+    <script src='looping.js'></script>
+    <script src='misc.js'></script>
+
+    <!-- run tests -->
     <script>
       var assert = chai.assert,
           templateList,
           templateLength,
           counter = 0,
           crossOriginError,
-          request,
           i;
 
       templateList = [
@@ -417,7 +425,8 @@ <h2>Warning: these tests can only be run from a web server.</h2>
         'misc/variableObjectProperty.html',
         'misc/emptyModelMarkup.html',
         'misc/infiniteIncludeTemplate.html',
-        'misc/varNotInModel.html'
+        'misc/varNotInModel.html',
+        'misc/templateToMinify.html'
       ];
       templateLength = templateList.length;
 
@@ -438,9 +447,11 @@ <h2>Warning: these tests can only be run from a web server.</h2>
                 if (crossOriginError) {
                   crossOriginError.parentNode.removeChild(crossOriginError);
                 }
+                if (template === 'misc/templateToMinify.html') {
+                  teddy.minify(true);
+                }
                 teddy.templates[template] = teddy.compile(req.response || req.responseText);
-                counter++;
-                if (counter === templateLength) {
+                if (counter++ === templateLength - 1) {
                   mocha.run();
                 }
               }
@@ -449,12 +460,5 @@ <h2>Warning: these tests can only be run from a web server.</h2>
         })(i);
       }
     </script>
-
-    <!-- run tests -->
-    <script>mocha.setup('bdd');</script>
-    <script src='conditionals.js'></script>
-    <script src='includes.js'></script>
-    <script src='looping.js'></script>
-    <script src='misc.js'></script>
   </body>
 </html>

test/conditionals.js

@@ -12,11 +12,13 @@ describe('Conditionals', function() {
   before(function() {
     teddy.setTemplateRoot('test/templates');
     model = makeModel();
-    if (process.env.NODE_ENV === 'test') {
-      teddy.setVerbosity(0);
-    }
-    else if (process.env.NODE_ENV === 'cover') {
-      teddy.setVerbosity(3);
+    if (typeof process === 'object') {
+      if (process.env.NODE_ENV === 'test') {
+        teddy.setVerbosity(0);
+      }
+      else if (process.env.NODE_ENV === 'cover') {
+        teddy.setVerbosity(3);
+      }
     }
   });
 

test/includes.js

@@ -12,11 +12,13 @@ describe('Includes', function() {
   before(function() {
     teddy.setTemplateRoot('test/templates');
     model = makeModel();
-    if (process.env.NODE_ENV === 'test') {
-      teddy.setVerbosity(0);
-    }
-    else if (process.env.NODE_ENV === 'cover') {
-      teddy.setVerbosity(3);
+    if (typeof process === 'object') {
+      if (process.env.NODE_ENV === 'test') {
+        teddy.setVerbosity(0);
+      }
+      else if (process.env.NODE_ENV === 'cover') {
+        teddy.setVerbosity(3);
+      }
     }
   });
 

test/looping.js

@@ -4,19 +4,25 @@ if (typeof module !== 'undefined') {
       assert = chai.assert,
       model,
       makeModel = require('./models/model'),
+      loopMs = 50,
       teddy = require('../teddy');
   chai.use(chaiString);
 }
+else {
+  var loopMs = 400;
+}
 
 describe('Looping', function() {
   before(function() {
     teddy.setTemplateRoot('test/templates');
     model = makeModel();
-    if (process.env.NODE_ENV === 'test') {
-      teddy.setVerbosity(0);
-    }
-    else if (process.env.NODE_ENV === 'cover') {
-      teddy.setVerbosity(3);
+    if (typeof process === 'object') {
+      if (process.env.NODE_ENV === 'test') {
+        teddy.setVerbosity(0);
+      }
+      else if (process.env.NODE_ENV === 'cover') {
+        teddy.setVerbosity(3);
+      }
     }
   });
 
@@ -65,7 +71,7 @@ describe('Looping', function() {
     done();
   });
 
-  it('should loop through same array of 5000 elements in < 50ms during second attempt due to caching (looping/largeDataSet.html)', function(done) {
+  it('should loop through same array of 5000 elements in < ' + loopMs + 'ms during second attempt due to caching (looping/largeDataSet.html)', function(done) {
     var start, end, time;
     start = new Date().getTime();
 
@@ -74,7 +80,7 @@ describe('Looping', function() {
     end = new Date().getTime();
     time = end - start;
 
-    assert.isAtMost(time, 50);
+    assert.isAtMost(time, loopMs);
     done();
   });
 
@@ -92,7 +98,7 @@ describe('Looping', function() {
     done();
   });
 
-  it('should loop through same array of 5000 elements in < 50ms during second attempt due to caching (looping/largeDataSet.html)', function(done) {
+  it('should loop through same array of 5000 elements in < ' + loopMs + 'ms during second attempt due to caching (looping/largeDataSet.html)', function(done) {
     var start, end, time;
     start = new Date().getTime();
 
@@ -101,7 +107,7 @@ describe('Looping', function() {
     end = new Date().getTime();
     time = end - start;
 
-    assert.isAtMost(time, 50);
+    assert.isAtMost(time, loopMs);
     done();
   });
 
@@ -119,7 +125,7 @@ describe('Looping', function() {
     done();
   });
 
-  it('should loop through same array of 5000 elements in < 50ms during second attempt due to caching (looping/largeDataSet.html)', function(done) {
+  it('should loop through same array of 5000 elements in < ' + loopMs + 'ms during second attempt due to caching (looping/largeDataSet.html)', function(done) {
     var start, end, time;
     start = new Date().getTime();
 
@@ -129,7 +135,7 @@ describe('Looping', function() {
     time = end - start;
 
     teddy.cacheRenders(false);
-    assert.isAtMost(time, 50);
+    assert.isAtMost(time, loopMs);
     done();
   });
 

test/misc.js

@@ -4,7 +4,7 @@ if (typeof module !== 'undefined') {
       assert = chai.assert,
       model,
       makeModel = require('./models/model'),
-      verbosity = '',
+      verbosity,
       teddy = require('../teddy');
   chai.use(chaiString);
 }
@@ -13,11 +13,13 @@ describe('Misc', function() {
   before(function() {
     teddy.setTemplateRoot('test/templates');
     model = makeModel();
-    if (process.env.NODE_ENV === 'test') {
-      teddy.setVerbosity(0);
-    }
-    else if (process.env.NODE_ENV === 'cover') {
-      teddy.setVerbosity(3);
+    if (typeof process === 'object') {
+      if (process.env.NODE_ENV === 'test') {
+        teddy.setVerbosity(0);
+      }
+      else if (process.env.NODE_ENV === 'cover') {
+        teddy.setVerbosity(3);
+      }
     }
   });
 
@@ -157,6 +159,7 @@ describe('Misc', function() {
   });
 
   it('should set each verbosity level', function(done) {
+    verbosity = '';
     teddy.setVerbosity();
     verbosity += teddy.params.verbosity + ', ';
     teddy.setVerbosity('none');
@@ -173,18 +176,21 @@ describe('Misc', function() {
     verbosity += teddy.params.verbosity;
 
     assert.equal(verbosity, '1, 0, 0, 2, 2, 3, 3');
-    if (process.env.NODE_ENV === 'test') {
-      teddy.setVerbosity(0);
-    }
-    else if (process.env.NODE_ENV === 'cover') {
-      teddy.setVerbosity(3);
+    verbosity = '';
+    if (typeof process === 'object') {
+      if (process.env.NODE_ENV === 'test') {
+        teddy.setVerbosity(0);
+      }
+      else if (process.env.NODE_ENV === 'cover') {
+        teddy.setVerbosity(3);
+      }
     }
     done();
   });
 
-  it('should minify template with internal minifier (misc/plainHTML.html)', function(done) {
+  it('should minify template with internal minifier (misc/templateToMinify.html)', function(done) {
     teddy.minify(true);
-    assert.equal(teddy.compile('misc/plainHTML.html', model), '<!DOCTYPE html><html lang=\'en\'> <head> <meta charset=\'utf-8\'> <meta name=\'viewport\' content=\'width=device-width,initial-scale=1\'> <meta name=\'format-detection\' content=\'telephone=no\'> <title>Plain HTML</title> <link rel=\'stylesheet\' href=\'/css/styles.css\'> </head> <body> <main> <p>This template contains no teddy tags. Just HTML.</p> </main> <script type=\'text/javascript\' src=\'/js/main.js\'></script> </body></html>');
+    assert.equal(teddy.render('misc/templateToMinify.html', model), '<!DOCTYPE html><html lang=\'en\'> <head> <meta charset=\'utf-8\'> <meta name=\'viewport\' content=\'width=device-width,initial-scale=1\'> <meta name=\'format-detection\' content=\'telephone=no\'> <title>Plain HTML</title> </head> <body> <main> <p>This template contains no teddy tags. Just HTML.</p> </main> </body></html>');
     teddy.minify(false);
     done();
   });

test/templates/misc/templateToMinify.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width,initial-scale=1'>
+    <meta name='format-detection' content='telephone=no'>
+    <title>Plain HTML</title>
+  </head>
+  <body>
+    <main>
+      <p>This template contains no teddy tags. Just HTML.</p>
+    </main>
+  </body>
+</html>