From 1e861070db71ceb6a0ceffa73353ba24e15cfaec Mon Sep 17 00:00:00 2001 From: Samitha Fernando Date: Tue, 12 Jul 2016 10:11:11 +1000 Subject: [PATCH 1/4] [dev] - updated spec's to use $componentController. Updated ui-router version to latest which allows routes to use components instead templates --- client/app/common/navbar/navbar.spec.js | 56 ++++++++++----------- client/app/components/about/about.js | 2 +- client/app/components/about/about.spec.js | 59 ++++++++++++----------- client/app/components/home/home.js | 2 +- client/app/components/home/home.spec.js | 59 ++++++++++++----------- package.json | 2 +- 6 files changed, 95 insertions(+), 85 deletions(-) diff --git a/client/app/common/navbar/navbar.spec.js b/client/app/common/navbar/navbar.spec.js index f9ff6c5b..f7002fa2 100644 --- a/client/app/common/navbar/navbar.spec.js +++ b/client/app/common/navbar/navbar.spec.js @@ -1,17 +1,16 @@ import NavbarModule from './navbar' -import NavbarController from './navbar.controller'; -import NavbarComponent from './navbar.component'; -import NavbarTemplate from './navbar.html'; -describe('Navbar', () => { - let $rootScope, makeController; +describe('Home', () => { + let $rootScope, $state, $location, $componentController, $compile; beforeEach(window.module(NavbarModule)); - beforeEach(inject((_$rootScope_) => { - $rootScope = _$rootScope_; - makeController = () => { - return new NavbarController(); - }; + + 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('Navbar', () => { 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('navbar', { + $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(NavbarTemplate).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 = NavbarComponent; + describe('View', () => { + // view layer specs. + let scope, template; - it('includes the intended template',() => { - expect(component.template).to.equal(NavbarTemplate); - }); + beforeEach(() => { + scope = $rootScope.$new(); + template = $compile('')(scope); + scope.$apply(); + }); + + it('has name in template', () => { + expect(template.find('h1').find('a').html()).to.eq('navbar'); + }); - it('invokes the right controller', () => { - expect(component.controller).to.equal(NavbarController); - }); }); }); diff --git a/client/app/components/about/about.js b/client/app/components/about/about.js index dbb43d84..9dc45a54 100644 --- a/client/app/components/about/about.js +++ b/client/app/components/about/about.js @@ -11,7 +11,7 @@ let aboutModule = angular.module('about', [ $stateProvider .state('about', { url: '/about', - template: '' + component: 'about' }); }) diff --git a/client/app/components/about/about.spec.js b/client/app/components/about/about.spec.js index 7ec0a4d9..46703f84 100644 --- a/client/app/components/about/about.spec.js +++ b/client/app/components/about/about.spec.js @@ -1,49 +1,54 @@ import AboutModule from './about' -import AboutController from './about.controller'; -import AboutComponent from './about.component'; -import AboutTemplate from './about.html'; describe('About', () => { - let $rootScope, makeController; + let $rootScope, $state, $location, $componentController, $compile; beforeEach(window.module(AboutModule)); - beforeEach(inject((_$rootScope_) => { - $rootScope = _$rootScope_; - makeController = () => { - return new AboutController(); - }; + + 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', () => { // top-level specs: i.e., routes, injection, naming + it('About component should be visible when navigates to /about', () => { + $location.url('/about'); + $rootScope.$digest(); + expect($state.current.component).to.eq('about'); + }); }); 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('about', { + $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(AboutTemplate).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 = AboutComponent; + describe('View', () => { + // view layer specs. + let scope, template; - it('includes the intended template',() => { - expect(component.template).to.equal(AboutTemplate); - }); + beforeEach(() => { + scope = $rootScope.$new(); + template = $compile('')(scope); + scope.$apply(); + }); + + it('has name in template', () => { + expect(template.find('h1').html()).to.eq('about'); + }); - it('invokes the right controller', () => { - expect(component.controller).to.equal(AboutController); - }); }); }); diff --git a/client/app/components/home/home.js b/client/app/components/home/home.js index b73a29f7..754c6def 100644 --- a/client/app/components/home/home.js +++ b/client/app/components/home/home.js @@ -14,7 +14,7 @@ let homeModule = angular.module('home', [ $stateProvider .state('home', { url: '/', - template: '' + component: 'home' }); }) diff --git a/client/app/components/home/home.spec.js b/client/app/components/home/home.spec.js index 1ad11c4d..f2cada3e 100644 --- a/client/app/components/home/home.spec.js +++ b/client/app/components/home/home.spec.js @@ -1,49 +1,54 @@ import HomeModule from './home' -import HomeController from './home.controller'; -import HomeComponent from './home.component'; -import HomeTemplate from './home.html'; describe('Home', () => { - let $rootScope, makeController; + let $rootScope, $state, $location, $componentController, $compile; beforeEach(window.module(HomeModule)); - beforeEach(inject((_$rootScope_) => { - $rootScope = _$rootScope_; - makeController = () => { - return new HomeController(); - }; + + 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', () => { // top-level specs: i.e., routes, injection, naming + it('default component should be home', () => { + $location.url('/'); + $rootScope.$digest(); + expect($state.current.component).to.eq('home'); + }); }); 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('home', { + $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(HomeTemplate).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 = HomeComponent; + describe('View', () => { + // view layer specs. + let scope, template; - it('includes the intended template',() => { - expect(component.template).to.equal(HomeTemplate); - }); + beforeEach(() => { + scope = $rootScope.$new(); + template = $compile('')(scope); + scope.$apply(); + }); + + it('has name in template', () => { + expect(template.find('h1').html()).to.eq('Found in home.html'); + }); - it('invokes the right controller', () => { - expect(component.controller).to.equal(HomeController); - }); }); }); diff --git a/package.json b/package.json index 1f4c972c..e3064c72 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "dependencies": { "angular": "^1.5.0", - "angular-ui-router": "^0.2.15", + "angular-ui-router": "^1.0.0-beta.1", "normalize.css": "^3.0.3" }, "devDependencies": { From 4291ceb9cdf89ce6b1fff8de5bc54a7f740a332f Mon Sep 17 00:00:00 2001 From: Samitha Fernando Date: Tue, 12 Jul 2016 10:13:15 +1000 Subject: [PATCH 2/4] [dev] - exclude .idea folder from git --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index f31eec2f..765b9bf4 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ node_modules .settings *.log dist/ +.idea From db42d73342829c1c9215330f82bdb83a3734d3ce Mon Sep 17 00:00:00 2001 From: Samitha Fernando Date: Tue, 12 Jul 2016 13:44:50 +1000 Subject: [PATCH 3/4] [dev] - Updated describe block description --- client/app/common/navbar/navbar.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/common/navbar/navbar.spec.js b/client/app/common/navbar/navbar.spec.js index f7002fa2..e4cd43fe 100644 --- a/client/app/common/navbar/navbar.spec.js +++ b/client/app/common/navbar/navbar.spec.js @@ -1,6 +1,6 @@ import NavbarModule from './navbar' -describe('Home', () => { +describe('Navbar', () => { let $rootScope, $state, $location, $componentController, $compile; beforeEach(window.module(NavbarModule)); From 84c7737a7c12508648eb5e0d44ea9c3875aaef1c Mon Sep 17 00:00:00 2001 From: Samitha Fernando Date: Wed, 13 Jul 2016 09:10:39 +1000 Subject: [PATCH 4/4] [dev] - Reverted change as per the feedback. --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 765b9bf4..f31eec2f 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,3 @@ node_modules .settings *.log dist/ -.idea