Qunit testing slider
-
Upload
yating-chatiron -
Category
Technology
-
view
194 -
download
0
Transcript of Qunit testing slider
Tess Hsu 1
PAYMENT FORMUnit Test
Using Qunit
Tess Hsu 2
Introduce Qunit
Usage
Automation with Grunt watch
Tess Hsu 3
INTRODUCE
QUNITWhy use Qunit?
Tess Hsu 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 5
USAGEVery easy!!
Tess Hsu 6
USAGEBasic file require1. Qunit.js2. Qunit.cssThat’s it!!!!!!!!!!!
Tess Hsu 7
USAGEThat’s build one Test file in your web package !!
Tess Hsu 8
USAGEYour 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 └ ...
Tess Hsu 9
USAGEStart first your formTesting.html
1. Head: Insert quint css2. Body : Insert first qunit id class to have this first demonstrate qunit test page3. Body: insert what element you want to test4. Finally, got to include js file you need to call for those testing method
Tess Hsu 10
USAGEPut what you like to test
Tess Hsu 11
USAGEDon’t forgot to include your testing js files, including qunit js library
Tess Hsu 12
USAGEThen let’s start most simple testing js file, here I called my testing file: fromTesting. js1. Put your testing module name, this is also could be in different testing module ex: QUnit.module( "Field validator" ) or Qunit. Module(“API tesing”) etc2. Start your testing functionality code, for example
Tess Hsu 13
USAGEMethod to useThere’s reference method like ok(), notOk() || equal(), notEqual() etc
http://api.qunitjs.com/category/assert/
Tess Hsu 14
USAGEMethod to useFor example here, tesing input field has id: firstname
Tess Hsu 15
USAGEOutput will be like this:
Tess Hsu 16
USAGEFor special case, you could add some rule directly to testing function
Tess Hsu 17
USAGEOutput will be like this:
Tess Hsu 18
USAGEExample over view of your all testing list
Tess Hsu 19
USAGEIf you have fail, here is output looks like:
Tess Hsu 20
AUTOMATION WITH GRUNT WATCH
Tess Hsu 21
AUTOMATION WITH GRUNT WATCH
3 step:1. Install qunit2. Add in grunt initConfig, task to run3. Add in watch.js for auto run
Tess Hsu 22
AUTOMATION WITH GRUNT WATCH1. Install qunit
Add "grunt-contrib-qunit": "^1.2.0", (version could be differ) in Package.json
Tess Hsu 23
AUTOMATION WITH GRUNT WATCH~$ npm install
Tess Hsu 24
AUTOMATION WITH GRUNT WATCH
In Gruntfile.js: add config, loadTask, then registerTask
Tess Hsu 25
AUTOMATION WITH GRUNT WATCH
In watch.js: this is for watch to find where to excute test js file
Tess Hsu 26
AUTOMATION WITH GRUNT WATCH
You are done!! Run grunt watch
~$ grunt watch
Tess Hsu 27
AUTOMATION WITH GRUNT WATCH
If Success
Tess Hsu 28
AUTOMATION WITH GRUNT WATCH
If has fails
Tess Hsu 29
FIN, THANK YOU!!