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 & JasmineKarma 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 & SpecsSuites: 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-lab2.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 IIBody 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

Q & A