在Angular应用中开始业力测试时出现此错误
错误:
UserNavComponent should compile
TypeError: Cannot read property 'authState' of undefined
TypeError: Cannot read property 'authState' of undefined
at AuthService../src/app/auth/shared/auth.service.ts.AuthService.isAuthenticated (http://localhost:9876/src/app/auth/shared/auth.service.ts?:27:26)
at UserNavComponent../src/app/user-nav/user-nav.component.ts.UserNavComponent.ngOnInit (http://localhost:9876/src/app/user-nav/user-nav.component.ts?:28:13)
at checkAndUpdateDirectiveInline (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:18620:1)
at checkAndUpdateNodeInline (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:19884:1)
at checkAndUpdateNode (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:19846:1)
at debugCheckAndUpdateNode (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:20480:1)
at debugCheckDirectivesFn (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:20440:1)
at Object.eval [as updateDirectives] (ng:///DynamicTestModule/UserNavComponent_Host.ngfactory.js:9:5)
at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:20432:1)
at checkAndUpdateView (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:19828:1)
我订阅了名为getAuthUser的FireAuth方法的组件上发生了错误。此方法由我的authService注入,提供了所有fireauth方法
无法编译的组件:
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AuthService } from '../auth/shared/auth.service';
@Component({
selector: 'app-user-nav',
templateUrl: './user-nav.component.html',
styleUrls: ['./user-nav.component.css'],
})
export class UserNavComponent {
showNav;
userProfile;
isHandset$: Observable<boolean> =
this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);
constructor(private breakpointObserver: BreakpointObserver, private auth:
AuthService) {
}
ngOnInit() {
this.auth.isAuthenticated().subscribe(isAuth => {
if(!isAuth) {
this.showNav = false;
}
else
this.showNav = true;
})
this.auth.getAuthUser().subscribe(authUser => {
this.userProfile = authUser;
})
}
logOut() {
this.auth.logout();
}
}
测试失败的代码
测试类:
import { LayoutModule } from '@angular/cdk/layout';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-
browser/animations';
import {
MatButtonModule,
MatIconModule,
MatListModule,
MatSidenavModule,
MatToolbarModule,
} from '@angular/material';
import { UserNavComponent } from './user-nav.component';
import { AngularFirestore, AngularFirestoreDocument } from
'@angular/fire/firestore';
import { AngularFireAuth } from '@angular/fire/auth';
describe('UserNavComponent', () => {
let component: UserNavComponent;
let fixture: ComponentFixture<UserNavComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [UserNavComponent],
providers: [{ provide: AngularFirestore} ,{ provide: AngularFireAuth},
{provide: AngularFirestoreDocument}],
imports: [
NoopAnimationsModule,
LayoutModule,
MatButtonModule,
MatIconModule,
MatListModule,
MatSidenavModule,
MatToolbarModule,
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserNavComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});
期望它进行编译,但没有这样做。有什么建议吗?