Merge pull request #7 from solidusjs/add-unit-testing

Add Jasmine unit testing framework

Author: localjo

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 bower_components
+.grunt

Gruntfile.js

@@ -3,19 +3,36 @@ module.exports = function(grunt) {
   // Project configuration.
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
+    manifest: grunt.file.readJSON('extension/manifest.json'),
     jshint: {
-      files: ['*.js', 'views/*.js'],
+      files: ['extension/*.js'],
       options: {
         jshintrc: true
       }
+    },
+    jasmine: {
+      src: ['extension/*.js'],
+      options: {
+        specs: 'tests/spec/*.spec.js',
+        helpers: 'tests/spec/*.helper.js'
+      }
+    },
+    run: {
+      crxmake: {
+        exec: [
+          './crxmake.sh extension/ cert/key.pem',
+          'mv extension.crx dist/<%= pkg.name %>-<%= manifest.version %>.crx'
+        ].join(' && ')
+      }
     }
   });
 
-  grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-jshint');
-  grunt.loadNpmTasks('grunt-contrib-nodeunit');
+  grunt.loadNpmTasks('grunt-contrib-jasmine');
+  grunt.loadNpmTasks('grunt-run');
 
-  grunt.registerTask('default', ['uglify']);
-  grunt.registerTask('test', ['jshint']);
+  grunt.registerTask('default', ['jshint', 'jasmine']);
+  grunt.registerTask('test', ['jshint', 'jasmine']);
+  grunt.registerTask('build', ['jshint', 'jasmine', 'run:crxmake']);
 
 };

README.md

@@ -1,14 +1,16 @@
 A Google Chrome developer tools extension for use by [Solidus](https://github.com/solidusjs/solidus) developers. Provides real-time introspection of API data and access to Solidus server error logs for use in debugging preprocessors executed in the Node.js runtime environment.
 
-**Note:** This is still a work in progress, use at your own risk.
-
-#Build
+#Clone
 * Clone the repo with `git clone https://github.com/solidusjs/devtools-solidus.git devtools-solidus`
-* Run `npm install` to install dependencies (npm will automatically run a script to install front-end dependencies using bower).
-* (Optional) Chrome will complain about `.pem` files in some of the dependencies, so you can manually delete `node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/test/` to prevent Chrome from warning you when you install the extension.
 
 #Installation
-* Open chrome://extensions
-* Enable 'Developer Mode' checkbox
-* Click 'Load unpacked extensions...'
-* Select the `devtools-solidus` folder
+* Find the `.crx` file you want in the `dist/` directory. We recommend using the latest version, or you can manually build your own (see below).
+* Open <chrome://extensions> in Chrome
+* Drag and drop the `.crx` file onto the page and click "Add" to install.
+
+#Manually Build
+* Run `npm install` to install dependencies (npm will automatically run a script to install front-end dependencies using bower).
+* Run `grunt build` to generate an installable `.crx` file in the `dist/` directory.
+
+#Usage
+* Once the extension is installed, you can open Chrome's Developer Tools and you should see a "Solidus" tab.

crxmake.sh

@@ -0,0 +1,42 @@
+#!/bin/bash -e
+#
+# Purpose: Pack a Chromium extension directory into crx format
+
+if test $# -ne 2; then
+  echo "Usage: crxmake.sh <extension dir> <pem path>"
+  exit 1
+fi
+
+dir=$1
+key=$2
+name=$(basename "$dir")
+crx="$name.crx"
+pub="$name.pub"
+sig="$name.sig"
+zip="$name.zip"
+trap 'rm -f "$pub" "$sig" "$zip"' EXIT
+
+# zip up the crx dir
+cwd=$(pwd -P)
+(cd "$dir" && zip -qr -9 -X "$cwd/$zip" .)
+
+# signature
+openssl sha1 -sha1 -binary -sign "$key" < "$zip" > "$sig"
+
+# public key
+openssl rsa -pubout -outform DER < "$key" > "$pub" 2>/dev/null
+
+byte_swap () {
+  # Take "abcdefgh" and return it as "ghefcdab"
+  echo "${1:6:2}${1:4:2}${1:2:2}${1:0:2}"
+}
+
+crmagic_hex="4372 3234" # Cr24
+version_hex="0200 0000" # 2
+pub_len_hex=$(byte_swap $(printf '%08x\n' $(ls -l "$pub" | awk '{print $5}')))
+sig_len_hex=$(byte_swap $(printf '%08x\n' $(ls -l "$sig" | awk '{print $5}')))
+(
+  echo "$crmagic_hex $version_hex $pub_len_hex $sig_len_hex" | xxd -r -p
+  cat "$pub" "$sig" "$zip"
+) > "$crx"
+echo "Wrote $crx"

dist/devtools-solidus-0.1.0.crx

@@ -40,6 +40,14 @@ function notifyDevtools(msgType, payload) {
   });
 }
 
