How to test a bower package with travis-ci

First, you have to make a Bower package. See my previous post: how to build a Bower package.

Then, you have to make your Bower package a NPM package. WTF? You must be wondering, why? Because Travis-CI needs additional packages to run your tests, and it runs “npm install” inside your project folder to do that.

To make it a NPM package, just run

npm init

Then, you have to install grunt, mocha etc. In the end, your package.json should have this section

  "devDependencies": {
    "grunt-mocha-test": "~0.6.3",
    "grunt": "~0.4.1",
    "chai": "~1.7.2",
    "grunt-cli": "~0.1.9"
  }

Hint:
Use

npm install grunt --save-dev 

so that it will save your npm install history to the package.json file.

Then, you have to set up .travis.yml for Travis CI. My file looks like this:

language: node_js
node_js:
  - '0.8'
  - '0.10'
before_script:
  - npm install -g bower
  - bower install
script: grunt test

It does a couple of things:
– It runs “npm install” to get grunt, mocha and all that …
– It runs “npm install -g bower” for the next command
– It runs “bower install”, which reads bower.json and install the Bower package we want to test
– It runs “grunt test”, which runs mocha to test the Bower package

Now, it is time to write some serious tests…

Advertisements
Standard

How to build a bower package

Time to extract part of our group work and make it a separate package. Basically, we built a Backbone wrapper for Foundation Reveal Modal, and I wanted to make it a Bower package.

Brief intro about Bower:
Bower is a package management system by Twitter for front-end, similar to NPM for the backend.

Steps to build a Bower package:
1. Make a github repo and put all your code in it (any git repo should work)
2. Run “bower init” in the repo directory and follow the instructions
3. Run “bower register”

bower register backbone.foundation.reveal.modal git://github.com/shaohua/backbone.foundation.reveal.modal

4. Run “bower search foundation”. Horray, it is there!!!

    foundation git://github.com/zurb/foundation
    foundation-icons git://github.com/zurb/foundation-icons.git
    components-foundation git://github.com/components/foundation.git
    sass-foundation git://github.com/mmcgahan/sass-foundation.git
    bower-foundation-css git://github.com/ch1c0t/bower-foundation-css.git
    backbone.foundation.reveal.modal git://github.com/shaohua/backbone.foundation.reveal.modal

P.S. how to make a npm package. http://decodize.com/javascript/build-nodejs-npm-installation-package-scratch/

Standard