Work at Play's DrupalCon Portland 2013 presentation on automated testing.

1. 1
Automated Testing With
Jasmine, PhantomJS &
Jenkins
Aisha Kaliel | Ronn Abueg
Drupalcon 2013 Portland
1

2. 2
May 2013
Agenda
1.Who we are
2.Testing JS code and front-
end
• Testing without the browser
• Continuous Integration
2

3. 3
May 2013
1.Who we are
2.Testing JS code and front-
end
• Testing without the browser
• Continuous Integration
o Listing the types of tests
o Looking at some test tools
o Writing and running tests
Agenda
3

4. 4
May 2013
Agenda
1.Who we are
2.Testing JS code and front-
end
• Testing without the browser
• Continuous Integration
o What is a headless browser
o Scripting with a headless
browser
o Testing with a headless
browser
4

5. 5
May 2013
Agenda
1.Who we are
2.Testing JS code and front-
end
• Testing without the browser
• Continuous Integration
o Deploying code
o Integrating testing with
builds
o Review build results
5

6. 6
May 2013
Who are we?
Aisha Kaliel
drupal: akaliel
Ronn Abueg
drupal: ronnbot
twitter: @ronnbot
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration
twitter: @workatplay
facebook: www.facebook.com/workatplay
website: www.workatplay.com
6

7. 7
May 2013
We work with Drupal...
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 7

8. 8
May 2013
And other CMS/frameworks
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 8

9. 9
May 2013
And other CMS/frameworks
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 9

10. 10
May 2013
Repetitive Testing: Why not automate?
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 10

11. 11
May 2013
Why test in general
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 11

12. 12
May 2013
Automated testing...
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration
• Saves time and money
• Improves accuracy
• Increases test coverage
• Does what manual testing cannot
• Helps developers and testers
• Improves team moral
• and continuous integration is the cornerstone of Agile
development
12

13. 13
May 2013
1.Who we are
2.Testing JS code and front-
end
• Testing without the browser
• Continuous Integration
o Listing the types of tests
o Looking at some test tools
o Writing and running tests
Agenda
13

14. 14
May 2013
Types of tests
GUI
Unit
Service /
Integration
Test Pyramid
•concepted by Mike Cohn
•higher level tests at the top
•larger number of test below
•high level tests can encompass
many low level tests, e.g.
ofor form test to pass,
functional units must work
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 14

15. 15
May 2013
Tackling the testing pyramid
GUI
Unit
Service /
Integration
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 15
automating browser
JS testing

16. 16
May 2013
Testing tools
• Selenium
• Watir
• Windmill
• Mocha
• QUnit
• Jasmine
• and etc.
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 16
automating browser
JS testing

17. 17
May 2013
Testing tools
• Selenium
• Watir
• Windmill
• Mocha
• QUnit
• Jasmine
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 17

18. 18
May 2013
Comparison
Selenium
•Automates browsers
•Simulates user actions
•There's an IDE, a Firefox
extension, that allows to
record, edit, and debug tests
Jasmine
•Open-source testing
framework for JavaScript
•Does not depend on DOM or
any other JavaScript
frameworks
•Unit tests your JS code
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 18

19. 19
May 2013
Why Jasmine?
• Runs anywhere Javascript can
• Does not intrude on the
application
• Plays well with IDEs
• Encourages good testing
principles
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 19

20. 20
May 2013
What is Jasmine?
• Behavior-driven development
framework
• Does not require require a
DOM, or depend on any other
JavaScript frameworks
• Clean, obvious syntax
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 20

21. 21
May 2013
What is Jasmine?
• Behavior-driven development
framework
• Does not require require a
DOM, or depend on any other
JavaScript frameworks
• Clean, obvious syntax
• Specialized version of test-
driven development
• Focuses on the "desired
behavior" of software
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 21

22. 22
May 2013
What is Jasmine?
• Behavior-driven development
framework
• Does not require require the
DOM, or depend on any other
JavaScript frameworks
• Clean, obvious syntax
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 22

23. 23
May 2013
What is Jasmine?
• Behavior-driven development
framework
• Does not require require a
DOM, or depend on any other
JavaScript frameworks
• Clean, obvious syntax
Still has access to the DOM!
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 23

