meetup js 112616
TRANSCRIPT
TDD – Test Driven Development
11/26/2016 1parish.saintpats.org kofc809.org
with Jasmine
11/26/2016 2parish.saintpats.org kofc809.org
an introduction
11/26/2016 3parish.saintpats.org kofc809.org
TDD
11/26/2016 4parish.saintpats.org kofc809.org
• Test Driven Development
o repetition of a very short development cycleo requirements turned into very specific test caseso software is improved to pass the new tests, only
Reference:1. “JavaScript Testing with Jasmine” by Evan Hahn http://shop.oreilly.com/product/0636920028277.do
2. https://en.wikipedia.org/wiki/Test-driven_development
TDD
11/26/2016 5parish.saintpats.org kofc809.org
Reference:1. https://en.wikipedia.org/wiki/Test-driven_development
Add a test
Run tests
Write code
Run tests
Re-factor
TDD
11/26/2016 6parish.saintpats.org kofc809.org
Reference:1. https://en.wikipedia.org/wiki/Test-driven_development
OkStartWrite validtest
DoneRun test
Write code
y
n
Jasmine
11/26/2016 7parish.saintpats.org kofc809.org
“Jasmine is a behavior-driven development (BDD) framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.”
• https://jasmine.github.io/
Reference: BDD https://en.wikipedia.org/wiki/Behavior-driven_development
11/26/2016 8parish.saintpats.org kofc809.org
Testing in the browser
The goal is to see your test results in the browser!
SpecRunner.html
dependent libraries
• jQuery
• bootstrap
• etc
app specific modules
• app.js
• debug.js
specs• app_spec01.js
• app_spec02.js
11/26/2016 9parish.saintpats.org kofc809.org
Testing in the browser
The goal is to see your test results in the browser!
SpecRunner.html
What is contained in the <head>
<body>
tags?
11/26/2016 10parish.saintpats.org kofc809.org
Testing in the browser
Html in the file named SpecRunner.html 1
<head><title>Jasmine SpecRunner</title>
<!-- https://jasmine.github.io/ -->
<meta charset="utf-8">
<!-- cdnjs.cloudflare.com -->
<!-- Jasmine --><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.min.css"/>
<script type="text/javascript“
src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.min.js"></script>
<script type="text/javascript“
src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine-html.min.js"></script>
<script type="text/javascript“
src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/boot.min.js"></script>
</head>
Reference:1. “Jasmine Installation” https://github.com/jasmine/jasmine#installation
Get the example html and scripts:Gist.Github/ NorthDecoder/Jasmine_SpecRunner.htmlhttps://gist.github.com/NorthDecoder/0a4ef12b4169ffe05c774563afeed3a7
11/26/2016 11parish.saintpats.org kofc809.org
Testing in the browser
Html in the file named SpecRunner.html 1
<body><!-- The order of loading here matters; FIFO, so put lib loader first! -->
<!-- Loads stuff like jQuery and bootstrap and theme css
into the html head tag -->
<script type="text/javascript"
src="../js/loaders/load_requisite_libraries_for_this_app.js" defer>
</script>
<!-- Loads the application specific scripts into the html head tag -->
<!-- code to be tested -->
<script type="text/javascript"
src="../js/loaders/load_requisite_modules_for_this_app.js" defer>
</script>
<!-- test specs -->
<script type="text/javascript"
src="./specs/loaders/load_specifications_into_SpecRunner.js" defer>
</script>
<!-- test results auto populate here ;) -->
</body>
Get the example html and scripts:Gist.Github/ NorthDecoder/Jasmine_SpecRunner.htmlhttps://gist.github.com/NorthDecoder/0a4ef12b4169ffe05c774563afeed3a7
1. Paths are highly dependent upon your project directory structure
11/26/2016 12parish.saintpats.org kofc809.org
Testing in the browser
Reference:1. “Script loading” https://www.html5rocks.com/en/tutorials/speed/script-loading/
2. Maybe use requirejs instead! http://www.requirejs.org/
load_requisite_modules_for_this_app.js 1
[
'../js/dev_script1.js',
'../js/app.js',
'../js/ux.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
Get the complete html and scripts:Gist.Github/ NorthDecoder/Jasmine_SpecRunner.htmlhttps://gist.github.com/NorthDecoder/0a4ef12b4169ffe05c774563afeed3a7
11/26/2016 13parish.saintpats.org kofc809.org
Project test directory structure
Relevent parts Specifications shortened
to spec
SpecRunner.html, however
the name of the file can
can be anything
Reference:
1. https://ide.c9.io/northdecoder/example-google-maps
11/26/2016 14parish.saintpats.org kofc809.org
A list of failures
Relevent parts what
why
Reference:
1. https://ide.c9.io/northdecoder/example-google-maps
the revision level
11/26/2016 15parish.saintpats.org kofc809.org
A list of specifications
Reference:
1. https://ide.c9.io/northdecoder/example-google-maps
11/26/2016 16parish.saintpats.org kofc809.org
A brief introduction
https://jasmine.github.io/2.5/introduction
• suites• specs• expectations• matchers• grouping• setup and teardown• nesting• disabling• pending• spies
describe("A suite", function() {});
it(“is a spec ", function() {});
expect(true).toBe(true);
.toBe(); not.toBe(); .toEqual(); etc
Multiple its within a describe
beforeEach, afterEach, beforeAll, afterAll
describe within a describe
xdescribe
xit
toHaveBeenCalled, toHaveBeenCalledTimes
toHaveBeenCalledWith and many more
Challenge:load html from separate file into SpecRunner.htmland test a section of the user interface.
11/26/2016 17parish.saintpats.org kofc809.org
Hints:1. http://stackoverflow.com/questions/704679/parse-html-
string-with-jquery2. http://stackoverflow.com/questions/1034881/what-is-the-
best-practice-for-parsing-remote-content-with-jquery/1069953#1069953
Reference
11/26/2016 18parish.saintpats.org kofc809.org
• Lynda video tutorialso Overview https://www.lynda.com/JavaScript-tutorials/Exploring-test-driven-
development/383908/426344-4.html
o TDD w/ node.js https://www.lynda.com/Node-js-tutorials/Test-Driven-Development-Node-js/383527-2.html
o Karma-Jasmine-Grunt https://www.lynda.com/AngularJS-tutorials/Setting-up-Karma-Jasmine-Grunt-Task-Runner/521229/529677-4.html
o TTD general foundations https://www.lynda.com/Developer-Programming-Foundations-tutorials/What-TDD/124398/137959-4.html
o Other frameworks; Mocha & Chai https://www.lynda.com/Node-js-tutorials/Testing-mocha-Chai/417077/454472-4.html
Reference
11/26/2016 19parish.saintpats.org kofc809.org
• Youtube video tutorialso Overview
o TDD w/ node.js
o Karma-Jasmine Christopher Bartling at MIdwest JS 2014 Sep 21, 2014 https://www.youtube.com/watch?v=MPVr28UJV3w
o Grunt
o TTD general foundations
o Other frameworks; Mocha & Chai
o Code Katas with Dominik Marczuk1. Setting up IntelliJ IDEA https://www.youtube.com/watch?v=gRc_Nt9wzQA
2. Prime factors https://www.youtube.com/watch?v=qvi8iBSmH5A
3. Roman Numerals https://www.youtube.com/watch?v=hRIU7463Ifo
4. Bowling https://www.youtube.com/watch?v=VKsvx0oidks
o Fizzbuzz https://www.youtube.com/watch?v=RQTDMk4WCp4
Reference
11/26/2016 20parish.saintpats.org kofc809.org
• Youtube video tutorialso Popular Videos - Jasmine & Test-driven development
https://www.youtube.com/playlist?list=PLWEaYPQ0Qrn8RNWKMK8fmw1eQtGwT5xVJ
o Saint Louis JavaScript Meetup Feb 23, 2014 (client side) https://www.youtube.com/watch?v=Yt4QypqFDyg
o blazingcloudnet's channel -> playlist -> Javascript with Jasmine https://www.youtube.com/playlist?list=PLC3B6E03EABF76CF1
o GOTO 2013 • JS Unit Testing Good Practices & Horrible Mistakes • Roy Osherove https://www.youtube.com/watch?v=iP0Vl-vU3XM
Reference
11/26/2016 21parish.saintpats.org kofc809.org
• Alternatives to Jasmineo List_of_unit_testing_frameworks
https://en.wikipedia.org/wiki/List_of_unit_testing_frameworks
o Other frameworks; Mocha & Chai https://www.lynda.com/Node-js-tutorials/Testing-mocha-Chai/417077/454472-4.html