CODEWITHSUNDEEP
angularunit-testingjestjsparent-child
Enrique GF
Enrique GF

Reputation: 1295

Testing an @input() of a component

I'm trying to test this input in my nav-bar component , but for some reason I receive null. The design of my code for the child and parent components would be something like this:

<nav >
  <ol >
    <li  *ngFor="let item of links; let i = index" js-selector="link--all">
    </li>
    
  </ol>
</nav>

@Component({
  selector: 'child',
  templateUrl: '.child.html',
})
export class ChildComponent {
 
  @Input() links:any[];
}

then the parent would be something like this :

<div class="page-header">
      <child
        *ngIf="someCondition"
        [links]="links"
      ></child>
</div>

@Component({
  selector: 'parent',
  templateUrl: 'parent.html',
})
export class ParentComponent implements OnInit {

public someCondition :boolean

constructor(){
someCondition=true
}

ngOnInit(): void {
   
    this.linkConformer();
}

linkConformer():void{
this.links=['s','u','v']
}

Then with child and parent set , the idea is to test the child and the input value it caries when is passed through his parent. For that I just set this :

const linksMock: any[] =[ 1,2,3,];

describe('CHildbComponent', () => {
  let component: ChildComponent;
  let fixture: ComponentFixture<ChildComponent>;
  let class: ChildTemplate;

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [ChildComponent],
        imports: [RouterTestingModule],
      }).compileComponents();
      fixture = TestBed.createComponent(ChildComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
      class = new ChildTemplate();
    })
  );

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

  describe('When links are available', () => {
    it('Should shown links content ', () => {
      component.links = linksMock;

      fixture.detectChanges();

      expect(class.links()).toBe(linksMock);
    });
  });

  class ChildTemplate {
    private _el: HTMLElement;

    constructor() {
      this._el = fixture.nativeElement;
    }

    links(): HTMLElement {
      return this._el.querySelector('[js-selector="link-all"]');
    }
  }
});

But for some reason with this simple test the error I'm receiving is:

Expected: [ 1,2,3,]
Received: null

Could somebody improve this humble approach?

Upvotes: 0

Views: 2392

Answers (1)

danday74
danday74

Reputation: 57215

Adjust your code as follows

beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [ChildComponent],
        imports: [RouterTestingModule],
      }).compileComponents();
      fixture = TestBed.createComponent(ChildComponent);
      component = fixture.componentInstance;
      component.links = linksMock; // put this here
      fixture.detectChanges();
      class = new ChildTemplate();
    })
  );

Note ngOnInit is being called before your "it" block runs, hence the problem. I believe ngOnInit is called the very first time you call fixture.detectChanges() which you are calling in your beforeEach block.

Upvotes: 1

Related Questions