BreadcrumbPie
BreadcrumbPie

Reputation: 91

Testsetup for Form in Angular fails

I do have an dynamic-form-component which is set up like this:

export class DynamicformComponent implements OnInit {

  isDropdownOpen = false;

  @Input() questions: Formbase<string>[] | null = [];
  form!: FormGroup;

  @Output() emitFormObj = new EventEmitter<any>();

  get dropdownQuestions() {
    return this.questions?.filter(q => q.controlType === 'dropdown') || [];
  }
  
  hasDropdownQuestion(): boolean {
    return this.dropdownQuestions.length > 0;
  }

  constructor(private qcs: QuestioncontrolService) {}

  ngOnInit() {
    this.form = this.qcs.toFormGroup(this.questions as Formbase<string>[]);
  } etc.

and I would like to setup a test for it which I did this way:

describe('DynamicformComponent', () => {
  let component: DynamicformComponent;
  let fixture: ComponentFixture<DynamicformComponent>;
  let mockQCS: jasmine.SpyObj<QuestioncontrolService>;

  beforeEach(async () => {
    mockQCS = jasmine.createSpyObj('QuestioncontrolService', ['toFormGroup']);
    mockQCS.toFormGroup.and.returnValue(new FormGroup({
      dropdown1: new FormControl('')
    }));

    await TestBed.configureTestingModule({
      declarations: [DynamicformComponent, DynamicformquestionComponent],
      imports: [
        HttpClientTestingModule,
        ReactiveFormsModule],
      providers: [{ provide: QuestioncontrolService, useValue: mockQCS }],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();

    fixture = TestBed.createComponent(DynamicformComponent);
    component = fixture.componentInstance;

    component.questions = [
      { key: 'dropdown1', label: 'Dropdown', controlType: 'dropdown' } as Formbase<string>
    ];

    component.form = new FormGroup({
      dropdown1: new FormControl('')
    });

    fixture.detectChanges();
  });

I tried to mock the form but it fails and I'm getting the error:

NG01052: formGroup expects a FormGroup instance. Please pass one in.

I thought this should be quite a working setup - but obviously it isn't. Can anyone give me a hint why the form-mock doesn't work?

Upvotes: 0

Views: 14

Answers (0)

Related Questions