Go straight to the topic:
1. Install grunt-contrib-qunit
NPM install grunt-contrib-qunit -- save-Dev (first install nodejs and NPM) to automatically download the grunt-Lib-phantomjs library and install phantomjsphantomjs to implement an unbounded WebKit browser. Although there is no interface, Dom rendering, JS running, network access, canvas/SVG rendering and other functions are complete and widely used in page capture, page output, and automated testing.
2. Load grunt-contrib-qunit in gruntfile. js
Grunt. loadnpmtasks ('grunt-contrib-qunit ');
3. Create a test task
Configuration option: Timeout: timeout. The default value is 5000, in milliseconds. It is called before the qunit start () has failed tasks.
Inject: remarks, remarks to the bridge File
Httpbase: String. The default value is false. The URL of the source file. The prefix of all source files.
Console: Boolean value. The default value is true. Set to hide the output of the phantomjs console.
URLs: array, configure the test address, and allow multiple addresses to access
Force: Boolean value. The default value is false. A task stops when it fails.
Initialization Configuration: test the relative address file:
grunt.initConfig({ qunit: { all: [‘test/**/*.html‘] }});Test HTTP page address: grunt. initconfig ({qunit: {ALL: {options: {urls: ['HTTP: // localhost: 8000/test/foo.html ', 'HTTP: // localhost: 8000/test/bar.html '] }}, CONNECT: {server: {options: {port: 8000, base :'. '}}}});
Grunt. loadnpmtasks ('grunt-contrib-connection'); grunt. registertask ('test', ['connect', 'qunit']);
Grunt Test
Check the problem: no test cases are found.
Summary: The entire unit test structure is node_modulestest -- Libs -- qunit.css -- qunit. JS -- qunit1.html -- qunit2.html -- qunit3.html -- qunit_noglobal_test.js -- qunit_test.js -- callback.
Next, we will start to break down each file in detail:
Grunt configuration JSON file: package. JSON
Grunt execution file gruntfile. js
Test File qunit1.html and qunit2.html <! Doctype HTML>
<HTML>
<Head>
<Meta charset = "UTF-8">
<Title> basic test page </title>
<! -- Load the local test suite. -->
<LINK rel = "stylesheet" href = "test/libs/qunit.css" Media = "screen">
<SCRIPT src = "test/libs/qunit. js"> </SCRIPT>
<! -- Load local test cases -->
<SCRIPT src = "test/qunit_test.js"> </SCRIPT>
</Head>
<Body>
<Div id = "qunit"> </div>
<Div id = "qunit-fixture"> rich content </div>
</Body>
</Html>
Test File qunit3.html <! Doctype HTML>
<HTML>
<Head>
<Meta charset = "UTF-8">
<Title> basic test page </title>
<! -- Load local test suite -->
<LINK rel = "stylesheet" href = "libs/qunit.css" Media = "screen">
<SCRIPT src = "libs/qunit. js"> </SCRIPT>
<! -- Load local test cases -->
<SCRIPT src = "qunit_noglobal_test.js"> </SCRIPT>
</Head>
<Body>
<Div id = "qunit"> </div>
<Div id = "qunit-fixture"> non-Global check </div>
</Body>
</Html>
Libs/qunit.css file (test framework CSS file) font module:
Initialization:
Header module:
Test Status:
Test count:
Tested style:
Failed style:
Test results:
Libs/qunit. js (JS unit testing framework): http://download.csdn.net/detail/zqjflash/7981109
Test Case: qunit_test.js
Test ('basic test', function (){
CT (1 );
OK (true, 'rich content ');
});
Test ('can access the DOM ', function (){
CT (1 );
VaR fixture = Document. getelementbyid ('qunit-fixture ');
Equal (fixture. innertext, 'rich content', 'could be able to access the Dom .');
});
Test Case: qunit_test_error.js
Test Case: qunit_noglobal_test.js
Details distribution of directories: node_modules
Test directory
Libs directory:
Page Test file:
Execute grunt test again
Once you see done, the first automated test demo is running.
Grunt Automated Unit Testing
