Added typescript fix for problem with specs created by "dotnet new angular --auth" (#18295)

Author: benday

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/package.json

@@ -47,6 +47,7 @@
     "karma-coverage-istanbul-reporter": "~2.1.0",
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.2",
+    "karma-spec-reporter": "0.0.32",
     "typescript": "3.5.3"
   },
   "optionalDependencies": {

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/authorize.guard.spec.ts

@@ -1,10 +1,11 @@
 import { TestBed, inject } from '@angular/core/testing';
-
+import { RouterTestingModule } from '@angular/router/testing';
 import { AuthorizeGuard } from './authorize.guard';
 
 describe('AuthorizeGuard', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
       providers: [AuthorizeGuard]
     });
   });

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/login-menu/login-menu.component.spec.ts

@@ -1,19 +1,29 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { RouterTestingModule } from '@angular/router/testing';
 import { LoginMenuComponent } from './login-menu.component';
+import { AuthorizeService } from '../authorize.service';
+import { of } from 'rxjs';
 
 describe('LoginMenuComponent', () => {
   let component: LoginMenuComponent;
   let fixture: ComponentFixture<LoginMenuComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [RouterTestingModule], 
       declarations: [ LoginMenuComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
+    let authService = TestBed.get(AuthorizeService);
+
+    spyOn(authService, 'ensureUserManagerInitialized').and.returnValue(
+      Promise.resolve());
+    spyOn(authService, 'getUserFromStorage').and.returnValue(
+      of(null));
+
     fixture = TestBed.createComponent(LoginMenuComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/login/login.component.spec.ts

@@ -1,19 +1,63 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { RouterTestingModule } from '@angular/router/testing';
 import { LoginComponent } from './login.component';
+import { ActivatedRoute, ActivatedRouteSnapshot, UrlSegment, convertToParamMap, Params, Router } from '@angular/router';
+import { of } from 'rxjs';
+import { LoginActions } from '../api-authorization.constants';
+import { HttpParams } from '@angular/common/http';
+import { AuthorizeService } from '../authorize.service';
+import { log } from 'util';
+import { HomeComponent } from 'src/app/home/home.component';
+
+class RouterStub {
+  url = '';
+  navigate(commands: any[], extras?: any) {}
+}
 
 describe('LoginComponent', () => {
   let component: LoginComponent;
   let fixture: ComponentFixture<LoginComponent>;
+  let router: Router;
 
   beforeEach(async(() => {
+    log('login.component.spec.ts before each started...');
+
+    let tempParams: Params = { id: '1234' };
+
+    let segment0: UrlSegment = new UrlSegment('segment0', {});
+    let segment1: UrlSegment = new UrlSegment(LoginActions.Login, {});
+
+    let urlSegments: UrlSegment[] = [segment0, segment1];
+
     TestBed.configureTestingModule({
-      declarations: [ LoginComponent ]
-    })
-    .compileComponents();
+      imports: [
+        RouterTestingModule.withRoutes([
+        { path: 'authentication/login-failed', component: HomeComponent }
+      ])],
+      declarations: [LoginComponent, HomeComponent],
+      providers: [{
+        provide: ActivatedRoute, useValue: {
+          snapshot: {
+            paramMap: convertToParamMap(tempParams),
+            url: urlSegments,
+            queryParams: tempParams
+          }
+        }
+      }]
+    }).compileComponents();
+
+    router = TestBed.get(Router);
+    spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));
+
+    log('login.component.spec.ts before each after compileComponents()...');
   }));
 
   beforeEach(() => {
+    let authService = TestBed.get(AuthorizeService);
+
+    spyOn(authService, 'ensureUserManagerInitialized').and.returnValue(
+      Promise.resolve());
+
     fixture = TestBed.createComponent(LoginComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/logout/logout.component.spec.ts

@@ -1,14 +1,40 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { RouterTestingModule } from '@angular/router/testing';
 import { LogoutComponent } from './logout.component';
+import { HomeComponent } from 'src/app/home/home.component';
+import { ActivatedRoute, convertToParamMap, Params, UrlSegment } from '@angular/router';
+import { log } from 'util';
+import { LogoutActions } from '../api-authorization.constants';
 
 describe('LogoutComponent', () => {
   let component: LogoutComponent;
   let fixture: ComponentFixture<LogoutComponent>;
 
   beforeEach(async(() => {
+    log('logout.component.spec.ts before each started...');
+
+    let tempParams: Params = { id: '1234' };
+
+    let segment0: UrlSegment = new UrlSegment('segment0', {});
+    let segment1: UrlSegment = new UrlSegment(LogoutActions.LoggedOut, {});
+
+    let urlSegments: UrlSegment[] = [segment0, segment1];
+
     TestBed.configureTestingModule({
-      declarations: [ LogoutComponent ]
+      imports: [
+        RouterTestingModule.withRoutes([
+        { path: 'authentication/login-failed', component: HomeComponent }
+      ])],
+      declarations: [LogoutComponent, HomeComponent],
+      providers: [{
+        provide: ActivatedRoute, useValue: {
+          snapshot: {
+            paramMap: convertToParamMap(tempParams),
+            url: urlSegments,
+            queryParams: tempParams
+          }
+        }
+      }]
     })
     .compileComponents();
   }));

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/karma.conf.js

@@ -9,6 +9,7 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
+      require('karma-spec-reporter'),
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
@@ -20,7 +21,7 @@ module.exports = function (config) {
       reports: ['html', 'lcovonly'],
       fixWebpackSourcePaths: true
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ['progress', 'kjhtml', 'spec'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,