Question

我正在使用最新的angular_components-0.6.0-alpha+2包进行一些测试，因为我想在Angular应用中对我的<material-dropdown-select>组件进行单元测试。我基本上想要使用pageloader包来点击并在测试期间打开下拉选项以点击选项。

现在我尝试在我的自定义<div id="default-acx-overlay-container">

中装载angular_components（由<div id="my-container">生成）

    <my-app>Loading...</my-app>
    <div id="my-container"></div>
  </body>
</html>

因为<div id="default-acx-overlay-container">默认情况下会成为<body>的直接子女（我无法通过pageloader {{1}来访问它选择器）。因此，我覆盖了@ByCSS Angular提供程序，以便对其进行更改（请注意overlayContainerParent部分）：

providers:

我的问题是，由于某种原因，提供商没有被覆盖。

我创建了一个示例应用，它是HtmlElement getOverlayContainerParent(Document doc) => doc.querySelector('#my-container'); @Component( selector: 'material-select-demo', styleUrls: const ['material_select_demo.css'], templateUrl: 'material_select_demo.html', directives: const [ CORE_DIRECTIVES, DisplayNameRendererDirective, ExampleRendererComponent, MaterialCheckboxComponent, MaterialDropdownSelectComponent, MaterialSelectComponent, MaterialSelectItemComponent, ], providers: const [ const Provider(overlayContainerParent, useFactory: getOverlayContainerParent, deps: const [Document]), ], ) class MaterialSelectDemoComponent {应用的简化版本，用于演示我的问题。如果您运行该应用，然后打开下拉选择，然后检查DOM，您会看到angular_components_example angular_components_example未安装在我的<div id="default-acx-overlay-container">下，因为我打算至。这是我的示例应用：ben4ever-archive/angular_components_example

Answer 1

你非常接近。我们做了一些非常相似的事情，指定了不同的overlayContainerParent，问题是顶级注射是不是overlayContainerParent。依赖树看起来像这样： OverlayService - ＆gt; OverlayDomRenderService - ＆gt; overlayContainerToken - ＆gt; overlayContainerParent

角度注入的工作方式是当要求OverlayService的实例时，它将沿着注入树向上走，直到找到绑定。然后在树中的那个级别，它将获得它在同一级别和更高级别的依赖关系。因此，在这种情况下，您在注入树中指定了不同的overlayContainerParent实现，因此除非您要求直接注入该令牌，否则永远不会使用它。

在我们的测试中，我们的提供商看起来像这样：

const [popupBindings, const Provider(overlayContainerParent, useFactory: getOverlayContainerParent, deps: const [Document])

这将确保在树中的同一级别指定重叠绑定，并且您的值将覆盖popupBindings中的重叠绑定。

请注意，如果直接将其放在组件上，则会出现有关嵌套覆盖绑定的日志记录错误。这是因为工程师直接在组件上指定弹出绑定而无法使用不同的容器进行测试，因为他们无法覆盖测试中的值（注入树中的非测试绑定总是低于我们的任何位置可以提供测试绑定。）

更好的解决方案是使用NgTestBed中的angular_test，并使用addProviders在顶层指定这些提供商。

试图在组件测试中使用`angular_components`的`material-dropdown-select`

1 个答案: