Javascript unit testing with Qunit presentation

1. PAYMENT FORM
UnitTest
Using Qunit
Tess Hsu 1

2. Introduce Qunit
Usage
Automation with Grunt watch
Tess Hsu 2

3. INTRODUCE QUNIT
Why use Qunit?
Tess Hsu 3

4. WHY QUNIT?
1.You could testing in your local without server, environment
setting
2. Special for jQuery, JQuery UI, Jquery Mobile
3. Not only support testing in browser, also support testing in
Rhino or node.js
Tess Hsu 4

5. USAGE
Very easy!!
Tess Hsu 5

6. USAGE
Basic file require
1. Qunit.js
2. Qunit.css
That’s it!!!!!!!!!!!
Tess Hsu 6

7. USAGE
Tess Hsu 7
That’s build oneTest file in your web package !!

8. USAGE
Tess Hsu 8
Your web package
├ src // plugin source, project files, etc (could be diff for you)
├ tests // work on here
│ ├ script
│ │ ├ qunit-2.0.1.js // qunit library js
│ │ ├ formTesing.js //your testing file name
│ │ └ otherTesting.js // if you need other testing in different model
│ ├ formTest.html // our QUnit test specification
│ └ css // your qunit css
│ ├ qunit-2.0.1.css // qunit library css
│
├ Gruntfile.js // add qunit task
├ package.json // to install qunit package
└ ...

9. USAGE
Tess Hsu 9
Start first your formTesting.html
1. Head: Insert quint css
2. Body : Insert first qunit id class to have this first demonstrate qunit test page
3. Body: insert what element you want to test
4. Finally, got to include js file you need to call for those testing method

10. USAGE
Tess Hsu 10
Put what you like to test

11. USAGE
Tess Hsu 11
Don’t forgot to include your testing js files, including qunit js library

12. USAGE
Tess Hsu 12
Then let’s start most simple testing js file, here I called my testing file: fromTesting. js
1. Put your testing module name, this is also could be in different testing module
ex: QUnit.module( "Field validator" ) or Qunit. Module(“API tesing”) etc
2. Start your testing functionality code, for example

13. USAGE
Tess Hsu 13
Method to use
There’s reference method like ok(), notOk() || equal(), notEqual() etc
http://api.qunitjs.com/category/assert/

14. USAGE
Tess Hsu 14
Method to use
For example here, tesing input field has id: firstname

15. USAGE
Tess Hsu 15
Output will be like this:

16. USAGE
Tess Hsu 16
For special case, you could add some rule directly to testing function

17. USAGE
Tess Hsu 17
Output will be like this:

18. USAGE
Tess Hsu 18
Example over view of your all testing list

19. USAGE
Tess Hsu 19
If you have fail, here is output looks like:

20. AUTOMATIONWITH
GRUNTWATCH
Tess Hsu 20

21. AUTOMATIONWITH
GRUNTWATCH
Tess Hsu 21
3 step:
1. Install qunit
2. Add in grunt initConfig, task to run
3. Add in watch.js for auto run

22. AUTOMATIONWITH
GRUNTWATCH
Tess Hsu 22
1. Install qunit
Add "grunt-contrib-qunit": "^1.2.0", (version could be differ)
in Package.json

23. AUTOMATIONWITH
GRUNTWATCH
Tess Hsu 23
~$ npm install

24. AUTOMATIONWITH
GRUNTWATCH
Tess Hsu 24
In Gruntfile.js: add config, loadTask, then registerTask

25. AUTOMATIONWITH
GRUNTWATCH
Tess Hsu 25
In watch.js: this is for watch to find where to excute test js file

26. AUTOMATIONWITH
GRUNTWATCH
Tess Hsu 26
You are done!! Run grunt watch
~$ grunt watch

27. AUTOMATIONWITH
GRUNTWATCH
Tess Hsu 27
If Success

28. AUTOMATIONWITH
GRUNTWATCH
Tess Hsu 28
If has fails

29. FIN,THANKYOU!!
Tess Hsu 29