chore(e2e): selenium runs on watch AND singlerun now

Author: c0bra

.travis.yml

@@ -7,6 +7,9 @@ notifications:
   irc: "chat.freenode.net#ui-grid"
 
 env:
+  matrix:
+    - JOB=unit
+    - JOB=e2e
   global:
   - SAUCE_USERNAME=nggrid
   - SAUCE_CONNECT_READY_FILE=/tmp/sauce-connect-ready
@@ -32,14 +35,11 @@ before_script:
   - npm install --quiet -g grunt-cli karma-cli
   - npm install
   - bower install
+  - grunt install
   - ./lib/sauce/sauce_connect_block.sh
 
 script:
-  - grunt
-  # - git config credential.helper "store --file=.git/credentials"
-  # - echo "https://${GITHUB_NAME}:${GITHUB_PASS}@github.com" > .git/credentials
-  - grunt test:ci
-  - grunt release
+  - ./scripts/travis/travis_build.sh
 
 # after_success:
 

Gruntfile.js

@@ -11,13 +11,36 @@ module.exports = function(grunt) {
     version: util.getVersion(),
     stable_version: util.getStableVersion(),
     dist: 'dist',
-    site: process.env.TRAVIS ? 'ui.grid.info' : 'localhost:<%= connect.docs.options.port %>',
+    site: process.env.TRAVIS ? 'ui-grid.info' : 'localhost:<%= connect.docs.options.port %>',
     banner: '/*! <%= pkg.title || pkg.name %> - v<%= version %> - ' +
       '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
       '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
       '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
       ' Licensed <%= pkg.license %> */\n',
 
+    shell: {
+      options: {
+        stdout: true
+      },
+      selenium: {
+        command: './selenium/start',
+        options: {
+          stdout: false,
+          async: true
+        }
+      },
+      'protractor-install': {
+        command: './node_modules/protractor/bin/webdriver-manager update'
+      },
+      'protractor-start': {
+        command: 'node ./node_modules/protractor/bin/webdriver-manager start',
+        options: {
+          stdout: true,
+          async: true
+        }
+      }
+    },
+
     // Clean the temp directory
     clean: ['.tmp', '<%= dist %>', 'docs'],
 
@@ -109,6 +132,30 @@ module.exports = function(grunt) {
       }
     },
 
+    protractor: {
+      options: {
+        keepAlive: true,
+        configFile: "./test/protractor.conf.js"
+      },
+      singlerun: {},
+      auto: {
+        keepAlive: true,
+        options: {
+          args: {
+            seleniumPort: 4444,
+            specs: ['.tmp/e2e/**/*.spec.js', 'test/e2e/**/*.spec.js']
+          }
+        }
+      }
+      // docs: {
+      //   options: {
+      //     args: {
+      //       baseUrl: 'http://localhost:9999'
+      //     }
+      //   }
+      // }
+    },
+
     jshint: {
       options: {
         curly: true,
@@ -176,6 +223,11 @@ module.exports = function(grunt) {
           // livereload: true
         }
       },
+      protractor: {
+        files: ['.tmp/e2e/**/*.spec.js', 'test/e2e/**/*.spec.js', '<%= dist %>/docs/**'],
+        tasks: ['protractor:auto']
+      },
+
       less: {
         files: 'src/**/*.less',
         tasks: ['less']
@@ -228,6 +280,12 @@ module.exports = function(grunt) {
           base: '<%= dist %>',
           livereload: true
         }
+      },
+      testserver: {
+        options: {
+          port: process.env.TEST_PORT || 9999,
+          base: '<%= dist %>'
+        }
       }
     },
 
@@ -313,9 +371,13 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-angular-templates');
   grunt.loadNpmTasks('grunt-contrib-connect');
   grunt.loadNpmTasks('grunt-karma');
+  grunt.loadNpmTasks('grunt-protractor-runner');
   grunt.loadNpmTasks('grunt-ngdocs');
   grunt.loadNpmTasks('grunt-conventional-changelog');
   grunt.loadNpmTasks('grunt-gh-pages');
+  grunt.loadNpmTasks('grunt-shell-spawn');
+
+  grunt.registerTask('install', ['shell:protractor-install']);
 
   // register before and after test tasks so we don't have to change cli
   // options on the CI server