24. 24
May 2013
What is Jasmine?
• Behavior-driven development
framework
• Does not require require a
DOM, or depend on any other
JavaScript frameworks
• Clean, obvious syntax
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 24

25. 25
May 2013
Tackling the testing pyramid with Jasmine
GUI
Unit
Service /
Integration
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 25

26. 26
May 2013
Tackling the testing pyramid with Jasmine
GUI
Unit
Service /
Integration
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 26

27. 27
May 2013
Tackling the testing pyramid with Jasmine
GUI
Unit
Service /
Integration
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 27

28. 28
May 2013
Jasmine Features
• Test suites/specs
• Expectations
• Matchers
• Setup and teardown
• Spies
• Asynchronous Support
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 28

29. 29
May 2013
Feature to test: basic calculator
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 29

30. 30
May 2013
Basic calculator
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 30

31. 31
May 2013
Basic calculator
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 31

32. 32
May 2013
Basic calculator
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 32

33. 33
May 2013
Test the calculator: Suites
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 33

34. 34
May 2013
Test the calculator: Specs
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 34

35. 35
May 2013
Testing the calculator: Expectations
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 35

36. 36
May 2013
Feature: Matchers
• expect(x).toBe(y);
• expect(x).toEqual(y);
• expect(x).toMatch(/pattern/);
• expect(x).toBeDefined();
• expect(x).toBeUndefined();
• expect(x).toBeNull();
• expect(x).toBeTruthy();
• expect(x).toBeFalsy();
• expect(x).toContain(y);
• expect(x).toBeLessThan(y);
• expect(x).toBeGreaterThan(y);
• expect(x).toBeCloseTo(y, 0);
• expect(function(){ fn(); }).toThrow(e);
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 36

37. 37
May 2013
Feature: Negative Matchers
• expect(x).not.toBe(y);
• expect(x).not.toEqual(y);
• expect(x).not.toMatch(/pattern/);
• expect(x).not.toBeDefined();
• expect(x).not.toBeUndefined();
• expect(x).not.toBeNull();
• expect(x).not.toBeTruthy();
• expect(x).not.toBeFalsy();
• expect(x).not.toContain(y);
• expect(x).not.toBeLessThan(y);
• expect(x).not.toBeGreaterThan(y);
• expect(x).not.toBeCloseTo(y, 0);
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 37

38. 38
May 2013
Testing the calculator: Matchers
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 38

39. 39
May 2013
Testing the calculator: More specs!
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 39

40. 40
May 2013
Feature: Setup and Teardown
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 40

41. 41
May 2013
Testing the calculator: Setup
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 41

42. 42
May 2013
Testing the calculator: Spies
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 42

43. 43
May 2013
Testing the calculator with DOM tests
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 43

44. 44
May 2013
Testing the calculator: Nested describe blocks
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 44

45. 45
May 2013
Testing the calculator: Setup and Teardown
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 45

46. 46
May 2013
Feature: Asynchronous Support
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 46

47. 47
May 2013
Feature: Asynchronous Support
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 47

48. 48
May 2013
Feature: Asynchronous Support
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 48

49. 49
May 2013
Testing the calculator: Reporter
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 49

50. 50
May 2013
Testing the calculator: Reporter
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 50

51. 51
May 2013
Testing the calculator: Filtering the Reporter
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 51

52. 52
May 2013
Running the test page without a browser
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 52

53. 53
May 2013
Agenda
1.Who we are
2.Testing JS code and front-
end
• Testing without the browser
• Continuous Integration
o What is a headless browser
o Scripting with a headless
browser
o Testing with a headless
browser
53

54. 54
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration May 2013
What is a headless browser
• Web browser without a GUI
• Renders web pages
• Outputs to non-humans
i.e. other software
• Useful for:
o testing
o parsing
o screen capture
54

55. 55
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration May 2013
Enter the PhantomJS
• Headless WebKit
• Scriptable with JavaScript/CoffeeScript
• Support for various web standards:
o DOM handling
o CSS selector
o JSON
o Canvas
o SVG
55

56. 56
May 2013
PhantomJS basic how to
Create a script: hello.js
console.log('Hello, DrupalCon Portland!');
phantom.exit();
Run script in the command line
phantomjs hello.js
Output
Hello, DrupalCon Portland!
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 56

