An Introduction to AngularJs Unittesting
-
Upload
inthraonsap -
Category
Documents
-
view
44 -
download
3
Transcript of An Introduction to AngularJs Unittesting
![Page 1: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/1.jpg)
An Introduction to AngularJs Unit Testing
![Page 2: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/2.jpg)
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
![Page 3: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/3.jpg)
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/)
![Page 4: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/4.jpg)
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.
![Page 5: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/5.jpg)
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(){
…});
});
![Page 6: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/6.jpg)
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 () { ….});
});
![Page 7: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/7.jpg)
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()
![Page 8: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/8.jpg)
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());
});
![Page 9: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/9.jpg)
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”
![Page 10: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/10.jpg)
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”.
![Page 11: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/11.jpg)
One more thing…
CODE COVERAGE
![Page 12: An Introduction to AngularJs Unittesting](https://reader035.fdocuments.in/reader035/viewer/2022062320/55cf3133bb61ebf4568b4610/html5/thumbnails/12.jpg)
Q & A