Qunit testing slider
Download as PPTX, PDF1 like598 views
This document discusses using QUnit for JavaScript testing. It introduces QUnit and explains why it is useful, especially for testing jQuery plugins. It then demonstrates how to set up basic QUnit testing by including the necessary QUnit files and writing test cases using methods like ok(), equal(), and notEqual(). The document also shows how to automate testing by integrating QUnit tests with Grunt so they run continuously during development.
Qunit testing slider
- 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
- 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:
- 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