57. 57
May 2013
PhantomJS modules
WebPage
A WebPage object encapsulates a web page.
System
A set of functions to access system-level functionality.
FileSystem
A set of API functions available to access files and directories.
WebServer
Using an embedded web server module called Mongoose, PhantomJS script can start
a web server.
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 57

58. 58
May 2013
PhantomJS basic how to
Page Loading: loadpage.js
var page = require('webpage').create();
page.open('http://portland2013.drupal.org', function () {
page.render('drupalcon.png');
phantom.exit();
});
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 58

59. 59
May 2013
PhantomJS basic how to
Page Loading with arguments
var page = require('webpage').create(),
system = require('system');
page.open(system.args[1], function (status) {
if (status == 'success') {
console.log('Loaded the address: ' + system.args[1]);
}
phantom.exit();
});
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 59

60. 60
May 2013
PhantomJS basic how to
Page Loading with arguments
var page = require('webpage').create(),
system = require('system');
page.open(system.args[1], function (status) {
if (status == 'success') {
console.log('Loaded the address: ' + system.args[1]);
}
phantom.exit();
});
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 60

61. 61
May 2013
PhantomJS basic how to
Page Loading with arguments
var page = require('webpage').create(),
system = require('system');
page.open(system.args[1], function (status) {
if (status == 'success') {
console.log('Loaded the address: ' + system.args[1]);
}
phantom.exit();
});
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 61

62. 62
May 2013
PhantomJS basic how to
Page Loading with arguments
var page = require('webpage').create(),
system = require('system');
page.open(system.args[1], function (status) {
if (status == 'success') {
console.log('Loaded the address: ' + system.args[1]);
}
phantom.exit();
});
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 62

63. 63
May 2013
PhantomJS basic how to
Run script in the command line
phantomjs loadpage.js http://www.google.com
Output
Loaded the address: http://www.google.com
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 63

64. 64
May 2013
PhantomJS basic how to
Code Evaluation
var page = require('webpage').create();
page.open(url, function (status) {
var title = page.evaluate(function () {
return document.title;
}); console.log('Page title is ' + title); });
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 64

65. 65
May 2013
Running Jasmine with PhantomJS
Github: phantomjs / examples / run-jasmine.js
Located at: https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 65

66. 66
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 66

67. 67
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 67

68. 68
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 68

69. 69
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 69

70. 70
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 70

71. 71
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 71

72. 72
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 72

73. 73
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 73

74. 74
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 74

75. 75
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 75

76. 76
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 76

77. 77
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 77

78. 78
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 78

79. 79
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 79

80. 80
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 80

81. 81
May 2013
Running Jasmine with PhantomJS
From https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration
...
...
...
81

82. 82
May 2013
PhantomJS features
Headless web testing
Lightning-fast testing without the browser with various test frameworks.
Page automation
Access and manipulate web pages with the standard DOM API, or with usual
JavaScript libraries.
Screen capture
Programmatically capture web contents including CSS, SVG and Canvas.
Network monitoring
Automate performance analysis, track page loading and export as standard HAR
format.
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 82

83. 83
May 2013
PhantomJS custom modules (v1.7)
Require
Users can reference their own modules from the file system using require function.
General usage
var server = require('webserver').create();
var Awesome = require('MyAwesomeModule');
Awesome.do();
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 83

84. 84
CI
May 2013
Lets integrate it with Jenkins
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 84

85. 85
May 2013
Agenda
1.Who we are
2.Testing JS code and front-
end
• Testing without the browser
• Continuous Integration
o Deploying code
o Integrating testing with
builds
o Review build results
85

86. 86
May 2013
Meet Jenkins
• Leading open-source
Continuous Integration server
• Built with Java
• Plug-in support
• RSS/E-mail/IM support
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 86

87. 87
May 2013
Jenkins in action - dashboard
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 87

88. 88
May 2013
Jenkins in action - project
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 88

89. 89
May 2013
Jenkins in action - build
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 89

90. 90
May 2013
Jenkins in action - build detail
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 90

91. 91
May 2013
Deploying code - console output of build
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 91

92. 92
May 2013
PhantomJs & Jasmine with XML
Github: detro / phantomjs-jasminexml-example
Located at: https://github.com/detro/phantomjs-jasminexml-example
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 92

