AngularJSUnit Testing

Karma + Jasmine

1

2

Karma - Test Runner

Jasmine - Testing Framework

Setting up Unit Test on AngularJS

Debugging your Unit Tests

Integration with CI & Slack

Testing & Coverage Reports

Karma - Test Runnerfor AngularJS

3

4

Karma - Test Runner

- Able to spawn a web server and run tests against multiple browsers

> What is Karma ?

- Simple configuration & instant feedback from tests

- Easy for debugging (directly in Chrome)

- Simple integration with CI Tools (eg. Jenkins)

> Why use Karma ?

- Describe tests with Jasmine, Mocha, QUunit and etc.

- Preferred test-runner for AngularJS Project

> How to config or setup?

- Stay tune for the following slides or Jump over there

Refer to https://github.com/karma-runner/karma

Jasmine - Testing FrameworkBehaviour-Driven JavaScript

5

Jasmine - Testing Framework

6

> What is Jasmine ?

- A behaviour driven framework for testing JS code

- Does not depend on other JS framework

- Does not require a DOM (Document Object Model)

- It has clean, obvious syntax for writing tests

Expectation MatcherSuite

Spec

Refer to http://jasmine.github.io/2.4/introduction.html

7

> Suites : describe() your tests

> Specs : it() should do this/should have value

Jasmine - Few things to take note

- Used for describing your tests and wrap block of codes

- Can be nested under another describe() to further divide it

- Contain 1 or more specs & beforeEach()/afterEach() function

- Describe your individual tests

- Divide your test suites into sub components

- Usually will be a sentence to describe what it will do

- Both of the describe() and it() are function and can contain any executable code necessary to implement the test.

- Variables declared inside describe() are available to any it() block inside the same suite

8

> Expectations : expect() actual value to equal expected value

Jasmine - Few things to take note

- Built with a function “expect” which takes the actual value, and - chained with a Matcher function which takes the expected value

> Matchers : match the expected value

- Built in matcher by Jasmine or refer to custom matchers

Setting Up Unit Teston AngularJS

Reference : Click Me & Me

9

10

Step 1 - Install Required Dependencies> Install karma-cli and phantomjs

> Copy the following into package.json and run “npm install”

"devDependencies": {"angular-mocks": "^1.5.5","jasmine-core": "^2.4.1","karma": "^0.13.22","karma-chrome-launcher": "^1.0.1","karma-coverage": "^1.0.0","karma-jasmine": "^1.0.2","karma-junit-reporter": "^1.0.0","karma-mocha-reporter": "^2.0.3","karma-phantomjs-launcher": “^1.0.0",

}

inject & mock angular services into unit test

Chrome launcher for karma

Generate coverage reports

Generate JUnit report for Jenkins

Generate Mocha report for view

in command line

PhantomJS Browser (without GUI)

- npm install -g karma-cli- npm install –g phantomjs

For running karma using command line tool

For running PhantomJS browser

11

Step 2 - Configure karma.conf.js

> Run “karma init” to generate initial karma.conf.js file

- Press enter for all prompts (can be modified later on)

> Add in files/patterns to be loaded in browser

Required library files

Your source codes

Your test specs

12

Step 2 - Configure karma.conf.js

> Add source code’s path for generating karma coverage report

> Add in plugins to be used

preprocessors: {'www/js/**/*.js': ['coverage']

},

Add 2 browsers

plugins: ['karma-jasmine','karma-mocha-reporter','karma-phantomjs-launcher','karma-chrome-launcher','karma-coverage'

],

Use mocha reporter

browsers: ['Chrome','PhantomJS'],

> Register browsers list

13

Step 2 - Configure karma.conf.js

> Register reporters to be used

> Configuration for mochaReporter and coverageReporter

reporters: ['mocha','coverage'],

mochaReporter: {colors: {

success: 'green',info: 'cyan',warning: 'orange',error: 'red'

}},

coverageReporter : {type : 'html',dir : 'target/coverage-reports/'

},

> Other configurations

autoWatch: true,singleRun: false,concurrency: Infinity

Auto watch for file changes

singleRun have to be true if use Jenkins, else set to false

Browsers will be started simultaneously

14

Step 3 - Writing test specifications

An outer suite to describe your app

beforeEach() will be executed before

running every expect() inside it()

1

2

3

4

5

6

Load the module “app” Inject angular services into the tests

using angular-mocks feature

Create the scope & pass

into the controller

An inner suite to group block of specs

15

Step 4 - Run your unit test :p Use ‘karma start’ or ‘karma start

karma.conf.js’ to start karma

Starting 2 browsers

Outer & inner suite name

Specification name

2 browser * 2 tests = 4 tests

Click on “debug” can go

into debug mode

Debugging your Unit Tests

16

Using Chrome

17

> Place a debugger statement into your spec (only works in chrome)

Ways to debug your tests

- Press the debug button as shown in previous slide- When new tab opened, open Inspect (Cmd+Opt+I or Ctrl+Shift+I)- Press F5 to refresh the page, and it will stop at that “debugger” line

18

> Put breakpoints in your tests

