Merge pull request #3362 from icfantv/ng2_test_and_downgrades

feat(all): ng2 test, service, and component work

app/scripts/app.module.ts

@@ -1,59 +1,52 @@
-import {NgModule} from '@angular/core';
+import {NgModule, Type} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {UpgradeModule} from '@angular/upgrade/static';
-// import {UpgradeModule, downgradeInjectable} from '@angular/upgrade/static';
-// import {AUTHENTICATION_SERVICE, AuthenticationService} from './modules/core/authentication/authentication.service';
-// declare let angular: any;
+import {UpgradeModule, downgradeInjectable, downgradeComponent} from '@angular/upgrade/static';
+declare let angular: any;
 
-// import {SPINNAKER_DOWNGRADES, SPINNAKER_COMPONENT_DOWNGRADES} from './modules';
+import {SPINNAKER_DOWNGRADES, SPINNAKER_COMPONENT_DOWNGRADES} from './modules';
 
-// const providers: Type<any>[] = [];
-// export const DOWNGRADED_MODULE_NAMES: string[] = [];
-// SPINNAKER_DOWNGRADES.forEach((item) => {
-//   DOWNGRADED_MODULE_NAMES.push(item.moduleName);
-//   providers.push(item.moduleClass);
-//   angular.module(item.moduleName, []).factory(item.injectionName, downgradeInjectable(item.moduleClass));
-// });
-//
-// const declarations: Type<any>[] = [];
-// export const DOWNGRADED_COMPONENT_MODULE_NAMES: string[] = [];
-// SPINNAKER_COMPONENT_DOWNGRADES.forEach((item) => {
-//   DOWNGRADED_COMPONENT_MODULE_NAMES.push(item.moduleName);
-//   declarations.push(item.moduleClass);
-//
-//   // ng2 AoT requires we specify the inputs/outputs for downgraded components because the metadata is lost at runtime
-//   const component: any = {
-//     component: item.moduleClass
-//   };
-//   if (item.inputs) {
-//     component.inputs = item.inputs;
-//   }
-//   if (item.outputs) {
-//     component.outputs = item.outputs;
-//   }
-//
-//   angular.module(item.moduleName, []).directive(item.injectionName, downgradeComponent(component) as ng.IDirectiveFactory);
-// });
+const providers: Type<any>[] = [];
+export const DOWNGRADED_MODULE_NAMES: string[] = [];
+SPINNAKER_DOWNGRADES.forEach((item) => {
+  DOWNGRADED_MODULE_NAMES.push(item.moduleName);
+  providers.push(item.moduleClass);
+  angular.module(item.moduleName, []).factory(item.injectionName, downgradeInjectable(item.moduleClass));
+});
 
