Download - AngularJS Unit Test
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