Angular 测试没有生命周期挂钩的组件

所以我试图在一个没有生命周期挂钩的组件上编写一个测试

问题是，我不知道在没有生命周期挂钩的情况下，什么时候直接分配这样的值，我不知道何时确切地调用它，以及为什么在组件初始化时不调用它

组件。ts

export class MainNavComponent {
  isLoggedIn: boolean = this.authService.isLoggedIn;
  user: User;

  isHandset$: Observable<boolean> = 
    this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

constructor(private breakpointObserver: BreakpointObserver,
  public authService: AuthService) {
    //check logged in user
    this.authService.user$.subscribe(res => {
      if(res) {
        this.isLoggedIn = true;
        this.user = res;
      } else {
        this.isLoggedIn = false;
      }
    })
  }
}

describe('MainNavComponent', () => {
   let component: MainNavComponent;
   let fixture: ComponentFixture<MainNavComponent>;

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ 
      MainNavComponent,
      FooterComponent
    ],
    imports: [
      MaterialImportsModule,
      RouterTestingModule.withRoutes([]),
      HttpClientModule,
      AngularFireModule.initializeApp(environment.firebase, 'my-app-name'),
      AngularFirestoreModule,
      AngularFireStorageModule,
      AngularFireAuthModule,
      BrowserAnimationsModule
    ] 
  })
  .compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(MainNavComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

it('assing return if user is logged in and assign it to isLoggedIn', () => {
    let service: AuthService = TestBed.get(AuthService);    
    spyOn(service, 'isLoggedIn').and.returnValue(true);

    expect(component.isLoggedIn).toBeTruthy();    
  });
});

导出类MainNavComponent{
isLoggedIn:boolean=this.authService.isLoggedIn；
用户：用户；
isHandset$：可观察=
this.breakpointObserver.observe（Breakpoints.handle）
.烟斗(
映射（结果=>result.matches）
);
构造函数（专用断点观察者：断点观察者，
公共authService:authService）{
//检查登录用户
this.authService.user$.subscribe（res=>{
如果（res）{
this.isLoggedIn=true；
this.user=res；
}否则{
this.isLoggedIn=false；
}
})
}
}

组件规格ts

export class MainNavComponent {
  isLoggedIn: boolean = this.authService.isLoggedIn;
  user: User;

  isHandset$: Observable<boolean> = 
    this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

constructor(private breakpointObserver: BreakpointObserver,
  public authService: AuthService) {
    //check logged in user
    this.authService.user$.subscribe(res => {
      if(res) {
        this.isLoggedIn = true;
        this.user = res;
      } else {
        this.isLoggedIn = false;
      }
    })
  }
}

describe('MainNavComponent', () => {
   let component: MainNavComponent;
   let fixture: ComponentFixture<MainNavComponent>;

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ 
      MainNavComponent,
      FooterComponent
    ],
    imports: [
      MaterialImportsModule,
      RouterTestingModule.withRoutes([]),
      HttpClientModule,
      AngularFireModule.initializeApp(environment.firebase, 'my-app-name'),
      AngularFirestoreModule,
      AngularFireStorageModule,
      AngularFireAuthModule,
      BrowserAnimationsModule
    ] 
  })
  .compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(MainNavComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

it('assing return if user is logged in and assign it to isLoggedIn', () => {
    let service: AuthService = TestBed.get(AuthService);    
    spyOn(service, 'isLoggedIn').and.returnValue(true);

    expect(component.isLoggedIn).toBeTruthy();    
  });
});

description（'MainNavComponent'，（）=>{
let组件：MainNavComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[
主导航组件，
页脚组件
],
进口：[
MaterialImportsModule，
RouterTestingModule.withRoutes（[]），
HttpClientModule，
AngularFireModule.initializeApp（environment.firebase，“我的应用程序名”），
AngularFirestoreModule，
AngularFireStorageModule，
Angular模块，
浏览动画模块
] 
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（MainNavComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'如果用户登录并将其分配给isLoggedIn，则返回assing'，（）=>{
let服务：AuthService=TestBed.get（AuthService）；
spyOn（service，'isLoggedIn'）。和.returnValue（true）；
expect（component.isLoggedIn.toBeTruthy（）；
});
});

记录的消息

期望虚假成为真实

---

您应该将服务分配转移到beforeach（）方法，并将测试用例添加到fakeAsync（）范围。然后使用tick（）模拟异步任务的时间推移

beforeEach(() => {
  fixture = TestBed.createComponent(MainNavComponent);
  component = fixture.componentInstance;
  service: AuthService = TestBed.get(AuthService); //shift service to beforeEach()
  fixture.detectChanges();
});

...

it('assing return if user is logged in and assign it to isLoggedIn', fakeAsync(() => {

  spyOn(service, 'isLoggedIn').and.returnValue(true);

  tick(); //simulate passage of time that api call went through;
  fixture.detectChanges(); //trigger change detection in Angular to ensure class's isLoggedIn is updated

  expect(service.isLoggedIn).toHaveBeenCalled();
  expect(component.isLoggedIn).toBeTruthy();
}));

关于勾号（）：

调用tick（）模拟所有挂起的异步活动完成之前的时间过程

第二，不建议使用构造函数初始化服务调用。相反，它应该在ngOnInit（）中完成。这是为了确保一致性并防止模板中出现绑定错误

摘自：

大多数情况下，我们在所有初始化/声明中都使用ngOnInit，避免在构造函数中工作。构造函数应该只用于初始化类成员，而不应该执行实际的“工作”

因此，您应该使用构造函数（）来设置依赖项注入，而不是其他。ngOnInit（）是“开始”的好地方，它是解决组件绑定的位置/时间。

---

据我所知，你是在错误地侦察它

创建一个

Mock

as

export class AuthServiceMock{
     isLoggedIn  = false;
     user$  = new BehaviorSubject<any>({user: 'Hero'});
}

---

检查我的答案，让我知道它是否有效是的，它有效谢谢