Runs tests for all JavaScript changes

Author: Brad Berger

README.md

@@ -106,6 +106,33 @@ angular.module("materialExample").controller("calendarCtrl", function($scope, $f
 </scr
 ```
 
+## Hacking On It
+
+Use gulp to spin up the server and re-compile resources on the fly. The
+gulp `default` task does all that for you. Just make sure to Selenium is
+up and running:
+
+```bash
+# In one terminal
+webdriver-manager start
+```
+
+```bash
+# In separate terminal
+gulp
+```
+
+Protractor is set up to run all the tests during development. To make it a bit
+faster development tests run using PhantomJS, while CI tests run with real
+browsers. JavaScript code is linted with `eslint`, too, so make sure that's
+not complaining about code styling or other issues.
+
+The CI test is `test-ci` while the standard tests run all the time while
+developing.
+
+If you're having trouble with PhantomJS we can easily just switch to Chrome
+instead.
+
 ## To Do
 
 - Unit tests (the basic setup is there, need to fill them out)

gulpfile.js

@@ -41,6 +41,13 @@ gulp.task("html", function() {
 });
 
 gulp.task("js:lint", function() {
+    return gulp
+      .src(p("src/angular-material-calendar.js"))
+      .pipe(eslint())
+      .pipe(eslint.format());
+});
+
+gulp.task("js:lint-ci", function() {
     return gulp
       .src(p("src/angular-material-calendar.js"))
       .pipe(eslint())
@@ -58,15 +65,21 @@ gulp.task("scss", function() {
       .pipe(connect.reload());
 });
 
-gulp.task("test", ["js:lint"], function() {
+gulp.task("test-ci", ["js:lint-ci"], function() {
     connect.server({ root: "website", port: 3000 });
     gulp
       .src(["./tests/*.spec.js"])
-      .pipe(protractor({ configFile: p("protractor.conf.js") }))
+      .pipe(protractor({ configFile: p("protractor-ci.conf.js") }))
       .on("error", function(e) { throw e; })
       .on("end", connect.serverClose);
 });
 
+gulp.task("test", ["js:lint"], function() {
+    gulp
+      .src(["./tests/*.spec.js"])
+      .pipe(protractor({ configFile: p("protractor.conf.js") }));
+});
+
 gulp.task("build", function() {
     return runSequence(["scss"], "html", "js");
 });
@@ -76,7 +89,7 @@ gulp.task("connect", function() {
 });
 
 gulp.task("watch", function() {
-    gulp.watch(p("src/**/*"), ["build"]);
+    gulp.watch(p("src/**/*"), ["test", "build"]);
 });
 
 gulp.task("default", ["build", "connect", "watch"]);

package.json

@@ -4,7 +4,7 @@
   "description": "A calendar directive for AngularJS and Angular Material Design",
   "main": "gulpfile.js",
   "scripts": {
-    "test": "./node_modules/protractor/bin/webdriver-manager update && gulp test"
+    "test": "./node_modules/protractor/bin/webdriver-manager update && gulp test-ci"
   },
   "repository": {
     "type": "git",
@@ -31,6 +31,7 @@
     "gulp-size": "^2.0.0",
     "gulp-uglify": "^1.2.0",
     "node-sass": "^3.3.2",
+    "phantomjs": "^1.9.18",
     "protractor": "^2.2.0",
     "replacestream": "^4.0.0",
     "run-sequence": "^1.1.2"

protractor-ci.conf.js

@@ -0,0 +1,13 @@
+/* eslint-env node */
+exports.config = {
+    specs: [ "test/**/*.spec.js" ],
+    seleniumServerJar: "./node_modules/protractor/selenium/selenium-server-standalone-2.45.0.jar",
+    multiCapabilities: [
+      {"browserName": "chrome"},
+      {"browserName": "firefox"}
+    ],
+    baseUrl: "http://localhost:3000/index.html",
+    jasmineNodeOpts: {
+        showColors: true
+    }
+};

protractor.conf.js

@@ -1,13 +1,13 @@
 /* eslint-env node */
 exports.config = {
     specs: [ "test/**/*.spec.js" ],
-    seleniumServerJar: "./node_modules/protractor/selenium/selenium-server-standalone-2.45.0.jar",
-    // seleniumAddress: "http://localhost:4444/wd/hub",
-    multiCapabilities: [
-      {"browserName": "chrome"},
-      {"browserName": "firefox"}
-    ],
+    seleniumAddress: "http://localhost:4444/wd/hub",
     baseUrl: "http://localhost:3000/index.html",
+    capabilities: {
+        browserName: "phantomjs",
+        version: "",
+        platform: "ANY"
+    },
     jasmineNodeOpts: {
         showColors: true
     }