anchor.diff:    The _only_ declarations are the _component-under-test_ (`AppComponent`) and the `RouterLinkStubDirective` 
     that contributes actively to the tests.
     The [tests in this example](#app-component-tests) are unchanged.
  +
  +  这里**唯一**声明的是**被测试的组件**(`AppComponent`)和测试需要的`RouterLinkStubDirective`。
  +  没有改变任何[原测试](#app-component-tests)。
   
   .alert.is-important
     :marked
  
positive.code:     It works hard to appear useful when in fact it 
      tests the `RouterLinkStubDirective` rather than the _component_.
      This is a common failing of directive stubs.
      
      It has a legitimate purpose in this chapter. 
      It demonstrates how to find a `RouterLink` element, click it, and inspect a result,
  
negative.code:     However, the compiler no longer alerts you to mistakes 
      such as misspelled or misused components and directives.
  
      使用`NO_ERRORS_SCHEMA`的**浅组件测试**很大程度上简化了拥有复杂模板组件的单元测试。
      但是，编译器将不再提醒你一些错误，比如模板中拼写错误或者误用的组件和指令。
  
  a(href="#top").to-top Back to top
  a(href="#top").to-top 回到顶部
  
  .l-hr
  
  #attribute-directive
  :marked
    # Test an attribute directive
  
    # 测试属性指令
  
    An _attribute directive_ modifies the behavior of an element, component or another directive.
    Its name reflects the way the directive is applied: as an attribute on a host element.
  
    **属性指令**修改元素、组件和其它指令的行为。它的名字反映了指令是如何被使用的：作为宿主元素的属性。
  
    The sample application's `HighlightDirective` sets the background color of an element
    based on either a data bound color or a default color (lightgray).
    It also sets a custom property of the element (`customProperty`) to `true` 
    for no reason other than to show that it can.
  
    本例子应用的`HighlightDirective`使用数据绑定的颜色或者默认颜色来设置元素的背景色。
    它同时设置元素的自定义属性(`customProperty`)为`true`，仅仅是显示它可以这么做，并无其它原因。
  +makeExample('testing/ts/app/shared/highlight.directive.ts', '', 'app/shared/highlight.directive.ts')(format='.')
  :marked
    It's used throughout the application, perhaps most simply in the `AboutComponent`:
    它的使用贯穿整个应用，也许最简单的使用在`AboutComponent`里：
  +makeExample('testing/ts/app/about.component.ts', '', 'app/about.component.ts')(format='.')
  :marked
    Testing the specific use of the `HighlightDirective` within the `AboutComponent` requires only the
    techniques explored above (in particular the ["Shallow test"](#shallow-component-test) approach).
  
    使用`AboutComponent`来测试这个`HightlightDirective`的使用，只需要上面解释过的知识就够了，（尤其是["浅测试"](#shallow-component-test)方法)。
  +makeExample('testing/ts/app/about.component.spec.ts', 'tests', 'app/about.component.spec.ts')(format='.')
  :marked
    However, testing a single use case is unlikely to explore the full range of a directive's capabilities.
    Finding and testing all components that use the directive is tedious, brittle, and almost as unlikely to afford full coverage.
  
    但是，测试单一的用例一般无法探索该指令的全部能力。
    查找和测试所有使用该指令的组件非常繁琐和脆弱，并且通常无法覆盖所有组件。
  
    [Isolated unit tests](#isolated-unit-tests) might be helpful. 
    But attribute directives like this one tend to manipulate the DOM. 
    Isolated unit tests don't and therefore don't inspire confidence in the directive's efficacy.
  
    [孤立单元测试](#isolated-unit-tests)可能有用。
    但是像这样的属性指令一般都操纵DOM。孤立单元测试不能，所以不推荐用它测试指令的功能。
  
    A better solution is to create an artificial test component that demonstrates all ways to apply the directive.
  
    更好的方法是创建一个展示所有使用该组件的方法的人工测试组件。
  
  +makeExample('testing/ts/app/shared/highlight.directive.spec.ts', 'test-component', 'app/shared/highlight.directive.spec.ts (TestComponent)')(format='.')
  figure.image-display
    img(src='/resources/images/devguide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action")
  