diff --git a/bower.json b/bower.json
index d64b868c..8b32012d 100644
--- a/bower.json
+++ b/bower.json
@@ -7,7 +7,8 @@
     "angular-highlightjs": "0.3.0",
     "angular-bootstrap-colorpicker": "3.0.8",
     "angular-local-storage": "0.1.0",
-    "ui-router": "0.2.11"
+    "ui-router": "0.2.11",
+    "angular-mocks": "1.2.26"
   },
   "devDependencies": {}
 }
diff --git a/gulpfile.js b/gulpfile.js
index fd72c089..129aa8c2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -37,6 +37,7 @@ gulp.task('jscs', function() {
     '*.js',
     'lib/*.js',
     'test/*.js',
+    'test/**/*.js',
     'lib/app/js/app.js',
     'lib/app/js/controllers/**/**.js',
     'lib/app/js/directives/**/**.js',
diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js
index bac1f426..6a2fa792 100644
--- a/lib/app/js/controllers/main.js
+++ b/lib/app/js/controllers/main.js
@@ -8,20 +8,22 @@ angular.module('sgApp')
 
     $scope.isNavCollapsed = false;
 
-    //on page refresh check if all markup was hidden or not
-    var showAllMarkup = localStorageService.get('showAllMarkup');
-
-    //because localStorage only saves String type values, try to convert to boolean
-    if (showAllMarkup == null) {
-      $scope.showAllMarkup = true;
-    } else {
-      if (showAllMarkup == 'false') {
-        $scope.showAllMarkup = false;
-      } else {
+    // Because localStorage only saves String type values, try to convert to boolean
+    $scope.checkIfMarkupVisible = function() {
+      var showAllMarkup = localStorageService.get('showAllMarkup');
+      if (showAllMarkup == null) {
         $scope.showAllMarkup = true;
+      } else {
+        if (showAllMarkup == 'false' || showAllMarkup === false) {
+          $scope.showAllMarkup = false;
+        } else {
+          $scope.showAllMarkup = true;
+        }
       }
     }
 
+    $scope.checkIfMarkupVisible();
+
     // Fetch styleguide data
     Styleguide.get()
       .success(function(data) {
diff --git a/package.json b/package.json
index 4966bd73..43b2097c 100644
--- a/package.json
+++ b/package.json
@@ -59,12 +59,14 @@
     "gulp-sourcemaps": "^1.2.2",
     "jscs": "^1.7.1",
     "karma": "^0.12.24",
-    "karma-chai": "^0.1.0",
     "karma-mocha": "^0.1.9",
+    "karma-mocha-reporter": "^0.3.1",
     "karma-phantomjs-launcher": "^0.1.4",
+    "karma-sinon-chai": "^0.2.0",
     "main-bower-files": "^2.0.0",
     "mocha": "^1.21.4",
     "sinon": "^1.10.3",
+    "sinon-chai": "^2.6.0",
     "tiny-lr": "^0.1.4"
   },
   "scripts": {
diff --git a/test/angular/appSpec.js b/test/angular/appSpec.js
index 77aef078..fb03e558 100644
--- a/test/angular/appSpec.js
+++ b/test/angular/appSpec.js
@@ -5,14 +5,7 @@ describe('sgApp module registration', function() {
   var module;
 
   before(function() {
-    module = angular.module('sgApp', [
-      'ui.router',
-      'ngAnimate',
-      'colorpicker.module',
-      'hljs',
-      'LocalStorageModule',
-      'oc.lazyLoad'
-    ]);
+    module = angular.mock.module('sgApp');
   });
 
   it('should be registered', function() {
diff --git a/test/angular/controllers/mainCtrl.js b/test/angular/controllers/mainCtrl.js
new file mode 100644
index 00000000..fff0ec08
--- /dev/null
+++ b/test/angular/controllers/mainCtrl.js
@@ -0,0 +1,84 @@
+'use strict';
+
+describe('Controller: MainCtrl', function() {
+
+  var ctrl,
+    scope,
+    httpBackend,
+    json,
+    localstorage;
+
+  // Load the controller's module
+  beforeEach(angular.mock.module('sgApp'));
+
+  // Initialize the controller and a mock scope
+  beforeEach(inject(function($controller, $rootScope, $httpBackend, localStorageService) {
+    scope = $rootScope.$new();
+    httpBackend = $httpBackend;
+    localstorage = localStorageService;
+
+    ctrl = $controller('MainCtrl', {
+      $scope: scope
+    });
+
+    json = {sections:[{heading: 'Title'}, {heading: 'Title2'}]};
+
+    httpBackend.expectGET('styleguide.json').
+      respond(json);
+    httpBackend.expectGET('views/main.html').
+      respond('');
+    httpBackend.expectGET('views/sections.html').
+      respond('');
+
+    httpBackend.flush();
+  }));
+
+  it('should be defined', function() {
+    expect(ctrl).not.to.equal(null);
+  });
+
+  it('search parameter should be cleared after search', function() {
+    scope.search = 'test';
+    scope.clearSearch();
+    expect(scope.search).to.be.empty;
+  });
+
+  it('should get section data from json', function() {
+    expect(scope.sections).to.eql(json.sections);
+  });
+
+  describe('getting markup visible state from localstorage', function() {
+
+    it('should return true with true values', function() {
+      sinon.stub(localstorage, 'get').returns(true);
+      scope.checkIfMarkupVisible();
+      expect(scope.showAllMarkup).to.eql(true);
+    });
+
+    it('should return true by default', function() {
+      sinon.stub(localstorage, 'get');
+      scope.checkIfMarkupVisible();
+      expect(scope.showAllMarkup).to.eql(true);
+    });
+
+    it('should return false with false string value', function() {
+      sinon.stub(localstorage, 'get').returns('false');
+      scope.checkIfMarkupVisible();
+      expect(scope.showAllMarkup).to.eql(false);
+    });
+
+    it('should return false with false boolean value', function() {
+      sinon.stub(localstorage, 'get').returns(false);
+      scope.checkIfMarkupVisible();
+      expect(scope.showAllMarkup).to.eql(false);
+    });
+
+    it('should return true with unknown values', function() {
+      sinon.stub(localstorage, 'get').returns('foobar');
+      scope.checkIfMarkupVisible();
+      expect(scope.showAllMarkup).to.eql(true);
+    });
+
+  });
+
+});
diff --git a/test/karma.conf.js b/test/karma.conf.js
index 670897f1..ed34b04e 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -9,14 +9,21 @@ module.exports = function(config) {
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['mocha', 'chai'],
+    frameworks: ['mocha', 'sinon-chai'],
 
     // list of files / patterns to load in the browser
     files: [
       // components
       'lib/app/js/components/angular/angular.js',
       'lib/app/js/components/ui-router/release/angular-ui-router.js',
+      'lib/app/js/components/angular-animate/angular-animate.js',
+      'lib/app/js/components/angular-bootstrap-colorpicker/js/bootstrap-colorpicker-module.js',
+      'lib/app/js/components/angular-local-storage/dist/angular-local-storage.js',
+      'lib/app/js/components/highlightjs/highlight.pack.js',
+      'lib/app/js/components/angular-highlightjs/angular-highlightjs.js',
       'lib/app/js/components/oclazyload/dist/ocLazyLoad.js',
+      'lib/app/js/components/angular-mocks/angular-mocks.js',
+      'node_modules/mock-localstorage/lib/mock-localstorage.js',
       // application code
       'lib/app/js/*.js',
       'lib/app/js/controllers/*.js',
@@ -39,7 +46,14 @@ module.exports = function(config) {
     // test results reporter to use
     // possible values: 'dots', 'progress'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['progress'],
+    reporters: ['mocha'],
+
+    plugins: [
+      'karma-mocha',
+      'karma-sinon-chai',
+      'karma-mocha-reporter',
+      'karma-phantomjs-launcher'
+    ],
 
     // web server port
     port: 8080,