Angular unit testing getting failed

Question

I am trying to unit test the function editDependentInfo(), but I am getting error, because in that function, another function populateEditDepInfo() is being called and populateEditDepInfo have this.dependentsInfo property and test from EditDependentInfo is trying to access but not able to Please find the below code and let me know what should I do

let dependentsInfo: Dependents;
        class ProfileDependentsStub {
            dependentInfoChange: Subject<any[]> = new Subject<any[]>();
            dependentInfoDelete: Subject<any[]> = new Subject<any[]>();

            data = {
                body: [{states: [{name: "Alabama", code: "AL"}]}, {countries: [{name: "UNITED STATES", code: "USA"}]}, ['relationshipType'], {hideDBCardStatus:"no"}, {hsaenrollmentStatus: "Enrolled"},{beneficiaryType:["Contingent", "Primary"]},
                {relationshipType:["Adopted Child"]}, {status:["Active"]}, 
                {prefixlist: ["DEACON"]},{prefixlist: ["DEACON"]}, {addressDetails:[{addressLineOne: "6226 3RD DRIVE"}]}, {beneficiaryList:[{id:123, firstName:"David"}]},
                {dependentsList:[{id:1234, employeeId:909}]} ]}

            getChildObject = function (href) {
                return { href: '' };
            };

            getChildLinks = function () {
                return Observable.of(ResponseData);
            };

            getLabelList = function (label) {
                return label;
            };

            addChildObjects = function (links) {
                return links;
            };

            addLabelList = function (labels) {
                return labels;
            };

            getStateCountryList = function () {
                return Observable.of(this.data);
            };

            getRelationAndStatusList = function () {
                return Observable.of(this.data);
            };

            getPrefixSuffixList = function () {
                return Observable.of(this.data);
            };

            populateEditDepInfo = function(data){
                return data;
            }

            getDependentsInfoDetails = function () {
                this.data.body['dependentsList'] = new Array('John Smith');
                return Observable.of(this.data);
            };
        }

test which is getting failed

  it('should edit Dependent Info', () => {

        component.editDependentInfo(null,this.userDependentInfo)

        expect(component.isUpdateDependentInfo).toBeTruthy();
    });

Component which I am testing

    export class {
       dependentsInfo: Dependents;
    editDependentInfo(event = null, userDependentInfo: Dependents) {
            this.dependentsInfo = <Dependents>{};
            this.clearSelectValues();
            this.isUpdateDependentInfo = true;
            this.dependentsInfo = userDependentInfo;
            this.populateEditDepInfo();
        }

        populateEditDepInfo(): void {
            this.saveDepInfo = false;
            if (this.dependentsInfo.id) {
                this.dependentId = this.dependentsInfo.id;
            }}
}

Sample Dependents class

class Dependents {
  name: string;
  id: string;
  dependentType: string;
  status: string;
  ineligibleReason: String;
  depndtDebitCardStatus: string;
  showCardStatusfInfo: boolean;
  addressLineOne: string;
  addressLineTwo: string;
  addressLineThree: string;
  city: string;}

Error which I am getting

TypeError: Cannot read property 'id' of undefined
    at ProfileDependentsViewComponent.populateEditDepInfo (webpack:///./src/app/profile/_profile-dependents-view/profile-dependents-view.component.ts?:207:33)
    at ProfileDependentsViewComponent.editDependentInfo (webpack:///./src/app/profile/_profile-dependents-view/profile-dependents-view.component.ts?:202:14)
    at Object.eval (webpack:///./src/app/profile/_profile-dependents-view/profile-dependents-view.component.spec.ts?:135:19)

You need to create a new instance of Dependents and pass that as a second argument to the component.editDependentInfo method call in your test, right now you are passing this.userDependentInfo which in that context is undefined — user7332973
– user7332973, Commented Jun 8, 2018 at 20:35
I tried putting like this but gives me an error......... let Dependents = { name: string; id: string; dependentType: string; status: string; ineligibleReason: String; depndtDebitCardStatus: string; showCardStatusfInfo: boolean; addressLineOne: string; addressLineTwo: string;} — Developer
– Developer, Commented Jun 8, 2018 at 20:56
You need to create an instance of that object, there you are just defining the types of every object attribute. — user7332973
– user7332973, Commented Jun 8, 2018 at 21:26
<div class="claims-side-panel" [ngClass]="{'verticalOffset': <= 117? position:fixed}> — Developer
– Developer, Commented Jul 23, 2018 at 17:35

Developer · Accepted Answer · 2018-07-16 14:33:08Z

1

Below solution worked for me

it('should edit Dependent Info', () => {
let userDependentInfo= {  name: "john", ......}  as any

        component.editDependentInfo(null,this.userDependentInfo)

        expect(component.isUpdateDependentInfo).toBeTruthy();
    });

answered Jul 16, 2018 at 14:33

Developer

3796 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular unit testing getting failed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related