Updated tests

app/scripts/panel.js

@@ -159,12 +159,13 @@
 
         _createLI(_themeLookUp(theme));
       }
+
+      console.log(changes);
 
       /** Update UI element text based on change */
       changes.forEach(function(change){
         if (change.name === 'currentTheme') {
           $themeTitle.innerHTML = change.object.currentTheme;
-          $themeTitle.style.display = 'block';
           updatePalette(change.object.currentTheme);
         }
 
@@ -175,6 +176,10 @@
         else if (change.name === 'currentFontFamily') {
           $fontInput.value = change.object.currentFontFamily;
         }
+
+        if (change.type === 'update'){
+          $alert.style.display = 'block';
+        }
       });
 
     }
@@ -237,13 +242,11 @@
       function save(theme){
         storage.set({ 'devtools-theme': theme.value }, function(){
           _panel.currentTheme = theme.text;
-          $alert.style.display = 'block';
         });
         return theme.value;
       }
 
       if (event && event.type === 'change'){
-        $themeTitle.style.display = 'none';
         var el     = event.target || event.srcElement;
         var option = el.options[el.selectedIndex];
         return save(option);
@@ -265,7 +268,6 @@
       function save(fontFamily){
         storage.set({ 'devtools-fontFamily': fontFamily }, function(){
           _panel.currentFontFamily = fontFamily;
-          $alert.style.display = 'block';
         });
         return fontFamily;
       }
@@ -291,7 +293,6 @@
       function save(fontSize){
         storage.set({ 'devtools-fontSize': fontSize }, function(){
           _panel.currentFontSize = fontSize;
-          $alert.style.display = 'block';
         });
         return fontSize;
       }

test/devtools-spec.js

@@ -19,7 +19,7 @@ describe('DevTools Author extension', function (){
 
 	app.init();
 
-	expect(app).toBeDefined();
+	expect(app.init).toBeDefined();
 	expect(app.init).toHaveBeenCalled();
 	expect(panel.create.calledWith('Author Settings', null, pagePath)).toBe(true);
   });
@@ -40,6 +40,7 @@ describe('DevTools Author extension', function (){
 	  theme: stylesDir + 'themes/' + theme + '.css' 
 	});
 
+	expect(app.loadTheme).toBeDefined();
 	expect(theme).toEqual('3024');
 	expect(themeObject).toEqual('/dist/styles/themes/3024.css');
 	expect(XMLHttpRequest.prototype.open).toHaveBeenCalled();

test/panel-spec.js

@@ -1,49 +1,112 @@
 describe('DevTools Author Settings panel', function (){
-  var panel;
-
+
+  var panel, storage;
+
+  /** Global modules & chrome.* API stubs */
   beforeAll(function(){
-    panel   = window.panel;
-    ga      = window.ga;
-    $       = document.querySelectorAll.bind(document);
-    storage = chrome.storage.sync;
+    panel     = window.panel;
+    storage   = chrome.storage.sync;
   });
-
+
+  /** panel.init */
   it('should GET theme.json via AJAX', function(){
 	spyOn(XMLHttpRequest.prototype, 'open').and.callThrough();
 	spyOn(XMLHttpRequest.prototype, 'send');
-
+
+	panel.init();
+
   	expect(panel).toBeDefined();
 	expect(XMLHttpRequest.prototype.open).toHaveBeenCalled();
   });
 
+  /** panel.setTheme */
   it('should set devtools-theme to storage', function(){
-	expect(panel).toBeDefined();
-	expect(storage).toBeDefined();
+  	var event = {
+  	  target: {
+  		options: [
+  		  {
+			value: '3024',
+			text: '3024'
+  		  }
+  		],
+		selectedIndex: 0
+  	  },
+  	  type: 'change',
+  	  bubbles: true,
+  	  cancelable: false
+  	};
+
+  	var theme = panel.setTheme(event);
+
+	expect(panel.setTheme).toBeDefined();
+	expect(storage.set.calledWith({ 'devtools-theme': '3024' })).toBe(true);
+	expect(theme).toEqual('3024');
   });
 
-  it('should get devtools-theme from storage', function(){
-	expect(panel).toBeDefined();
-	expect(storage).toBeDefined();
+  /** panel.getTheme */
+  it('should return devtools-theme from storage or default', function(){
+    var themeJSON = [
+	  { "name": "Default", "colors": [] },
+	  { "name": "3024",    "colors": [] },
+	  { "name": "Monokai", "colors": [] },
+	];
+
+  	expect(panel.getTheme).toBeDefined();
+	expect(panel.getTheme()).toEqual('3024');
+	expect(storage.set.calledWith({ 'devtools-theme': '3024' })).toBe(true);
+	expect(panel.getTheme(themeJSON, 'monokai')).toEqual('Monokai');
   });
 
+  /** panel.setFontFamily */
   it('should set devtools-fontFamily to storage', function(){
-	expect(panel).toBeDefined();
-	expect(storage).toBeDefined();
+  	var event = {
+  	  target: {
+		value: 'Hack'
+  	  },
+  	  type: 'change',
+  	  bubbles: true,
+  	  cancelable: false
+  	};
+
+  	var fontFamily = panel.setFontFamily(event);
+
+	expect(panel.setFontFamily).toBeDefined();
+	expect(storage.set.calledWith({ 'devtools-fontFamily': 'Hack' })).toBe(true);
+	expect(fontFamily).toEqual('Hack');
   });
 
-  it('should get devtools-fontFamily from storage', function(){
-	expect(panel).toBeDefined();
-	expect(storage).toBeDefined();
+  /** panel.getFontFamily */
+  it('should return devtools-fontFamily from storage or default', function(){
+  	expect(panel.getFontFamily).toBeDefined();
+	expect(panel.getFontFamily()).toEqual('Hack');
+	expect(storage.set.calledWith({ 'devtools-fontFamily': 'Hack' })).toBe(true);
+	expect(panel.getFontFamily('Menlo')).toEqual('Menlo');
   });
 
+  /** panel.setFontSize */
   it('should set devtools-fontSize to storage', function(){
-	expect(panel).toBeDefined();
-	expect(storage).toBeDefined();
+  	var event = {
+  	  target: {
+		value: 16
+  	  },
+  	  type: 'change',
+  	  bubbles: true,
+  	  cancelable: false
+  	};
+
+  	var fontSize = panel.setFontSize(event);
+
+	expect(panel.setFontSize).toBeDefined();
+	expect(storage.set.calledWith({ 'devtools-fontSize': 16 })).toBe(true);
+	expect(fontSize).toEqual(16);
   });
 
-  it('should get devtools-fontSize from storage', function(){
-	expect(panel).toBeDefined();
-	expect(storage).toBeDefined();
+  /** panel.getFontSize */
+  it('should return devtools-fontSize from storage or default', function(){
+  	expect(panel.getFontSize).toBeDefined();
+	expect(panel.getFontSize()).toEqual(14);
+	expect(storage.set.calledWith({ 'devtools-fontSize': 14 })).toBe(true);
+	expect(panel.getFontSize(12)).toEqual(12);
   });
 
-});
+});