How to test your Sproutcore application using BDD.

1. How do I test my Sproutcore Application?
Greg Moeck

2. @gregmoeck

3. Quick
Poll

4. Question
1

5. Full Time
Sproutcore?

6. Full Time
JavaScript?

7. Other?

8. Question
2

9. Practice
TDD/BDD?

10. Practice
Test Last
Unit
Testing?

11. No
Automated
Tests?

12. Question
3

13. Practice
TDD/BDD
In JS / SC?

14. What We
Want In
Our Tests

15. Ensure
Application
Behavior

16. All Objects
Work
Together

17. All Objects
Work
Individually

18. All Objects Work
Together
Acceptance/
Integration Tests

19. All Objects Work
Individually
Unit Tests

20. “
Unit Tests Tell You That
You Built The System Right.
Acceptance / Integration
Tests Tell You That You’ve
Built The Right System
Gojko Adzic,
Specification by Example

21. Integration
Tests

22. Ensures
Value For
The User

23. Use The
System As
The User
Would

24. Scenario('Searching For An Item', function() {
Given('an auction item that is available for sale', function() {
var itemTitle = 'item';
beforeEach(function() {
Fictum.addResource('Item', {title: itemTitle});
});
When('I search for that auction item', function() {
beforeEach(function() {
Simulo.fillIn('#mainSearchWidget input[type="text"]', itemTitle);
Simulo.clickOn('#mainSearchWidget .submit-search');
});
Then('I should see the auction item within the search results', function(page) {
page.within('.search-results', function(page) {
expect(page).toHaveContent(itemTitle);
});
});
});
});
});
});

25. Scenario('Searching For An Item', function() {
Given('an auction item that is available for sale', function() {
var itemTitle = 'item';
beforeEach(function() {
Fictum.addResource('Item', {title: itemTitle});
});
When('I search for that auction item', function() {
beforeEach(function() {
Simulo.fillIn('#mainSearchWidget input[type="text"]', itemTitle);
Simulo.clickOn('#mainSearchWidget .submit-search');
});
Then('I should see the auction item within the search results', function(page) {
page.within('.search-results', function(page) {
expect(page).toHaveContent(itemTitle);
});
});
});
});
});
});

26. Scenario('Searching For An Item', function() {
Given('an auction item that is available for sale', function() {
var itemTitle = 'item';
beforeEach(function() {
Fictum.addResource('Item', {title: itemTitle});
});
When('I search for that auction item', function() {
beforeEach(function() {
Simulo.fillIn('#mainSearchWidget input[type="text"]', itemTitle);
Simulo.clickOn('#mainSearchWidget .submit-search');
});
Then('I should see the auction item within the search results', function(page) {
page.within('.search-results', function(page) {
expect(page).toHaveContent(itemTitle);
});
});
});
});
});
});

27. Scenario('Searching For An Item', function() {
Given('an auction item that is available for sale', function() {
var itemTitle = 'item';
beforeEach(function() {
Fictum.addResource('Item', {title: itemTitle});
});
When('I search for that auction item', function() {
beforeEach(function() {
Simulo.fillIn('#mainSearchWidget input[type="text"]', itemTitle);
Simulo.clickOn('#mainSearchWidget .submit-search');
});
Then('I should see the auction item within the search results', function(page) {
page.within('.search-results', function(page) {
expect(page).toHaveContent(itemTitle);
});
});
});
});
});
});

28. Scenario('Searching For An Item', function() {
Given('an auction item that is available for sale', function() {
var itemTitle = 'item';
beforeEach(function() {
Fictum.addResource('Item', {title: itemTitle});
});
When('I search for that auction item', function() {
beforeEach(function() {
Simulo.fillIn('#mainSearchWidget input[type="text"]', itemTitle);
Simulo.clickOn('#mainSearchWidget .submit-search');
});
Then('I should see the auction item within the search results', function(page) {
page.within('.search-results', function(page) {
expect(page).toHaveContent(itemTitle);
});
});
});
});
});
});

