angular-ui/angular-ui — pull request #10 by petebacondarwin (2012-04-12 17:39:14+00:00)
Title: Testing and Modularisation

Hi guys,
I have been doing quite a bit of hacking around with this project in my own repository.
The original aim of this was to bring in the test runner and start adding in some unit tests.

As I played around I started thinking about how modular the project is. Angular makes it really easy to modularize our code so I have taken it to its logical conclusion and moved each individual item into its own module. Then I have grouped these into directives and filters modules and then brought all of these together in the ui module as before.

The result of this is that, as I am sure was discussed at some point, one could easily cherry pick the module (or group of modules) that you wanted and then build a single js for that custom combination. I would imagine, even, building a simple app (similar to the jquery UI site) that would allow you to customize what modules you wanted and would generate the relevant files for you.

Once I had begun on this path I wanted to make these guys as independent as possible and so I refactored the directory structure so that each module could pretty much exist all on its own. So now each module has its own directory below the modules folder. E.g.

modules ->
directives ->
date ->
src
test
stylesheets
README

Inside this folder would be the src, the unit tests, any stylesheets and any documentation for that module.
Any files that need compiling will just live in the src, test and stylesheets folder. At a minimum there should be a README for each module explaining usage - this make it easy when browsing the folders on github but could also be pulled together to make up a general documentation site.

There is a modules/common folder that contains the js that declares the top level modules, depending upon all the individual modules. Also a less file that imports all the stylesheets from each module. Both of these could probably be generated directly from listings of the modules directories.

I have reworked the Makefile so that:
- any coffeescript files inside the src/test folders are compiled and dumped back in the same folder.
- the less compiler currently builds a single css from a less file in the common folder. The Less compiler is not as sophisticated as the coffee and it is more work to compile up each module's less files individually as well right now but this is something that should probably happen.
- also, I feel uncomfortable building the javascript into the lib folder. While I know that this is done for many projects, I am also aware that lib is often used to whole third party files. To avoid any confusion or doubt I renamed this folder build.

Finally, regarding unit testing. I have created a stand-alone folder called test. I extracted from a recent angular-seed project everything we need to run unit tests on this project. It uses jsTestDriver to run the tests, which I am not very happy about and I would like to investigate testacular and also the "Jasmine Headless Webkit" (http://johnbintz.github.com/jasmine-headless-webkit/).

Similar to angular-seed, simply run the test/test-server.sh, capture the browser and then run test/test.sh. The only module to have any unit tests is "ui.directives.date". There are a dozen tests and one fails (partly to remind me that there is something funny about

elements and partly to show the test runner working properly.

I pointedly have not just pushed these changes to the main repos as I realise that this is quite a big change to the layout of the project but I believe it will provide the scalability and flexibility for the project going forward. I welcome your feedback and criticism.

Cheers,

Pete BD