Skill Tree Tour: Detach from module to test

Said before

After nearly half a month of struggle, will fork code read, reconstruct, upgrade version, adjust, add new features, add test, add CI, add share, finally almost finish.

Today, it's about how to do it.

GitHub Project Composition

In the case of previously created lettuce, there are:

• Code Quality (Climate)
• CI status (Travis ci)
• Test Coverage (96%)
• Automated testing (NPM test)
• Document

According to the web Developer Roadmap, we also need to have:

• Version Management
• Automatic deployment

Wait a minute.

Skillock Modular

In the Skilltree source code, roughly divided into three parts:

• namespace function: hence the meaning of the name
• Calculator is talenttree, mainly responsible for parsing, generating URLs, avatars, dependencies, etc.
• Skill is mainly a tips section.

And these are in a JS, for a library, is a good thing, but for a project, not so.

The dependent libraries have

• Jquery
• Knockout

Fortunately, knockout can be managed with require.js, so the use of Require.js management:

 <script type="text/javascript" data-main="app/scripts/main.js" src="app/lib/require.js"></script>

main.jsThe configuration is as follows:

require.config({  baseUrl: ‘app‘,  paths:{    jquery: ‘lib/jquery‘,    json: ‘lib/json‘,    text: ‘lib/text‘  }});require([‘scripts/ko-bindings‘]);require([‘lib/knockout‘, ‘scripts/TalentTree‘, ‘json!data/web.json‘], function(ko, TalentTree, TalentData) {  ‘use strict‘;  var vm = new TalentTree(TalentData);  ko.applyBindings(vm);});

Text, JSON plug-ins are mainly used for processing Web.json, that is, using JSON to handle skills, so different classes to different JS files.

.|____Book.js|____Doc.js|____ko-bindings.js|____Link.js|____main.js|____Skill.js|____TalentTree.js|____Utils.js

Added the later recommended reading books and so on. and the book and Link are inherited from Doc.

define([‘scripts/Doc‘], function(Doc) {  ‘use strict‘;  function Book(_e) {    Doc.apply(this, arguments);  }  Book.prototype = new Doc();  return Book;});

And here is the content that is reconstructed later. The Doc class is a microcosm of the class in Skillock

define([], function() {  ‘use strict‘;  var Doc = function (_e) {    var e = _e || {};    var self = this;    self.label = e.label || (e.url || ‘Learn more‘);    self.url = e.url || ‘javascript:void(0)‘;  };  return Doc;});

Or that's what AMD's class should look like. Considering the implicit binding of this, the author uses self=this to avoid this problem. Finally return this object, we need to call the new one. Most of the objects returned in the code, except those returned in the Utils class, are the functions:

return {    getSkillsByHash: getSkillsByHash,    getSkillById: getSkillById,                 prettyJoin: prettyJoin};

Of course the function is also an object.

Skillock Test automation test

has been accustomed to use Travis CI, so also continue to use Travis CI, the .travis.yml configuration is as follows:

language: node_jsnode_js:  - "0.10"notifications:  email: falsebranches:  only:    - gh-pages

The reason for using gh-pages is that when we push the code, we can automatically test, deploy, and so on, with a lot of benefits.

And then we need to package.json add the script inside.

"scripts": {    "test": "mocha"  }

This will automatically run all the tests when we push the code. Because the main configuration of Mocha is used mocha.opts , we also need to configuremocha.opts

--reporter spec--ui bdd--growl--colorstest/spec     

The final test/spec is the directory where the test is specified.

Jshint

JSLint defines a set of coding conventions that are stricter than the language defined by the ECMA. These coding conventions draw on years of rich coding experience, with an age-old programming principle as a tenet: to do does not mean to do. JSLint will mark the coding practices that it believes to have, and it will also point out which are obvious errors, prompting you to develop good JavaScript coding habits.

When our JS is not written properly, then the test can not pass:

line 5   col 25   A constructor name should start with an uppercase letter.line 21  col 62   Strings must use singlequote.

This is a way to drive the writing of a more canonical JS.

Mocha

Mocha is an excellent JS testing framework, supporting TDD/BDD, combined with Should.js/expect/chai/better-assert, can easily build a variety of styles of test cases.

The final effect is as follows:

Book,Link  Book Test    ? should return book label & url  Link Test    ? should return link label & url

Test Cases

Simply look at the book's Test:

/* global describe, it */var requirejs = require("requirejs");var assert = require("assert");var should = require("should");requirejs.config({  baseUrl: ‘app/‘,  nodeRequire: require});describe(‘Book,Link‘, function () {  var Book, Link;  before(function (done) {    requirejs([‘scripts/Book‘、], function (Book_Class) {      Book = Book_Class;      done();    });  });  describe(‘Book Test‘, function () {    it(‘should return book label & url‘, function () {      var book_name = ‘Head First HTML与CSS‘;      var url = ‘http://www.phodal.com‘;      var books = {        label: book_name,        url: url      };      var _book = new Book(books);      _book.label.should.equal(book_name);      _book.url.should.equal(url);    });  });});

Because we use it require.js to manage the browser side, we also need to use him to manage our dependencies when we write tests in the background, which is why this test is so from, and in most cases a test is like this. (It seems to be a better idea to use Jasmine, but it's a habit to jasmine)

  describe(‘Book Test‘, function () {    it(‘should return book label & url‘, function () {      var book_name = ‘Head First HTML与CSS‘;      var url = ‘http://www.phodal.com‘;      var books = {        label: book_name,        url: url      };      var _book = new Book(books);      _book.label.should.equal(book_name);      _book.url.should.equal(url);    });  });

The final assertion, also considered the core of the test, is to ensure that testing is useful.

Closing remarks (small ads)

At the beginning of the thinking is to write their own skills tree, until on GitHub to see Https://github.com/352Media/skilltree, think based on Skilltree do one, try to translate a bit, add a little function. Finally did not avoid being scolded plagiarism, finally think or write a bar: Https://github.com/phodal/sherlock. The reason is called Sherlock, is originally intended to be called Shelflock, Conan Doyle wrote in the book:

A man's like an empty attic, a choice to put some furniture in.

Based on D3.js, URLs can be generated dynamically, and the skill tree will be based on: Https://github.com/phodal/awesome-developer

I hope I have read the book, the road can provide you with help

I ' m phodal.

Skill Tree Tour: Detach from module to test