routeLink not rendered coorrectly while testing

Question

I have header component definition as following:

import { Component, OnChanges, Input } from '@angular/core';
@Component({
  selector: 'app-section-header',
  template:`
  <div class="pageTitle">
    <h1>{{name}}</h1>
      <a class="editBtn" [routerLink]="routerLink">edit</a>
  </div>
  <div class="progress"></div>
  `,
  styleUrls: ['./section-header.component.css']
})
export class SectionHeaderComponent implements OnChanges  {
  public routerLink: string[];
  @Input() name: string;

  ngOnChanges() {
    this.routerLink = ['/section', this.name, 'edit'];
  }
}

this component gets binding 'name' from its parent component, later it used to form a part of routeLink to 'edit' screen.

It is working well when running application.

For some reason, I cannot test the correct creation of this link:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { SectionHeaderComponent } from './section-header.component';
import { RouterTestingModule } from '@angular/router/testing';
import { Component, Input, Injectable, OnChanges , SimpleChanges, Output,SimpleChange,  EventEmitter} from '@angular/core'
fdescribe('SectionHeaderComponent', () => {
  let component: SectionHeaderComponent;
  let fixture: ComponentFixture<SectionHeaderComponent>;
  let  element, de;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [SectionHeaderComponent]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SectionHeaderComponent);
    component = fixture.componentInstance;
    element = fixture.nativeElement;      // to access DOM element
    de = fixture.debugElement; 
  });

  it('should create link to edit view', () => {
    component.name='sasha';
    fixture.detectChanges();

    component.ngOnChanges();
    fixture.whenStable().then(() => { 
      expect(element.querySelector('h1').innerText).toBe('Sasha');
//for some reason this test failing with error expected '/'is not
// equal to 'section/sasha/edit' 
 expect(de.query(By.css('a')).nativeElement.getAttribute('href')).toBe  ('/section/sasha/edit');
    });
  });
});

Where am I go wrong? Thanks

Answer 1

You need to call fixture.detectChanges() after the call to ngOnChanges(). After making this change, it should work

Plunker

it('should create link to edit view', () => {
  component.name = 'sasha';
  component.ngOnChanges();
  fixture.detectChanges()
  expect(element.querySelector('h1').innerText).toBe('sasha');

  expect(de.query(By.css('a')).nativeElement.getAttribute('href'))
      .toBe('/section/sasha/edit');
});