29. Scenario('Searching For An Item', function() {
Given('an auction item that is available for sale', function() {
var itemTitle = 'item';
beforeEach(function() {
Fictum.addResource('Item', {title: itemTitle});
});
When('I search for that auction item', function() {
beforeEach(function() {
Simulo.fillIn('#mainSearchWidget input[type="text"]', itemTitle);
Simulo.clickOn('#mainSearchWidget .submit-search');
});
Then('I should see the auction item within the search results', function(page) {
page.within('.search-results', function(page) {
expect(page).toHaveContent(itemTitle);
});
});
});
});
});
});

30. Scenario('Searching For An Item', function() {
Given('an auction item that is available for sale', function() {
var itemTitle = 'item';
beforeEach(function() {
Fictum.addResource('Item', {title: itemTitle});
});
When('I search for that auction item', function() {
beforeEach(function() {
Simulo.fillIn('#mainSearchWidget input[type="text"]', itemTitle);
Simulo.clickOn('#mainSearchWidget .submit-search');
});
Then('I should see the auction item within the search results', function(page) {
page.within('.search-results', function(page) {
expect(page).toHaveContent(itemTitle);
});
});
});
});
});
});

31. Scenario('Searching For An Item', function() {
Given('an auction item that is available for sale', function() {
var itemTitle = 'item';
beforeEach(function() {
Fictum.addResource('Item', {title: itemTitle});
});
When('I search for that auction item', function() {
beforeEach(function() {
Simulo.fillIn('#mainSearchWidget input[type="text"]', itemTitle);
Simulo.clickOn('#mainSearchWidget .submit-search');
});
Then('I should see the auction item within the search results', function(page) {
page.within('.search-results', function(page) {
expect(page).toHaveContent(itemTitle);
});
});
});
});
});
});

32. Unit
Tests

33. Ensures
Value Of The
Architecture

34. Use Object
Like A
Collaborator
Would

35. Isolate
The
Object

36. Example:
Testing A
View

37. Test
Through
View API

38. Total
Flow

40. Example

42. sc-init todos --template

43. install jasmine-sproutcore
https://github.com/gmoeck/jasmine-
sproutcore

44. install simulo
https://github.com/gmoeck/simulo

45. describe('Scenario: Adding a todo', function() {
Given('I have loaded the todo application', function() {
afterEach(function() {
Todos.mainPane.remove();
});
When('I add a new todo item', function() {
var description;
beforeEach(function() {
description = 'Do Something';
Simulo.fillIn('#new-todo', description).pressEnter();
});
Then('I should see the item in the list of available items', function(page) {
page.within('#incomplete-todos', function(page) {
expect(page).toHaveContent(description);
});
});
});
});
});

46. describe('Scenario: Adding a todo', function() {
Given('I have loaded the todo application', function() {
afterEach(function() {
Todos.mainPane.remove();
});
When('I add a new todo item', function() {
var description;
beforeEach(function() {
description = 'Do Something';
Simulo.fillIn('#new-todo', description).pressEnter();
});
Then('I should see the item in the list of available items', function(page) {
page.within('#incomplete-todos', function(page) {
expect(page).toHaveContent(description);
});
});
});
});
});

47. describe('Scenario: Adding a todo', function() {
Given('I have loaded the todo application', function() {
afterEach(function() {
Todos.mainPane.remove();
});
When('I add a new todo item', function() {
var description;
beforeEach(function() {
description = 'Do Something';
Simulo.fillIn('#new-todo', description).pressEnter();
});
Then('I should see the item in the list of available items', function(page) {
page.within('#incomplete-todos', function(page) {
expect(page).toHaveContent(description);
});
});
});
});
});

