NGRX测试：组件

运行测试

这是停止并运行测试的好时机，以确保一切都在通过：

＄NPM.测试

添加用户组件

好的，现在我们有测试indexComponent.它是孩子UserListComponent.，让我们来看看测试addcomponent.．

这是模板src / app /用户/集装箱/添加/ add.component.html：

<应用程序用户形式（Userchange）＝＂OnUserchange（$赛事）＂>应用程序用户形式>

我们将使用UserFormComponent.若要显示用于添加新用户的表单，请附加@输出（）对此的束缚Userchange.，调用这一点Onuserchange（）发射值时的方法。

在这内addcomponent.我们定义了这一点Onuserchange（）方法src / app /用户/ containers / add / add.component.ts：

出口类addcomponent.｛构造函数（私人店铺：商店<脱狐．状态>）｛｝onUserChange（用户：用户）｛这个．店铺．调度（新的AddUser（｛用户：用户｝））；｝｝

在里面Onuserchange（）方法我们派遣（）的AddUser对商店的行动。

好，我们来测试一下AddUser操作在onUserChange发笑src / app /用户/ containers / add / add.component.spec.ts：

它（'应该在调用Onuserchange时调度adduser行动'，（）=>｛const用户＝generateUser（）；const行动＝新的AddUser（｛用户｝）；const间谍＝开玩笑．暗中监视（店铺，'派遣'）；夹具．探测器（）；组件．onUserChange（用户）；预计（间谍）．Tohavebeencalledwith.（行动）；｝）；

