Модульное тестирование реактивной формы

Question

Я новичок в тестировании, которое началось только вчера, и я в ловушке, так как не знаю, что и как в этом делать ... У меня есть реактивная форма:

 ngOnInit(): void {
    this.initAddNewTeamMemberForm();
}
    public initAddNewTeamMemberForm(data?: TeamMember): void {
        this.addNewTeamMemberForm = this.fb.group({
          name: this.getNameFormGroup(),
          email: [
            { value: null, disabled: this.data.isDisabled },
            [Validators.required, Utils.emptySpaceValidator(), Validators.email],
          ],
          createdBy: this.getCreatedByFormGroup(),
          role: this.getRoleFormGroup(),
          meta: this.getMetaFormGroup(),
        });

        if (data) {
          this.addNewTeamMemberForm.patchValue(data);
        }
      }

      public getNameFormGroup(): FormGroup {
        return this.fb.group({
          first: [null, [Validators.required, Utils.emptySpaceValidator()]],
          last: [null],
        });
      }

      public getCreatedByFormGroup(): FormGroup {
        return this.fb.group({
          id: [],
          name: [],
        });
      }

      public getRoleFormGroup(): FormGroup {
        return this.fb.group({
          id: [null, [Validators.required, Utils.emptySpaceValidator()]],
          name: [],
        });
      }

      public getMetaFormGroup(): FormGroup {
        return this.fb.group({
          profilePic: [],
          uniqueName: [],
        });
      }

Я хочу напишите для этого тестовые примеры:

const formBuilder: FormBuilder = new FormBuilder();

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule,
        RouterTestingModule,
        MaterialModule,
        SharedHomeModule,
        MatFormFieldModule,
        BrowserAnimationsModule,
        HttpClientModule,
      ],
      declarations: [AddTeamComponent],
      providers: [
        { provide: FormBuilder, useValue: formBuilder },
        { provide: FormGroup },
        { provide: MatDialogRef, useValue: dialogMock },
        { provide: MAT_DIALOG_DATA, useValue: {} },
        { provide: TeamService, useClass: TeamServiceMock },
        SharedService,
        CustomHttpService,
      ],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AddTeamComponent);
    component = fixture.debugElement.componentInstance;
  });

it('should initialize add team member form', () => {
    const formBuilder: FormBuilder = new FormBuilder();
    const formFroup = formBuilder.group({
      name: formBuilder.group({
        first: null,
        last: null,
      }),
      email: [
        null,
        [Validators.required, Utils.emptySpaceValidator(), Validators.email],
      ],
      createdBy: formBuilder.group({
        id: [],
        name: [],
      }),
      role: formBuilder.group({
        id: [null, [Validators.required, Utils.emptySpaceValidator()]],
        name: [],
      }),
      meta: formBuilder.group({
        profilePic: [],
        uniqueName: [],
      }),
    });

    component.initAddNewTeamMemberForm();

    expect(component.addNewTeamMemberForm.value).toEqual(formFroup.value);
  });

  it('should initialize name form', () => {
    formBuilder.group({
      first: null,
      last: null,
    });
    component.getNameFormGroup();
  });

  it('should initialize CreateBy form', () => {
    formBuilder.group({
      id: [],
      name: [],
    });
    component.getCreatedByFormGroup();
  });

  it('should initialize role form', () => {
    formBuilder.group({
      id: [null, [Validators.required, Utils.emptySpaceValidator()]],
      name: [],
    });
    component.getRoleFormGroup();
  });

  it('should initialize meta form', () => {
    formBuilder.group({
      profilePic: [],
      uniqueName: [],
    });
    component.getMetaFormGroup();
  });

  it('should set selected member role from dropdown to form control', () => {
    const form = component.addNewTeamMemberForm.controls['role'];
    form.patchValue({
      id: '5ece482e97a76536f460e738',
      name: 'test role 2',
    });
    expect(component.addNewTeamMemberForm.controls['role'].value).toEqual(form.value);
  });

  it('form invalid when empty', () => {
    expect(component.addNewTeamMemberForm.valid).toBeFalsy();
  });

Я получаю ошибку в .valid и .control, поскольку они не определены, может ли кто-нибудь помочь мне в этом, что я делаю неправильно? Я пробовал все ответы на переполнение стека и демонстрацию stackblitz, но здесь у меня ничего не работает