add build test for css plugin. refs #6

ibm-js · Apr 22, 2015 · dbdd70c · dbdd70c
1 parent 7f11fc2
commit dbdd70c
Show file tree

Hide file tree

Showing 12 changed files with 191 additions and 3 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -84,10 +84,10 @@ module.exports = function (grunt) {
 	// Travis build
 	grunt.registerTask("travis", ["jshint", "test:remote"]);
 
-	grunt.registerTask("testBuild", "Run the builds used by the functional tests", function () {
+	grunt.registerTask("testBuild", "Run the build used by the functional test", function (test) {
 		var done = this.async();
 
-		var appRootDir = "tests/functional/jqueryApp";
+		var appRootDir = "tests/functional/" + test + "App";
 
 		function npmInstall(error, bowerResults) {
 			if (error !== null) {
@@ -168,7 +168,8 @@ module.exports = function (grunt) {
 		}
 
 		// First create the test builds. These are referenced from the intern tests.
-		grunt.task.run("testBuild");
+		grunt.task.run("testBuild:css");
+		grunt.task.run("testBuild:jquery");
 
 		// Then run the intern tests.
 		grunt.task.run("intern:" + target);

diff --git a/tests/functional/all.js b/tests/functional/all.js
@@ -1,5 +1,6 @@
 // Listing of all the plugin functional tests
 define([
+	"./cssBuild",
 	"./jqueryBuild",
 	"./jqueryScript"
 ]);
diff --git a/tests/functional/cssApp/.bowerrc b/tests/functional/cssApp/.bowerrc
@@ -0,0 +1,3 @@
+{
+	"directory": "bower_components"
+}
diff --git a/tests/functional/cssApp/Gruntfile.js b/tests/functional/cssApp/Gruntfile.js
@@ -0,0 +1,90 @@
+// Gruntfile for building layer including src.js and the jquery modules it references
+module.exports = function (grunt) {
+	"use strict";
+
+	grunt.loadNpmTasks("grunt-contrib-clean");
+	grunt.loadNpmTasks("grunt-contrib-copy");
+	grunt.loadNpmTasks("grunt-contrib-concat");
+	grunt.loadNpmTasks("grunt-amd-build");
+
+	var outprop = "amdoutput";
+	var outdir = "./build/";
+	var tmpdir = "./tmp/";
+
+	grunt.initConfig({
+		amdloader: {
+			baseUrl: ".",
+
+			paths: {
+				jquery: "bower_components/jquery",
+				lie: "bower_components/lie",
+				"requirejs-dplugins": "../../.."
+			},
+
+			// Unfortunately this is needed for the jquery plugin.
+			// It's automatically handled by the plugin itself at runtime, but not during builds.
+			map: {
+				"*": {
+					"jquery/src/selector": "jquery/src/selector-native"
+				}
+			}
+		},
+
+		amdbuild: {
+			dir: tmpdir,
+
+			// List of layers to build.
+			layers: [
+				// Test build for jquery plugin.  Should contain main test js file and a few jquery modules.
+				{
+					name: "app",
+					include: [
+						// Modules and layers listed here, and their dependencies, will be added to the layer.
+						"src"
+					]
+				}
+			]
+		},
+
+		// Config to allow to concatenate files to generate the layer.
+		concat: {
+			options: {
+				banner: "<%= " + outprop + ".header%>",
+				sourceMap: true
+			},
+			dist: {
+				src: "<%= " + outprop + ".modules.abs %>",
+				dest: outdir + "<%= " + outprop + ".layerPath %>"
+			}
+		},
+
+		copy: {
+			plugins: {
+				expand: true,
+				cwd: tmpdir,
+				src: "<%= " + outprop + ".plugins.rel %>",
+				dest: outdir
+			}
+		},
+
+		clean: {
+			out: [outdir],
+			temp: [tmpdir]
+		}
+	});
+
+	grunt.registerTask("amdbuild", function (amdloader) {
+		var name = this.name, layers = grunt.config(name).layers;
+		layers.forEach(function (layer) {
+			grunt.task.run("amddepsscan:" + layer.name + ":" + name + ":" + amdloader);
+			grunt.task.run("amdserialize:" + layer.name + ":" + name + ":" + outprop);
+			grunt.task.run("concat");
+			grunt.task.run("copy:plugins");
+		});
+	});
+	grunt.registerTask("build", [
+		"clean:out",
+		"clean:temp",
+		"amdbuild:amdloader"
+	]);
+};
diff --git a/tests/functional/cssApp/app.html b/tests/functional/cssApp/app.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta name="viewport"
+		  content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
+	<meta name="apple-mobile-web-app-capable" content="yes"/>
+	<title>CSS plugin build test</title>
+	<script type="text/javascript" src="bower_components/requirejs/require.js"></script>
+</head>
+<body>
+	<h1>CSS plugin build test</h1>
+	<p id="result">This checks that the CSS plugin built the CSS correctly.</p>
+</body>
+<script language="JavaScript" type="text/javascript">
+	var ready = false; // set to true when the test page is ready
+	require({
+		baseUrl: "build"
+	}, [
+		"app"	// first load the layer
+	], function () {
+		require(["src"], function () {
+			// Set global variable to signal that the test page is ready
+			ready = true;
+		});
+	});
+</script>
+</html>
diff --git a/tests/functional/cssApp/bower.json b/tests/functional/cssApp/bower.json
@@ -0,0 +1,10 @@
+{
+	"name": "requirejs-dplugins-css-plugin-test-app",
+	"version": "0.1.0",
+	"description": "Test application using css! plugin",
+	"dependencies": {
+		"lie":  ">=2.8",
+		"jquery": ">=2.1",
+		"requirejs": "2.1.x"
+	}
+}
diff --git a/tests/functional/cssApp/package.json b/tests/functional/cssApp/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "requirejs-dplugins-css-plugin-test-app",
+  "version": "0.1.0",
+  "description": "Test application using css! plugin",
+  "devDependencies": {
+    "clean-css": "3.2.2",
+    "grunt-amd-build": "0.8.x",
+    "grunt-contrib-clean": "0.6.x",
+    "grunt-contrib-concat": "0.5.x",
+    "grunt-contrib-copy": "0.5.x"
+  }
+}
diff --git a/tests/functional/cssApp/resources/test.png b/tests/functional/cssApp/resources/test.png
diff --git a/tests/functional/cssApp/src.js b/tests/functional/cssApp/src.js
@@ -0,0 +1,5 @@
+// Mock application for testing css plugin.
+// Simply require the styles/styles.css file.
+define(["requirejs-dplugins/css!styles/styles.css"], function () {
+	return function noop() {};
+});
diff --git a/tests/functional/cssApp/styles/styles.css b/tests/functional/cssApp/styles/styles.css
@@ -0,0 +1 @@
+@import "substyles/substyles.css";
diff --git a/tests/functional/cssApp/styles/substyles/substyles.css b/tests/functional/cssApp/styles/substyles/substyles.css
@@ -0,0 +1,6 @@
+#result {
+	color: red;
+	border: 1px dashed black;
+	background: url("../../resources/test.png") -15px -18px no-repeat;	/* To test path correction */
+	padding-left: 6em;
+}
diff --git a/tests/functional/cssBuild.js b/tests/functional/cssBuild.js
@@ -0,0 +1,31 @@
+define([
+	"require",
+	"intern",
+	"intern!object",
+	"intern/chai!assert",
+	"intern/dojo/node!leadfoot/helpers/pollUntil"
+], function (require, intern, registerSuite, assert, pollUntil) {
+
+	registerSuite({
+		name: "css plugin build test",
+
+		setup: function () {
+			return this.remote
+				.get(require.toUrl("./cssApp/app.html"))
+				.then(pollUntil("return ready || null;", [],
+					intern.config.WAIT_TIMEOUT, intern.config.POLL_INTERVAL));
+		},
+
+		"css style application": function () {
+			this.timeout = intern.config.TEST_TIMEOUT;
+
+			return this.remote
+				.findById("result").getComputedStyle("borderLeftStyle").then(function (style) {
+					assert.strictEqual(style, "dashed");
+				}).getComputedStyle("backgroundImage").then(function (style) {
+					var match = style.match(/(build\/resources\/test\.png)\)?;?$/);
+					assert.strictEqual(match[1], "build/resources/test.png");
+				});
+		}
+	});
+});