anchor.diff:  #component-with-inputs-outputs
   :marked
     # Test a component with inputs and outputs
  +
  +  # 测试带有导入inputs和导出outputs的组件
  +
     A component with inputs and outputs typically appears inside the view template of a host component.
     The host uses a property binding to set the input property and uses an event binding to
     listen to events raised by the output property.
   
  +  带有导入和导出的组件通常出现在一个宿主组件的视图模板中。
  +  宿主使用一个属性绑定来设置输入属性，使用事件绑定来监听输出属性触发的事件。
  +
     The testing goal is to verify that such bindings work as expected. 
     The tests should set input values and listen for output events.
  +
  +  测试的目的是验证这样的绑定和期待的那样正常工作。
  +  测试应该设置导入值并监听导出事件。
   
     The `DashboardHeroComponent` is tiny example of a component in this role.
     It displays an individual heroe provided by the `DashboardComponent`. 
     Clicking that hero tells the the `DashboardComponent` that the user has selected the hero.
   
  +  `DashbaordComponent`是一个非常小的这种类型的例子组件。
  +  它显示一个由`DashboardCompoent`提供的英雄个体。
  +  点击英雄告诉`DashbaordComponent`用户已经选择了这个英雄。
  +
     The `DashboardHeroComponent` is embedded in the `DashboardComponent` template like this:
  +
  +  `DashboardHeroComponent`是这样内嵌在`DashboardCompoent`的模板中的：
  +
   +makeExample('testing/ts/app/dashboard/dashboard.component.html', 'dashboard-hero', 'app/dashboard/dashboard.component.html (excerpt)')(format='.')
   :marked
     The `DashboardHeroComponent` appears in an `*ngFor` repeater which sets each component's `hero` input property
     to the iteration value and listens for the components `selected` event.
  +
  +  `DashboardHeroComponent`在`*ngFor`循环中出现，设置每个组件的`hero`input属性到迭代的值，并监听组件的`selected`事件。
     
     Here's the component's definition again:
  +
  +  下面是组件的定义：
  +
   +makeExample('testing/ts/app/dashboard/dashboard-hero.component.ts', 'component', 'app/dashboard/dashboard-hero.component.ts (component)')(format='.')
   :marked
     While testing a component this simple has little intrinsic value, it's worth knowing how.
     Three approaches come to mind:
  +
  +  虽然测试这么简单的组件没有什么内在价值，但是它的测试是值得学习的。
  +  有三种候选测试方案：
  +
     1. Test it as used by `DashboardComponent`
  +
  +  1. 把它当作被`DashbaordComponent`使用的组件来测试
  +
     1. Test it as a stand-alone component
  +
  +  1. 把它当作独立的组件来测试
  +
     1. Test it as used by a substitute for `DashboardComponent`
   
  +  1. 把它当作被`DashbaordComponent`的替代组件使用的组件来测试
  +
     A quick look at the `DashboardComponent` constructor discourages the first approach:
  +
  +  简单看看`DashbaordComponent`的构造函数就否决了第一个方案：
  +
   +makeExample('testing/ts/app/dashboard/dashboard.component.ts', 'ctor', 'app/dashboard/dashboard.component.ts (constructor)')(format='.')
   :marked
     The `DashboardComponent` depends upon the Angular router and the `HeroService`.
     You'd probably have to replace them both with test doubles and that looks like a lot of work. 
     The router seems particularly challenging.
  +
  +  `DashbaordComponent`依赖Angular路由器和`HeroService`服务。
  +  你必须使用测试复制品替换它们两个，似乎过于复杂了。
  +  路由器尤其具有挑战性。
  +
   .l-sub-section
     :marked
  -    The [discussion below](#routed-component) covers testing components that requre the router.
  +    The [discussion below](#routed-component) covers testing components that require the router.
  +
  +    [下面](#routed-component) 覆盖了如何测试带有路由器的组件。
   :marked
     The immediate goal is to test the `DashboardHeroComponent`, not the `DashboardComponent`, and there's no need
     to work hard unnecessarily. Let's try the second and third options.
   
  +  当前的任务是测试`DashboardHeroComponent`组件，而非`DashbaordComponent`，所以无需做不必要的努力。
  +  让我们尝试第二和第三种方案。
  +
     ## Test _DashboardHeroComponent_ stand-alone
  +  
  +  ## 独立测试_DashboardHeroComponent_
   
     Here's the spec file setup.
  +
  +  下面是spec文件的设置。
   +makeExample('testing/ts/app/dashboard/dashboard-hero.component.spec.ts', 'setup', 'app/dashboard/dashboard-hero.component.spec.ts (setup)')(format='.')
   
   :marked
  
positive.code:     &mdash; something not possible with [isolated unit tests](#isolated-component-tests) &mdash;
      at low cost and without resorting to much slower and more complicated end-to-end tests.
  
  :marked
    The second test verifies click behavior. Clicking the hero should raise a `selected` event that the
    host component (`DashboardComponent` presumably) can hear:
  +makeExample('testing/ts/app/dashboard/dashboard-hero.component.spec.ts', 'click-test', 'app/dashboard/dashboard-hero.component.spec.ts (click test)')(format='.')
  :marked
    The component exposes an `EventEmitter` property. The test subscribes to it just as the host component would do.
  
    The `heroEl` is a `DebugElement` that represents the hero `<div>`. 
    The test calls `triggerEventHandler` with the "click" event name.
    The "click" event binding responds by calling `DashboardHeroComponent.click()`. 
    
    If the component behaves as expected, `click()` tells the component's `selected` property to emit the `hero` object,
    the test detects that value through its subscription to `selected`, and the test should pass.
    
  #trigger-event-handler
  :marked
    ### _triggerEventHandler_
  
    The Angular `DebugElement.triggerEventHandler` can raise _any data-bound event_ by its _event name_.
    The second parameter is the event object passed to the handler.
  
    In this example, the test triggers a "click" event with a null event object.
  
  +makeExample('testing/ts/app/dashboard/dashboard-hero.component.spec.ts', 'trigger-event-handler')(format='.')
  :marked
    The test assumes (correctly in this case) that the runtime event handler &mdash; the component's `click()` method &mdash;
    doesn't care about the event object.
    
    Other handlers will be less forgiving. 
    For example, the `RouterLink` directive expects an object with a `button` property indicating the mouse button that was pressed. 
    The directive throws an error if the event object doesn't do this correctly.
  
  #click-helper
  :marked
    Clicking a button, an anchor, or an arbitrary HTML element is a common test task.
    Make that easy by encapsulating the _click-triggering_ process in a helper such as the `click` function below:
  +makeExample('testing/ts/testing/index.ts', 'click-event', 'testing/index.ts (click helper)')(format='.')
  :marked
    The first parameter is the _element-to-click_. You can pass a custom event object as the second parameter if you wish. The default is a (partial) 
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button" target="_blank">left-button mouse event object</a> 
    accepted by many handlers including the `RouterLink` directive.
  
  .callout.is-critical
    header click() is not an Angular testing utility
    :marked
      The `click()` helper function is **not** one of the Angular testing utilities. 
      It's a function defined in _this chapter's sample code_ and used by all of the sample tests. 
      If you like it, add it to your own collection of helpers.
  :marked
    Here's the previous test, rewritten using this click helper.
  +makeExample('testing/ts/app/dashboard/dashboard-hero.component.spec.ts', 'click-test-2', 'app/dashboard/dashboard-hero.component.spec.ts (click test revised)')(format='.')
  
  
  
negative.code: 
    1. [Test a component with inputs and outputs](#component-with-inputs-output)
  
    1. [测试拥有导入inputs和导出outputs的组件](#component-with-inputs-output)  
  
      - [_triggerEventHandler_](#trigger-event-handler)
  
  