Test Driven Ember.js

Ember.js is JavaScript framework for building feature rich and very responsive applications. This session will provide an overview of Ember.js and demonstrate test-driven development of single-page web applications.

In this session, I will present a walkthrough of Ember.js core features. I will showcase a test-driven development of Ember.js application using Mocha. I will also explain Ember.js’ data bindings that allow for creation of views that update automatically in response to model changes. I will demo ease of Ember.js and Rails integration. Finally, I will utilize Ember.js components to create reusable UI elements.

In summary, Ember.js is a great framework for creating complex single-page applications. Attendees will leave the talk with a solid understanding of Ember.js test-driven development process.

Transcript

1. Test Driven Andy Pliszka ! ! @AntiTyping AntiTyping.com github.com/AntiTyping
2. Problems
3. jQuery everywhere • Low-level DOM modification • Copy and paste code • Lack of structure • Maintenance nightmare • Hard to test @AntiTyping
4. Toolset
5. Tools • Node.js • npm • Grunt • Bower • Yeoman • Lineman @AntiTyping
6. Ember Chrome Ext
7. YEOMAN @AntiTyping
8. Installation • brew install nodejs • npm install -g yo • npm install -g generator-ember @AntiTyping
9. yo ember • mkdir EmberApp && cd $_ • yo ember • yo ember:controller create a new web app @AntiTyping
10. Mocha/Chai • Behavior-driven development framework • Specs for your JavaScript code • Write expectations • Uses matchers @AntiTyping
11. Mocha Suites describe("A suite", function() { var flag; ! beforeEach(function() { flag = true; }); ! it("contains spec with an expectation", function() { expect(flag).should.equal(true); }); }); @AntiTyping
12. Chai Expectations describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).to.equal(true); }); }); @AntiTyping
13. Chai Matchers foo.should.be.a('string'); foo.should.equal('bar'); foo.should.have.length(3); tea.should.have.property('flavors') .with.length(3); ! expect(foo).to.be.a('string'); expect(foo).to.equal('bar'); expect(foo).to.have.length(3); expect(tea).to.have.property('flavors') .with.length(3); ! assert.typeOf(foo, 'string'); assert.equal(foo, 'bar'); assert.lengthOf(foo, 3) assert.property(tea, 'flavors'); assert.lengthOf(tea.flavors, 3); expect(bar).toThrow(); @AntiTyping
14. Demo @AntiTyping
15. Features •Display list of tasks •Add a new task •Mark task as done •Add a new task with a priority •Filter tasks by priority •Search tasks •Task counter @AntiTyping
16. UI @AntiTyping
17. Tracker @AntiTyping
19. Setup
20. Install dependencies • rvm install 2.0 • gem install compass • brew install nodejs • npm install -g bower • npm install -g yo • npm install -g generator-ember • npm install -g karma @AntiTyping
21. EmberDo front-end • git clone git@github.com:AntiTyping/EmberDo.git • cd EmberDo • npm install • bower install • cd test && bower install && cd .. • grunt server @AntiTyping
22. grunt server @AntiTyping
23. @AntiTyping
24. grunt test @AntiTyping
25. Structure @AntiTyping
26. Feature #1
    List of tasks
