Angular6.Не появляется значение в input при тесте
 

Код теста:

it('should select hero on click', () => {
        const expectedHero = HEROES[1];
        const fixture = TestBed.createComponent(HeroesComponent);
        fixture.detectChanges();
        const compiled = fixture.debugElement.nativeElement;
        compiled.querySelectorAll('li')[1].click();
        fixture.detectChanges();
        expect(expectedHero.name).toEqual(compiled.querySelector('input').value);
      });

При тесте в inpute не появляется выбранное имя

<h2>My Heroes</h2>
<ul class='heroes'>
  <li *ngFor='let hero of heroes'
  [class.selected]='hero === selectedHero'
  (click)='onSelect(hero)'>
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<div *ngIf='selectedHero'>

  <h2>{{ selectedHero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{ selectedHero.id }}</div>
  <div>
    <label>name:
      <input [(ngModel)]='selectedHero.name' placeholder='name'>
    </label>
  </div>

</div>

Весь код из Tour of Hero с сайта Angular.io.

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes = HEROES;

  selectedHero: Hero;

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

  constructor() { }

  ngOnInit() {
  }

}