48. describe('Scenario: Adding a todo', function() {
Given('I have loaded the todo application', function() {
afterEach(function() {
Todos.mainPane.remove();
});
When('I add a new todo item', function() {
var description;
beforeEach(function() {
description = 'Do Something';
Simulo.fillIn('#new-todo', description).pressEnter();
});
Then('I should see the item in the list of available items', function(page) {
page.within('#incomplete-todos', function(page) {
expect(page).toHaveContent(description);
});
});
});
});
});

49. describe('Scenario: Adding a todo', function() {
Given('I have loaded the todo application', function() {
afterEach(function() {
Todos.mainPane.remove();
});
When('I add a new todo item', function() {
var description;
beforeEach(function() {
description = 'Do Something';
Simulo.fillIn('#new-todo', description).pressEnter();
});
Then('I should see the item in the list of available items', function(page) {
page.within('#incomplete-todos', function(page) {
expect(page).toHaveContent(description);
});
});
});
});
});

50. describe('Scenario: Adding a todo', function() {
Given('I have loaded the todo application', function() {
afterEach(function() {
Todos.mainPane.remove();
});
When('I add a new todo item', function() {
var description;
beforeEach(function() {
description = 'Do Something';
Simulo.fillIn('#new-todo', description).pressEnter();
});
Then('I should see the item in the list of available items', function(page) {
page.within('#incomplete-todos', function(page) {
expect(page).toHaveContent(description);
});
});
});
});
});

51. describe('Scenario: Adding a todo', function() {
Given('I have loaded the todo application', function() {
afterEach(function() {
Todos.mainPane.remove();
});
When('I add a new todo item', function() {
var description;
beforeEach(function() {
description = 'Do Something';
Simulo.fillIn('#new-todo', description).pressEnter();
});
Then('I should see the item in the list of available items', function(page) {
page.within('#incomplete-todos', function(page) {
expect(page).toHaveContent(description);
});
});
});
});
});

52. describe('Scenario: Adding a todo', function() {
Given('I have loaded the todo application', function() {
afterEach(function() {
Todos.mainPane.remove();
});
When('I add a new todo item', function() {
var description;
beforeEach(function() {
description = 'Do Something';
Simulo.fillIn('#new-todo', description).pressEnter();
});
Then('I should see the item in the list of available items', function(page) {
page.within('#incomplete-todos', function(page) {
expect(page).toHaveContent(description);
});
});
});
});
});

53. describe('Scenario: Adding a todo', function() {
Given('I have loaded the todo application', function() {
afterEach(function() {
Todos.mainPane.remove();
});
When('I add a new todo item', function() {
var description;
beforeEach(function() {
description = 'Do Something';
Simulo.fillIn('#new-todo', description).pressEnter();
});
Then('I should see the item in the list of available items', function(page) {
page.within('#incomplete-todos', function(page) {
expect(page).toHaveContent(description);
});
});
});
});
});

