Karma Input parameter unit testing

Question

I'm having problems with unit testing in angular 6. I'm trying to test a simple component with one input() parameter. The problem was that I don't know how to continue. I receive an error when executing ng test :

TypeError: Cannot read property 'id_profile' of undefined

My code is this:

Model

export class Profile {    
  id_profile: string;
  name: string;
}

html

<div class="card" (click)="clicked()">
    <div id="profile">{{profile.id_profile}}</div>
    <i class="material-icons">vpn_key</i>
</div>

component

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';    
import { Profile } from 'app/models';


@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})

export class ProfileComponent {

  @Input() profile: Profile;

  private profileShown: Profile;

  constructor(public router: Router) {
  }

  OnInit() {
    this.profileShown= this.profile;
  }

  clicked() {
    this.profileShown= this.profile;
    this.router.navigate(['pages']);
  }   
}

And finally, my test :

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ProfileComponent} from './profile.component';

describe('ProfileComponent', () => {
  let component: ProfileComponent;
  let fixture: ComponentFixture<ProfileComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [ProfileComponent]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ProfileComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    component.profile= {
      'id_profile': '12345678A',
      'name': 'SUMUM_D',      
    };
    fixture.detectChanges();
    expect(component).toBeTruthy();
  });
});

What I have to do to solve this problem? Am I doing the correct things? Thanks in advance

Amit Chigadani · Accepted Answer · 2018-07-19 12:19:45Z

2

Do not run detectChanges before you set the data to your @Input() property, because it renders the view and throws error for uninitialized properties.

beforeEach(() => {
    fixture = TestBed.createComponent(ProfileComponent);
    component = fixture.componentInstance;
    // fixture.detectChanges();    -- Remove this line
});

answered Jul 19, 2018 at 12:19

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

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

1 Comment

Aw3same Over a year ago

Wow, I've spent hours of my life looking for solutions and testing things. Many many thanks

Developer · Accepted Answer · 2018-07-19 12:23:29Z

0

Please let me know if it still shows error

 it('should create', () => {
    component.profileShown= {
      'id_profile': '12345678A',
      'name': 'SUMUM_D',      
    };
    fixture.detectChanges();
    expect(component).toBeTruthy();
  });

answered Jul 19, 2018 at 12:23

Developer

3796 silver badges22 bronze badges

Collectives™ on Stack Overflow

Karma Input parameter unit testing

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related