chore(snapshot): improve logging

config/gulp-tasks/test.js

@@ -1,8 +1,10 @@
-var cp = require('child_process');
-var connect = require('connect');
-var http = require('http');
+var _ = require('lodash');
 var buildConfig = require('../build.config');
+var connect = require('connect');
+var cp = require('child_process');
+var http = require('http');
 var karma = require('karma').server;
+var uuid = require('node-uuid');
 
 var karmaConf = require('../karma.conf.js');
 var karmaSauceConf = require('../karma-sauce.conf.js');
@@ -17,7 +19,6 @@ module.exports = function(gulp, argv) {
     require('sauce-connect-launcher')({
       username: process.env.SAUCE_USER,
       accessKey: process.env.SAUCE_KEY,
-      verbose: true,
       tunnelIdentifier: process.env.TRAVIS_BUILD_NUMBER
     }, function(err, instance) {
       if (err) return done('Failed to launch sauce connect!');
@@ -65,23 +66,36 @@ module.exports = function(gulp, argv) {
   });
 
   gulp.task('snapshot', ['snapshot-server'], function(done) {
-    var uuid = require('node-uuid');
-    var testId = uuid.v4();
-
-    return protractor(done, [
-      'config/protractor.conf.js',
-      '--browser chrome',
-      '--params.platform_id=chrome_desktop_narrow',
-      '--params.width=400',
-      '--params.height=800',
-      '--params.test_id=' + testId,
-    ]);
+    snapshot(done, 'config/protractor.conf.js');
   });
 
   gulp.task('snapshot-sauce', ['sauce-connect', 'snapshot-server'], function(done) {
-    return protractor(done, ['config/protractor-sauce.conf.js']);
+    snapshot(done, 'config/protractor-sauce.conf.js');
   });
 
+  var snapshotValues = _.merge({
+    browser: 'chrome',
+    params: {
+      platform_id: 'chrome_local_test',
+      width: 400,
+      height: 800,
+      test_id: uuid.v4()
+    }
+  }, argv);
+  function snapshot(done, configFile) {
+    var protractorArgs = [
+      '--browser <%= browser %>',
+      '--params.platform_id=<%= params.platform_id %>',
+      '--params.width=<%= params.width %>',
+      '--params.height=<%= params.height %>',
+      '--params.test_id=<%= params.test_id %>',
+    ].map(function(argument) {
+      return _.template(argument, snapshotValues);
+    });
+
+    return protractor(done, [configFile].concat(protractorArgs));
+  }
+
   function protractor(done, args) {
     cp.spawn('protractor', args, { stdio: 'inherit' })
     .on('exit', function(code) {

config/lib/ionic-snapshot.js

@@ -2,8 +2,12 @@
 var IonicSnapshot = function(options) {
 
   // modules
+  var _ = require('lodash');
   var request = require('request');
 
+  var colors = require('gulp-util').colors;
+  var log = console.log.bind(console, '[' + colors.cyan('IonicReporter') + ']');
+
   var IonicReporter = function(options) {
     var self = this;
 
@@ -15,7 +19,7 @@ var IonicSnapshot = function(options) {
     self.appId = options.appId || 'test_app';
     self.testId = options.testId || 'test_id';
     self.domain = options.domain || 'ionic-snapshot.appspot.com';
-    self.sleepBetweenSpecs = options.sleepBetweenSpecs || 600;
+    self.sleepBetweenSpecs = options.sleepBetweenSpecs || 400;
     self.startTime = Date.now();
     self.totalCompares = 0;
     self.totalRMS = 0;
@@ -23,8 +27,6 @@ var IonicSnapshot = function(options) {
     self.accessKey = options.accessKey;
     self.ptor = protractor.getInstance();
 
-    console.log('Test Id:', self.testId);
-
     self.flow = protractor.promise.controlFlow();
 
     // set browser size
@@ -38,9 +40,7 @@ var IonicSnapshot = function(options) {
 
     self.platformId = browser.params.platform_id;
 
-    console.log('width', self.width);
-    console.log('height', self.height);
-    console.log('platformId', self.platformId);
+    log('init:', _.pick(self, ['testId', 'appId', 'width', 'height', 'platformId']));
 
     self.flow.execute(function(){
       var d = protractor.promise.defer();
@@ -51,6 +51,7 @@ var IonicSnapshot = function(options) {
           compare: self.compare,
           test_id: self.testId,
           platform_id: self.platformId,
+          app_id: self.appId,
           width: self.width,
           height: self.height,
           browser: capabilities.get('browserName'),
@@ -58,19 +59,20 @@ var IonicSnapshot = function(options) {
           version: capabilities.get('version')
         };
 
+        log('init with data:', data);
+
         request.post(
           'http://' + self.domain + '/' + self.groupId + '/' + self.appId + '/test',
           { form: data },
           function (error, response, body) {
-            console.log(body);
+            log('init response:', body);
             if(!error && response.statusCode == 200) {
               try {
                 var jsonData = JSON.parse(body);
                 self.capabilityTestId = jsonData.capability_test_id;
                 self.compareResultId = jsonData.compare_result_id;
               } catch(e) {
-                console.error('Error creating test');
-                console.error(e);
+                log(colors.red('init error creating test:'), e);
               }
             }
             d.fulfill();
@@ -119,15 +121,14 @@ var IonicSnapshot = function(options) {
                 'http://' + self.domain + '/screenshot',
                 { form: data },
                 function (error, response, body) {
-                  console.log(body);
+                  log('reportSpecResults:', body);
                   try {
                     var jsonData = JSON.parse(body);
                     self.totalCompares++;
                     self.totalRMS = self.totalRMS + jsonData.rms;
                     self.highestRMS = Math.max(self.highestRMS, jsonData.rms);
                   } catch(e) {
-                    console.error('Error posting screenshot');
-                    console.error(e);
+                    log(colors.red('reportSpecResults error posting screenshot:'), e);
                   }
 
                   var next = self.flow.getSchedule().toString();
@@ -166,7 +167,7 @@ var IonicSnapshot = function(options) {
         'http://' + self.domain + '/' + self.groupId + '/' + self.appId + '/' + self.testId + '/' + self.compareResultId + '/complete',
         { form: data },
         function (error, response, body) {
-          console.log(body);
+          log('onComplete:', body);
           try {
             var jsonData = JSON.parse(body);
             if(jsonData.compare_url) {
@@ -174,7 +175,7 @@ var IonicSnapshot = function(options) {
               spawn('open', [jsonData.compare_url]);
             }
           } catch(e) {
-            console.error(e);
+            log(colors.red('onComplete error:'), e);
           }
           d.fulfill();
         }
@@ -187,7 +188,7 @@ var IonicSnapshot = function(options) {
   options.testId = browser.params.test_id;
 
   if(!options.testId) {
-    console.error('--params.test_id w/ unique ID required');
+    log(colors.red('--params.test_id error:'), 'unique ID required');
     browser.driver.quit();
     return;
   }

config/protractor-sauce.conf.js

@@ -1,31 +1,17 @@
+var _ = require('lodash');
 var config = require('./protractor.conf').config;
 
 config.chromeOnly = false;
 
-
-// An example configuration file.
-exports.config = {
-
-  // Spec patterns are relative to the location of the spec file. They may
-  // include glob patterns.
-  specs: ['../test/e2e/**/*.js'],
-
-  // Options to be passed to Jasmine-node.
-  jasmineNodeOpts: {
-    showColors: true, // Use colors in the command line report.
-    defaultTimeoutInterval: 120000
-  },
-
+exports.config = _.merge({}, config, {
   sauceUser: process.env.SAUCE_USER,
   sauceKey: process.env.SAUCE_KEY,
 
-  baseUrl: 'http://localhost:8765',
-
   capabilities: {
     build: process.env.TRAVIS_BUILD_NUMBER,
     'tunnel-identifier': process.env.TRAVIS_BUILD_NUMBER,
     name: 'Ionic!',
     browserName: 'chrome'
   }
-};
+});
 

config/protractor.conf.js

@@ -14,8 +14,6 @@ exports.config = {
 
   baseUrl: 'http://localhost:' + buildConfig.protractorPort,
 
-  chromeOnly: false,
-
   onPrepare: function() {
     var ionicSnapshot = require('./lib/ionic-snapshot.js');
     ionicSnapshot({

demos/directive/collectionRepeat/contacts/test.scenario.js

@@ -5,11 +5,13 @@ component: collectionRepeat
 it('should scroll to the bottom', function(){
   var ele = element(by.css('.bar-header .button'));
   ele.click();
+  browser.sleep(200);
 });
 
 it('should scroll to the top', function(){
   var ele = element(by.css('.bar-header'));
   ele.click();
+  browser.sleep(200);
 });
 
 it('should filter by juan', function(){

scripts/shippable/ci.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+function init {
+  if [[ "$SNAPSHOT_BROWSER" == "" ]]; then
+    export SNAPSHOT_BROWSER=chrome
+    export SNAPSHOT_BROWSER_ID=chrome_desktop_test
+    export SNAPSHOT_WIDTH=400
+    export SNAPSHOT_HEIGHT=800
+    export SNAPSHOT_TEST_ID=$RANDOM
+  fi
+}
+
+function run {
+  cd ../..
+
+  gulp demos --demo-version=nightly
+
+  gulp snapshot-sauce \
+    --browser "$SNAPSHOT_BROWSER" \
+    --params.platform_id="$SNAPSHOT_BROWSER_ID" \
+    --params.width="$SNAPSHOT_WIDTH" \
+    --params.height="$SNAPSHOT_HEIGHT" \
+    --params.test_id="$SNAPSHOT_TEST_ID"
+}
+
+source $(dirname $0)/../utils.inc

shippable.yml

@@ -12,11 +12,4 @@ branches:
 before_install:
   - npm install -g protractor gulp
 script:
-  - SNAPSHOT_TEST_ID=$(git rev-parse HEAD)
-  - gulp demos --demo-version=nightly
-  - protractor config/protractor.conf.js \
-    --browser "$SNAPSHOT_BROWSER" \
-    --params.platform_id="$SNAPSHOT_BROWSER_ID" \
-    --params.width="$SNAPSHOT_WIDTH" \
-    --params.height="$SNAPSHOT_HEIGHT" \
-    --params.test_id="$SNAPSHOT_TEST_ID"
+  - ./scripts/shippable/ci.sh