27. List of tasks @AntiTyping
28. git checkout -f feature_1_start @AntiTyping
29. User story As a user, I should be able to see list of tasks, so I can choose the next task to do ! Scenario: Display list of tasks When I navigate to the task list Then I should see the list of tasks @AntiTyping
30. Scenario describe("Task List", function() { it('should display list of tasks', function() { expect($('tr.task')).to.have.length(3); }); }); @AntiTyping
31. Red scenario Make it green or change the message
32. @AntiTyping
33. Outside In
34. {{#each}} <tbody> {{#each}} <tr class="task"> <td>{{_view.contentIndex}}</td> <td> {{name}} </td> <td> </td> </tr> {{/each}} </tbody> @AntiTyping
35. TodosRoute Todos.TodosRoute = Ember.Route.extend({ model: function() { return this.store.find('todo'); } }); @AntiTyping
36. Model Todos.Todo = DS.Model.extend({ name: DS.attr("string"), priority: DS.attr("string") }); ! Todos.Todo.FIXTURES = [ {id: 1, name: "Hight priority task", priority: "high"}, {id: 2, name: "Medium priority task", priority: "medium"}, {id: 3, name: "Low priority task", priority: "low"} ]; @AntiTyping
37. Green scenario
38. List of tasks @AntiTyping
39. All test are green @AntiTyping
40. Feature #1 Summary • Scenario • List of tasks (#each) • Todos route (TodosRoute) • Todo model • No low level DOM manipulation (#each) @AntiTyping
41. Feature #1 Summary • App code watcher • Scenario watcher @AntiTyping
42. Feature #2
    Add a new task
43. Feature UI @AntiTyping
44. git checkout -f feature_2_start @AntiTyping
45. User Story As a user, I should be able to add a new task, so I can update my list of tasks ! Scenario: Add a valid new task When I add a valid new task Then I should see the task in the list ! Scenario: Add an invalid new task When I add an invalid new task Then I should see an error message @AntiTyping
46. Scenario Setup beforeEach(function() { Todos.reset(); visit('/'); fillIn('.task-name', "New task"); click('button.js-add'); }); @AntiTyping
47. :) Path Scenario describe("Add a new task", function() { describe("when the new task is valid", function() { it("should add it to the list", function() { expect($('tr.task:last').text()).to.match(/New task/); expect($('tr.task')).to.have.length(4); }); it('should clear the new task box', function() { expect($('.task-name').val()).to.equal(''); }); it("should not display an error message", function() { expect($('div.alert').hasClass('hide')).to.be.true; }); }); @AntiTyping
48. :( Path Scenario describe("when the new task is invalid", function() { it("should leave the task list unchanged", function() { expect($('tr.task')).to.have.length(3); }); it("should display an error message", function() { expect($('div.alert').hasClass('hide')).to.be.false; }); @AntiTyping
49. Red scenario Make it green or change the message
50. {{input}} {{input … value=newName action="createTodo"}} @AntiTyping
51. {{action}} <button {{action "createTodo"}} type="button">Add</button> @AntiTyping
52. @AntiTyping
53. Red scenario Make it green or change the message
54. TodosController Todos.TodosController = Ember.ArrayController.extend({ actions: { createTodo: function() { var name = this.get('newName'); ! . . . ! var todo = this.store.createRecord('todo', { name: name }); this.set('newName', ''); ! todo.save(); } } }); @AntiTyping
55. Green scenario Make it green or change the message
56. @AntiTyping
57. All test are green @AntiTyping
58. Feature #2 Summary • Scenarios • Added {{input}} • Added {{action}} • Dynamic list (#each) @AntiTyping
59. Feature #3
    Mark task as done
60. Feature UI @AntiTyping
61. git checkout -f feature_3_start @AntiTyping
62. User Story As a user, I should be able to mark tasks as done, so I can keep track of completed work ! Scenario: Mark task as done When I mark a task as done Then the task should be remove from the list ! @AntiTyping
63. Scenario describe("Marking task as done", function() { it("should remove the task from the task list", function() { $('button.js-done:last').click(); expect($('tr.task')).to.have.length(2); }); }); @AntiTyping
64. Red scenario Make it green or change the message
65. {{action}} <button {{action "removeTodo"}}>Done</button> @AntiTyping
66. @AntiTyping
67. Red scenario Make it green or change the message
68. removeTodo() Todos.TodoController = Ember.ObjectController.extend({ actions: { removeTodo: function() { var todo = this.get('model'); todo.deleteRecord(); todo.save(); } } }); <tbody> {{#each itemController='todo'}} <tr class="task"> . . . <td> <button {{action "removeTodo"}} . . .>Done</button> </td> </tr> {{/each}} </tbody>
69. Green scenario Make it green or change the message
70. @AntiTyping
71. All test are green @AntiTyping
72. Feature #3 Summary • Scenario • TodoController • Click handler ({{action}}) @AntiTyping
73. Feature #4
    Add task with priority @AntiTyping
74. Feature UI @AntiTyping
75. git checkout -f feature_4_start @AntiTyping
76. User story As a user, I should be able to set task priority, so I can keep track of urgent tasks ! Scenario: Add a task with priority When I add task with priority Then the task list should include priorities ! @AntiTyping
77. Scenario it("should set priority", function() { expect($("span.priority:last").text()).to.match(/medium/); }); @AntiTyping
78. Red scenario Make it green or change the message
79. {{view}} {{view Ember.Select content=priorities value=priority . . .}} @AntiTyping
80. {{priority}} {{#each itemController='todo'}} <tr class="task"> <td>{{_view.contentIndex}}</td> <td> {{name}} <span class="priority label">{{priority}}</span> </td> <td> <button {{action “removeTodo"}} . . .>Done</button> </td> </tr> {{/each}} @AntiTyping
82. Red scenario Make it green or change the message
83. Property createTodo: function() { var name = this.get('newName'); var priority = this.get(‘priority'); ! . . . ! var todo = this.store.createRecord('todo', { name: name, priority: priority }); ! this.set('newName', ''); todo.save(); } @AntiTyping
84. Green scenario Make it green or change the message
85. @AntiTyping
86. All test are green @AntiTyping
87. Feature #4 Complete @AntiTyping
88. Feature #5
    Priority filter
89. Feature UI @AntiTyping
90. git checkout -f feature_5_start @AntiTyping
91. User Story As a user, I should be filter tasks by priority, so I can find hight priority tasks ! Scenario: Priority filter When I select ‘high’ priority filter Then I should see only high priority tasks ! @AntiTyping
92. Scenario describe("Filter by priority", function() { describe("when high priority is selected", function() { it("should display only high priority tasks", function() { $("a.priority:contains('High')").click(); expect($('tr.task')).to.have.length(1); }); }); ! . . . ! describe("when no priority is selected", function() { it("should display all tasks", function() { $("a.priority:contains('All')").click(); expect($('tr.task')).to.have.length(3); }); }); }); @AntiTyping
93. {{#link-to}} <div class="well" style="max-width: 340px; padding: 8px 0;"> <ul class="nav nav-list"> <li class="nav-header">Priority</li> <li> {{#link-to "todos.index" class="priority"}}All{{/link-to}} </li> <li> {{#link-to "todos.high" class="priority"}}High{{/link-to}} </li> <li> {{#link-to "todos.medium" class="priority"}}Medium{{/link-to}} </li> <li> {{#link-to "todos.low" class="priority"}}Low{{/link-to}} </li> </ul> @AntiTyping
94. Router Todos.Router.map(function() { this.resource('todos', { path: '/' }, function() { this.route("high"); this.route("medium"); this.route("low"); }); }); @AntiTyping
95. Route Todos.TodosHighRoute = Todos.TodosPriorityRoute.extend({ model: function() { return this.filterByPriority('high'); }, }); ! ! ! Todos.TodosPriorityRoute = Ember.Route.extend({ controllerName: 'Todos', renderTemplate: function(controller) { this.render('todos/index', {controller: controller}); }, filterByPriority: function(priority) { return this.store.filter('todo', function(todo) { return todo.get('priority') == priority; }); } }); !
96. Green e2e scenario Make it green or change the message
97. @AntiTyping
98. All test are green @AntiTyping
99. Feature #5 Complete @AntiTyping
100. Summary • Ember abstracts away DOM • Outside in TDD • Red-Green-Refactor • Structure development workflow • AngularJS talk @AntiTyping
102. Pivotal is hiring NYC, LA, SF, … everywhere :)
103. Questions? ! @AntiTyping