Replace karma with jsdom + mocha + chai

* Also a bit refactoring for better testability

package.json

@@ -9,7 +9,7 @@
     "prepublish": "bower install",
     "start": "gulp",
     "build": "gulp build",
-    "test": "karma start test/karma.conf.js"
+    "test": "mocha src/**/__tests__/*.js --compilers js:babel/register --require test/test-helper"
   },
   "keywords": [
     "gulp",
@@ -19,10 +19,12 @@
     "lodash": "^3.9.1"
   },
   "devDependencies": {
+    "babel": "^5.6.14",
     "babelify": "^6.1.1",
     "bower": "~1.3.5",
     "browser-sync": "^2.7.2",
     "browserify": "^10.2.1",
+    "chai": "^3.0.0",
     "deamdify": "^0.1.1",
     "debowerify": "~0.9.1",
     "gulp": "~3.8.1",
@@ -36,10 +38,8 @@
     "gulp-stylus": "~2.0.0",
     "gulp-uglify": "~1.0.1",
     "gulp-util": "~3.0.1",
-    "karma": "~0.12.21",
-    "karma-chrome-launcher": "~0.1.4",
-    "karma-cli": "0.0.4",
-    "karma-jasmine": "~0.2.2",
+    "jsdom": "^5.6.0",
+    "mocha": "^2.2.5",
     "node-notifier": "^4.2.1",
     "rimraf": "^2.3.4",
     "vinyl-source-stream": "~1.0.0",

src/js/main.js

@@ -1,33 +1,10 @@
 'use strict';
 
-import {partialRight, invoke} from 'lodash';
+import {getCommits, getRepo} from './services/github';
+import {render} from './utils/renderer';
 
-Promise.all([
-  fetch('https://api.github.com/repos/leonidas/gulp-project-template'),
-  fetch('https://api.github.com/repos/leonidas/gulp-project-template/commits')
-])
-.then(partialRight(invoke, 'json'))
-.then(Promise.all.bind(Promise))
-.then(data => {
-
-  const [repository, commits] = data;
-  const {html_url, description, full_name} = repository;
-
-  const commitItems = commits.map(item => {
-    const {commit} = item;
-
-    return `
-      <li>
-        <span>${commit.message.replace(/\n/g, '<br />')}<span>
-        <br /><br />
-        <small>${commit.committer.name}</small>
-      </li>`;
-  });
-
-  document.body.innerHTML = `
-    <h1>${description}</h1>
-    <h2><a href="${html_url}">${full_name}</a></h2>
-    <ul>${commitItems.join('')}</ul>
-  `;
+Promise.all([getRepo(), getCommits()])
+.then(([repository, commits]) => {
+  document.body.innerHTML = render(repository, commits);
 });
 

src/js/services/github.js

@@ -0,0 +1,13 @@
+const REPO_URL = 'https://api.github.com/repos/leonidas/gulp-project-template';
+
+export function getRepo() {
+  return fetch(REPO_URL).then(res => res.json());
+}
+
+export function getCommits() {
+  return fetch(`${REPO_URL}/commits`)
+    .then(res => res.json())
+    .then(commits => {
+      return commits.map(({commit}) => commit);
+    });
+}

src/js/utils/__tests__/renderer.js

@@ -0,0 +1,37 @@
+/* globals beforeEach, describe, it */
+import {render} from '../renderer';
+import {expect} from 'chai';
+
+const REPO_DATA = {
+  html_url: 'http://example.com',
+  full_name: 'Gulp project template',
+  description: 'Hello world!'
+};
+
+const COMMITS = [{
+  message: 'initial commit',
+  committer: {
+    name: 'Riku'
+  }
+}, {
+  message: 'final commit',
+  committer: {
+    name: 'L.H.Ahne'
+  }
+}];
+
+describe('View renderer', function() {
+  beforeEach(function() {
+    document.body.innerHTML = render(REPO_DATA, COMMITS);
+  });
+
+  it('should render a title with the string "Hello world!"', function() {
+    const $title = document.getElementsByTagName('h1')[0];
+    expect($title.innerHTML).to.equal('Hello world!');
+  });
+
+  it('should render 2 list items', function() {
+    const $listItems = document.querySelectorAll('li');
+    expect($listItems.length).to.equal(2);
+  });
+});

src/js/utils/renderer.js

@@ -0,0 +1,20 @@
+
+export function render(repository, commits) {
+  const $commits = commits.map(commit => {
+    return `
+      <li>
+        <span>${commit.message.replace(/\n/g, '<br />')}<span>
+        <br /><br />
+        <small>${commit.committer.name}</small>
+      </li>`;
+  });
+
+  return `
+    <h1>${repository.description}</h1>
+    <h2>
+      <a href="${repository.html_url}">${repository.full_name}</a>
+    </h2>
+    <ul>${$commits.join('')}</ul>
+  `;
+}
+

test/karma.conf.js

@@ -1,68 +0,0 @@
-// Karma configuration
-// Generated on Mon Aug 11 2014 13:43:38 GMT+0300 (EEST)
-
-'use strict';
-
-module.exports = function(config) {
-  config.set({
-
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '../',
-
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine'],
-
-
-    // list of files / patterns to load in the browser
-    files: [
-      'test/unit/**/*.coffee'
-    ],
-
-
-    // list of files to exclude
-    exclude: [
-    ],
-
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {
-      '**/*.coffee': ['coffee']
-    },
-
-
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['progress'],
-
-
-    // web server port
-    port: 9876,
-
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-
-    // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: false,
-
-
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Chrome'],
-
-
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
-    singleRun: true
-  });
-};

test/test-helper.js

@@ -0,0 +1,7 @@
+'use strict';
+
+import {jsdom} from 'jsdom';
+
+const document = global.document = jsdom('<html><head></head><body></body></html>');
+const window = global.window = document.defaultView;
+global.navigator = window.navigator = {};

test/unit/exampleSpec.coffee

@@ -1,3 +0,0 @@
-describe 'Example spec', ->
-  it 'should ...', ->
-    expect(true).toBe(true)