55. resources/templates/todos.handlebars
<h1>Todos</h1>
{{#view Todos.CreateTodoView}}
<input id="new-todo" type="text" placeholder="What needs to be done?" >
{{/view}}

58. Error

59. Error

60. views/create_todo_view.js
Todos.CreateTodoView = SC.TemplateView.extend({
});

62. resources/templates/todos.handlebars
<h1>Todos</h1>
{{#view Todos.CreateTodoView}}
<input id="new-todo" type="text" placeholder="What needs to be done?" >
{{/view}}
{{#collection Todos.TodoListView id="incomplete-todos"}}
{{content.title}}
{{/collection}}

66. views/todo_list_view.js
Todos.TodoListView = SC.TemplateCollectionView.extend({
});

68. tests/unit/views/create_todo_view_spec.js
describe('Todos.CreateTodoView', function() {
describe('#insertNewline', function() {
var createTodoSpy, value;
beforeEach(function() {
value = 'Do Something';
view = Todos.CreateTodoView.create({value: value});
createTodoSpy = spyOn(Todos.todoListController, 'createTodo');
view.insertNewline();
});
it('delegates to create a new todo with it's current value', function() {
expect(createTodoSpy).toHaveBeenCalledWith(value);
});
});

69. tests/unit/views/create_todo_view_spec.js
describe('Todos.CreateTodoView', function() {
describe('#insertNewline', function() {
var createTodoSpy, value;
beforeEach(function() {
value = 'Do Something';
view = Todos.CreateTodoView.create({value: value});
createTodoSpy = spyOn(Todos.todoListController, 'createTodo');
view.insertNewline();
});
it('delegates to create a new todo with it's current value', function() {
expect(createTodoSpy).toHaveBeenCalledWith(value);
});
});

70. tests/unit/views/create_todo_view_spec.js
describe('Todos.CreateTodoView', function() {
describe('#insertNewline', function() {
var createTodoSpy, value;
beforeEach(function() {
value = 'Do Something';
view = Todos.CreateTodoView.create({value: value});
createTodoSpy = spyOn(Todos.todoListController, 'createTodo');
view.insertNewline();
});
it('delegates to create a new todo with it's current value', function() {
expect(createTodoSpy).toHaveBeenCalledWith(value);
});
});

71. tests/unit/views/create_todo_view_spec.js
describe('Todos.CreateTodoView', function() {
describe('#insertNewline', function() {
var createTodoSpy, value;
beforeEach(function() {
value = 'Do Something';
view = Todos.CreateTodoView.create({value: value});
createTodoSpy = spyOn(Todos.todoListController, 'createTodo');
view.insertNewline();
});
it('delegates to create a new todo with it's current value', function() {
expect(createTodoSpy).toHaveBeenCalledWith(value);
});
});

72. tests/unit/views/create_todo_view_spec.js
describe('Todos.CreateTodoView', function() {
describe('#insertNewline', function() {
var createTodoSpy, value;
beforeEach(function() {
value = 'Do Something';
view = Todos.CreateTodoView.create({value: value});
createTodoSpy = spyOn(Todos.todoListController, 'createTodo');
view.insertNewline();
});
it('delegates to create a new todo with it's current value', function() {
expect(createTodoSpy).toHaveBeenCalledWith(value);
});
});

73. tests/unit/views/create_todo_view_spec.js
describe('Todos.CreateTodoView', function() {
describe('#insertNewline', function() {
var createTodoSpy, value;
beforeEach(function() {
value = 'Do Something';
view = Todos.CreateTodoView.create({value: value});
createTodoSpy = spyOn(Todos.todoListController, 'createTodo');
view.insertNewline();
});
it('delegates to create a new todo with it's current value', function() {
expect(createTodoSpy).toHaveBeenCalledWith(value);
});
});

74. tests/unit/views/create_todo_view_spec.js
describe('Todos.CreateTodoView', function() {
describe('#insertNewline', function() {
var createTodoSpy, value;
beforeEach(function() {
value = 'Do Something';
view = Todos.CreateTodoView.create({value: value});
createTodoSpy = spyOn(Todos.todoListController, 'createTodo');
view.insertNewline();
});
it('delegates to create a new todo with it's current value', function() {
expect(createTodoSpy).toHaveBeenCalledWith(value);
});
});

77. Todos.todoListController.createTodo

78. controllers/todo_list_controller.js
Todos.todoListController = SC.ArrayController.create({
createTodo: function(title) {
}
});

80. views/create_todo_view.js
Todos.CreateTodoView = SC.TemplateView.extend(SC.TextFieldSupport, {
insertNewline: function() {
}
});

82. views/create_todo_view.js
Todos.CreateTodoView = SC.TemplateView.extend(SC.TextFieldSupport, {
insertNewline: function() {
Todos.todoListController.createTodo(this.get('value'));
}
});

86. Should be different, but we already defined
Todos.todoListController.

87. tests/unit/controllers/todo_list_controller_spec.js
describe('Todos.todoListController', function() {
describe('#createTodo', function() {
var createTodoSpy, title;
beforeEach(function() {
title = 'title';
createTodoSpy = spyOn(Todos.Todo, 'create');
Todos.todoListController.createTodo(title);
});
it('creates a todo with the passed in title', function() {
expect(createTodoSpy).toHaveBeenCalledWith({title: title});
});
});
});

88. tests/unit/controllers/todo_list_controller_spec.js
describe('Todos.todoListController', function() {
describe('#createTodo', function() {
var createTodoSpy, title;
beforeEach(function() {
title = 'title';
createTodoSpy = spyOn(Todos.Todo, 'create');
Todos.todoListController.createTodo(title);
});
it('creates a todo with the passed in title', function() {
expect(createTodoSpy).toHaveBeenCalledWith({title: title});
});
});
});

89. tests/unit/controllers/todo_list_controller_spec.js
describe('Todos.todoListController', function() {
describe('#createTodo', function() {
var createTodoSpy, title;
beforeEach(function() {
title = 'title';
createTodoSpy = spyOn(Todos.Todo, 'create');
Todos.todoListController.createTodo(title);
});
it('creates a todo with the passed in title', function() {
expect(createTodoSpy).toHaveBeenCalledWith({title: title});
});
});
});

90. tests/unit/controllers/todo_list_controller_spec.js
describe('Todos.todoListController', function() {
describe('#createTodo', function() {
var createTodoSpy, title;
beforeEach(function() {
title = 'title';
createTodoSpy = spyOn(Todos.Todo, 'create');
Todos.todoListController.createTodo(title);
});
it('creates a todo with the passed in title', function() {
expect(createTodoSpy).toHaveBeenCalledWith({title: title});
});
});
});

91. tests/unit/controllers/todo_list_controller_spec.js
describe('Todos.todoListController', function() {
describe('#createTodo', function() {
var createTodoSpy, title;
beforeEach(function() {
title = 'title';
createTodoSpy = spyOn(Todos.Todo, 'create');
Todos.todoListController.createTodo(title);
});
it('creates a todo with the passed in title', function() {
expect(createTodoSpy).toHaveBeenCalledWith({title: title});
});
});
});

92. tests/unit/controllers/todo_list_controller_spec.js
describe('Todos.todoListController', function() {
describe('#createTodo', function() {
var createTodoSpy, title;
beforeEach(function() {
title = 'title';
createTodoSpy = spyOn(Todos.Todo, 'create');
Todos.todoListController.createTodo(title);
});
it('creates a todo with the passed in title', function() {
expect(createTodoSpy).toHaveBeenCalledWith({title: title});
});
});
});

95. Todos.Todo.create

96. models/todo.js
Todos.Todo = SC.Object.extend({
});

98. controllers/todo_list_controller.js
Todos.todoListController = SC.ArrayController.create({
createTodo: function(title) {
Todos.Todo.create({title: title});
}
});

100. tests/unit/controllers/todo_list_controller_spec.js
describe('Todos.todoListController', function() {
describe('#createTodo', function() {
var createTodoSpy, title, todo;
beforeEach(function() {
title = 'title';
todo = {title: title};
createTodoSpy = spyOn(Todos.Todo, 'create').andReturn(todo);
Todos.todoListController.createTodo(title);
});
...
it('adds that todo to it's content', function() {
expect(Todos.todoListController.get('content')).toContain(todo);
});
});
});

102. controllers/todo_list_controller.js
Todos.todoListController = SC.ArrayController.create({
content: [],
createTodo: function(title) {
Todos.Todo.create({title: title});
}
});

104. controllers/todo_list_controller.js
Todos.todoListController = SC.ArrayController.create({
content: [],
createTodo: function(title) {
var todo = Todos.Todo.create({title: title});
this.pushObject(todo);
}
});

107. Questions?
gmoeck@gmail.com
@gregmoeck