Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Client Side Testing
Search
Andrew Best
May 26, 2015
Programming
0
67
Client Side Testing
A quick trip around javascript and Angular unit testing using Jasmine and Chutzpah.
Andrew Best
May 26, 2015
Tweet
Share
More Decks by Andrew Best
See All by Andrew Best
The Surprising Truths Behind Good Mentoring
andrewabest
0
74
Learn Authentication The Hard Way
andrewabest
0
330
Finding The Sweet Spot BNE
andrewabest
1
230
Finding The Sweet Spot
andrewabest
0
440
Automating AWS
andrewabest
2
370
Conventional Wisdom
andrewabest
1
440
DSC a-b-c's
andrewabest
0
140
AWS a-b-c's
andrewabest
3
160
What is Git?
andrewabest
0
220
Other Decks in Programming
See All in Programming
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
200
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
230
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
明日から始めるリファクタリング
ryounasso
0
120
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.5k
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
340
dynamic!
moro
9
6.7k
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
Featured
See All Featured
Done Done
chrislema
185
16k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
RailsConf 2023
tenderlove
30
1.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
For a Future-Friendly Web
brad_frost
180
9.9k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Gamification - CAS2011
davidbonilla
81
5.5k
Context Engineering - Making Every Token Count
addyosmani
5
190
Typedesign – Prime Four
hannesfritz
42
2.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Agile that works and the tools we love
rasmusluckow
331
21k
Transcript
Testing the web with Chutzpah and Jasmine
Page “I’m a c# guy that uses NUnit” › In
the javascriptworld, Jasmine is your NUnitequivalent. (http://jasmine.github.io/) › In Jasmine, you create ‘Suites’ that describe a set of expectations you have for the thing you want to test. › Jasmine also allows you to also set your expectations within these suites. / Copyright ©2014 by Readify Pty Ltd 2
Page So how do I do X in Jasmine? ›
Setup and teardown: › Ignore tests: / Copyright ©2014 by Readify Pty Ltd 3
Page Cool, now how do I run my tests? ›
Chutzpah! (https://github.com/mmanela/chutzpah) › Chutzpah generates html to run our specs with Jasmine in a headless browser (phantomjs). › It will also generate html to run our specs in our browser of choice (handy for debugging tests!) › It also takes care of loading dependencies for us where needed. / Copyright ©2014 by Readify Pty Ltd 4
Page So how to we hook it all up? ›
Install-Package Chutzpah › Install the Chutzpah VS Extensions › Add and configure your chutzpah.json › Don’t worry about installing Jasmine! Chutzpah bundles it up for you › Write your hello world unit test! / Copyright ©2014 by Readify Pty Ltd 5
Page Man this thing is busted! › Chutzpah is a
bit of a black box when used from VS – if it doesn’t seem to be working from VS, you can always use the command line runner. › Running chutzpah.console.exe {fullpathtofile.js} /trace will give you a detailed log of the test run named chutzpah.log alongside the console exe (in your packages folder) / Copyright ©2014 by Readify Pty Ltd 6
Page Okay cool, now how about Ng? › To test
an Ng app, because of how angular’smodule / DI system works, we need to make sure we include all necessary references to the applications scripts in our chutzpah.json › If you have a bunch of bootstrapping activity in your standard app.js, you may want to craft a slimmed down version for testing / Copyright ©2014 by Readify Pty Ltd 7
Page Dude, where’s my Mocks? › ngMock(https://docs.angularjs.org/api/ngMock) › Injects and
mocks most of the core angular services for us, such as $http and $log › It *must* be loaded by Chutzpah after angular.js (it overrides default behaviour) › No further wireuprequired! › Jasmine also provides some mocking functions similar to NSubstitute / Copyright ©2014 by Readify Pty Ltd 8
Page Example Ng Test / Copyright ©2014 by Readify Pty
Ltd 9 describe("Landing Page Directive", function() { var $sut; describe('If form is started', function() { var goToDashboardCalled = false; beforeEach(function() { module(function($provide) { $provide.service('utilityService', function() { return { goToDashboard: function() { goToDashboardCalled = true; } } }); }); inject(function($compile, $rootScope, $httpBackend) { $httpBackend.expectPOST('apiBaseUrlforms/getbasicformdetails').respond(200); $rootScope.formStarted = true; var elem = angular.element("<div landing-page></div>"); $sut = $compile(elem)($rootScope); $rootScope.$digest(); }); }); it('Redirects to the dashboard.', function() { expect(goToDashboardCalled).toBe(true); }); }); });
Page Hey what were those things? › Module: allows us
to replace services to be injected into our class under test. This allows us to mockother things out. › Inject: allows us to mutate mocked dependencies to set them up for our SUT, and also supply them when building our SUT. › These are both given to us via ngMock, and for ease of use are attached to the window object for us. / Copyright ©2014 by Readify Pty Ltd 10
Page Ng testing gotchas › Http interactions *must* be mocked.
› You can only set up dependencies via Module() before your call to Inject(). If you call it after… BOOM. › If something doesn’t seem to be working, remember to double check your chutzpah.jsonand the html generated by Chutzpah for script errors! / Copyright ©2014 by Readify Pty Ltd 11
Page Staying DRY › So you have a bunch of
code you want to run before every test? Sick of copy pasta? › Jasmine allows us to define a spec-helper.js file which can include global beforeEvery and afterEvery functions! › This can be a useful place to bootstrap things like Ng constants, if you have some. / Copyright ©2014 by Readify Pty Ltd 12
Page Bonus slide: CI › So now I have my
tests, how do I plug them into my CI pipeline? › Use the Chutzpah console exe that you checked in with your chutzpah package because you are a good developer and detest package restore. › And it goes a little something like this… / Copyright ©2014 by Readify Pty Ltd 13
None