BDD / TDD Angular
Why? (for a NodeJS stack)
As a node developer, I want a rock-solid continuous deployment infrastructure so that I can return to my projects later and continue adding new features without accidentally breaking code I wrote years ago.
As a technologist, I want to play with bleeding edge technologies so that I can squeeze the most out of their potential.
How? (Was the code written)
I've written a running commentary on the commit log. Follow along to see the full development process.
What (Technologies)
The entire stack is Javascript, with one deploy script in bash that really should be rewritten to JS. The JSis written in Coffeescript where possible, which is pretty much everywhere.
- Engine: Node.js, NPM
- Build: Grunt
- Behaviors: Cucumber.js, Selenium Webdriver JS, Protractor
- Server: Express, Mocha
- Client: AngularJS, Browserify, Karma, Jasmine
- Languages / Frameworks: Coffeescript, Jade, Bootstrap, Less
- Continuous Integration: Travis CI
- Hosting: Github, Heroku
How (does the process work?)
TDD Process with functional tests driving unit tests driving implementation. Credit Harry Percival / Test-Driven Web Development with Python
Where (is the code?)
Source files
.
|-- .travis.yml
|-- bower.json
|-- package.json
|-- Gruntfile.coffee # Root Gruntfile. Defines cross-cutting watchers, and includes component Grunts.
|-- Procfile # Heroku configs
|-- README.md # This file!
`-- src
|-- client 1 Files that will be compiled and sent to the browser
| |-- Gruntfile.coffee # Build steps and angular unit test runners
| |-- index.jade # Root HTML template
| |-- lib # Internal library code, mostly cross-cutting helpers.
| | `-- mixins.less # Library of helpful less mixins
| |-- main.coffee # Requires the various components. Entry file for browserify.
| |-- page.less # Page-wide styling.
| `-- todo # Todo module.
| |-- module.coffee # Module definition and controller
| |-- style.less
| |-- template.jade
| `-- unit.coffee # The only file referenced by Grunt. Others are required or imported.
|-- deploy # Deployent helper scripts
| |-- grunt
| | `-- recurse.coffee # Extensions to Grunt for easy recursion
| |-- release.sh # Builds & tests. On successful test, commits built files to master and deploys.
| `-- start.js # JS bootstrap to require coffee.
|-- features
| |-- behavior
| | |-- steps 1 Implementations of behavior steps.
| | | |-- browsing.coffee # Browser-general ("browse to base, enter into text field")
| | | |-- buildmore.coffee # Sentinal reminder to build more features!
| | | |-- stylistic.coffee # Stylistic steps ()
| | | |-- todo.coffee # Application-specific steps ("remove item")
| | | `-- world.coffee # Before/After wrapper to include correct world
| | |-- support
| | | |-- worlds # Two different world definitions.
| | | | |-- protractor.coffee
| | | | `-- zombie.coffee # Has problems with Angular. I'd like to use it, but protractor works for now.
| | | `-- worlds.coffee
| | `-- users # Scenarios for each of the categorical users.
| | |-- edith
| | | `-- Edith.feature
| | `-- jason
| | `-- Jason.feature
| `-- Gruntfile.coffee # Grunt tasks for starting selenium and running cucumber features.
`-- server # Tiny application server, that really just serves the 4 or 5 bundle files.
|-- Gruntfile.coffee
|-- server.coffee
`-- test
|-- port.coffee
`-- serves.coffeeGenerated files
.
|-- bower_components # Used
| |-- bootstrap
| | |-- fonts # Included in bundle to serve.
| | |-- less
| | | |-- bootstrap.less # Less entry point
|-- build # Built bundle files
| |-- bundle.js # All javascript
| |-- bundle.min.js # (minified)
| |-- index.html # All HTML, merged into a single file.
| |-- page.css # All CSS, including bootstrap.
| `-- page.min.css #(minified)
|-- coverage # Generated code coverage reports. (Currently only for bundle.js)
|-- node_modules
`-- selenium # Installed Selenium server.Who (is this guy?)
Just a lazy engineer who thinks the browser is the easiest platform to get code out on. A guy passionate about software, who loves the metaphor that programming is like drawing water from a well. If it's a shallow well and a small bucket, it's pretty easy. When it gets deeper, and a bigger bucket, it takes a lot more effort - until you have a winch.
When
Copyright 2013 David Souther