diff --git a/client/app/common/hero/hero.spec.js b/client/app/common/hero/hero.spec.js
index 7dedd74a..5202db68 100644
--- a/client/app/common/hero/hero.spec.js
+++ b/client/app/common/hero/hero.spec.js
@@ -1,17 +1,16 @@
 import HeroModule from './hero'
-import HeroController from './hero.controller';
-import HeroComponent from './hero.component';
-import HeroTemplate from './hero.html';
 
 describe('Hero', () => {
-  let $rootScope, makeController;
+  let $rootScope, $state, $location, $componentController, $compile;
 
   beforeEach(window.module(HeroModule));
-  beforeEach(inject((_$rootScope_) => {
-    $rootScope = _$rootScope_;
-    makeController = () => {
-      return new HeroController();
-    };
+
+  beforeEach(inject(($injector) => {
+    $rootScope = $injector.get('$rootScope');
+    $componentController = $injector.get('$componentController');
+    $state = $injector.get('$state');
+    $location = $injector.get('$location');
+    $compile = $injector.get('$compile');
   }));
 
   describe('Module', () => {
@@ -20,30 +19,31 @@ describe('Hero', () => {
 
   describe('Controller', () => {
     // controller specs
-    it('has a name property [REMOVE]', () => { // erase if removing this.name from the controller
-      let controller = makeController();
-      expect(controller).to.have.property('name');
+    let controller;
+    beforeEach(() => {
+      controller = $componentController('hero', {
+        $scope: $rootScope.$new()
+      });
     });
-  });
 
-  describe('Template', () => {
-    // template specs
-    // tip: use regex to ensure correct bindings are used e.g., {{  }}
-    it('has name in template [REMOVE]', () => {
-      expect(HeroTemplate).to.match(/{{\s?\$ctrl\.name\s?}}/g);
+    it('has a name property', () => { // erase if removing this.name from the controller
+      expect(controller).to.have.property('name');
     });
   });
 
-  describe('Component', () => {
-      // component/directive specs
-      let component = HeroComponent;
+  describe('View', () => {
+    // view layer specs.
+    let scope, template;
 
-      it('includes the intended template',() => {
-        expect(component.template).to.equal(HeroTemplate);
-      });
+    beforeEach(() => {
+      scope = $rootScope.$new();
+      template = $compile('<hero></hero>')(scope);
+      scope.$apply();
+    });
+
+    it('has name in template', () => {
+      expect(template.find('h3').html()).to.contain('hero');
+    });
 
-      it('invokes the right controller', () => {
-        expect(component.controller).to.equal(HeroController);
-      });
   });
 });
diff --git a/generator/component/temp.spec.js b/generator/component/temp.spec.js
index 57030f81..39d84d56 100644
--- a/generator/component/temp.spec.js
+++ b/generator/component/temp.spec.js
@@ -1,17 +1,16 @@
 import <%= upCaseName %>Module from './<%= name %>'
-import <%= upCaseName %>Controller from './<%= name %>.controller';
-import <%= upCaseName %>Component from './<%= name %>.component';
-import <%= upCaseName %>Template from './<%= name %>.html';
 
 describe('<%= upCaseName %>', () => {
-  let $rootScope, makeController;
+  let $rootScope, $state, $location, $componentController, $compile;
 
   beforeEach(window.module(<%= upCaseName %>Module));
-  beforeEach(inject((_$rootScope_) => {
-    $rootScope = _$rootScope_;
-    makeController = () => {
-      return new <%= upCaseName %>Controller();
-    };
+
+  beforeEach(inject(($injector) => {
+    $rootScope = $injector.get('$rootScope');
+    $componentController = $injector.get('$componentController');
+    $state = $injector.get('$state');
+    $location = $injector.get('$location');
+    $compile = $injector.get('$compile');
   }));
 
   describe('Module', () => {
@@ -20,30 +19,31 @@ describe('<%= upCaseName %>', () => {
 
   describe('Controller', () => {
     // controller specs
-    it('has a name property [REMOVE]', () => { // erase if removing this.name from the controller
-      let controller = makeController();
-      expect(controller).to.have.property('name');
+    let controller;
+    beforeEach(() => {
+      controller = $componentController('<%= name %>', {
+        $scope: $rootScope.$new()
+      });
     });
-  });
 
-  describe('Template', () => {
-    // template specs
-    // tip: use regex to ensure correct bindings are used e.g., {{  }}
-    it('has name in template [REMOVE]', () => {
-      expect(<%= upCaseName %>Template).to.match(/{{\s?\$ctrl\.name\s?}}/g);
+    it('has a name property', () => { // erase if removing this.name from the controller
+      expect(controller).to.have.property('name');
     });
   });
 
-  describe('Component', () => {
-      // component/directive specs
-      let component = <%= upCaseName %>Component;
+  describe('View', () => {
+    // view layer specs.
+    let scope, template;
 
-      it('includes the intended template',() => {
-        expect(component.template).to.equal(<%= upCaseName %>Template);
-      });
+    beforeEach(() => {
+      scope = $rootScope.$new();
+      template = $compile('<<%= name %>></<%= name %>>')(scope);
+      scope.$apply();
+    });
+
+    it('has name in template', () => {
+      expect(template.find('h1').html()).to.eq('<%= name %>');
+    });
 
-      it('invokes the right controller', () => {
-        expect(component.controller).to.equal(<%= upCaseName %>Controller);
-      });
   });
 });