Updated devtools.js specs

app/scripts/devtools.js

@@ -16,7 +16,7 @@
   var app = (function(){
 
     /** @private */
-    var _dir = 'dist/';
+    var _dir = '/dist/';
 
     /** @private */
     var _chromeVersionURL = 'https://omahaproxy.appspot.com/mac';
@@ -89,19 +89,21 @@
     function loadTheme(object, cb){
 
       /** GET Theme CSS file **/
-      _ajax('./' + object.theme, function(ajax){
+      _ajax(object.theme, function(ajax){
         panel.applyStyleSheet(ajax.responseText);
-        cb();
+        cb(ajax);
       });
 
       /** GET Canary CSS file, if pre-release (beta, canary, dev) **/
       _ajax(_chromeVersionURL, function(ajax){
         if ( _currentChromeVersion > parseInt(ajax.responseText, 10) ) {
-          _ajax('./' + object.canary, function(ajax){
+          _ajax(object.canary, function(ajax){
             panel.applyStyleSheet(ajax.responseText);
           });
         }
       });
+
+      return object.theme;
 
     }
 
@@ -114,26 +116,32 @@
 
       var stylesDir = _dir + 'styles/',
           pagePath  = _dir + 'panel.html';
+
+      /** Get theme from storage & load in to DevTools */
+      function themeSetup(panelObj){
+
+        storage.get('devtools-theme', function(object){
+
+          var theme = object['devtools-theme'] || '3024';
+
+          loadTheme({
+            theme: stylesDir + 'themes/' + theme + '.css',
+            canary: stylesDir + 'canary.css'
+          },
+          _applyFontSettings // Callback
+          );
+        });
+
+        return panelObj;
+      }
 
       /** Create Author Settings panel */
       panel.create(
         'Author Settings',  // Panel title
         null,               // Panel icon
         pagePath,           // Path of panel's HTML page
-        null                // Callback
+        themeSetup          // Callback       
       );
-
-      /** Get theme from storage & load in to DevTools */
-      storage.get('devtools-theme', function(object){
-        var theme = object['devtools-theme'] || '3024';
-
-        loadTheme({
-          theme: stylesDir + 'themes/' + theme + '.css',
-          canary: stylesDir + 'canary.css'
-        },
-        _applyFontSettings // Callback
-        );
-      });
 
     }
 

karma.conf.js

@@ -5,7 +5,7 @@ module.exports = function(config) {
   config.set({
 
     // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '',
+    basePath: '.',
 
 
     // frameworks to use
@@ -15,11 +15,17 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
-      'app/**/*.js',
       'dist/panel.html',
-      'dist/styles/themes/*.css',
-      'test/**/*-spec.js'
+      'dist/scripts/*.js',
+      'dist/styles/**/*.css',
+      'test/**/*-spec.js',
+      { pattern: 'dist/scripts/themes.json', included: false, served: true }
     ],
+
+    // Allow resources to be reverse proxied
+    proxies:  {
+      '/dist/scripts/themes.json': '/base/dist/scripts/themes.json'
+    },
 
 
     // list of files to exclude

test/devtools-spec.js

@@ -1,50 +1,42 @@
 describe('DevTools Extension setup', function (){
 
-  var app, storage, panel, stylesDir;
+  var app, pagePath, panel, storage, stylesDir;
 
+  /** Variables & chrome.* API stubs */
   beforeAll(function(){
 	app       = window.app;
 	storage   = chrome.storage.sync;
 	panel     = chrome.devtools.panels;
-	stylesDir = 'dist/styles/';
+	stylesDir = '/dist/styles/';
+	pagePath  = '/dist/panel.html';
 
-	spyOn(XMLHttpRequest.prototype, 'open').and.callThrough();
-	spyOn(XMLHttpRequest.prototype, 'send');
-	storage.set({ 'devtools-theme': '3024' });
+	storage.get.withArgs('devtools-theme').yields({ 'devtools-theme': '3024' });
   });
 
-  describe('Creates Author Settings panel via chrome.devtools.panels', function(){
-
-	it('should load panel HTML', function(){
-	  var pagePath  = 'dist/panel.html';
-
-	  panel.create('Author Settings', null, pagePath, function(panelObj){	
-	    expect(panelObj).toBeDefined();
-	  });
-	});
-
+  /** app.init */
+  it('should create Author Settings panel using chrome.devtools.panels', function(){
+  	spyOn(app, 'init');
+	app.init();
+
+	expect(app.init).toHaveBeenCalled();
+	expect(panel.create.calledWith('Author Settings', null, pagePath)).toBe(true);
   });
 
-  describe('Get stylesheet name from chrome.storage and load stylesheet via AJAX', function(){
-  	var theme;
-
-	it('should get theme settings from storage', function(){
-	  storage.get('devtools-theme', function(object){
-	  	theme = object['devtools-theme'];
-	    expect(theme).toBe('monokai');
-	  });
-	});
-
-
-	it('should GET theme CSS file via AJAX', function(){
-	  var options = {
-	    theme: stylesDir + 'themes/' + theme + '.css'
-	  };
+  /** app.loadTheme */
+  it('should load theme CSS file via AJAX using chrome.storage settings', function(){
+  	var theme, themeObject;
+
+	spyOn(XMLHttpRequest.prototype, 'open').and.callThrough();
+	spyOn(XMLHttpRequest.prototype, 'send');
 
-	  app.loadTheme(options, function(){
-	    expect(XMLHttpRequest.prototype.open).toHaveBeenCalled();
-	  });
+	storage.get('devtools-theme', function(object){
+	  theme 	  = object['devtools-theme'];
+	  themeObject = { theme: stylesDir + 'themes/' + theme + '.css' };
 	});
+
+	expect(theme).toEqual('3024');
+	expect(app.loadTheme(themeObject)).toEqual('/dist/styles/themes/3024.css');
+	expect(XMLHttpRequest.prototype.open).toHaveBeenCalled();
   });
 
-});
+});