Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: .keep(ReactiveFormsModule) does not actually keep #7938

Open
JPtenBerge opened this issue Jan 13, 2024 · 4 comments
Open

Bug: .keep(ReactiveFormsModule) does not actually keep #7938

JPtenBerge opened this issue Jan 13, 2024 · 4 comments
Assignees
Labels
bug Something isn't working

Comments

@JPtenBerge
Copy link

Hello there!

Description of the bug

During testing, I'm trying to keep the ReactiveFormsModule from being mocked using .keep(), but it very much seems to be mocked and then causing errors because it's a seemingly shallow mock.

An example of the bug

I have this component where I'm initializing a reactive form in the ngOnInit():

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  form!: FormGroup<AddPersonForm>;

  constructor(private fb: NonNullableFormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group<AddPersonForm>({
      name: this.fb.control(''),
      age: this.fb.control(21),
    });
  }
}

I'm trying to test it, where I actually want to keep the ReactiveFormsModule untouched, it should just work as in production:

describe('AppComponent', () => {
  let sut: AppComponent;

  beforeEach(() => MockBuilder(AppComponent).keep(ReactiveFormsModule));

  it('should initialize the form without errors', () => {
    sut = MockRender(AppComponent).componentInstance;
    sut.ngOnInit();
  });
});

But when running the test, it doesn't seem to keep that module as I intend:

TypeError: this.fb.control is not a function

If I console.log(this.fb); in my AppComponent, I see a mock:

NonNullableFormBuilder
   __ngMocks: true
   [[Prototype]]: Object

Link: https://github.com/JPtenBerge/ng-mocks-reactive-forms-bug

Expected vs actual behavior

Expected: all form functions (fb.group(), fb.control()) to work as when serving the app.
Actual: it's a mock without any of the functions.

@JPtenBerge JPtenBerge added the bug Something isn't working label Jan 13, 2024
@felixdenis
Copy link

I have encountered the same problem.
@JPtenBerge Try explicitly keeping NonNullableFormBuilder in addition to ReactiveFormsModule.

@felixdenis
Copy link

I believe FormBuilder and its variants are not provided by FormsModule or ReactiveFormsModule. Hence this is not a bug in ng-mocks.

@JPtenBerge
Copy link
Author

JPtenBerge commented Mar 12, 2024

I have encountered the same problem. @JPtenBerge Try explicitly keeping NonNullableFormBuilder in addition to ReactiveFormsModule.

Have tried this in various ways:

beforeEach(() => MockBuilder(AppComponent).keep(ReactiveFormsModule).keep(NonNullableFormBuilder));
beforeEach(() => MockBuilder(AppComponent).keep(NonNullableFormBuilder));

Haven't found anything that works.

I believe FormBuilder and its variants are not provided by FormsModule or ReactiveFormsModule. Hence this is not a bug in ng-mocks.

Hey, whadda know, I thought naaah when I read this, but I've removed the module from my AppComponent's imports array and serving the application actually still works. Well that's a surprise. Doesn't fix my problem, but still, interesting to know.

@Dji75
Copy link
Contributor

Dji75 commented Jun 13, 2024

Have you tried the following ?

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.nonNullable.group<AddPersonForm>({
      name: this.fb.nonNullable.control(''),
      age: this.fb.nonNullable.control(21),
beforeEach(() => MockBuilder(AppComponent).keep(ReactiveFormsModule)); // nothing more

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants