angularjs unit test
TRANSCRIPT
![Page 1: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/1.jpg)
AngularJSUnit Testing
Karma + Jasmine
1
![Page 2: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/2.jpg)
2
Karma - Test Runner
Jasmine - Testing Framework
Setting up Unit Test on AngularJS
Debugging your Unit Tests
Integration with CI & Slack
Testing & Coverage Reports
![Page 3: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/3.jpg)
Karma - Test Runnerfor AngularJS
3
![Page 4: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/4.jpg)
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
![Page 5: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/5.jpg)
Jasmine - Testing FrameworkBehaviour-Driven JavaScript
5
![Page 6: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/6.jpg)
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
![Page 7: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/7.jpg)
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
![Page 8: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/8.jpg)
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
![Page 9: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/9.jpg)
Setting Up Unit Teston AngularJS
Reference : Click Me & Me
9
![Page 10: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/10.jpg)
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
![Page 11: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/11.jpg)
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
![Page 12: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/12.jpg)
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
![Page 13: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/13.jpg)
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
![Page 14: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/14.jpg)
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
![Page 15: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/15.jpg)
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
![Page 16: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/16.jpg)
Debugging your Unit Tests
16
Using Chrome
![Page 17: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/17.jpg)
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
![Page 18: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/18.jpg)
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
![Page 19: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/19.jpg)
Testing & Coverage Reports
19
For Karma
![Page 20: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/20.jpg)
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
![Page 21: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/21.jpg)
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
![Page 22: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/22.jpg)
22
Karma Coverage Reporter
This line indicates that the statement
is not covered in test
If path is not taken
![Page 23: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/23.jpg)
Integration with CI & Slack
23
CI = Jenkins
![Page 24: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/24.jpg)
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
![Page 25: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/25.jpg)
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,
},
![Page 26: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/26.jpg)
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)
![Page 27: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/27.jpg)
27
Configuration on Jenkins> Create a new item
> Select freestyle project and enter name
![Page 28: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/28.jpg)
28
Configuration on Jenkins> Go to your project > configure
- Under Source Code Management, select “Git"
- Enter your Git Repository URL
![Page 29: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/29.jpg)
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
![Page 30: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/30.jpg)
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”
![Page 31: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/31.jpg)
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
![Page 32: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/32.jpg)
32
Integrate Slack with Jenkins
> To integrate with slack, go to Manage Jenkins
![Page 33: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/33.jpg)
33
> Then Manage Plugins & search for Slack Notification Plugin
Integrate Slack with Jenkins
![Page 34: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/34.jpg)
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
![Page 35: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/35.jpg)
35
> Select your Jenkins project > Configure > Add Post-build Actions
Integrate Slack with Jenkins
![Page 36: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/36.jpg)
36
> Tick on the events you want to be notified
Integrate Slack with Jenkins
> Remember to press “Save” after all changes !!
![Page 37: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/37.jpg)
37
> Select your Project > Build Now, then it will start running
Running your Jenkins build
![Page 38: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/38.jpg)
38
> After run successfully, your slack will be notified and reports generated
Running your Jenkins build
![Page 39: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/39.jpg)
39
> Notification on slack after successful build
Running your Jenkins build
![Page 40: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/40.jpg)
40
> Click on “Coverage Report” to view Cobertura Coverage report
View Coverage Report
![Page 41: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/41.jpg)
41
> Click on “Test Result” to view JUnit Test Result
View Test Results
![Page 42: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/42.jpg)
42
> Make some changes to your AngularJS project and commit to git
Triggering Jenkins Build on commit
![Page 43: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/43.jpg)
43
> Go to your Jenkins project > Click on Build #5 (Trigger by commit)
Running your Jenkins build
![Page 44: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/44.jpg)
44
> Go to your Jenkins project > Click on Build #4 (Build Manually)
Running your Jenkins build
![Page 45: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/45.jpg)
References
45
![Page 46: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/46.jpg)
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
![Page 47: AngularJS Unit Test](https://reader034.vdocuments.site/reader034/viewer/2022042605/58f373041a28abb8578b45a3/html5/thumbnails/47.jpg)
THE ENDThanks for viewing ^^
47