diff --git a/awx/ui/client/lib/components/layout/layout.directive.js b/awx/ui/client/lib/components/layout/layout.directive.js
index 0f40ce7868..0af7746d57 100644
--- a/awx/ui/client/lib/components/layout/layout.directive.js
+++ b/awx/ui/client/lib/components/layout/layout.directive.js
@@ -18,7 +18,7 @@ function AtLayoutController ($scope, strings) {
 
     $scope.$watch('$root.socketStatus', (newStatus) => {
         vm.socketState = newStatus;
-        vm.socketIconClass = `icon-socket-${$scope.socketStatus}`;
+        vm.socketIconClass = `icon-socket-${vm.socketState}`;
     });
 
     $scope.$watch('$root.licenseMissing', (licenseMissing) => {
diff --git a/awx/ui/client/test/unit/index.js b/awx/ui/client/test/unit/index.js
index aa4f73ab95..738fb8fe14 100644
--- a/awx/ui/client/test/unit/index.js
+++ b/awx/ui/client/test/unit/index.js
@@ -1,11 +1,15 @@
 // Import angular and angular-mocks to the global scope
 import 'angular';
 import 'angular-mocks';
+import 'angular-gettext';
+import 'angular-ui-router';
 
 // Import custom Angular module dependencies
 import '../../src/i18n';
 import '../../lib/services';
 import '../../lib/components';
+import '../../lib/models';
 
 // Import tests
 import './panel-body.spec';
+import './layout.spec';
diff --git a/awx/ui/client/test/unit/layout.spec.js b/awx/ui/client/test/unit/layout.spec.js
new file mode 100644
index 0000000000..5d032caf61
--- /dev/null
+++ b/awx/ui/client/test/unit/layout.spec.js
@@ -0,0 +1,170 @@
+describe('Components | Layout', () => {
+    let $compile;
+    let $rootScope;
+    let element;
+    let scope;
+
+    beforeEach(() => {
+        angular.mock.module('gettext');
+        angular.mock.module('I18N');
+        angular.mock.module('ui.router');
+        angular.mock.module('at.lib.services')
+        angular.mock.module('at.lib.components')
+    });
+
+    beforeEach(angular.mock.inject((_$compile_, _$rootScope_) => {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        scope = $rootScope.$new();
+
+        element = angular.element('<at-layout></at-layout>');
+        element = $compile(element)(scope);
+        scope.$digest();
+    }));
+
+    describe('AtLayoutController', () => {
+        let controller;
+
+        beforeEach(()=> {
+            controller = element.controller('atLayout');
+        });
+
+        it('$scope.$on($stateChangeSuccess) should assign toState name to currentState', () => {
+            let next = {'name': 'dashboard'};
+            $rootScope.$broadcast('$stateChangeSuccess', next);
+            expect(controller.currentState).toBe('dashboard');
+        });
+
+        describe('$root.current_user watcher should assign value to ', () => {
+            beforeEach(() => {
+                let val = {
+                    username: 'admin',
+                    id: 1
+                };
+                $rootScope.current_user = val;
+                scope.$digest();
+            });
+
+            it('isLoggedIn', () => {
+                expect(controller.isLoggedIn).toBe('admin');
+
+                $rootScope.current_user = { id: 1 };
+                scope.$digest();
+                expect(controller.isLoggedIn).not.toBeDefined();
+            });
+
+            it('isSuperUser', () => {
+                $rootScope.current_user = 'one';
+                $rootScope.user_is_superuser = true;
+                $rootScope.user_is_system_auditor = false;
+                scope.$digest();
+                expect(controller.isSuperUser).toBe(true);
+
+                $rootScope.current_user = 'two';
+                $rootScope.user_is_superuser = false;
+                $rootScope.user_is_system_auditor = true;
+                scope.$digest();
+                expect(controller.isSuperUser).toBe(true);
+
+                $rootScope.current_user = 'three';
+                $rootScope.user_is_superuser = true;
+                $rootScope.user_is_system_auditor = true;
+                scope.$digest();
+                expect(controller.isSuperUser).toBe(true);
+
+                $rootScope.current_user = 'four';
+                $rootScope.user_is_superuser = false;
+                $rootScope.user_is_system_auditor = false;
+                scope.$digest();
+                expect(controller.isSuperUser).toBe(false);
+            });
+
+            it('currentUsername', () => {
+                expect(controller.currentUsername).toBeTruthy();
+                expect(controller.currentUsername).toBe('admin');
+            });
+
+            it('currentUserId', () => {
+                expect(controller.currentUserId).toBeTruthy();
+                expect(controller.currentUserId).toBe(1);
+            });
+
+        });
+
+        describe('$root.socketStatus watcher should assign newStatus to', () => {
+            let statuses = ['connecting', 'error', 'ok'];
+
+            it('socketState', () => {
+                _.forEach(statuses, (status) => {
+                    $rootScope.socketStatus = status;
+                    scope.$digest();
+                    expect(controller.socketState).toBeTruthy();
+                    expect(controller.socketState).toBe(status);
+                });
+            });
+
+            it('socketIconClass', () => {
+                _.forEach(statuses, (status) => {
+                    $rootScope.socketStatus = status;
+                    scope.$digest();
+                    expect(controller.socketIconClass).toBe(`icon-socket-${status}`);
+                });
+            });
+        });
+
+        describe('$root.licenseMissing watcher should assign true or false to', () => {
+            it('licenseIsMissing', () => {
+                $rootScope.licenseMissing = true;
+                scope.$digest();
+                expect(controller.licenseIsMissing).toBe(true);
+
+                $rootScope.licenseMissing = false;
+                scope.$digest();
+                expect(controller.licenseIsMissing).toBe(false);
+            });
+        });
+
+        describe('getString()', () => {
+            it('should return layout string', () => {
+                let layoutStrings = {
+                    CURRENT_USER_LABEL: 'Logged in as',
+                    VIEW_DOCS: 'View Documentation',
+                    LOGOUT: 'Logout',
+                    DASHBOARD: 'Dashboard',
+                    JOBS: 'Jobs',
+                    SCHEDULES: 'Schedules',
+                    PORTAL_MODE: 'Portal Mode',
+                    PROJECTS: 'Projects',
+                    CREDENTIALS: 'Credentials',
+                    CREDENTIAL_TYPES: 'Credential Types',
+                    INVENTORIES: 'Inventories',
+                    TEMPLATES: 'Templates',
+                    ORGANIZATIONS: 'Organizations',
+                    USERS: 'Users',
+                    TEAMS: 'Teams',
+                    INVENTORY_SCRIPTS: 'Inventory Scripts',
+                    NOTIFICATIONS: 'Notifications',
+                    MANAGEMENT_JOBS: 'Management Jobs',
+                    INSTANCE_GROUPS: 'Instance Groups',
+                    SETTINGS: 'Settings',
+                    FOOTER_ABOUT: 'About',
+                    FOOTER_COPYRIGHT: 'Copyright © 2017 Red Hat, Inc.'
+                };
+
+                _.forEach(layoutStrings, (value, key) => {
+                    expect(controller.getString(key)).toBe(value);
+                });
+            });
+
+            it('should return default string', () => {
+                let defaultStrings = {
+                    BRAND_NAME: "AWX"
+                };
+
+                _.forEach(defaultStrings, (value, key) => {
+                    expect(controller.getString(key)).toBe(value);
+                });
+            });
+        });
+    });
+});
\ No newline at end of file
diff --git a/awx/ui/package.json b/awx/ui/package.json
index 3cb89bcec5..14065392d2 100644
--- a/awx/ui/package.json
+++ b/awx/ui/package.json
@@ -25,7 +25,7 @@
     "jshint": "grunt jshint:source --no-color",
     "test:ci": "npm run test -- --single-run --reporter junit,dots --browsers=PhantomJS",
     "e2e": "./client/test/e2e/runner.js --config ./client/test/e2e/nightwatch.conf.js",
-    "component-test": "karma start client/test/karma.conf.js",
+    "component-test": "karma start client/test/unit/karma.conf.js --auto-watch --no-single-run",
     "lint": "eslint -c .eslintrc.js .",
     "dev": "webpack --config build/webpack.development.js --progress",
     "watch": "webpack-dev-server --config build/webpack.watch.js --progress",