Angular Модульное тестирование - значение Reactive Form не обновляется

Question

Я новичок в angular модульном тестировании. Сценарий тестирования: значение вида формы в html равно значению формы компонента. Значение электронной почты извлекается общим значением и используется в форме регистрации компонента. Я мог бы получить значение электронной почты из компонента, используя реактивные формы, но при попытке получить доступ через нативный элемент он дает пустое значение. Ниже будет component.ts

ngOnit(public serviceEmail) {
    this.assignEmailAvailable();
    this.createRegistration();

    }
assignEmailAvailable() {
 if(service.email){
    this.email = serviceEmail.email;
  }
 }   
createRegistration() {
   this.registerForm = new FormGroup({
       email:new FormControl({value:this.email})
    })
}

В component.spe c .ts я собираюсь вызвать эту функцию и проверить, являются ли оба значения одинаковыми. component.spe c .ts

 beforeEach(() => {
    fixture = TestBed.createComponent(RegisterComponent);
    component = fixture.componentInstance;
    service = TestBed.get(serviceEmail);
  });
it('Registration Form Creation', fakeAsync(() => {
    service.email = "dsf@gmail.com";

    fixture.detectChanges();

    component.assignEmailAvailable();
    component.createRegisterForm();

    fixture.detectChanges();
    fixture.whenStable().then(() => {
    const email = fixture.debugElement.query(By.css('input[id="email"]')).nativeElement;
//The value is empty even after creating the form using the component function
    expect(email.value).toBe(component.emailValue);
    });
//THis returns me the value set
    expect(component.registerForm.get('email').value).toBe(component.emailValue);
  }));