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