ngneat / reactive-forms

(Angular Reactive) Forms with Benefits 😉
https://www.netbasal.com
611 stars 56 forks source link

Unit test fail (TypeError: Class constructor FormControl cannot be invoked without 'new') #118

Closed Al00X closed 3 years ago

Al00X commented 3 years ago

Is this a regression?

Yes

Description

I recently updated to the latest version of this package and Angular. I checked the playground demo project in the source codes and every config is the same as mine (I'm using NX). When unit testing, I get this error:

TypeError: Class constructor FormControl cannot be invoked without 'new'

  at new FormControl (../../libs/reactive-forms/src/lib/form-control.ts:51:5)
  at new FormComponent (src/app/form.component.ts:36:13)`

My code:

import { CommonModule } from '@angular/common';
import { Component, NgModule } from '@angular/core';
import { Validators } from '@angular/forms';
import { FormGroup, FormControl, ControlsOf } from '@ngneat/reactive-forms';

export interface Props {
  name: string;
  image: string;
}
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss'],
})
export class FormComponent {
  formGroup: FormGroup<ControlsOf<Props>>;
  constructor() {
    this.formGroup= new FormGroup<ControlsOf<Props>>({
      //   X     <- Error points to there
      name: new FormControl('', [Validators.required, Validators.minLength(4), Validators.maxLength(16)]),
      image: new FormControl("", Validators.required),
    });
  }
}

My unit test:

import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormComponent } from './form.component';

describe('FormComponent', () => {
  let component: FormComponent;
  let fixture: ComponentFixture<FormComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ FormComponent ],
      imports: [ RouterTestingModule ],
      schemas: [NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA]
    })
    .compileComponents();
  });

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

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

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

TypeError: Class constructor FormControl cannot be invoked without 'new'

       at new FormControl (../../libs/reactive-forms/src/lib/form-control.ts:51:5)
       at new FormComponent (src/app/form.component.ts:36:13)`

Please provide the environment you discovered this bug in

Angular CLI: 13.0.3
Node: 14.15.5
Package Manager: npm 8.1.4
OS: win32 x64

Angular: 13.0.2
... animations, cdk, cdk-experimental, common, compiler
... compiler-cli, core, forms, language-service, material
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.3
@angular-devkit/build-angular   13.0.3
@angular-devkit/core            13.0.3
@angular-devkit/schematics      13.0.3
@angular/cli                    13.0.3
@angular/fire                   7.2.0
@schematics/angular             13.0.3
ng-packagr                      13.0.6
rxjs                            7.4.0
typescript                      4.4.4

ngneat/reactive-forms: 3.1.4
jest: 27.2.3

Anything else?

Sorry I couldn't provide a reproducing repo because this is a private project. but if you guys needed, I will create one.

Do you want to create a pull request?

No

NetanelBasal commented 3 years ago

The library isn't compatible with Angular v13.

NetanelBasal commented 3 years ago

duplicate of #117