Unit testing js
-
Upload
alexandra-morozova -
Category
Documents
-
view
59 -
download
0
Transcript of Unit testing js
![Page 1: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/1.jpg)
© MIRANTIS 2013 PAGE © MIRANTIS 2014
Making frontend better:unit-testing
Aleksandra Morozova
![Page 2: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/2.jpg)
© MIRANTIS 2014
Preface
![Page 3: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/3.jpg)
© MIRANTIS 2014
Agenda
•Why is unit-testing JS needed?
•Specifics of unit-tests in JS
• Instruments overview
•Best practices and approaches
![Page 4: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/4.jpg)
© MIRANTIS 2014 PAGE
Why do we need all these tests?
![Page 5: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/5.jpg)
© MIRANTIS 2014 PAGE
Big changes done quickly
![Page 6: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/6.jpg)
© MIRANTIS 2014 PAGE
Fuel example
![Page 7: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/7.jpg)
© MIRANTIS 2014 PAGE
Fuel example
![Page 8: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/8.jpg)
© MIRANTIS 2014 PAGE
Step closer to PERFECT CODE
![Page 9: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/9.jpg)
© MIRANTIS 2014 PAGE
Understanding the design
![Page 10: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/10.jpg)
© MIRANTIS 2014 PAGE
Less time for testing
![Page 11: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/11.jpg)
© MIRANTIS 2014 PAGE
Self-documented code
![Page 12: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/12.jpg)
© MIRANTIS 2014 PAGE
Tests allow REFACTORING
![Page 13: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/13.jpg)
© MIRANTIS 2014 PAGE
Testing is FUN!
![Page 14: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/14.jpg)
© MIRANTIS 2014
A few cons
•Slow down the development process
•Share the same blind point with the code
•Do not prove that work one with another
![Page 15: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/15.jpg)
© MIRANTIS 2014
Basic terms
•Assertion - defining if test is ok or not
expect(26+2).to.equal(28);
![Page 16: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/16.jpg)
© MIRANTIS 2014
Basic terms
•Fixture - fixed state of software to test, basis for tests (AJAX)
beforeEach(function() {loadFixtures(‘dummymarkup.html’);
})
![Page 17: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/17.jpg)
© MIRANTIS 2014
Basic terms
•method Stub - function with pre-programmed behaviour
var fn = foo.stub().throws(Error);expect(fn).to.throw(Error);
![Page 18: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/18.jpg)
© MIRANTIS 2014
Basic terms
•Spy - function that records arguments, scope, return value, exception thrown for all its calls
sinon.spy(cursor, ‘hide’);
![Page 19: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/19.jpg)
© MIRANTIS 2014
Basic terms
•Mock - fake object with pre-programmed behavior (like stub) and pre-programmed expectations => stubs+spies
var mock = sinon.mock(“jQuery”);
![Page 20: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/20.jpg)
© MIRANTIS 2014
Basic Structure
•Setup - beforeEach(), before()
•Prepare data for test
•Call a method
•Check output data •Tear down - afterEach(), after()
![Page 21: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/21.jpg)
© MIRANTIS 2014
Setup
before (function() {console.log(‘before test’)};)
test(‘first test’, function() {console.log(‘first test’);}
);
test(‘second test’, function() {console.log(second test’);}
);
afterEach(function() {console.log(‘after each’)};)
![Page 22: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/22.jpg)
© MIRANTIS 2014
Prepare, call & check
![Page 23: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/23.jpg)
© MIRANTIS 2014
Tear down
after(function (done) {
//remove global document object
document = null;
window = null;
done();
})
![Page 24: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/24.jpg)
© MIRANTIS 2014
Instruments
Entire space of frameworks...
![Page 25: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/25.jpg)
© MIRANTIS 2014
Instruments
Entire space of frameworks...
![Page 26: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/26.jpg)
© MIRANTIS 2014
Karma
Entire space of frameworks...
![Page 27: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/27.jpg)
© MIRANTIS 2014
Karma
$ npm install karma
Karma withRequire.js
Entire space of frameworks...
![Page 28: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/28.jpg)
© MIRANTIS 2014
Example: Backbone Model
![Page 29: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/29.jpg)
© MIRANTIS 2014
Example: Backbone Collection
![Page 30: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/30.jpg)
© MIRANTIS 2014
Example: Backbone Collection
![Page 31: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/31.jpg)
© MIRANTIS 2014
Best practices
• Fast• Isolated• Consistent• Self-descriptive• Single responsibility• No exceptions handling• Use assertions when needed
![Page 32: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/32.jpg)
© MIRANTIS 2014
Conclusion
• Each test verifies a small chunk of code
• Unit tests work better in isolation
• Mocks, stubs and spies help us
• Don’t test everything, but write many tests
![Page 33: Unit testing js](https://reader035.fdocuments.in/reader035/viewer/2022062320/5590e40d1a28ab13388b46c0/html5/thumbnails/33.jpg)
© MIRANTIS 2013 PAGE
Q&A