Demos: Added CasperJS functionnal tests

Author: gseguin

.travis.yml

@@ -1,8 +1,9 @@
-language: node_js
-node_js:
-  - 0.8
+language: php
+php:
+  - "5.5"
 before_script: 
   - npm install -g grunt-cli
+  - npm install
 script: npm run-script ci
 branches:
   only:

Gruntfile.js

@@ -70,6 +70,7 @@ module.exports = function( grunt ) {
 		},
 		path = require( "path" ),
 		httpPort =  Math.floor( 9000 + Math.random()*1000 ),
+		phpPort = Math.floor( 8000 + Math.random()*1000 ),
 		name = "jquery.mobile",
 		dist = "dist" + path.sep,
 		copyrightYear = grunt.template.today( "UTC:yyyy" ),
@@ -693,6 +694,37 @@ module.exports = function( grunt ) {
 			}
 		},
 
+		php: {
+			server: {
+				options: {
+					port: phpPort,
+					baseUrl: "."
+				}
+			}
+		},
+
+		casper: {
+			options: {
+				test: true,
+				verbose : false,
+				"log-level": "error",
+				parallel: true,
+				concurrency: 5
+			},
+			"demos.src": {
+				options: {
+					args: [ "--port=" + phpPort ]
+				},
+				src: [ "tests/casperjs/**/*.js" ]
+			},
+			"demos.dist": {
+				options: {
+					args: [ "--port=" + phpPort ]
+				},
+				src: [ "tests/casperjs/**/*.js" ]
+			}
+		},
+
 		connect: {
 			server: {
 				options: {
@@ -987,13 +1019,21 @@ module.exports = function( grunt ) {
 
 	grunt.registerTask( "updateDependencies", [ "bowercopy" ] );
 
+	grunt.registerTask( "test:demos:src", [ "php", "casper:demos.src" ] );
+
+	grunt.registerTask( "test:demos:dist", [ "casper:demos.dist" ] );
+
 	grunt.registerTask( "test",
 		[
 			"clean:testsOutput",
 			"jshint",
+			"test:demos:src",
 			"config:fetchHeadHash",
 			"js:release",
-			"connect", "qunit:http"
+			"demos",
+			"connect",
+			"test:demos:dist",
+			"qunit:http"
 		]
 	);
 	grunt.registerTask( "test:ci", [ "qunit_junit", "connect", "qunit:http" ] );

demos/jqm-contents.php

@@ -4,9 +4,9 @@
 <li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
 <li data-role="collapsible" data-enhanced="true" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false" class="ui-collapsible ui-collapsible-themed-content ui-collapsible-collapsed">
 	<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
-		<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-carat-d">
-			Checkboxradio widget<span class="ui-collapsible-heading-status"> click to expand contents</span>
-		</a>
+		<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-carat-d"
+		    >Checkboxradio widget<span class="ui-collapsible-heading-status"> click to expand contents</span><
+		/a>
 	</h3>
 	<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
 		<ul>

package.json

@@ -24,10 +24,12 @@
 	},
 	"devDependencies": {
 		"async": "0.2.9",
+		"casperjs": "1.1.0-beta3",
 		"cheerio": "0.12.4",
 		"commitplease": "1.7.0",
 		"grunt": "0.4.2",
 		"grunt-bowercopy": "0.5.0",
+		"grunt-casper": "0.3.2",
 		"grunt-contrib-clean": "0.5.0",
 		"grunt-contrib-compress": "0.5.2",
 		"grunt-contrib-concat": "0.3.0",
@@ -40,6 +42,7 @@
 		"grunt-coveralls": "0.3.0",
 		"grunt-git-authors": "1.2.0",
 		"grunt-hash-manifest": "0.5.1",
+		"grunt-php": "0.3.2",
 		"grunt-qunit-istanbul": "0.3.0",
 		"grunt-qunit-junit": "0.1.0-alpha2",
 		"jsdom": "0.8.3",

tests/casperjs/demos.test.js

@@ -0,0 +1,75 @@
+/*global casper: false, __utils__: false */
+
+var host = casper.cli.get( "host" ) || "localhost",
+	port = casper.cli.get( "port" ) || 80,
+	path = casper.cli.get( "path" ) || "",
+	mouse = require("mouse").create(casper);
+
+casper.options.viewportSize = {width: 1024, height: 768};
+
+casper.test.begin("Root index should redirect to demos/", 2, function suite( test ) {
+	casper.start( "http://" + host + ":" + port + path + "/" );
+
+	casper.then( function() {
+		test.assertHttpStatus( 200 );
+		test.assertUrlMatch( /\/demos\/$/, "/ redirects to /demos/" );
+	});
+
+	casper.run(function() {
+		test.done();
+	});
+});
+
+casper.test.begin("demos/ should render properly", 2, function suite( test ) {
+	casper.start( "http://" + host + ":" + port + path + "/demos/" );
+
+	casper.then( function() {
+		test.assertHttpStatus( 200 );
+		test.assertExists(
+			"li[data-filtertext='demos homepage'].ui-first-child",
+			"First ListItem in menu panel should have class ui-first-child"
+		);
+	});
+
+	casper.run(function() {
+		test.done();
+	});
+});
+
+casper.test.begin("Checkboxradio widget should render properly", 2, function suite( test ) {
+	casper.start( "http://" + host + ":" + port + path + "/demos/" );
+
+	// Click "Checkboxradio widget" list item
+	casper.then( function() {
+		casper.clickLabel( "Checkboxradio widget", "a" );
+	});
+
+	// Click "Checkboxes" sub list item
+	casper.then( function() {
+		casper.waitUntilVisible( "ul.jqm-list > li:nth-child(5) > div > ul > li.ui-first-child > a",
+			function() {
+				casper.clickLabel( "Checkboxes", "a" );
+			}
+		);
+	});
+
+	casper.then( function() {
+		casper.waitForUrl( /\/demos\/checkboxradio-checkbox\/$/, function() {
+			test.assertVisible(
+				"input[name='checkbox-0 ']",
+				"Checkbox checkbox-0 should be visible"
+			);
+			test.assertEvalEquals(
+				function() {
+					return $( "input[name='checkbox-0 ']" ).parent( "div" )[0].className;
+				},
+				"ui-checkbox",
+				"Checkbox should be enhanced"
+			);
+		});
+	});
+
+	casper.run(function() {
+		test.done();
+	});
+});