javascript testing with jasmine 101
DESCRIPTION
This presentation is prepared for SVCC 2014 on Javascript Testing with Jasmine. It basically goes through basic Jasmine feature and provide tips for developers when they decide to start testing.TRANSCRIPT
![Page 1: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/1.jpg)
JAVASCRIPT TESTING WITH JASMINE
ROY YU
Silicon Valley Code Camp 2014
![Page 2: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/2.jpg)
WHY UNIT TEST ?
It acts as a “free” documentation for your code, they provide example to other developers of how your code works.
![Page 3: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/3.jpg)
WHY UNIT TEST ?
It reduces bugs in new or existing features. It tells you right away if you someone’s code.
![Page 4: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/4.jpg)
WHY UNIT TEST ?
It force you to understand the features and promote communication between technical and non-technical group.
![Page 5: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/5.jpg)
WHY UNIT TEST ?
It reduces cost for software development or feature development.
![Page 6: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/6.jpg)
WHY UNIT TEST ?
It improves your software / feature design. Thinking how to make a software testable ahead of time will decrease the complexity of your code.
![Page 7: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/7.jpg)
WHY UNIT TEST ?
It defends against your coworkers when doing code reviews.
![Page 8: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/8.jpg)
WHY UNIT TEST ?
Plus …
![Page 9: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/9.jpg)
WHY UNIT TEST ?
Promote Better Sleeping pattern during night time.
![Page 10: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/10.jpg)
WHY UNIT TEST ?
It makes you feel you are a super star … until someone in your team starts doing the same thing
![Page 11: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/11.jpg)
JAVASCRIPT TESTING WITH JASMINE
ROY YU
![Page 12: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/12.jpg)
JASMINE – SETUP
Go to >> jasmine.github.io
![Page 13: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/13.jpg)
JASMINE – SETUP
![Page 14: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/14.jpg)
JASMINE – SETUP
![Page 15: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/15.jpg)
JASMINE – SETUP
![Page 16: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/16.jpg)
JASMINE – SETUP
![Page 17: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/17.jpg)
JASMINE – VERY BASIC
Jasmine is a behavior driven testing framework for testing javascript code.
Note: Behavior driven development ( BDD ) emphasis on writing your spec against your feature behavior ( business requirement ) that are small and easy to read.
• Small: Your test just need to test one thing only.
• Easy to read: Your test should need only one sentence to describe what you are testing.
![Page 18: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/18.jpg)
JASMINE – VERY BASIC
![Page 19: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/19.jpg)
FIRST TEST
describe(‘Shark’, function() {
it(“should know how to swim”, function() {
var shark = new Shark();
expect(shark.swim).not.toBeUndefined();
});
});
// This is just an imaginary test
![Page 20: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/20.jpg)
SUITE
describe(‘Shark’, function() {
it(“should know how to swim”, function() {
var shark = new Shark();
expect(shark.swim).not.toBeUndefined();
});
});
Note: Suite typically defines a component of your application, it could be either a class or a function. The first argument take a “string”, and second take a function.
![Page 21: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/21.jpg)
SPEC
describe(‘Shark’, function() {
it(“should know how to swim”, function() {
var shark = new Shark();
expect(shark.swim).not.toBeUndefined();
});
});
Note: Inside suite are the ‘specs’. It is testing what a particular piece of your component or your code should do. Each suite can holds any number of specs.
![Page 22: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/22.jpg)
MATCHERS
describe(‘Shark’, function() {
it(“should know how to swim”, function() {
var shark = new Shark();
expect(shark.swim).not.toBeUndefined();
});
});
Note: Matchers are for validating your specs passing or not. It takes the argument inside expect() and check to see if it satisfies the criteria in the matcher.
![Page 23: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/23.jpg)
JASMINE - BEFOREEACHdescribe(‘Shark’, function() {
var shark;
beforeEach(function() { // this will run for each spec ( setUp )
shark = new Shark();
});
it(“should know how to swim”, function() {
expect(shark.swim).not.toBeUndefined();
});
it(“has a fin”, function() {
// …
});
it(“has sharp teeth”, function() {
// …
});
});
![Page 24: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/24.jpg)
AFTEREACHdescribe(‘Shark’, function() {
var shark;
beforeEach(function() {
shark = new Shark();
});
afterEach(function() { // this will run after each spec ( tearDown )
shark = new Shark();
});
it(“has a fin”, function() {
// …
});
it(“has sharp teeth”, function() {
// …
});
});
![Page 25: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/25.jpg)
SKIP SPEC
describe(‘Shark’, function() {
xit(“should know how to swim”, function() {
// this spec will be skipped by the test runner
});
it(“has a fin”, function() {
// this spec will still be run
});
});
![Page 26: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/26.jpg)
SKIP SUITE
xdescribe(‘Shark’, function() {
it(“should know how to swim”, function() {
// …
});
it(“has a fin”, function() {
// …
});
});
The whole suite will be skipped by the test runner.
![Page 27: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/27.jpg)
NESTED SUITESdescribe(‘Shark’, function() {
describe(“Sharks’ teeth”, function() {
it(“blah …”, function() {
// …
});
});
describe(“Sharks’ skin”, function() {
it(“another blah …”, function() {
// …
});
});
});
![Page 28: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/28.jpg)
MORE MATCHERS
![Page 29: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/29.jpg)
EQUALITY
toEqual
expect(true).toEqual(true);
expect([‘a’, ‘b’]).toEqual([‘a’,’b’]);
expect(6).toEqual(13);
expect(false).toEqual(123);
![Page 30: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/30.jpg)
IDENTICAL
toBe
expect(a).toEqual(b);
expect(a).toBe(a);
expect(a).toBe(b);
// toBe checks for if same object.
var a = {test:”abc”};var b = {test:”abc”};
![Page 31: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/31.jpg)
YES / NO
toBeTruthy / toBeFalsy
expect(true).toBeTruthy();
expect(12).toBeTruthy();
expect(null).toBeFalsy();
expect(false).toBeFalsy();
expect(“”).toBeTruthy();
expect(undefined).toBeTruthy();
Expect(“hello”).toBeFalsy();
![Page 32: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/32.jpg)
CONTAIN ELEMENT
toContain
expect([1,3,5]).toContain(3);
expect(“hello everyone”).toContain(“hello”);
expect([
{ test: “abc”}, {test: “efg”}
]).toContain({test: “sos”});
![Page 33: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/33.jpg)
DEFINED OR NOT
toBeDefined / toBeUndefined
expect(myDefinedVariable).toBeDefined();
expect(null).toBeDefined();
expect(yourVariable).toBeDefined();
expect(null).toBeUndefined();
var myDefinedVariable;
![Page 34: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/34.jpg)
NULLNESS
toBeNull
expect(null).toBeNull();
expect(false).toBeNull();
expect(yourVariable).toBeNull();
![Page 35: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/35.jpg)
NAN
toBeNaN
expect(0/0).toBeNaN();
expect(“hello everyone”).toBeNaN();
expect(6).toBeNaN();
![Page 36: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/36.jpg)
COMPARISION
toBeGreaterThan / toBeLessThan
expect(8).toBeGreateThan(5);
expect(“a”).toBeLessThan(“c”);
expect(5).toBeGreaterThan(13);
![Page 37: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/37.jpg)
CLOSENESS
toBeCloseTo
expect(10.01).toBeCloseTo(10.08, 1);
expect(10.012).toBeCloseTo(10.01, 2);
expect(10.012).toBeCloseTo(12, 0);
expect(10.01).toBeCloseTo(10.08, 2);
expect(10.012).toBeCloseTo(10.01, 3);
![Page 38: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/38.jpg)
MATCHING
toMatch
expect(“hello world”).toMatch(/world/);
expect(“hello world”).toMatch(/everyone/);
![Page 39: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/39.jpg)
THROW ERROR
toThrow
expect(_a_func_that_throw_error).toThrow();
// It takes a function and see if it throw error
expect(function() {
return “something”;
}).toThrow();
var _a_func_that_throw_error = function() {
throw new Error();}
![Page 40: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/40.jpg)
NEGATION
not
expect(1).not.toBeGreaterThan(3);
expect(true).not.toBeFalsy();
expect(“hello world”).not.toBeDefined();
![Page 41: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/41.jpg)
CUSTOM MATCHERJasmine.addMatchers({
toBeGreaterThan: function() {
return {
compare: function(actual, expected) {
return {
pass: actual > expected
}
}
}
}
});
![Page 42: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/42.jpg)
RECAP
Let’s do some exercise
Read the following sentences …
I learn today Jasmine is about …
describe, it, using expect and matchers
describe, it, using expect and matchers
describe, it, using expect and matchers
![Page 43: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/43.jpg)
RECAP
Well, not totally true in previous slide, but true by so far.
describe(‘Shark’, function() {
it(“should know how to swim”, function() {
var shark = new Shark();
expect(shark.swim).not.toBeUndefined();
});
});
![Page 44: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/44.jpg)
TESTING SPIES
![Page 45: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/45.jpg)
BASE CLASSvar Shark = function() {}
Shark.prototype.greet = function(thing) {
this.eat(thing);
}
Shark.prototype.eat = function(thing) {
this.say(thing);
}
Shark.prototype.say = function(thing) {
return thing + “ is so yummy”;
}
![Page 46: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/46.jpg)
POPUP QUIZ
In plain English, can you describe a “Shark” by this definition ?
var Shark = function() {}
Shark.prototype.greet = function(thing) {
this.eat(thing);
}
Shark.prototype.eat = function(thing) {
this.say(thing);
}
Shark.prototype.say = function(thing) {
return thing + “ is so yummy”;
}
![Page 47: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/47.jpg)
SPY BASIC
describe(“Shark”, function() {
it(‘eats whatever it greets’, function() {
var shark = new Shark();
spyOn(shark, ‘eat’);
shark.greet(‘duck’);
expect(shark.eat)
.toHaveBeenCalled();
}
});
var Shark = function() {}
Shark.prototype.greet = function(thing) {
this.eat(thing);
}
Shark.prototype.eat = function(thing) {
this.say(thing);
}
Shark.prototype.say = function(thing) {
return thing + “ is so yummy”;
}
![Page 48: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/48.jpg)
SPY BASIC
With spy, you can do the following as well
• expect(shark.eat).toHaveBeenCalledWith(‘duck’)
• expect(shark.eat.callCount).toBe(1)
You can also force a spy function to return stuff you defined
• spyOn(shark, ‘say’).andReturn(‘Meh …’);
// Note that the first argument for spyOn is the object, second argument is the method in string format
![Page 49: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/49.jpg)
SPY BASIC
Some catcha …
By default, spy will replace the behavior of your spied function, some people illustrate it as “eating the function”. In order to use spy as well as delegate the spied function back to the actual implementation, you can do the following
spyOn(shark, ‘eat’).andCallThrough();
![Page 50: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/50.jpg)
SPY BASICdescribe(“Shark”, function() {
it(‘eats whatever it greets’, function() {
var shark = new Shark();
spyOn(shark, ‘eat’)
.andCallThrough();
shark.greet(‘duck’);
expect(shark.eat)
.toHaveBeenCalled();
expect(shark.say)
.toHaveBeenCalled();
});
var Shark = function() {}
Shark.prototype.greet = function(thing) {
this.eat(thing);
}
Shark.prototype.eat = function(thing) {
this.say(thing);
}
Shark.prototype.say = function(thing) {
return thing + “ is so yummy”;
}
![Page 51: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/51.jpg)
RECAP
In short, spy records its interaction with other objects in your test.
For example, you can retrieve run time statistic on the spied function.
• How many times the function was called
• What was the value return to the caller
• How many parameters the function was called with
![Page 52: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/52.jpg)
RECAP
There are more concepts to Jasmine when coming to test doubles. In javascript testing world, there are spies, stubs and mocks. They could look very similar, but their existence are for different use cases. We will introduce other library that make it easy to understand in reference section.
But for now, learning what spy means in Jasmine will give you what you need to write test.
![Page 53: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/53.jpg)
ASYNC TESTING
![Page 54: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/54.jpg)
ASYNC TESTING
In javascript, there are times you may need to test ‘events’, ‘ajax calls’ type of asynchronous actions.
For example :
// Assume after shark finishing its meal, it will send a signal ( event ) out ?
describe(‘Shark’, function() {
it(‘should say something after finishing its meal’,
function() {
}
});
![Page 55: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/55.jpg)
ASYNC TESTING
var Shark = function() {
this.on(‘finish_eating’, function(evt, payload) {
this.say(payload.item);
}, this);
}
Shark.prototype.eat = function(thing) {
this.trigger(‘finish_eating’, {item:thing});
}
![Page 56: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/56.jpg)
ASYNC TESTINGIn Jasmine, there are a few functions called runs, waits and waitsFor to support running specs for testing async operation.
The sequence usually looks like :-
// code that starts the async process
runs
// wait for something happen or timeout
waitsFor
// after waitsFor done its job, the next runs block will execute
runs
![Page 57: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/57.jpg)
ASYNC TESTINGdescribe(“Shark”, function() {
it(‘say something after finish eating’, function() {
var shark = new Shark();
spyOn(shark, ‘say’);
runs(function() { // start the async support
shark.eat(‘duck’);
});
waitsFor(function() { // wait for something happen and return true, or it will time out
return shark.say.callCount == 1;
}, “Shark should say something”, 500);
runs(function() { // still inside the async support
expects(shark.say.callCount).toBeGreaterThan(0);
});
}
});
![Page 58: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/58.jpg)
You just finish the basic features of Jasmine ~ Hopefully you still remember what you just learned :-)
![Page 59: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/59.jpg)
Now go ahead and sleep better from now on ~
![Page 60: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/60.jpg)
But Wait !!
![Page 61: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/61.jpg)
Jasmine is just the
Beginning …
![Page 62: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/62.jpg)
There are
more in JS testing …
![Page 63: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/63.jpg)
It’s time to use your notepad
![Page 64: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/64.jpg)
http://karma-runner.github.io/
http://phantomjs.org/
http://sinonjs.org/
http://jasmine.github.io/
http://gotwarlost.github.io/istanbul/
http://docs.busterjs.org/en/latest/
http://requirejs.org/
https://github.com/velesin/jasmine-jquery
http://gruntjs.com/
![Page 65: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/65.jpg)
Some for you ~
![Page 66: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/66.jpg)
TDD
TDD and BDD go together hands in hands, not really competitors.
The emphasis of TDD is your test is ahead of your implementation and it follows the Red Green Refactor pattern.
Red you write test that fail
Green you write basic implementation to pass the test
Refactor write you real implementation based on requirement
![Page 67: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/67.jpg)
TDD
But let’s face it
It is just a theory
And you don’t aim for 100% test coverage!!
![Page 68: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/68.jpg)
TDD
But it’s still good
to practice it
At least there are some coverage to start with!!
![Page 69: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/69.jpg)
BDD
BDD could be considered as an extension to TDD
The emphasis is more on business case and promote communicate with different group
![Page 70: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/70.jpg)
BDD
It combines two different activities into one
• The creation of Unit Tests and implementations
• The creation of Functional Tests and features
![Page 71: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/71.jpg)
THINK TEST FIRST
Try to ask yourself next time when you start writing your code “How can I test it?, Is this function testable?” It will help yourself to minimize the complexity of your code.
If your existing function / class is doing too many things at the same time, try to write some specs and it will help your refactoring.
Remember, your function should just need to do one thing and do it good.
![Page 72: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/72.jpg)
COMMUNICATION
Unit test is not just about Green light or Red light, it is also about communication. Make sure you are writing the right specs, and making the right assumption.
Invest more time with your manager / product / lead to truly understand what you are implementing.
Just as what mentioned in the first few slides, writing/planning test promotes communication between technical and non technical group.
![Page 73: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/73.jpg)
CONVERT TEST SPECS
When you receive your requirement from your manager / product, it’s already come with “expected behavior” inside the “user story”.
![Page 74: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/74.jpg)
REFACTOR LEGACY CODE
If code are not developed with testable in mind, it should have a lot of dependencies, for example, talk to database, sending emails. One of the task of refactoring code be to testable is first breaking the dependencies. After that, you want to check if any of your methods are doing too much, and there is clear role of that function. You can call this step reducing complexity.
![Page 75: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/75.jpg)
WHAT TO TEST
You should test thing that is going to last. For example, you won’t test the a particular flow that is under A/B testing, since it won’t last long.
You should test your critical path that deliver business values. If you have bunch of getter and setter, some people will actually exclude that, because it doesn’t deliver real values to the business.
The main guide line is to think and apply whenever it makes sense, there is no point to aim for 100% coverage.
![Page 76: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/76.jpg)
NO DEPENDENCIES
As a frontend dev, your unit test is probably not done correctly if …
1. You need to do a real ajax call
2. You instantiate a class in your test that is not what you are testing
3. Other external data source
For all those dependencies, you need to stub it out or mock it out. Your unit test should be isolated on its own.
![Page 77: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/77.jpg)
REMEMBER
Unit testing is about testing as a (isolated) unit. So for all other dependencies, you will need to create stub, mock, fakeServer or fixture!!
![Page 78: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/78.jpg)
IT’S DEMO TIME
![Page 79: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/79.jpg)
Questions ?!
![Page 80: Javascript Testing with Jasmine 101](https://reader035.vdocuments.site/reader035/viewer/2022062220/558e44b41a28ab9a668b476a/html5/thumbnails/80.jpg)
THANK YOU
https://www.linkedin.com/in/iroy2000