TypeError: Cannot read property 'employeeName' of undefined

Question

TypeError: Cannot read property 'employeeName' of undefined. I have a subscribe on constructor that get a value from service. THe value is not undefined but on jasmine unit text, it says undefined. I'm new on jasmine unit test and would like a support

In the file.ts, the value of employee is defined...

export class WorkspacesComponent implements OnInit {
private employee: Employee
public user: User

    constructor(private workspacesService: WorkspacesService, private userService: UserService, private modalService: NgbModal) {
        this.userService.user$.subscribe(user => { this.user = user });
        this.userService.employee$.subscribe(employee => { this.employee = employee; });
    }

    ngOnInit(): void {
        this.newForm();
        this.getWorkspaces();
        this.user.name = this.employee.employeeName
    }
}

on test it says undefined .spec.ts

const employee: Employee = {

    UNIORG: "1460011",
    companyId: "0001000493",
    companyName: "EVERIS BRASIL CONSULTORIA DE NEGÓCIOS E TECNOLOGIA DA INFORMAÇÃO LTDA",
    departmentId: "08468",
    departmentName: "Tecnologia da Informação",
    employeeName: "LEONARDO COSTA E SILVA DE SOUZA DOS REMÉDIOS",
    endDateSituation: "",
    mail: "",
    managerId: "000699871",
    occupationId: "PPPPPP",
    occupationName: "PRESTADOR DE SERVIO",
    salaryGroupLevel: "0",
    situation: "01",
    startDateSituation: ""
}

const user: User = {
    id: '',
    name: '',
    enrollment: '',
    site: ''
}

const MockUserService = {
    user$: { subscribe: () => { user } },
    employee$: { subscribe: () => { employee } }
};

describe('WorkspacesComponent', () => {

    let component: WorkspacesComponent;
    let fixture: ComponentFixture<WorkspacesComponent>;
    let WorkspacesServiceSpy: WorkspacesService;
    let UserServiceSpy: UserService;
    let modalSpy: NgbModal;


    configureTestSuite(() => {
        TestBed.configureTestingModule({
            schemas: [NO_ERRORS_SCHEMA],
            declarations: [WorkspacesComponent],
            imports: [BrowserModule, FormsModule, MaterialModule, ReactiveFormsModule, BrowserAnimationsModule,],
            providers: [
                { provide: WorkspacesService, useValue: MockWorkspaces },
                { provide: UserService, useValue: MockUserService },
                { provide: NgbModal, useValue: MockNgbModal },
            ]
        })
            .compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(WorkspacesComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        WorkspacesServiceSpy = fixture.debugElement.injector.get(WorkspacesService);
        UserServiceSpy = fixture.debugElement.injector.get(UserService);
        modalSpy = fixture.debugElement.injector.get(NgbModal);
    })

    beforeEach(async(() => {
        fixture.detectChanges();
    }));


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

I've done a change, after a suggestion. But now the problem is:

'WorkspacesComponent should create component TypeError: Cannot read property 'name' of undefined'

export class WorkspacesComponent implements OnInit {
private employee: Employee
public user: User

    constructor(private workspacesService: WorkspacesService, private userService: UserService, private modalService: NgbModal) {
        this.userService.user$.subscribe(user => { this.user = user });
        this.userService.employee$.subscribe(employee => { this.employee = employee; });
    }

    ngOnInit(): void {
        this.newForm();
        this.getWorkspaces();
        this.userService.user$.subscribe(user => { this.user = user });
        this.userService.employee$.subscribe(employee => { this.employee = employee; this.user.name = this.employee.employeeName; });
    }
}

Jojofoulk Jojofoulk · Accepted Answer · 2019-05-29T00:38:23

Put your subscribe in ngOnInit, it's better practice than using the constructor. And then move this:

this.user.name = this.employee.employeeName;

inside your subscribe() response

Hope this helps

TypeError: Cannot read property 'employeeName' of undefined

1 Answers