93. 93
May 2013
Jasmine Reporter Plugin
Github: ../ test / lib / jasmine-reporters
Located at: https://github.com/detro/phantomjs-jasminexml-example/tree/master/test/lib/jasmine-reporters
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 93

94. 94
May 2013
Jasmine Reporter Plugin
Github: ../ test / lib / jasmine-reporters
Located at: https://github.com/detro/phantomjs-jasminexml-example/tree/master/test/lib/jasmine-reporters
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 94

95. 95
May 2013
PhantomJS XML Runner
Github: ../ test / phantomjs_jasminexml_runner.js
https://github.com/detro/phantomjs-jasminexml-example/blob/master/test/phantomjs_jasminexml_runner.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 95

96. 96
May 2013
PhantomJS XML Runner
Github: ../ test / phantomjs_jasminexml_runner.js
https://github.com/detro/phantomjs-jasminexml-example/blob/master/test/phantomjs_jasminexml_runner.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 96

97. 97
May 2013
PhantomJS XML Runner
Github: ../ test / phantomjs_jasminexml_runner.js
https://github.com/detro/phantomjs-jasminexml-example/blob/master/test/phantomjs_jasminexml_runner.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 97

98. 98
May 2013
PhantomJS XML Runner
Github: ../ test / phantomjs_jasminexml_runner.js
https://github.com/detro/phantomjs-jasminexml-example/blob/master/test/phantomjs_jasminexml_runner.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 98

99. 99
May 2013
PhantomJS XML Runner
Github: ../ test / phantomjs_jasminexml_runner.js
https://github.com/detro/phantomjs-jasminexml-example/blob/master/test/phantomjs_jasminexml_runner.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 99

100. 100
May 2013
PhantomJS XML Runner
Github: ../ test / phantomjs_jasminexml_runner.js
https://github.com/detro/phantomjs-jasminexml-example/blob/master/test/phantomjs_jasminexml_runner.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 100

101. 101
May 2013
PhantomJS XML Runner
Github: ../ test / phantomjs_jasminexml_runner.js
https://github.com/detro/phantomjs-jasminexml-example/blob/master/test/phantomjs_jasminexml_runner.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 101

102. 102
May 2013
PhantomJS XML Runner
Github: ../ test / phantomjs_jasminexml_runner.js
https://github.com/detro/phantomjs-jasminexml-example/blob/master/test/phantomjs_jasminexml_runner.js
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 102

103. 103
May 2013
Running PhantomJS in Jenkins: configuration
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 103

104. 104
May 2013
Running PhantomJS in Jenkins: Console Output
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 104

105. 105
May 2013
Publishing test results in Jenkins: configuration
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 105

106. 106
May 2013
Publishing test results in Jenkins: configuration
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 106

107. 107
May 2013
Publishing test results in Jenkins: Console Output
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 107

108. 108
May 2013
Review build and test results
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 108

109. 109
May 2013
Review build and test results
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 109

110. 110
May 2013
Review test results
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 110

111. 111
May 2013
Review test results
Who we are | Testing JS Code & Front-End | Testing without the Browser | Continuous Integration 111

112. 112
May 2013
Agenda
1.Who we are
2.Testing JS code and front-
end
• Testing without the browser
• Continuous Integration
112

113. 113
May 2013
Agenda
1.Who we are
2.Testing JS code and front-
end
• Testing without the browser
• Continuous Integration
o Wrote and ran tests in
Jasmine
o We are able to do various
types of testsautomatically
o This is more accurate than
manual testing
113

114. 114
May 2013
Agenda
1.Who we are
2.Testing JS code and front-
end
• Testing without the browser
• Continuous Integration
o Executed Jasmine tests via
PhantomJS
o The tests can be ran by
non-humans
o This saves us resources
114

115. 115
May 2013
Agenda
1.Who we are
2.Testing JS code and front-
end
• Testing without the browser
• Continuous Integration
o Added tests execution
during builds on Jenkins
o Reviewed test results in
Jenkins after builds
o Allows us to be more agile
115

116. 116
From Mint Digital's blog, original cartoon by xkcd

117. 117
May 2013
Thank you!
Evaluate this session at:
portland2013.drupal.org/schedule
Enjoy the rest of
Drupalcon 2013 Portland
117