Проверка отказа двигателя при использовании FormGroup в Angular 9 - PullRequest
Новая
       6

Проверка отказа двигателя при использовании FormGroup в Angular 9

0 голосов
/ 23 февраля 2020

У меня есть следующий компонент: 

export class BaseFormComponent implements OnInit {
  basicFormGroup: FormGroup;
  constructor(
    protected basicProviderService: BasicProviderService,
    protected formBuilder: FormBuilder,
    protected dialog: MatDialog,
    protected spinner: NgxSpinnerService
    ) {
    this.basicFormGroup = this.formBuilder.group({
      name:[''],
      note: ['', Validators.required],
      description: ['', Validators.required]
    });
  }
}

Код его шаблона: 

<h3><span>Basic form data</span></h3>
<mat-divider></mat-divider>
<form *ngIf="true" [formGroup]="basicFormGroup">
<!-- its content does not matter-->
</form>

Это тест: 

fdescribe('BasicFormComponent', () => {
  let component: BasicFormComponent;
  let fixture: ComponentFixture<BasicFormComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [BasicFormComponent],
      imports: [
        FormsModule,
        MatDialogModule,
        MatAutocompleteModule,
        MatSnackBarModule,
        MatExpansionModule,
        MatStepperModule,
        MatFormFieldModule,
        TextFieldModule,
        MatInputModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatListModule,
        MatSelectModule,
        HttpClientTestingModule,
        RouterTestingModule,
        BrowserAnimationsModule,
        CoreModule
      ],
      providers: [
        { provide: BasicProviderService, useClass: BasicProviderServiceStub }
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BasicFormComponent);    
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Когда он запускается, я получить следующую ошибку при вызове метода createComponent: 

HeadlessChrome 80.0.3987 (Windows 10.0.0) BasicFormComponent should create FAILED
        Error: NodeInjector: NOT_FOUND [ControlContainer]
            at getOrCreateInjectable (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:5467:1)
            at Module.ɵɵdirectiveInject (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:20759:1)
            at NodeInjectorFactory.NgControlStatusGroup_Factory [as factory] (http://localhost:9877/_karma_webpack_/node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:1013:135)
            at getNodeInjectable (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:5598:1)
            at instantiateAllDirectives (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12645:1)
            at createDirectivesInstances (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11881:1)
            at ɵɵelementStart (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:20943:1)
            at BasicFormComponent_Template (ng:///BasicFormComponent.js:192:9)
            at executeTemplate (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11841:1)
            at renderView (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11627:1)
        Expected undefined to be truthy.
            at UserContext.<anonymous> (http://localhost:9877/_karma_webpack_/src/app/basic-form/basic-form.component.spec.ts:62:23)
            at ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:365:1)
            at ProxyZoneSpec.onInvoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:305:1)
            at ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
HeadlessChrome 80.0.3987 (Windows 10.0.0): Executed 1 of 181 (1 FAILED) (0 secs / 0.293 secs)

Я попробовал следующее:

  • Когда я использую ngIf='false', тест завершается успешно -> так он, вероятно, дает сбой из-за формы
  • Когда я заменяю свойство [formGroup]='basicFormGroup' на [formGroup]='undefined', тест не пройден -> поэтому он завершается с любой формой

Файл app.module.ts содержит импорт FormsModule.

Похоже, что механизм тестирования не может найти абстрактную базу форм.

Что может вызвать это ?

1 Ответ

1 голос
/ 24 февраля 2020

Для реактивных форм требуется ReactiveFormsModule для импорта, а для шаблонно-управляемых форм требуется FormsModule.

Здесь вы используете директиву formGroup, которая является частью реактивных форм, поэтому ReactiveFormsModule - это требуется.

См. angular документы для различия между этими двумя типами форм.

...