'Angular Cannot read properties of undefined (reading 'patchValue')
I have this component that I want to test but I keep getting the following error message
TypeError: Cannot read properties of undefined (reading 'patchValue')
The component:
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { IDivision } from "ClientApp/src/app/models/referencedata/division";
import { IRegion } from "ClientApp/src/app/models/referencedata/region";
import { ISalesForceTitle } from "ClientApp/src/app/models/referencedata/salesforcetitle";
@Component({
selector:'sym-sales-patch',
templateUrl: './sales-patch.component.html'
})
export class SalesPatchComponent implements OnInit {
@Input() submitted: boolean;
@Input() canRemoveItems: boolean;
@Input() formGroup: FormGroup;
@Output() onDelete: EventEmitter<string> = new EventEmitter();
constructor() {
}
ngOnInit(): void {
debugger;
}
delete() {
this.onDelete.emit();
}
}
Below shows the html template with the minimal set of data that it still complains about
<p-fieldset [toggleable]="true" styleClass="p-mt-2">
<p-header>
{{formGroup.controls.patch.value}}
<i *ngIf="canRemoveItems === true"
title="Click here to remove the sales patch"
class="p-m-1 fas fa-unlink sym-action"
(click)="delete()"></i>
</p-header>
</p-fieldset>
The error seems to stem from the calling the following but I have no idea what I am doing wrong with the test
{{formGroup.controls.patch.value}}
here is the test:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropdownModule } from 'primeng/dropdown';
import { FieldsetModule } from 'primeng/fieldset';
import { InputNumberModule } from 'primeng/inputnumber';
import { InputTextModule } from 'primeng/inputtext';
import { SalesPatchComponent } from './sales-patch.component';
describe('SalesPatchComponent - Isolated Tests', () => {
let fixture: ComponentFixture<SalesPatchComponent>;
let component: SalesPatchComponent;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
ReactiveFormsModule,
InputNumberModule,
DropdownModule,
InputTextModule,
FieldsetModule,
BrowserAnimationsModule
],
declarations: [SalesPatchComponent]
}).compileComponents();
fixture = TestBed.createComponent(SalesPatchComponent);
component = fixture.componentInstance;
});
it('should create', () => {
component.formGroup.patchValue({
patch: 'Test Patch',
shortCode: 'AP123',
salesForceTitle: 1,
region: 1,
division: 1
});
fixture.detectChanges();
expect(fixture).toBeTruthy();
})
})
As you can see above I am also trying to set the fromGroup values, with a syntax that worked for me on another project!
Any ideas how I can make this test pass?
As @SomeStudent, said I initialized the form group that I passed in, then it mostly works.
it('should create', () => {
component.formGroup = formBuilder.group({
patch: 'Test Patch',
shortCode: 7627,
salesForceTitle: 1,
region: 1,
division: 1
});
fixture.detectChanges();
expect(fixture).toBeTruthy();
})
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|