anchor.diff:    .l-main-section
     :marked
       ## FAQ: Frequently Asked Questions
  +
  +    ## 常见问题
   //
     :marked
       General
  
positive.code: :marked
    ### Why put specs next to the things they test?
  
    We recommend putting unit test spec files in the same folder 
    as the application source code files that they test because
    - Such tests are easy to find
    - You see at a glance if a part of our application lacks tests.
    - Nearby tests can reveal how a part works in context. 
    - When you move the source (inevitable), you remember to move the test.
    - When you rename the source file (inevitable), you remember to rename the test file.
  
  .l-hr
  
  #q-specs-in-test-folder
  :marked
    ### When would I put specs in a test folder?
  
    Application integration specs can test the interactions of multiple parts
    spread across folders and modules.
    They don't really belong to part in particular so they don't have a
    natural home next to any one file.
  
    It's often better to create an appropriate folder for them in the `tests` directory.
  
    Of course specs that test the test helpers belong in the `test` folder,
    next to their corresponding helper files.
  
negative.code:         Dictionary of objects associated with template local variables (e.g. `#foo`),
          keyed by the local variable name.
  
          与模板本地变量（比如`#foo`）关联的词典对象，关键字与本地变量名字配对。
  
  #query-predicate
  :marked
    The `DebugElement.query(predicate)` and `DebugElement.queryAll(predicate)` methods take a
    predicate that filters the source element's subtree for matching `DebugElement`.
  
    `DebugElement.query(predicate)`和`DebugElement.queryAll(predicate)`方法接受一个条件方法，
    它过滤源元素的子树，返回匹配的`DebugElement`。
  
    The predicate is any method that takes a `DebugElement` and returns a _truthy_ value.
    The following example finds all `DebugElements` with a reference to a template local variable named "content":
  
    这个条件方法是任何接受一个`DebugElement`并返回真值的方法。
    下面的例子查询所有拥有名为`content`的模块本地变量的所有`DebugElement`：
  +makeExample('testing/ts/app/bag/bag.spec.ts', 'custom-predicate')(format=".")
  
  :marked
    The Angular `By` class has three static methods for common predicates:
  
    Angular的`By`类为常用条件方法提供了三个静态方法：
  
    * `By.all` - return all elements
    
    * `By.all` - 返回所有元素
    
    * `By.css(selector)` - return elements with matching CSS selectors.
  
    * `By.css(selector)` - 返回符合CSS选择器的元素。
  
    * `By.directive(directive)` - return elements that Angular matched to an instance of the directive class.
  
    * `By.directive(directive)` - 返回Angular能匹配一个指令类实例的所有元素。
  
  +makeExample('testing/ts/app/hero/hero-list.component.spec.ts', 'by', 'app/hero/hero-list.component.spec.ts')(format=".")
  
  #renderer-tests
  :marked
    Many custom application directives inject the `Renderer` and call one of its `set...` methods.
  
    很多制定应用程序指令注入`Renderer`并调用它其中一个方法`set...`。
  
    The test environment substitutes the `DebugDomRender` for the runtime `Renderer`.
    The `DebugDomRender` updates additional dictionary properties of the `DebugElement`
    when something calls a `set...` method.
  
    运行时的`Renderer`在测试环境中的替代品为`DebugDomRender`。
    在调用`set...`方法时，`DebugDomRender`更新`DebugElement`额外词典属性。
   
    These dictionary properties are primarily of interest to authors of Angular DOM inspection tools
    but they may provide useful insights to testers as well.
  
    这些词典属性主要是为Angular DOM检测工具准备的，但是它们可能对测试者提供有用的信息。
  
  table
    tr
      th 
        :marked
          Dictionary
  
          词典
      th 
        :marked
          Description
  
          描述
    tr
      td(style="vertical-align: top") <code>properties</code>
      td
        :marked
          Updated by `Renderer.setElementProperty`.
          Many Angular directives call it, including `NgModel`.
  
          被`Renderer.setElementProperty`更新。
          很多Angular指令调用它，包括`NgModel`。
    tr
      td(style="vertical-align: top") <code>attributes</code>
      td
        :marked
          Updated by `Renderer.setElementAttribute`.
          Angular `[attribute]` bindings call it.
  
          被`Renderer.setElementAttribute`更新。
          Angular的`[attribute]`绑定调用它。
    tr
      td(style="vertical-align: top") <code>classes</code>
      td
        :marked
          Updated by `Renderer.setElementClass`.
          Angular `[class]` bindings call it.
  
          被`Renderer.setElementClass`更新。
          Angular的`[class]`绑定调用它。
    tr
      td(style="vertical-align: top") <code>styles</code>
      td
        :marked
          Updated by `Renderer.setElementStyle`.
          Angular `[style]` bindings call it.
  
          被`Renderer.setElementStyle`更新。
          Angular的 `[style]`绑定调用它。
  :marked
    Here's an example of `Renderer` tests from the <live-example plnkr="bag-specs">live "Specs Bag" sample</live-example>.
  
    下面是<live-example plnkr="bag-specs">在线"Specs Bag"例子</live-example>中`Renderer`测试的例子
  
  +makeExample('testing/ts/app/bag/bag.spec.ts', 'debug-dom-renderer')(format=".")
  
  a(href="#top").to-top Back to top
  
  a(href="#top").to-top 返回顶部
  
  .l.hr
  
  