什么是 ng2-test-selectors
ng2-test-selectors 是一个 npm 包，它提供了一种简单的方式来定位 Angular2+ 应用程序中的测试选取器，以便单元测试中的元素定位。
ng2-test-selectors 可以在 Angular2+ 应用程序中的测试中使用 CSS 选择器，以便利用 Angular2+ 的结构。
安装
在你的 Angular2+ 项目中运行以下命令安装 ng2-test-selectors：
--- ------- ------------------ ----------
使用
声明 Ng2TestSelectorsService
您需要在测试文件的 beforeEach 函数中创建一个 Ng2TestSelectorsService 实例。
您可以使用 TestBed 来创建组件，当创建组件时，NgModule 会有所绑定，其中包括 providers（服务），这个时候你可以将 Ng2TestSelectorsService 注入到之前创建的 TestBed 中，以便用于测试。
------------- ----------- -- -- -
--- --------
--- -------- ------------------------
------------------- -- -
--------------------------------
---------- -
-----------------------
--
------------- - ------------ -
--
---------------------
----
------------- -- -
------- - --------------------------------------
------- - -------------------------------------
---
---------- ------ --- ----- -------- -- -
----- --- - ---------------------------------------
-------------------------
----
---------- ----- --- -- --- --------- -- -- -
----- --------- - ----------------------------------- -----
---------------------------------------------------------- -- -- -------
---
---使用 Ng2TestSelectorsService
ng2-test-selectors 提供了两个主要的函数：selectRootElement(selector) 和 selectElement(selector)
两个函数都返回 Angular2+ 元素（DebugElement）。
selectRootElement(selector): 该函数返回与传入的 selector 匹配的第一个 DebugElement 实例。
----- --------- - ----------------------------------- -----
selectElement(selector, parentElement?): 此功能允许您从给定的父元素（调用该元素的 queryAll 子元素）中选择一个元素。
----- ----------- - -------------------------------------- ---------
示例
假设我们有以下组件：
-----------
------
------ ----------- ---------------- --
------ --------------- ---------------- --
------- ------------- -----------------------------------
-------
------------我们可以用以下方式选择它们：
----- --------- - ------------------------------------ ------- ----- ------------- - ---------------------------------- ----------- ----- ------------- - ---------------------------------- ----------- ----- ----------- - -------------------------------------- -----------
现在，我们可以编写以下测试：
---------- ---- -------- --- -------- ----- ------ --- ------ ---- ---- -------- -- --- ---- ------ ------------ -- - ----- ------ - -------------------- ------------- ----------------- ----- --------- - ------------------------------------ ------- ----- ------------- - ---------------------------------- ----------- ----- ------------- - ---------------------------------- ----------- ----- ----------- - -------------------------------------- ----------- ------- --------------------------------- - ----------- --------------------------------- - ----------- ---------------------------------- ----------------------------------------------------------- ----
总结
ng2-test-selectors 可以帮助您准确地选择任何 Angular2+ 应用程序的 DOM 元素以在单元测试中进行测试。它可以使用 CSS 选择器来查询嵌套选择器，因此即使应用程序结构发生变化，您的测试也不会受到影响。
通过优化选择器的使用，您可以更好地组织和编写测试，同时减少由于选择器更改而导致的测试故障的数量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600560a581e8991b448dee3f