33
JavaScript Unit-Testing Mihail Irintchev SiteGround.com

Js unit testing

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Js unit testing

JavaScript Unit-Testing

Mihail IrintchevSiteGround.com

Page 2: Js unit testing

How do you test your JS?

1. Write your JavaScript code2. See if it works in your favourite browser3. Change something + [F5]4. If it doesn't work repeat #3 until you make it work

or you go crazy...5. In case you made it work, discover few

days/weeks later that it doesn't work in another browser

Page 3: Js unit testing

I think I'm going crazy...

Page 4: Js unit testing

So what's the first step to sanity?

WRITE TESTABLE CODE

Page 5: Js unit testing

What's wrong with this code?

js_sample_001.js(inline functions and more inside, ajax

directly hooked to element, etc.)

Page 6: Js unit testing

Anonymous functions, within functions, within functions...

Page 7: Js unit testing

I'll put functions in your functions...

Page 8: Js unit testing

All your DOM elements are belong to JS!

Page 9: Js unit testing

Server URL coupling

js_sample_001.js(with highlighted hardcoded url)

Page 10: Js unit testing

Refactoring...

js_sample_002.js

Page 11: Js unit testing

Refactoring...

js_sample_002.js

Page 12: Js unit testing

Now that's better...

js_sample_003.js(init func and hooked named functions to

page)

Page 13: Js unit testing

Now that's better...

Page 14: Js unit testing

Now that's better...

Page 15: Js unit testing

Now what about testing?

Popular JS Unit-testing frameworks:

QUnit Jasmine UnitJS JsUnit (no longer actively maintained) Some other – see:

http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript

Page 16: Js unit testing

What's about QUnit?

Used by the jQuery project to test jQuery, jQuery UI, jQuery Mobile

Can be used to test any generic JavaScript code, including itself

Very easy to install – just include JS & CSS file in your HTML

Page 17: Js unit testing

Minimal setup: The tests.htm file

Page 18: Js unit testing

The tests.js file

...remember this earlier?

Page 19: Js unit testing

… and the results:

Page 20: Js unit testing

More tests: quite a variety

Page 21: Js unit testing

… and the results:

Page 22: Js unit testing

Test modules

... and the results page:

Page 23: Js unit testing

Setup / TearDown methods:

Page 24: Js unit testing

What about asynch methods & AJAX?

Use an AJAX mocking library, such as jquery-mockjax:

Page 25: Js unit testing

No bullshit

Let me show you...

Page 26: Js unit testing

Other mock JS frameworks:

-ajax

Page 27: Js unit testing

But what about test automation?

Page 28: Js unit testing

Why phing?

1. Because I like it and I am used to it, and...2. PHING ALL THE THINGS!

Page 29: Js unit testing

But phing runs in the console...

JS needs browser to run in...

How do we run the browser?

Wouldn't it be slow?

Page 30: Js unit testing

Need speed? Ditch the browser!

Page 31: Js unit testing

But what about cross-browser testing?

Page 32: Js unit testing

Credits

”Browser Eyeballing != JavaScript Testing”, Jordan Kasperbit.ly/js-testing

”Unit Testing JavaScript With QUnit And Phing”, Robert Pricehttp://www.robertprice.co.uk/robblog/2012/12/unit-testing-javascript-with-qunit-and-phing/

”Qunit Phing Task”, Martin Jonssonhttp://github.com/martinj/phing-task-qunit

Page 33: Js unit testing

Questions?

@irintchev

[email protected]