MEAN Stack NYC Meetup 20150717: TDD Your AngularJS + Ionic Directives With jQuery
Post on 08-Aug-2015
219 Views
Preview:
Transcript
TDD Your AngularJS + Ionic Directives With
jQuery
Valeri KarpovNodeJS Engineer, MongoDB
thecodebarbarian.comgithub.com/vkarpov15
@code_barbarian
Who Am I?- NodeJS @ MongoDB- Maintainer for mongoose- + connect-mongodb-session, mongoskin, etc.- Blogger for StrongLoop- Author of Professional AngularJS- And coined the term “MEAN” in 2013
What’s This Talk About?- Unit Test: tests JS only- Fast, but no real DOM integration- E2E Test: test full stack with DOM integration- Slow, flakey, hard to shard, hard to simulate
errors- “Does my UI actually work?”- Fast feedback on development
Overview- Directives and Learning from React- Manual bootstrapping in AngularJS >= 1.3.0- Building a form with isomorphic schema- Bonus: compiling for Ionic framework- Lots of high-level concepts - overview of
upcoming EdX course
Main HTML- See vkarpov15/node-presentation-examples
Directive + HTML- Testing details: `ng` and `$emit()`- Directive bundles HTML and JS- But not CSS, which is useful for Ionic
Why Components?- No more flicker- Cleaner code separation- Remember when your CS professors yelled at
you for putting all your code in `main()` ?- Easier to test...
Part 2: Testing Directives- Karma: browser instrumentation for testing- (IMO) the most important module on npm- See Testing Client-side JavaScript with Karma
Making Frontend Dev Fast- Getting feedback on frontend work is slow- Make change -> F5 in browser -> open
Chrome console -> click a few buttons -> Feedback
- Karma watches files and re-runs tests for you- Simplify it to: make change -> feedback
Configuring Karma- Tell Karma files to load and browsers to start- Also tell Karma to start static web server
Configuring Karma- Important: karma only serves templates- So you can test on many browsers in parallel
Instrumenting AngularJS- AngularJS >= 1.3 makes compiling HTML easy- Steps: create injector, create scope, $compile() HTML with new scope
Now You Can Test- Tests use jQuery to manipulate DOM- .trigger(‘change’) triggers $apply- $apply is sync, so test is sync
Fast Feedback with TDD- Suppose you wanted to add a ‘clear’ button- You could point and click…- Or you could write a test first
Fast Feedback Takeaways- Tests are light and fast- Also include DOM integration- Best of both worlds between unit and e2e- More detail on my blog: “Testing AngularJS
Directives”
Fast Feedback Takeaways- TDD is hard. Like lifting heavy weights.
“The resistance that you fight physically in the gym and the resistance that you fight in life can only build a strong character.”
- Arnold Schwarzenegger
Part 3: TDDing a Form- Mongoose (NodeJS ODM for MongoDB) is
partially isomorphic as of v4.0.0- More detailed article: “Better AngularJS Form
Validation with Mongoose”- Lets you share validation logic between client
and server- Never maintain two code bases in parallel!
Key Takeaways- Validation logic is easy to get wrong- Write once, test carefully
“If you want more effective programmers, you will discover that they should not waste their time debugging, they should not introduce the bugs to start with.”
- Edsger Dijkstra of Dijkstra’s Algorithm
Part 4: Compiling for Ionic- Don’t worry, this section will be short- Ionic = AngularJS on Cordova- Hybrid native apps
I Hate Native Mobile Dev- Worst of both worlds between Swing and
HTML- Feedback cycle is slow: make change ->
compile -> wait… -> click around in simulator
Directives First with Ionic- Ionic lets you write mobile apps in Angular- Write directives once, re-use them on mobile- Mobile dev without the slow feedback
Directives in Ionic- Use gulp-html2js- Designed to compile template HTML into JS
More Resources- Sample code at github.com/vkarpov15/node-
presentation-examples- Professional AngularJS on Amazon- Upcoming Video Course on EdX - fill out
survey to be a beta tester!- MongoDB community survey
top related