2. 2
Karma - Test Runner
Jasmine - Testing Framework
Setting up Unit Test on AngularJS
Debugging your Unit Tests
Integration with CI & Slack
Testing & Coverage Reports
4. 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
6. 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. 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. 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
9. Setting Up Unit Test
on AngularJS
Reference : Click Me & Me
9
10. 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. 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. 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. 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. 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. 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
17. 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. 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
20. 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. 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
24. 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. 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,
},
28. 28
Configuration on Jenkins
> Go to your project > configure
- Under Source Code Management, select “Git"
- Enter your Git Repository URL
29. 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/sh
curl
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. 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. 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
33. 33
> Then Manage Plugins & search for Slack Notification Plugin
Integrate Slack with Jenkins
34. 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. 35
> Select your Jenkins project > Configure > Add Post-build Actions
Integrate Slack with Jenkins
36. 36
> Tick on the events you want to be notified
Integrate Slack with Jenkins
> Remember to press “Save” after all changes !!
37. 37
> Select your Project > Build Now, then it will start running
Running your Jenkins build
38. 38
> After run successfully, your slack will be notified and reports generated
Running your Jenkins build
46. 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
