An Introduction to AngularJs Unittesting

An Introduction to AngularJs Unit
Testing

Topics
•
What’re Karma & Jasmine?
•
Suites & Specs
•
beforeEach & afterEach (Setup & TearDown)
•
Expectations (Assertions)
•
Spies (Mocks & Stubs)
•
Exercise I (Hello World)
•
Exercise II (BMI Calculator Controller)
•
Q & A

Karma & Jasmine
Karma is a JavaScript command line tool that can
be used to spawn a web server which loads your
application's source code and executes your tests
(http://karma-runner.github.io/)
Jasmine provides functions to help with structuring
your tests and also making assertions. As your tests
grow, keeping them well structured and documented
is vital, and Jasmine helps achieve this.
(http://jasmine.github.io/)

Suites & Specs
Suites: describe()
A test suite begins with a call to the global Jasmine function
describe with two parameters: a string and a function. The
string is a name or title for a spec suite – usually what is being
tested. The function is a block of code that implements the
suite.
Specs: it()
specs are defined by calling the global Jasmine function it,
which, like describe takes a string and a function. The string
is the title of the spec and the function is the spec, or test. A
spec contains one or more expectations that test the state of
the code. An expectation in Jasmine is an assertion that is
either true or false. A spec with all true expectations is a
passing spec. A spec with one or more false expectations is a
failing spec.

Suites & Specs
(Con.)
PHP
class CalculatorTest extends
PHPUnit_Framework_TestCase{
public function
testCaculate2DigitsThenReturnTrue()
{
…
}
public function
testCaculate2CharsThenReturnFalse(){
…
}
}
Jasmine
describe("test calculator", function () {
it(“test calculate 2 digits then return true”,
function(){
…
});
it(“test calculate 2 chars then return true”,
function(){
…
});
});

beforeEach & afterEach (Setup &
Teardown)
PHP
class UnitTest extends PHPUnit_Framework_TestCase{
public function setUp(){
…
}
public function tearDown(){
…
}
}
Jasmine
describe("test hello world controller", function () {
beforeEach(function(){
….
});
afterEach(function () {
….
});
});

Expectations
(Assertions)
PHP VS Jasmine
assertContains(“world”, “hello world”) vs expect(“hello world”).toContain("world")
assertEquals(“success”, “success”) vs expect(“success”).toEqual(“success”)
assertNotEquals(“fail”, “success”) vs expect(“fail”).not.toEqual(“success”)
assertTrue(true) vs expect(true).toBeTruthy()
assertFalse(false) vs expect(false).toBeFalsy()
assertGreaterThan(1, 2) vs expect(2).toBeGreaterThan(1)
assertLessThan(2, 1) vs expect(1).toBeLessThan(2)
assertRegExp('/foo/', ‘yo ya foo’) vs expect(“yo ya foo”).toMatch(/foo/)
assertNull(null) vs expect(null).toBeNull()
assertNotNull(“not null”) vs expect(“not null”).not.toBeNull()

Spies (Mocks & Stubs)
PHP
public function setUp(){
$this->mock = $this
->getMockBuilder('HelloWorldClass')
->getMock();
$this->mock
->expects($this->once())
->method('printHelloWorld')
->with($this->anything())
->will($this->returnValue(“Hello World”));
}
Jasmine
beforeEach(function(){
spyOn(HelloWorldClass, “printHelloWorld”)
.and.returnValue(“Hello World);
});
it(“test printHelloWorld function”, function(){
expect(HelloWorldClass.printHelloWorld.calls.count
())
.toEqual(1);
expect(HelloWorldClass.printHelloWorld)
.
toHaveBeenCalledWith(jasmine.anything());
});

Exercise I
1.Clone https://github.com/inthra-onsap/angular-
unittesting-lab
2.Create spec file inside test/spec. (file_name:
hello_world.spec.js)
3.Put the code here inside:
"use strict"
var HelloWorldClass = {
printHelloWorld: function(){
return "Hello world";
}
};
describe("Hello world suite", function(){
it("test printHelloWorld method", function(){
expect(HelloWorldClass.printHelloWorld()).toEqual("Hello world”);
});
});
4. Open terminal and then execute “grunt test”

Exercise II
Body Mass Index(BMI) Calculation
BMI = weight/(height/100*height/100)
Specs:
1.To proof weight and height are GREATER THAN 0 (zero)
otherwise display “ERROR”.
2.To proof in case of BMI value is LOWER THAN or EQUAL
18.5 then display “You are too THIN”.
3.To proof in case of BMI value is GREATER THAN 18.5 and
LOWER THAN or EQUAL 25 then display “You are so
(HANDSOME or BEAUTIFUL)”.
4.To proof in case of BMI value is GREATER THAN 25 then
display “You are too FAT”.

One more thing…
CODE COVERAGE

An Introduction to AngularJs Unittesting

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to An Introduction to AngularJs Unittesting (20)

An Introduction to AngularJs Unittesting