Как я могу получить экземпляр не тестируемого компонента внутри моего теста

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-Логин-формы.

Answer 1

, чтобы получить ссылку на компонент, я использовал Viewchild. ссылка из ViewChild - Как получить ссылку на дочерний компонент и передать значение из дочернего компонента

Что касается проблемы, с которой я столкнулся, то, похоже, проблема заключалась в многократном включении LoginFormComponent,HTML-код ValidateSessionComponent содержал ссылку на 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, что вызывает эту проблему