Jasmine - Cannot read property 'controls' of undefined - Angular 6

Question

I'm a beginner in Angular and I'm writing an test in Jasmine for my Angular6 EmployeeComponent. I got an error

Cannot read property 'controls' of undefined

I think I didn't set up all of the dependencies correctly in the employee.component.spec.ts file. I have researched for a few days but without results. Any help would be much appreciated.

This is the basic flow in my code. The employee component contains a registration form. When the user click Submit, the employee service will insert/update the data to the firebase.

Below is employee.component.html

 <div class="row">
  <div class="col-md-5">
    <form [formGroup]="this.employeeService.form" (ngSubmit)="onSubmit()">
      <input type="hidden" formControlName="$key">
      <div class="form-group" *ngIf="page1">
        <label>Full Name</label>
        <input formControlName="fullName" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.fullName.errors}">
        <div class="invalid-feedback" *ngIf="submitted && formControls.fullName.errors">
          This field is required.
        </div>
      </div>

      <div class="form-group" *ngIf="page1">
        <label>Email</label>
        <input formControlName="email" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.email.errors}">
        <div class="invalid-feedback" *ngIf="submitted && formControls.email.errors">
            Invalid Email Address.
          </div>
      </div>

      <div class="form-group" *ngIf="page1">
        <label>Mobile</label>
        <input formControlName="mobile" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.mobile.errors}">
        <div class="invalid-feedback" *ngIf="submitted && formControls.mobile.errors">
          <label *ngIf="formControls.mobile.errors.required">This field is required.</label>
          <label *ngIf="formControls.mobile.errors.minLength">At least 8 characters</label>
        </div>
      </div>

      <div style="text-align: right" *ngIf="page1">
        <button class="btn btn-primary" (click)="part1Next()">Next</button>
      </div>

      <div class="form-group" *ngIf="page2">
          <label>School</label>
          <input formControlName="school" class="form-control">
      </div>

      <!-- <div class="form-group" *ngIf="page2">
        <label>Degree</label>
        <input formControlName="degree" class="form-control">
      </div> -->

      <div class="form-group" *ngIf="page2">
        <label>Degree</label>
        <select class="form-control" formControlName="degree">
          <option value="bachelor">Bachelor</option>
          <option value="master">Master</option>
        </select>
      </div>

      <div class="form-group" *ngIf="page2">
          <label>Location</label>
          <input formControlName="location" class="form-control">
      </div>

      <div class="row">
          <div class="col-md-6" style="text-align: center" *ngIf="page2">
              <button class="btn btn-primary" (click)="part2Back()">Back</button>
          </div>

          <div class="col-md-6" style="text-align: center" *ngIf="page2">
              <button class="btn btn-primary" (click)="part2Next()">Next</button>
          </div>
      </div>

      <div *ngIf="page3">
          <div>
            <h2>Please Check all of the information below</h2>
            <p>Full Name: {{formControls.fullName.value}}</p>
            <p>Email: {{formControls.email.value}}</p>
            <p>Mobile: {{formControls.mobile.value}}</p>
            <p>School: {{formControls.school.value}}</p>
            <p>Degree: {{formControls.degree.value}}</p>
            <p>Location: {{formControls.location.value}}</p>
          </div>
          <div class="row">
              <div class="col-md-6" style="text-align: center">
                  <button class="btn btn-primary" (click)="part3Back()">Back</button>
              </div>

              <div class="col-md-6" style="text-align: center" class="form-group">
                  <input type="submit" class = "btn btn-primary" value="Submit">
              </div>
          </div>
      </div>

    </form>
    <div class="alert alert-info" *ngIf="showSuccessMessage">
      Submitted Successfully
    </div>

  </div>

  <div class="col-md-7">
    <!-- <app-employee-list></app-employee-list> -->
  </div>

</div>

Below is employee.component.ts

import { Component, OnInit } from '@angular/core';

