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!!