Allow passing page options into phantomjs

Merged in from STRML/grunt-lib-phantomjs@e356ada (Essentially merged and squashed commits of gruntjs#21 and gruntjs#47 together)
bdowling · Dec 7, 2013 · 9d613d1 · 9d613d1
1 parent e85423a
commit 9d613d1
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 3 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -42,18 +42,57 @@ module.exports = function(grunt) {
           }
         }
       },
-    },
+      headers: {
+        options: {
+          url: 'http://localhost:8075',
+          server: './test/fixtures/headers_server.js',
+          page: {
+            customHeaders: {
+              'X-CUSTOM': 'custom_header_567'
+            }
+          },
+          expected: 'custom_header_567',
+          test: function test(msg) {
+            test.actual = msg;
+          }
+        }
+      },
+      viewportSize: {
+        options: {
+          url: 'test/fixtures/viewportSize.html',
+          page: {
+            viewportSize: { 
+              width: 1366, 
+              height: 800 
+            }
+          },
+          expected: [1366, 800],
+          test: function test(a, b) {
+            if (!test.actual) { test.actual = []; }
+            test.actual.push(a, b);
+          }
+        }
+      }
+    }
   });
 
   // The most basic of tests. Not even remotely comprehensive.
   grunt.registerMultiTask('test', 'A test, of sorts.', function() {
     var options = this.options();
     var phantomjs = require('./lib/phantomjs').init(grunt);
 
+    // Load up and Instantiate the test server
+    if (options.server) { require(options.server); }
+
     // Do something.
     phantomjs.on('test', options.test);
+
     phantomjs.on('done', phantomjs.halt);
 
+    phantomjs.on('debug', function(msg) {
+        grunt.log.writeln('debug:' + msg);
+    });
+
     // Built-in error handlers.
     phantomjs.on('fail.load', function(url) {
       phantomjs.halt();

diff --git a/README.md b/README.md
@@ -8,6 +8,12 @@ The best way to understand how this lib should be used is by looking at the [gru
 
 Also, in the case of the grunt-contrib-qunit plugin, it's important to know that the page being loaded into PhantomJS *doesn't* know it will be loaded into PhantomJS, and as such doesn't have any PhantomJS->Grunt code in it. That communication code, aka. the ["bridge"](https://github.com/gruntjs/grunt-contrib-qunit/blob/d99291713d32f84e50303d6e51eb2dab40b1deb6/phantomjs/bridge.js), is dynamically [injected into the html page](https://github.com/gruntjs/grunt-contrib-qunit/blob/d99291713d32f84e50303d6e51eb2dab40b1deb6/tasks/qunit.js#L152).
 
+### Options
+
+* `timeout`: PhantomJS' timeout, in milliseconds.
+* `inject`: JavaScript to inject into the page.
+* `page`: an object of options for the PhantomJS [`page` object](https://github.com/ariya/phantomjs/wiki/API-Reference-WebPage).
+
 ## An inline example
 
 If a Grunt task looked something like this:

diff --git a/package.json b/package.json
@@ -35,7 +35,8 @@
   "devDependencies": {
     "grunt-contrib-jshint": "~0.6.2",
     "grunt": "~0.4.0",
-    "difflet": "~0.2.3"
+    "difflet": "~0.2.3",
+    "express": "~3.1.1"
   },
   "main": "lib/phantomjs",
   "files": [

diff --git a/phantomjs/main.js b/phantomjs/main.js
@@ -44,7 +44,7 @@ setInterval(function() {
 }, 100);
 
 // Create a new page.
-var page = require('webpage').create();
+var page = require('webpage').create(options.page);
 
 // Inject bridge script into client page.
 var injected;

diff --git a/test/fixtures/headers.html b/test/fixtures/headers.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+<script>
+
+function sendMessage() {
+  var args = [].slice.call(arguments);
+  alert(JSON.stringify(args));
+}
+
+var headers = <% headers %>;
+
+sendMessage('test', headers['x-custom']);
+sendMessage('done');
+
+</script>
+</head>
+<body>
+</body>
+</html>
diff --git a/test/fixtures/headers_server.js b/test/fixtures/headers_server.js
@@ -0,0 +1,17 @@
+var fs = require('fs');
+var express = require('express'); 
+var port = 8075;
+var site = express();
+
+site.get('*', function(req, res) {
+  fs.readFile('./test/fixtures/headers.html', 'utf8', function (err, data) {  
+    if (err) throw err;
+    var tmpl = data.replace(/<% headers %>/, JSON.stringify(req.headers));
+    res.write(tmpl);
+    res.end();
+  });
+});
+
+site.listen(port);
+
+console.log('Listening on port ' + port);
diff --git a/test/fixtures/viewportSize.html b/test/fixtures/viewportSize.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+<script>
+
+// Send messages to the parent PhantomJS process via alert! Good times!!
+function sendMessage() {
+  var args = [].slice.call(arguments);
+  alert(JSON.stringify(args));
+}
+
+var viewportWidth  = document.documentElement.clientWidth;
+var viewportHeight = document.documentElement.clientHeight;
+
+sendMessage('test', viewportWidth, viewportHeight);
+sendMessage('done');
+
+</script>
+</head>
+<body>
+</body>
+</html>