import { EmployeeService } from '../shared/employee.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent implements OnInit {

  constructor(private employeeService: EmployeeService) { }

  page1: boolean = true;
  page2: boolean = false;
  page3: boolean = false;

  part1Next() {
    this.page1 = false;
    this.page2 = true;
  }

  part2Back() {
    this.page1 = true;
    this.page2 = false;
  }

  part2Next() {
    this.page2 = false;
    this.page3 = true;
  }

  part3Back() {
    this.page2 = true;
    this.page3 = false;
  }

  submitted: boolean;
  showSuccessMessage: boolean;
  formControls = this.employeeService.form.controls;

  ngOnInit() {
  }

  onSubmit() {
    this.submitted = true;
    if (this.employeeService.form.valid) {
      if (this.employeeService.form.get('$key').value == null) {
        // insert
        this.employeeService.insertEmployee(this.employeeService.form.value);
      } else {
        // update
        this.employeeService.updateEmployee(this.employeeService.form.value);
      }
      this.showSuccessMessage = true;
      setTimeout(() => this.showSuccessMessage = false, 2000);
      this.submitted = false;
      this.employeeService.form.reset();
    }
    this.page1 = true;
    this.page2 = false;
    this.page3 = false;
  }
}

Below is employee.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { EmployeeComponent } from './employee.component';
import { FormsModule } from '@angular/forms';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { EmployeeService } from '../shared/employee.service';

class MockEmpService { 
  employeeList: AngularFireList<any>;

  form = new FormGroup({
    $key: new FormControl(null),
    fullName: new FormControl('', Validators.required),
    email: new FormControl('', Validators.email),
    mobile: new FormControl('', [Validators.required, Validators.minLength(8)]),
    school: new FormControl(''),
    degree: new FormControl(''),
    location: new FormControl('')
  });

  insertEmployee() {
    return true;
  }

  updateEmployee() {
    return true;
  }
}

fdescribe('EmployeeComponent', () => {
  let component: EmployeeComponent;
  let fixture: ComponentFixture<EmployeeComponent>;
  let empService: MockEmpService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EmployeeComponent ],
      imports: [ ReactiveFormsModule, FormsModule ],
      providers: [ 
        {provide: EmployeeService, useValue: MockEmpService},  
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EmployeeComponent);
    component = fixture.componentInstance;
    empService = TestBed.get(MockEmpService);
    fixture.detectChanges();
  });

  // first test
  // when onSubmit() from component is called, insert() or update() from service is called
  it('calling insert or update from service when onSubmit is called', () => {
    spyOn(component, 'onSubmit');
    expect(empService.insertEmployee).toHaveBeenCalled();
  });

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

Below is employee.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  employeeList: AngularFireList<any>;

  constructor(private firebase: AngularFireDatabase) { }
  form = new FormGroup({
    $key: new FormControl(null),
    fullName: new FormControl('', Validators.required),
    email: new FormControl('', Validators.email),
    mobile: new FormControl('', [Validators.required, Validators.minLength(8)]),
    school: new FormControl(''),
    degree: new FormControl(''),
    location: new FormControl('')
  });

  getCustomers() {
    this.employeeList = this.firebase.list('employees');
    console.log(this.employeeList);
    return this.employeeList.snapshotChanges();
  }

  insertEmployee(employee) {
    this.employeeList.push({
      fullName: employee.fullName,
      email: employee.email,
      mobile: employee.mobile,
      school: employee.school,
      degree: employee.degree,
      location: employee.location
    });
  }

  updateEmployee(employee) {
    this.employeeList.update(employee.$key,
      {
        fullName: employee.fullName,
        email: employee.email,
        mobile: employee.mobile,
        school: employee.school,
        degree: employee.degree,
        location: employee.location
      });
  }

  populateForm(employee) {
    this.form.setValue(employee);
  }

  deleteEmployee($key: string) {
    this.employeeList.remove($key);
  }
}

Answer 1

Anh, welcome to StackOverflow. :) First of all, this was a very thorough question write-up for your first time. Well done!

Because it was so thorough, I was able to put together a stackblitz to test out what you are running into. You can find it here: Jasmine - Cannot read property 'controls' of undefined - Angular 6

As you can see in the stackblitz, your test is now passing. Here is what I did to make this work:

• change the provider line for EmployeeService to useClass instead of useValue - you are substituting one class for another.
• change the type of empService to EmployeeService both in the 'let' declaration as well as in the 'TestBed.get(EmployeeService)' call. The reason for this is you are mocking EmployeeService with a different class, but as far as the component is concerned it still uses the original name.
• commented out the line: spyOn(component, 'onSubmit'); since that would have stubbed the very function you are trying to test.
• created insertSpy to spyOn the empService.insertEmployee() function
• added the line let formValidSpy = spyOnProperty(empService.form, 'valid', 'get').and.returnValue(true); because you need to mock the form being set valid or not to control which parts of onSubmit() get executed.
• and finally actually call the function to test it with component.onSubmit();

See the stackblitz for all the details. I hope this helps.