Function to equal Function error on angular unit test FormGroup

Issue

I am new to Angular unit testing and I am currently driving myself crazy with one of the tests.

I have a service with one function that takes in some questions and and are returning a FormGroup:

import { Injectable }   from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

import { QuestionBase } from './question-base';

@Injectable()
export class QuestionControlService {
 constructor() { }

 toFormGroup(questions: QuestionBase<any>[] ) {
   let group: any = {};

   questions.forEach(question => {
     group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
                                             : new FormControl(question.value || '');
   });
   return new FormGroup(group);
 }
}

Rather straight forward. In my test I then mock a FormGroup from some mocked questions, and expects my service function to return the same. It seems fine when I print the output, but the expect function is returning follow error:

Chrome Headless 91.0.4469.0 (Mac OS 10.15.7) QuestionControlService creates toFormGroup successfully FAILED
        Expected $._onCollectionChange = Function to equal Function.
        Expected $.controls.name._onCollectionChange = Function to equal Function.
        Expected $.controls.username._onCollectionChange = Function to equal Function.
        Expected $.controls.email._onCollectionChange = Function to equal Function.
        Error: Expected $._onCollectionChange = Function to equal Function.
        Expected $.controls.name._onCollectionChange = Function to equal Function.
        Expected $.controls.username._onCollectionChange = Function to equal Function.
        Expected $.controls.email._onCollectionChange = Function to equal Function.
            at <Jasmine>
            at UserContext.<anonymous> (src/app/dynamic-form/question-control.service.spec.ts:34:17)
            at ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:372:1)
            at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:287:1)

My test spec looks like this:

import { TestBed } from '@angular/core/testing';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { QuestionControlService } from './question-control.service';

describe('QuestionControlService', () => {
  let service: QuestionControlService;

  beforeEach(() => {
    TestBed.configureTestingModule({ providers: [QuestionControlService] });
    service = TestBed.inject(QuestionControlService);
  });

  it('can load instance', () => {
    expect(service).toBeTruthy();
  });

  it('creates toFormGroup successfully', () => {
    var mockedQuestions = [
      {value: undefined, key: 'name', label: 'Name', required: true, order: 1, group: 1, controlType: 'textbox', type: 'text'},
      {value: undefined, key: 'username', label: 'Username', required: false, order: 1, group: 2, controlType: 'textbox', type: 'text'},
      {value: 'john@doe.com', key: 'email', label: 'Email', required: true, order: 2, group: 1, controlType: 'textbox', type: 'email'}
    ]

    var mockedGroup = {
      'name': new FormControl('', Validators.required),
      'username': new FormControl(''),
      'email': new FormControl('john@doe.com', Validators.required)
    }
    var mockedFormGroup = new FormGroup(mockedGroup);

    const res = service.toFormGroup(mockedQuestions);

    expect(res).toEqual(mockedFormGroup);
  });
});

What am I doing wrong?

Also, I have tested to create another helloWorld function that returns only text, and that is working perfectly fine. So my guess is that the problem is the return type of FormGroup in some way.

Solution

Thanks by @alif50 I changed strategy for testing this. I ended up with this testing:

  it('creates toFormGroup successfully', () => {
    let mockedQuestions = [
      {value: undefined, key: 'name', label: 'Name', required: true, order: 1, group: 1, controlType: 'textbox', type: 'text'},
      {value: undefined, key: 'username', label: 'Username', required: false, order: 1, group: 2, controlType: 'textbox', type: 'text'},
      {value: 'john@doe.com', key: 'email', label: 'Email', required: true, order: 2, group: 1, controlType: 'textbox', type: 'email'}
    ]

    const res: FormGroup = service.toFormGroup(mockedQuestions);

    expect(res.get('name')).toBeTruthy();
    expect(res.get('name').errors.required).toEqual(true);

    expect(res.get('username')).toBeTruthy();
    expect(res.get('username').status).toEqual('VALID');

    expect(res.get('email')).toBeTruthy();
    expect(res.get('email').value).toEqual('john@doe.com');

    expect(res.status).toEqual('INVALID');
  });

Answered By - mr3k