@@ -329,12 +391,18 @@ module.exports = function(grunt) {
   // Build with no testing
   grunt.registerTask('build', ['concat', 'uglify', 'less', 'ngdocs', 'copy']);
 
+  // Auto-test tasks for development
+  grunt.registerTask('autotest:unit', ['karmangular:start']);
+  grunt.registerTask('autotest:e2e', ['shell:protractor-start']);
+
   // Development watch task
-  grunt.registerTask('dev', ['before-test', 'after-test', 'connect', 'karmangular:start', 'watch']);
+  grunt.registerTask('dev', ['before-test', 'after-test', 'connect', 'autotest:unit', 'autotest:e2e', 'watch']);
 
   // Testing tasks
   // grunt.registerTask('test:ci', ['clean', 'jshint', 'ngtemplates', 'karma:sauce']);
   grunt.registerTask('test:ci', ['clean', 'jshint', 'ngtemplates', 'serialsauce']);
+  grunt.registerTask('test:docs', ['connect:', 'protractor:docs']);
+  grunt.registerTask('test:e2e', ['protractor:singlerun']);
 
   // Test
   grunt.registerTask('test', 'Run tests on singleRun karma server', function() {
@@ -349,4 +417,12 @@ module.exports = function(grunt) {
   });
 
   grunt.registerTask('release', ['clean', 'build', 'cut-release', 'gh-pages']);
+
+  grunt.registerTask('blah', function () {
+    var ngdoc = require('./node_modules/grunt-ngdocs/src/ngdoc.js');
+
+    console.log(ngdoc);
+  });
+
+  grunt.registerTask('butt', ['shell:protractor-start', 'watch:protractor']);
 };

TODO.md

@@ -4,6 +4,8 @@
 1. Add banners to compiled .css files (grunt-banner?)
 1. Add grunt-nuget task to autodeploy builds to nuget
 1. Try to reomve `npm install` commands from travis before-script
+1. Add grunt task that will use ngdoc to build test specs from docs into .tmp/e2e/doc.spec.js
+   - It will need to run after ngdocs does. Maybe make a `gendocs` task that runs both serially.
 
 1. [DONE] Add --browsers option for testing on saucelabs with specific browser(s)
 1. [DONE] Make karmangular run in `watch` mode and in singlerun too.

lib/grunt/plugins.js

@@ -3,6 +3,7 @@ var path = require('path');
 var util = require('./utils.js');
 var semver = require('semver');
 var shell = require('shelljs');
+var remote = require('selenium-webdriver/remote');
 
 module.exports = function(grunt) {
 
@@ -235,4 +236,25 @@ module.exports = function(grunt) {
 
     done();
   });
+
+  grunt.registerTask('selenium:start', function() {
+    var done = this.async();
+
+    // Get the config from the config file
+    var configFile = path.resolve(process.cwd(), grunt.config('protractor.options.configFile'));
+    var config = require(configFile);
+
+    var server = new remote.SeleniumServer(config.seleniumServerJar, {
+      args: config.seleniumArgs,
+      port: config.seleniumPort
+    });
+
+    // console.log('server', server.start);
+
+    server.start().then(function(url) {
+      grunt.log.writeln('Selenium standalone server started at ' + url);
+
+      done();
+    });
+  });
 };

package.json

@@ -51,6 +51,10 @@
     "grunt-gh-pages": "~0.9.0",
     "semver": "~2.2.1",
     "shelljs": "~0.2.6",
-    "grunt-contrib-copy": "~0.4.1"
+    "grunt-contrib-copy": "~0.4.1",
+    "protractor": "~0.14.0",
+    "grunt-protractor-runner": "~0.2.0",
+    "grunt-shell-spawn": "~0.3.0",
+    "selenium-webdriver": "~2.39.0"
   }
 }

src/js/directives/ui-grid-style.js

@@ -11,21 +11,27 @@
  * Allows us to interpolate expressions in `<style>` elements. Angular doesn't do this by default as it can/will/might? break in IE8.
  *
  * @example
-   <example module="app">
-     <file name="app.js">
-       var app = angular.module('app', ['ui.grid']);
+   <doc:example module="app">
+    <doc:source>
+      <script>
+        var app = angular.module('app', ['ui.grid']);
        
-       app.controller('MainCtrl', ['$scope', function ($scope) {
-         $scope.myStyle = '.blah { color: red }';
-       }]);
-     </file>
-     <file name="index.html">
-       <div ng-controller="MainCtrl">
-         <style ui-grid-style>{{ myStyle }}</style>
-         <span class="blah">I am red.</span>
-       </div>
-     </file>
-   </example>
+        app.controller('MainCtrl', ['$scope', function ($scope) {
+          $scope.myStyle = '.blah { color: red }';
+        }]);
+      </script>
+     
+      <div ng-controller="MainCtrl">
+        <style ui-grid-style>{{ myStyle }}</style>
+        <span class="blah">I am red.</span>
+      </div>
+    </doc:source>
+    <doc:scenario>
+      it('should do stuff!', function () {
+        
+      });
+    </doc:scenario>
+   </doc:example>
  */
 
 var app = angular.module('ui.grid.style', []);

test/e2e/test.spec.js

@@ -0,0 +1,3 @@
+describe('angularjs homepage', function() {
+  
+});

test/protractor.conf.js

@@ -0,0 +1,29 @@
+// An example configuration file.
+exports.config = {
+  // The address of a running selenium server.
+
+  // seleniumAddress: 'http://localhost:4444/wd/hub',
+  seleniumServerJar: '../node_modules/protractor/selenium/selenium-server-standalone-2.37.0.jar',
+  seleniumPort: 4444,
+
+  // Capabilities to be passed to the webdriver instance.
+  capabilities: {
+    'browserName': 'chrome'
+  },
+
+  // A base URL for your application under test. Calls to protractor.get()
+  // with relative paths will be prepended with this.
+  // baseUrl: 'http://localhost:9999',
+  
+  // Spec patterns are relative to the location of the spec file. They may
+  // include glob patterns.
+  // specs: ['./e2e/**/*.spec.js'],
+
+  // Options to be passed to Jasmine-node.
+  jasmineNodeOpts: {
+    showColors: true, // Use colors in the command line report.
+
+    // Default time to wait in ms before a test fails.
+    defaultTimeoutInterval: 20000
+  }
+};

travis_build.sh

@@ -2,6 +2,12 @@
 
 set -e
 
-# export SAUCE_ACCESS_KEY=`echo $SAUCE_ACCESS_KEY | rev`
-
-grunt test:ci
+if [ $JOB = "unit" ]; then
+  grunt
+  grunt test:ci
+  grunt release
+elif [ $JOB = "e2e" ]; then
+  # grunt clean build test:e2e --browsers=SL_Chrome
+else
+  echo "Unknown job type. Please set JOB=unit or JOB=e2e."
+fi