+function isSolidus(xpbHeader) {
+  if (xpbHeader.match(/Solidus/i)) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
 function getJsonResource(tabID) {
   chrome.tabs.get(tabID, function(tab) {
     var jsonResourceURL = tab.url+'.json';
@@ -48,7 +56,7 @@ function getJsonResource(tabID) {
     xhr.onreadystatechange = function() {
       if (xhr.readyState !== 4) return; //quickly return if not complete request
       var xpbHeader = xhr.getResponseHeader('X-Powered-By') || 'unknown';
-      if (!xpbHeader.match(/Solidus/i)) { //quickly return if not solidus
+      if (!isSolidus(xpbHeader)) { //quickly return if not solidus
         notifyDevtools('error', 'No Solidus header detected.');
         notifyDevtools('status', '<b>not</b> running Solidus 0.1.7 or greater');
         notifyDevtools('action', 'shutdown');

background.js extension/background.jsbackground.js renamed to extension/background.js

@@ -7,7 +7,7 @@
     "Eric Lanehart <eric@sparkart.com>"
   ],
   "description": "Adds Solidus debugging tools to the Chrome Developer Tools.",
-  "main": "views/devpanel.html",
+  "main": "app/devpanel.html",
   "moduleType": [
     "node"
   ],
@@ -29,7 +29,8 @@
     "bootstrap": "~3.2.0",
     "Inspector-JSON": "SparkartGroupInc/Inspector-JSON#e6bec9fe4cc7551cd46f44bafed6891620a5e47d",
     "bootstrap-vertical-tabs": "~1.1.0",
-    "jquery-ui": "~1.11.0"
+    "jquery-ui": "~1.11.0",
+    "socket.io-client": "^1.0.6"
   },
   "resolutions": {
     "bootstrap": "~3.2.0"

bower.json extension/bower.jsonbower.json renamed to extension/bower.json

@@ -2,17 +2,17 @@
 <html>
 <head>
 
-  <link rel="stylesheet" href="../bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
+  <link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
 
-  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
-  <script src="../bower_components/jquery-ui/jquery-ui.js"></script>
-  <script src="../node_modules/socket.io-client/socket.io.js"></script>
+  <script src="bower_components/jquery/dist/jquery.min.js"></script>
+  <script src="bower_components/jquery-ui/jquery-ui.js"></script>
+  <script src="bower_components/socket.io-client/socket.io.js"></script>
   <script src="devpanel.js"></script>
-  <script src="../bower_components/Inspector-JSON/inspector-json.js"></script>
-  <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+  <script src="bower_components/Inspector-JSON/inspector-json.js"></script>
+  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 
-  <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css">
-  <link href="../bower_components/bootstrap-vertical-tabs/bootstrap.vertical-tabs.min.css" media="all" rel="stylesheet" type="text/css">
+  <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css">
+  <link href="bower_components/bootstrap-vertical-tabs/bootstrap.vertical-tabs.min.css" media="all" rel="stylesheet" type="text/css">
   <link href="devpanel.css" media="all" rel="stylesheet" type="text/css">
 </head>
 <body>

views/devpanel.css extension/devpanel.cssviews/devpanel.css renamed to extension/devpanel.css

@@ -10,15 +10,17 @@
 
 var inspector;
 
-var socket = io('http://localhost:8081');
-socket.on('connect', function(){
-  socket.on('log', function(data){
-    addToLog(data.message);
-    });
-  socket.on('disconnect', function(){
-    document.querySelector('#serverlogs').innerHTML = 'Socket Disconnected';
-    });
-});
+if (typeof io !== 'undefined') {
+  var socket = io('http://localhost:8081');
+  socket.on('connect', function(){
+    socket.on('log', function(data){
+      addToLog(data.message);
+      });
+    socket.on('disconnect', function(){
+      document.querySelector('#serverlogs').innerHTML = 'Socket Disconnected';
+      });
+  });
+}
 
 function processMainIncomingMessage(msg) {
   switch(msg.msgType) {
@@ -100,17 +102,23 @@ function updateStatus(status) { //Update status panel in footer
 }
 
 function addToLog(msg) {
-  var logContainer = document.querySelector('#serverlogs');
-  logContainer.innerHTML += msg + '\n';
-  logContainer.scrollTop = logContainer.scrollHeight;
+  if (document.querySelector('#serverlogs')) {
+    var logContainer = document.querySelector('#serverlogs');
+    logContainer.innerHTML += msg + '\n';
+    logContainer.scrollTop = logContainer.scrollHeight;
+  }
 }
 
 function clearLog() {
   document.querySelector('#serverlogs').innerHTML = '';
 }
 
-window.onload = function() {
-  var clearButton = document.querySelector('#logclear');
-  clearButton.addEventListener('click', clearLog, false);
-  $('#sidePanel').resizable({ minWidth: 120, handles: 'e'});
-};
+window.addEventListener('load', function() {
+  if (document.querySelector('#logclear')) {
+    var clearButton = document.querySelector('#logclear');
+    clearButton.addEventListener('click', clearLog, false);
+  }
+  if (document.querySelector('#sidePanel')) {
+    $('#sidePanel').resizable({ minWidth: 120, handles: 'e'});
+  }
+}, false);