From 74ebdf6fdc277e7167423c24c52489c23b036f16 Mon Sep 17 00:00:00 2001
From: Sam Severance <swseverance@gmail.com>
Date: Wed, 26 May 2021 10:52:21 -0400
Subject: [PATCH] docs: refactor `HeroDetailComponent` and unit test (#42349)

remove `@Input()` decorator from `hero` property because the component
is designed to get the hero via a service, not an input binding.

add `HTMLElement` type to `HeroDetailComponent` unit test

PR Close #42349
---
 .../testing/src/app/hero/hero-detail.component.spec.ts      | 6 +++---
 .../examples/testing/src/app/hero/hero-detail.component.ts  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
index ca8260f1d6..086936986d 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
@@ -193,9 +193,9 @@ function heroModuleSetup() {
     // #docregion title-case-pipe
     it('should convert hero name to Title Case', () => {
       // get the name's input and display elements from the DOM
-      const hostElement = fixture.nativeElement;
-      const nameInput: HTMLInputElement = hostElement.querySelector('input');
-      const nameDisplay: HTMLElement = hostElement.querySelector('span');
+      const hostElement: HTMLElement = fixture.nativeElement;
+      const nameInput: HTMLInputElement = hostElement.querySelector('input')!;
+      const nameDisplay: HTMLElement = hostElement.querySelector('span')!;
 
       // simulate user entering a new name into the input box
       nameInput.value = 'quick BROWN  fOx';
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
index deee62725e..75443e0355 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
@@ -1,6 +1,6 @@
 /* tslint:disable:member-ordering */
 // #docplaster
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Hero } from '../model/hero';
@@ -23,7 +23,7 @@ export class HeroDetailComponent implements OnInit {
   // #enddocregion ctor
 // #enddocregion prototype
 
-  @Input() hero!: Hero;
+  hero!: Hero;
 
   // #docregion ng-on-init
   ngOnInit(): void {