Ways to debug your tests

- Press the debug button as shown in previous slide- When new tab opened, open Inspect (Cmd+Opt+I or Ctrl+Shift+I)- Search for your tests spec.js and place breakpoints- Press F5 to refresh the page, and it will stop at first breakpoint you put- Then, use F8 to move to next breakpoint

Testing & Coverage Reports

19

For Karma

20

Mocha Reporter

> Mocha reporter is used when run test in local environment & command line

- Test result with all passed tests

- Test result with failed tests

> Other reporters can be found on NPM website

21

Karma Coverage Reporter

> Coverage reporter helps to generate the code coverage for your tests

- It will determine how many percentage of your code is covered for testing (eg. Statements, branches, functions & lines)

- Refer to karma website on configuration for coverage reporter

22

Karma Coverage Reporter

This line indicates that the statement

is not covered in test

If path is not taken

Integration with CI & Slack

23

CI = Jenkins

24

Configuration on karma.jenkins.conf.js

> Duplicate karma.conf.js and rename as karma.jenkins.conf.js

> Modify plugins to be used in karma.jenkins.conf.js

browsers: ['PhantomJS'],

> Register browsers list

> In package.json, add in scripts so we can run “npm test” in Jenkins later

"scripts": { "test": "karma start karma.jenkins.conf.js" },

Change mocha reporter to junit reporter in

order to output test results to jenkins

plugins: ['karma-jasmine','karma-phantomjs-launcher','karma-junit-reporter','karma-coverage',

],

Only use phantomjs browser

25

Configuration on karma.jenkins.conf.js

> Register reporters to be used

> Modify coverageReporter & replace mochaReporter with junitReporter

reporters: ['progress', 'junit', 'coverage'],

> Other configurations

autoWatch: true,singleRun: true,concurrency: Infinity

Set singleRun to true so it only execute once in jenkins

coverageReporter : {type : cobertura',dir : 'target/coverage-reports/'

},

Change type from “html” to “cobertura”

so Jenkins can understand

junitReporter : {outputDir: 'target/surefire-reports',outputFile: undefined,

},

26

Install Jenkins & its Plugins

> Download & Install Jenkins at jenkins.io

> Install Jenkins Plugin (Manage Jenkins > Manage Plugins)

- Install Cobertura Plugin (for generate coverage reports)

- v1.65 or v2.3 also workable

- Install Git Plugin (to pull .git repository)

27

Configuration on Jenkins> Create a new item

> Select freestyle project and enter name

28

Configuration on Jenkins> Go to your project > configure

- Under Source Code Management, select “Git"

- Enter your Git Repository URL

29

Configuration on Jenkins- Under Build Triggers, tick on “Poll SCM"

- Do not fill anything in Schedule (so it will not poll every time)

#!/bin/shcurl http://localhost:8080/git/notifyCommit?url={{Your_Project_Repository_URL}}

- Create a new file “post-commit” in “YouProject/.git/hooks” folder

- This is to trigger the Jenkins build after we commit to git

30

Configuration on Jenkins- Under Build, click “Add Build Step” and select “Execute shell”

- Select “Execute Windows batch command” if use windows

- In command, enter “call npm install” & “call npm test”

31

Configuration on Jenkins- Under Post Build Action, select “Publish Cobertura Coverage Report” and “Publish JUnit test result report”

- Then, enter the url pattern as shown in the image

32

Integrate Slack with Jenkins

> To integrate with slack, go to Manage Jenkins

33

> Then Manage Plugins & search for Slack Notification Plugin

Integrate Slack with Jenkins

34

> Then go to Configure System > Global Slack Notifier Settings

Integrate Slack with Jenkins

Go to https://slack.com/apps/search?q=jenkins and add Jenkins

to your slack in order to obtain Integration Token

35

> Select your Jenkins project > Configure > Add Post-build Actions

Integrate Slack with Jenkins

36

> Tick on the events you want to be notified

Integrate Slack with Jenkins

> Remember to press “Save” after all changes !!

37

> Select your Project > Build Now, then it will start running

Running your Jenkins build

38

> After run successfully, your slack will be notified and reports generated

Running your Jenkins build

39

> Notification on slack after successful build

Running your Jenkins build

40

> Click on “Coverage Report” to view Cobertura Coverage report

View Coverage Report

41

> Click on “Test Result” to view JUnit Test Result

View Test Results

42

> Make some changes to your AngularJS project and commit to git

Triggering Jenkins Build on commit

43

> Go to your Jenkins project > Click on Build #5 (Trigger by commit)

Running your Jenkins build

44

> Go to your Jenkins project > Click on Build #4 (Build Manually)

Running your Jenkins build

References

45

46

Mocking Dependencies in AngularJS Tests

References List

Unit Testing in AngularJS: Services, Controllers & Providers

Advanced Testing and Debugging in AngularJS

Automatically triggering a Jenkins build on Git commit

> For Triggering build on Jenkins

> For Unit Testing

http://karma-runner.github.io/0.8/plus/Jenkins-CI.html

> For Integration of Jenkins with Karma

THE ENDThanks for viewing ^^

47