-// angular.module(AUTHENTICATION_SERVICE, []).factory('authenticationService', downgradeInjectable(AuthenticationService));
+const declarations: Type<any>[] = [];
+export const DOWNGRADED_COMPONENT_MODULE_NAMES: string[] = [];
+SPINNAKER_COMPONENT_DOWNGRADES.forEach((item) => {
+  DOWNGRADED_COMPONENT_MODULE_NAMES.push(item.moduleName);
+  declarations.push(item.moduleClass);
+
+  // ng2 AoT requires we specify the inputs/outputs for downgraded components because the metadata is lost at runtime
+  const component: any = {
+    component: item.moduleClass
+  };
+  if (item.inputs) {
+    component.inputs = item.inputs;
+  }
+  if (item.outputs) {
+    component.outputs = item.outputs;
+  }
+
+  angular.module(item.moduleName, []).directive(item.injectionName, downgradeComponent(component) as ng.IDirectiveFactory);
+});
 
 @NgModule({
   imports: [
     BrowserModule,
     UpgradeModule
   ],
-  // declarations: [
-  //   ...declarations
-  // ],
-  // entryComponents: [
-  //   ...declarations
-  // ],
-  // providers: [
-  //   ...providers
-  // ]
-  // providers: [
-  //   AuthenticationService
-  // ]
+  declarations: [
+    ...declarations
+  ],
+  entryComponents: [
+    ...declarations
+  ],
+  providers: [
+    ...providers
+  ]
 })
 export class SpinnakerModule {
   constructor(private upgrade: UpgradeModule) {}
@@ -86,5 +79,4 @@ export class SpinnakerModule {
 //     AuthenticationService
 //   ]
 // })
-// export class AuthenticationModule {
-// }
+// export class AuthenticationModule {}

app/scripts/app.ts

@@ -7,10 +7,8 @@
 import 'ts-helpers';
 import * as angular from 'angular';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-// import {UpgradeModule} from '@angular/upgrade/static';
 
-// import {DOWNGRADED_MODULE_NAMES, DOWNGRADED_COMPONENT_MODULE_NAMES, SpinnakerModule} from './app.module';
-import {SpinnakerModule} from './app.module';
+import {DOWNGRADED_MODULE_NAMES, DOWNGRADED_COMPONENT_MODULE_NAMES, SpinnakerModule} from './app.module';
 import {APPENGINE_MODULE} from './modules/appengine/appengine.module';
 import {AUTHENTICATION_SERVICE} from './modules/core/authentication/authentication.service';
 
@@ -26,9 +24,9 @@ module.exports = angular.module('netflix.spinnaker', [
   require('./modules/openstack/openstack.module.js'),
   require('./modules/docker/docker.module.js'),
   APPENGINE_MODULE,
-  AUTHENTICATION_SERVICE
-  // ...DOWNGRADED_MODULE_NAMES,
-  // ...DOWNGRADED_COMPONENT_MODULE_NAMES
+  AUTHENTICATION_SERVICE,
+  ...DOWNGRADED_MODULE_NAMES,
+  ...DOWNGRADED_COMPONENT_MODULE_NAMES
 ]);
 
 const events: any = {
@@ -63,8 +61,5 @@ const twilightZone = Zone.current.fork({
 });
 
 twilightZone.run(() => {
-  platformBrowserDynamic().bootstrapModule(SpinnakerModule)/*.then(platformRef => {
-    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-    upgrade.bootstrap(document.body, ['netflix.spinnaker']);
-  })*/;
+  platformBrowserDynamic().bootstrapModule(SpinnakerModule);
 });

app/scripts/modules/amazon/serverGroup/configure/wizard/templateSelection/templateSelection.html

@@ -1,5 +1,5 @@
 <div modal-page ng-controller="awsDeployInitializerCtrl as deployInitializerCtrl">
-  <modal-close dismiss="$dismiss()"></modal-close>
+  <modal-close (dismiss)="$dismiss()"></modal-close>
   <div ng-if="state.loaded">
     <div class="modal-header">
       <h3>Template Selection</h3>

app/scripts/modules/amazon/serverGroup/details/advancedSettings/editAsgAdvancedSettings.modal.html

@@ -1,7 +1,7 @@
 <div modal-page>
   <task-monitor monitor="taskMonitor"></task-monitor>
   <form role="form" name="form">
-    <modal-close dismiss="$dismiss()"></modal-close>
+    <modal-close (dismiss)="$dismiss()"></modal-close>
     <div class="modal-header">
       <h3>Edit Advanced Settings for {{serverGroup.name}}</h3>
     </div>

app/scripts/modules/amazon/serverGroup/details/resize/resizeServerGroup.html

@@ -1,7 +1,7 @@
 <div modal-page class="confirmation-modal">
   <task-monitor monitor="taskMonitor"></task-monitor>
   <form role="form">
-    <modal-close dismiss="$dismiss()"></modal-close>
+    <modal-close (dismiss)="$dismiss()"></modal-close>
     <div class="modal-header">
       <h3>Resize {{serverGroup.name}}</h3>
     </div>

app/scripts/modules/amazon/serverGroup/details/rollback/rollbackServerGroup.html

@@ -1,7 +1,7 @@
 <div modal-page class="confirmation-modal">
   <task-monitor monitor="taskMonitor"></task-monitor>
   <form role="form">
-    <modal-close dismiss="$dismiss()"></modal-close>
+    <modal-close (dismiss)="$dismiss()"></modal-close>
     <div class="modal-header">
       <h3>Rollback {{serverGroup.name}}</h3>
     </div>

app/scripts/modules/amazon/serverGroup/details/scalingPolicy/upsert/upsertScalingPolicy.modal.html

@@ -1,6 +1,6 @@
 <div modal-page class="scaling-policy-modal form-inline">
   <task-monitor monitor="ctrl.taskMonitor"></task-monitor>
-  <modal-close dismiss="$dismiss()"></modal-close>
+  <modal-close (dismiss)="$dismiss()"></modal-close>
   <div class="modal-header">
     <h3>{{ctrl.action}} scaling policy</h3>
   </div>

app/scripts/modules/amazon/serverGroup/details/scalingProcesses/modifyScalingProcesses.html

@@ -1,7 +1,7 @@
 <div modal-page class="confirmation-modal">
   <task-monitor monitor="taskMonitor"></task-monitor>
   <form role="form">
-    <modal-close dismiss="$dismiss()"></modal-close>
+    <modal-close (dismiss)="$dismiss()"></modal-close>
     <div class="modal-header">
       <h3>Modify Scaling Processes for {{serverGroup.name}}</h3>
     </div>

app/scripts/modules/amazon/serverGroup/details/scheduledAction/editScheduledActions.modal.html

@@ -1,7 +1,7 @@
 <div modal-page>
   <task-monitor monitor="taskMonitor"></task-monitor>
   <form role="form" name="form">
-    <modal-close dismiss="$dismiss()"></modal-close>
+    <modal-close (dismiss)="$dismiss()"></modal-close>
     <div class="modal-header">
       <h3>Edit Scheduled Actions for {{serverGroup.name}}</h3>
     </div>

app/scripts/modules/amazon/serverGroup/details/securityGroup/editSecurityGroups.modal.html

@@ -1,7 +1,7 @@
 <div modal-page>
   <task-monitor monitor="$ctrl.taskMonitor"></task-monitor>
   <form role="form" name="form">
-    <modal-close dismiss="$dismiss()"></modal-close>
+    <modal-close (dismiss)="$dismiss()"></modal-close>
     <div class="modal-header">
       <h3>Edit Security Groups for {{$ctrl.serverGroup.name}}</h3>
     </div>

app/scripts/modules/appengine/pipeline/stages/editLoadBalancer/loadBalancerChoice.modal.html

@@ -1,5 +1,5 @@
 <div modal-page>
-  <modal-close dismiss="$dismiss()"></modal-close>
+  <modal-close (dismiss)="$dismiss()"></modal-close>
   <div class="modal-header">
     <h3>Select Load Balancer</h3>
   </div>

app/scripts/modules/azure/serverGroup/configure/wizard/templateSelection.html

@@ -1,5 +1,5 @@
 <div modal-page ng-controller="azureDeployInitializerCtrl as deployInitializerCtrl">
-  <modal-close dismiss="$dismiss()"></modal-close>
+  <modal-close (dismiss)="$dismiss()"></modal-close>
   <div ng-if="state.loaded">
     <div class="modal-header">
       <h3>Template Selection</h3>

app/scripts/modules/cloudfoundry/serverGroup/configure/wizard/templateSelection.html

@@ -1,5 +1,5 @@
 <div modal-page ng-controller="cfDeployInitializerCtrl as deployInitializerCtrl">
-  <modal-close dismiss="$dismiss()"></modal-close>
+  <modal-close (dismiss)="$dismiss()"></modal-close>
   <div ng-if="state.loaded">
     <div class="modal-header">
       <h3>Template Selection</h3>

app/scripts/modules/cloudfoundry/serverGroup/details/resize/resizeServerGroup.html

@@ -1,7 +1,7 @@
 <div modal-page>
   <task-monitor monitor="taskMonitor"></task-monitor>
   <form role="form">
-    <modal-close dismiss="$dismiss()"></modal-close>
+    <modal-close (dismiss)="$dismiss()"></modal-close>
     <div class="modal-header">
       <h3>Resize {{serverGroup.name}}</h3>
     </div>

app/scripts/modules/cloudfoundry/serverGroup/details/rollback/rollbackServerGroup.html

@@ -1,7 +1,7 @@
 <div modal-page class="confirmation-modal">
   <task-monitor monitor="taskMonitor"></task-monitor>
   <form role="form" ng-if="!ctrl.submitting">
-    <modal-close dismiss="$dismiss()"></modal-close>
+    <modal-close (dismiss)="$dismiss()"></modal-close>
     <div class="modal-header">
       <h3>Rollback {{serverGroup.name}}</h3>
     </div>

app/scripts/modules/core/application/config/links/editLinks.modal.html

@@ -1,5 +1,5 @@
 <div modal-page class="flex-fill">
-  <modal-close dismiss="$dismiss()"></modal-close>
+  <modal-close (dismiss)="$dismiss()"></modal-close>
   <div class="modal-header">
     <h3>Edit Application Links</h3>
   </div>

app/scripts/modules/core/application/modal/editApplication.html

@@ -1,5 +1,5 @@
 <div class="modal-page">
-  <modal-close dismiss="$dismiss()"></modal-close>
+  <modal-close (dismiss)="$dismiss()"></modal-close>
   <div class="modal-header">
     <h3 data-purpose="modal-header">Edit Application</h3>
   </div>

app/scripts/modules/core/application/modal/newapplication.html

@@ -1,5 +1,5 @@
 <div class="modal-page">
-  <modal-close dismiss="$dismiss()"></modal-close>
+  <modal-close (dismiss)="$dismiss()"></modal-close>
   <div class="modal-header">
     <h3 data-purpose="modal-header">New Application</h3>
   </div>

app/scripts/modules/core/application/modal/pageApplicationOwner.html

@@ -1,6 +1,6 @@
 <div modal-page>
   <task-monitor monitor="ctrl.taskMonitor"></task-monitor>
-  <modal-close dismiss="$dismiss()"></modal-close>
+  <modal-close (dismiss)="$dismiss()"></modal-close>
   <div class="modal-header">
     <h3 data-purpose="modal-header">Page {{ctrl.application.name}} Owner</h3>
   </div>

app/scripts/modules/core/authentication/authentication.module.ts

@@ -1,5 +1,3 @@
-'use strict';
-
 import {AUTHENTICATION_INTERCEPTOR_SERVICE} from './authentication.interceptor.service';
 import {AUTHENTICATION_INITIALIZER_SERVICE, AuthenticationInitializer} from './authentication.initializer.service';
 import {REDIRECT_SERVICE} from './redirect.service';

app/scripts/modules/core/authentication/authentication.provider.spec.ts

@@ -4,8 +4,6 @@ import {IDeckRootScope} from 'core/domain/deckRootScope';
 import {RedirectService} from './redirect.service';
 import {AuthenticationService} from './authentication.service';
 import {AUTHENTICATION} from './authentication.module';
-// import {TEST_UPGRADE_MODULE} from 'core/authentication/TestUpgradeModule';
-// import {TestBed} from '@angular/core/testing';
 
 declare let window: any;
 describe('authenticationProvider: application startup', function () {
@@ -14,7 +12,6 @@ describe('authenticationProvider: application startup', function () {
     window.spinnakerSettings.authEnabled = true;
   });
 
-  // beforeEach(mock.module(AUTHENTICATION, TEST_UPGRADE_MODULE));
   beforeEach(mock.module(AUTHENTICATION));
 
   let authenticationService: AuthenticationService,
@@ -25,12 +22,6 @@ describe('authenticationProvider: application startup', function () {
     $location: ng.ILocationService,
     $rootScope: IDeckRootScope;
 
-  // beforeEach(() => {
-  //   TestBed.configureTestingModule({
-  //     providers: [AuthenticationService]
-  //   });
-  // });
-
   beforeEach(
     mock.inject(
       (_authenticationService_: AuthenticationService,
@@ -77,13 +68,10 @@ describe('authenticationProvider: application startup', function () {
       $http.flush();
 
       const callback = encodeURIComponent($location.absUrl());
-
       expect($rootScope.authenticating).toBe(true);
       expect(authenticationService.getAuthenticatedUser().name).toBe('[anonymous]');
       expect(authenticationService.getAuthenticatedUser().authenticated).toBe(false);
       expect(redirectUrl).toBe(`${settings.gateUrl}/auth/redirect?to=${callback}`);
-
     });
   });
-
 });

app/scripts/modules/core/authentication/authentication.service.spec.ts

@@ -2,7 +2,7 @@ import {destroyPlatform} from '@angular/core';
 
 import {AuthenticationService, IUser} from './authentication.service';
 
-describe('authenticationService', function() {
+describe('authenticationService', function () {
 
   beforeEach(() => destroyPlatform());
   afterEach(() => destroyPlatform());
@@ -12,23 +12,19 @@ describe('authenticationService', function() {
     authenticationService = new AuthenticationService();
   });
 
-  describe('setAuthenticatedUser', function() {
-    it('sets name, authenticated flag', function() {
+  describe('setAuthenticatedUser', function () {
+    it('sets name, authenticated flag', function () {
       let user: IUser = authenticationService.getAuthenticatedUser();
       expect(user.name).toBe('[anonymous]');
       expect(user.authenticated).toBe(false);
-      authenticationService.setAuthenticatedUser({
-        name: 'kato@example.com',
-        authenticated: false,
-        roles: ['roleA', 'RoleB']
-      });
+
+      authenticationService.setAuthenticatedUser({name: 'kato@example.com', authenticated: false});
       user = authenticationService.getAuthenticatedUser();
       expect(user.name).toBe('kato@example.com');
       expect(user.authenticated).toBe(true);
-      expect(user.roles).toEqual(['roleA', 'RoleB']);
     });
 
-    it('disregards falsy values', function() {
+    it('disregards falsy values', function () {
       const user: IUser = authenticationService.getAuthenticatedUser();
 
       expect(user.name).toBe('[anonymous]');
@@ -38,10 +34,7 @@ describe('authenticationService', function() {
       expect(user.name).toBe('[anonymous]');
       expect(user.authenticated).toBe(false);
 
-      authenticationService.setAuthenticatedUser({
-        name: '',
-        authenticated: false
-      });
+      authenticationService.setAuthenticatedUser({name: '', authenticated: false});
       expect(user.name).toBe('[anonymous]');
       expect(user.authenticated).toBe(false);
     });
@@ -52,10 +45,7 @@ describe('authenticationService', function() {
       let firedEvents = 0;
       authenticationService.onAuthentication(() => firedEvents++);
       authenticationService.onAuthentication(() => firedEvents++);
-      authenticationService.setAuthenticatedUser({
-        name: 'foo@bar.com',
-        authenticated: false
-      });
+      authenticationService.setAuthenticatedUser({name: 'foo@bar.com', authenticated: false});
       expect(authenticationService.getAuthenticatedUser().name).toBe('foo@bar.com');
       expect(firedEvents).toBe(2);
     });