Question

我有一个组件，“ ValidateSessionComponent which uses another component 'LoginFormComponent'. 'LoginFormComponent' emits a value which ValidateSessionComponent should get should then call登录meethod of the UserManagementService`。我已经编写了以下测试用例，但出现错误“错误：StaticInjectorError [LoginFormComponent]： NullInjectorError：LoginFormComponent没有提供者！'

为什么会出现此错误，以及如何解决。

describe('ValidateSessionComponent tests with route parameters', () => {
  let component: ValidateSessionComponent;
  let fixture: ComponentFixture<ValidateSessionComponent>;

  beforeEach(async()=>{
    TestBed.configureTestingModule({
      declarations: [ LoginFormComponent, //I AM INJECTING THE LOGINFORMCOMPONENT HERE
        NavComponentComponent,
        ContentComponentComponent,
        FooterComponentComponent,
        HomepageContentComponentComponent,
        ShowErrorsComponent,
        ProgressBarComponent,
        SignupComponentComponent,
        HomepageContentComponentComponent,
        NewPracticeQuestionComponent,
        PraticeQuestionListComponent,
        QuestionDetailsComponent,
        PageNotFoundComponent,
        DialogBoxComponent,
        ValidateSessionComponent],
      imports:[ReactiveFormsModule,
        RouterModule,
        HttpClientModule,
        AppRoutingModule
      ],
      providers:[
        {provide: UserManagementService, useClass: MockUserManagementService},//mock user management service
        HelperService,
        DialogBoxService,
        {provide: APP_BASE_HREF, useValue: '/'}
      ]
    })
      .compileComponents();
  });


  beforeEach(() => {
    fixture = TestBed.createComponent(ValidateSessionComponent);
    component = fixture.componentInstance;
    //using component['activatedRoute'] instead of component.route to remove editor's error that route is private.
    /*
    this is the way to return different values from a spy based on the received argument. The route will have
    params like
    {
      username:..
      redirect-to:...
      additional-redirect-info:..
    }
     */
    spyOn(component['activatedRoute'].snapshot.paramMap,'get').and.callFake(function() {
     let param = arguments[0];
     console.log('param in fake function ',param);
     if(param==='username'){
       return 'test@test.com'
     }
      if(param==='redirect-to'){
        return '/home'
      }
      if(param==='additional-redirect-info'){
        return {somearg:'somevalue'}
      }
      console.log('returning unknown param',param);
     return param;
    });
    fixture.detectChanges();
  });

  fit('should send signin request on receiving form values ',(done)=>{
    let loginComponent:LoginFormComponent = TestBed.get(LoginFormComponent);
    let userService:UserManagementService = TestBed.get(UserManagementService);
    loginComponent.formOutputEvent.emit(new LoginFormValues('test@test.com','somepassword'));
    spyOn(userService,'signinUser');
    setTimeout(()=>{
      expect(userService.signinUser).toHaveBeenCalledWith(new UserSigninInfo('test@test.com','somepassword'));
      done();
    },1000);

  });
});

在spec中，如果我删除了LoginFormComponent（其选择器为app-login-form），则会收到错误消息“无法绑定到'userId'，因为它不是已知属性” “ app-login-form”的形式。

Answer 1

为了获得组件的参考，我使用了Viewchild。来自ViewChild的参考-How can I get reference of child component and emit a value from child component

关于我所面临的问题，看来该问题是LoginFormComponent的多次包含。 ValidateSessionComponent的HTML引用了LoginFormComponent。

<app-login-form (formOutputEvent)="handleFormValues($event)" [userId]="username"></app-login-form>

到目前为止，这个方法工作正常。然后，我决定通过LoginFormComponent

中的DI还包含ValidateSessionComponent的通过引用

constructor(private loginForm2:LoginFormComponent,private helper:HelperService,private dialogService:DialogBoxService,private activatedRoute:ActivatedRoute, private router:Router, private userManagementService:UserManagementService) { }

这开始导致错误StaticInjectorError(DynamicTestModule)[ValidateSessionComponent -> LoginFormComponent]: StaticInjectorError(Platform: core)[ValidateSessionComponent -> LoginFormComponent]: NullInjectorError: No provider for LoginFormComponent!

说实话，我不知道原因，即导致该问题的Angular引擎盖下发生了什么

如何在我的测试用例中获取非被测组件的实例

1 个答案: