1.  
  2. it('should convert hero name to Title Case', () => {
  3. // get the name's input and display elements from the DOM
  4. const hostElement = fixture.nativeElement;
  5. const nameInput: HTMLInputElement = hostElement.querySelector('input');
  6. const nameDisplay: HTMLElement = hostElement.querySelector('span');
  7. // simulate user entering a new name into the input box
  8. nameInput.value = 'quick BROWN fOx';
  9. // dispatch a DOM event so that Angular learns of input value change.
  10. nameInput.dispatchEvent(newEvent('input'));
  11. // Tell Angular to update the display binding through the title pipe
  12. fixture.detectChanges();
  13. expect(nameDisplay.textContent).toBe('Quick Brown Fox');
  14. });
  15.