• 首先，我们使用generateUser（）从模型导入的函数以创建假用户使用伪造者的对象。<李>我们新起来了AddUser行动，指明有效载荷那就是用户目的。<李>然后，创建一个间谍派遣（）使用商店中的方法jest.spyon（）．<李>然后我们触发更改检测并调用Onuserchange（）方法与用户目的。<李>最后，我们断言派遣（）用方法调用方法AddUser行动。

  编辑用户组件

  随着添加用户的能力，我们还希望能够编辑现有用户。的EditComponent模板非常相似addcomponent.，增加了用户输入绑定：

  <应用程序用户形式[用户]＝＂用户$ |异步＂（Userchange）＝＂OnUserchange（$赛事）＂>应用程序用户形式>

  的EditComponent被路由到了id参数才能指定用户编辑。我们将使用它id要调度两个操作的参数：选择器和LoadUser．

  这里是EditComponent来源SRC / APP /用户/ Containers / Edit / Edit.Component.ts：

  出口类EditComponent实施oninit.｛用户$：可观察到的<用户>；构造函数（私人activatedRoute.：activatedRoute.，私人店铺：商店<脱狐．状态>）｛｝ngoninit.（）｛constparam_id.＝“id”；这个．用户$＝这个．activatedRoute.．paramMap．管道（筛选（paramMap=>paramMap．已（param_id.）），地图（paramMap=>paramMap．得到（param_id.）），轻敲（id=>｛这个．店铺．调度（新的选择器（｛id：+id｝））；这个．店铺．调度（新的LoadUser（｛id：+id｝））；｝），SwitchMap.（id=>这个．店铺．管道（选择（SelectSelectedUser.））））；｝onUserChange（用户：用户）｛这个．店铺．调度（新的更新用户（｛用户：用户｝））；｝｝

  在我们开始测试我们的组件之前，我们需要加入试验台：

  beforeEach（异步（（）=>｛试验台．configuretestingModule.（｛宣言：［EditComponent，UserFormComponent.］，进口：［FormsModule.，rutertestingmodule.，反应omformodule］，提供者：［｛提供：activatedRoute.，umervalue.：｛paramMap：新的行为赞许（ConvertToparAmmap.（｛id：用户．id｝））｝｝，｛提供：商店，umervalue.：｛调度：开玩笑．fn（），管道：开玩笑．fn（（）=>热（'-一种'，｛一个：用户｝））｝｝］｝）．编译（）；｝））；

  我们来回顾一下beforeEach ()方法：

  • 首先，我们指定EditComponent和UserFormComponent.正如我们在模块中所做的。<李>我们补充了必要的进口用于处理响应式表单和路由器。<李>在里面提供者阵列我们需要嘲笑activatedRoute.和商店．我们使用A.行为赞许嘲笑这一点paramMap财产activatedRoute.，指定这一点id假用户。我们嘲笑了派遣（）和管道（）方法对商店．请注意管道（）Mock返回一个热的可观察到，在单个帧之后发出用户对象。

    跟我们试验台准备好了，让我们测试ngoninit（）生命周期方法：

    描述（“ngOnInit”，（）=>｛它（'应该为指定的ID参数派遣选择用户操作'，（）=>｛const行动＝新的选择器（｛id：用户．id｝）；const间谍＝开玩笑．暗中监视（店铺，'派遣'）；夹具．探测器（）；预计（间谍）．Tohavebeencalledwith.（行动）；｝）；它（'应该为指定的ID参数派遣LoadUser操作'，（）=>｛const行动＝新的LoadUser（｛id：用户．id｝）；const间谍＝开玩笑．暗中监视（店铺，'派遣'）；夹具．探测器（）；预计（间谍）．Tohavebeencalledwith.（行动）；｝）；｝）；

    我们的“Ngoninit”测试套件包含两个测试：断言调度选择器和LoadUser行动。

    接下来，让我们来测试Onuserchange（）何时调用的方法Userchange.Eventemitter.发出更新的用户对象<用户形式>成分。

    描述（'Onuserchange'，（）=>｛它（'应该在调用onUserChange时分派UpdateUser动作'，（）=>｛const用户＝generateUser（）；const行动＝新的更新用户（｛用户｝）；const间谍＝开玩笑．暗中监视（店铺，'派遣'）；夹具．探测器（）；组件．onUserChange（用户）；预计（间谍）．Tohavebeencalledwith.（行动）；｝）；｝）；

    这是相同的测试addcomponent.．

    用户表单组件

    与这两者都有addcomponent.和EditComponent测试，下一个逻辑步骤是为此创建一个单元测试UserFormComponent.．

    这是模板src / app /用户/ components / mess-form / user-form..component.html：

    <形式[formgroup]＝＂形式＂><输入类型＝＂文本＂占位符＝＂名＂formControlName＝＂名＂/><输入类型＝＂文本＂占位符＝＂姓＂formControlName＝＂姓＂/><按钮（点击）＝＂onsave（）＂>节省按钮>形式>

    我正在使用反应omformodule为用户创建一个简单的表单，其中包含两个输入:姓和名。当点击“保存”按钮时，onsave（）方法将被调用。

    在里面UserFormComponent.我们定义了这一点onsave（）方法：

    onSave（）｛如果（这个．形式．无效的）｛返回；｝这个．Userchange.．发射（｛......这个．用户，......这个．形式．价值｝）；｝

    拳头，让我们断言表单值是补充的ngonchanges（）调用Lifecycle方法:

    它（'应该将值加入表单'，（）=>｛const用户＝generateUser（）；组件．ngOnChanges（｛用户：新的傻瓜（空值，用户，真的）｝）；预计（组件．形式．价值）．toEqual（｛名：用户．名，姓：用户．姓｝）；｝）；

    在这个测试中，我们：

    • 生成假用户<李>调用ngonchanges（）方法，提供新的方法傻瓜A的对象用户．<李>预计,价值的Formgroup.包括用户的名字和姓氏。

      然后，让我们断言Userchange.在提交表单时发出输出事件：

      它（'在提交时应发出Userchange事件'，（）=>｛const用户＝generateUser（）；const名＝'Brian'；constFirstnameDebug.＝夹具．debugelement.．询问（通过．CSS.（'输入[formcontrolname =“firstname”]'））；constFirstnameel.＝FirstnameDebug.．母语作为htmlinputelement.；constbuttonDebugEl＝夹具．debugelement.．询问（通过．CSS.（“按钮”））；夹具．探测器（）；让updatedUser：用户；组件．Userchange.．订阅（用户=>（updatedUser＝用户））；组件．用户＝用户；组件．ngOnChanges（｛用户：新的傻瓜（空值，用户，真的）｝）；Firstnameel.．价值＝名；Firstnameel.．DispatchEvent.（newEvent（“输入”））；buttonDebugEl．triggereventhandler.（“点击”，空值）；预计（updatedUser）．toEqual（｛......用户，名｝）；｝）；

      为了测试我们的组件，我们需要:

      • 提供输入到组件中的假用户。<李>触发ngonchanges（）生命周期方法，它将使用该表格填充patchValue ()方法Formgroup.．<李>订阅Userchange.输出。<李>的值更新名输入。<李>触发点击事件。

        在用初始用户数据填充表单之后，更新姓名输入值，并订阅Userchange.Eventemitter.我们可以预计（）那是更新的用户发出的是提供的用户，具有更新的名称值。

        结论

        单元测试非常有价值，使用像Jest这样的测试运行器可以使快速迭代的体验变得愉快。

        非常感谢NGRX社区和所有文档，用于使用RX大理石进行单位测试观察可观察到和异步事件。