NGRX测试：组件

运行测试

现在是时候停止并运行我们的测试以确保一切都通过了:

$npm测试

添加用户组件

好的，现在我们有测试IndexComponent它是孩子UserListComponent，让我们来看看测试AddComponent。

这是模板src / app /用户/容器/ add / add.component.html：

<app-user-form(userChange)=“OnUserchange（$赛事）“>app-user-form>

我们将使用UserFormComponent.显示添加新用户的表单，附加一个@Output ()对此的束缚Userchange.,调用Onuserchange（）发射值时的方法。

在AddComponent我们定义的Onuserchange（）方法src / app /用户/集装箱/添加/ add.component.ts：

出口班级AddComponent{构造函数（私人的店铺：店铺<脱狐。状态>）{}Onuserchange.（用户：用户）{这。店铺。派遣（新的添加用户（{用户：用户}））;}}

在里面Onuserchange（）方法我们派遣（）这添加用户对商店的行动。

好的，让我们测试这一点添加用户行动被派遣了Onuserchange.发笑src / app /用户/ containers / add / add.component.spec.ts：

它（'应该在调用Onuserchange时调度adduser行动'那（）= >{常量用户=generateUser.（）;常量行动=新的添加用户（{用户}）;常量间谍=笑话。暗中监视（店铺那“调度”）;夹具。探测器（）;成分。Onuserchange.（用户）;预计（间谍）。toHaveBeenCalledWith（行动）;}）;

• 首先，我们使用generateUser（）函数，从模型中导入，以创建一个假的用户对象使用伪造者。<李>我们是新来的添加用户行动,指定有效载荷这是用户目的。<李>然后，在营地上产生间谍派遣（）方法中使用的jest.spyon（）。<李>然后触发变更检测并调用Onuserchange（）方法与用户目的。<李>最后，我们断言了派遣（）用方法调用方法添加用户行动。

  编辑用户组件

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

  <app-user-form(用户)=“用户$ |.异步“(userChange)=“OnUserchange（$赛事）“>app-user-form>

  这EditComponent.被路由到了ID参数才能指定用户编辑。我们将使用它ID参数来分派两个动作:SelectUser和LoadUser.。

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

  出口班级EditComponent.实现了OnInit{用户美元：可观察到的<用户>;构造函数（私人的activatedRoute：ActivatedRoute那私人的店铺：店铺<脱狐。状态>）{}ngOnInit（）{常量param_id.='ID';这。用户美元=这。activatedRoute。禁毒。管道（过滤器（禁毒= >禁毒。有（param_id.））那地图（禁毒= >禁毒。得到（param_id.））那利用（ID= >{这。店铺。派遣（新的SelectUser（{ID：+ID}））;这。店铺。派遣（新的LoadUser.（{ID：+ID}））;}）那switchMap（ID= >这。店铺。管道（选择（selectSelectedUser））））;}Onuserchange.（用户：用户）{这。店铺。派遣（新的更新用户（{用户：用户}））;}}

  在我们可以开始测试组件之前，我们需要连接测试用：

  摘要（异步（（）= >{测试用。configuretestingModule.（{宣言：[EditComponent.那UserFormComponent.]那进口：[FormsModule那rutertestingmodule.那反应omformodule]那供应商：[{提供：ActivatedRoute那useValue：{禁毒：新的BehaviorSubject（ConvertToparAmmap.（{ID：用户。ID}））}}那{提供：店铺那useValue：{派遣：笑话。FN.（）那管道：笑话。FN.（（）= >热的（“——”那{一种：用户}））}}]}）。编译（）;}））;

  让我们回顾一下前提（）方法:

  • 首先，我们指定了EditComponent.和UserFormComponent.我们将在模块中。<李>我们补充了必要的进口用于使用反应形式和路由器。<李>在里面供应商数组，我们需要模拟出ActivatedRoute和店铺。我们使用一个BehaviorSubject嘲笑这一点禁毒财产的ActivatedRoute，指定这一点ID假用户。我们嘲笑了派遣（）和管道（）方法对店铺。请注意管道（）Mock返回一个热的可观察到，在单个帧之后发出用户对象。

    与我们的测试用准备好了，让我们测试ngOnInit ()生命周期方法：

    描述（'ngoninit'那（）= >{它（'应该为指定的ID参数派遣选择用户操作'那（）= >{常量行动=新的SelectUser（{ID：用户。ID}）;常量间谍=笑话。暗中监视（店铺那“调度”）;夹具。探测器（）;预计（间谍）。toHaveBeenCalledWith（行动）;}）;它（'应该为指定的id参数分派LoadUser动作'那（）= >{常量行动=新的LoadUser.（{ID：用户。ID}）;常量间谍=笑话。暗中监视（店铺那“调度”）;夹具。探测器（）;预计（间谍）。toHaveBeenCalledWith（行动）;}）;}）;

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

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

    描述（“onUserChange”那（）= >{它（'在调用Onuserchange时应调度Updatuser操作'那（）= >{常量用户=generateUser.（）;常量行动=新的更新用户（{用户}）;常量间谍=笑话。暗中监视（店铺那“调度”）;夹具。探测器（）;成分。Onuserchange.（用户）;预计（间谍）。toHaveBeenCalledWith（行动）;}）;}）;

    这与测试相同AddComponent。

    用户表单组件

    与这两者都有AddComponent和EditComponent.测试后，下一个逻辑步骤是为UserFormComponent.。

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

    <形式[formgroup]=“形式“><输入类型=“文本“占位符=“第一个名字“formcontrolname.=“firstName“/><输入类型=“文本“占位符=“姓“formcontrolname.=“姓“/><按钮(点击)=“onsave（）“>保存按钮>形式>

    我正在使用反应omformodule为包含两个输入的用户创建一个简单的表单：名字和姓氏。单击“保存”按钮时，onsave（）调用组件中的方法。

    在里面UserFormComponent.我们定义的onsave（）方法:

    onsave.（）{如果（这。形式。无效的）{返回;}这。Userchange.。发出（{......这。用户那......这。形式。价值}）;}

    拳头，让我们断言表单值是补充的ngonchanges（）生命周期方法被调用：

    它（“应该将值修补到表单中”那（）= >{常量用户=generateUser.（）;成分。ngonchanges.（{用户：新的SimpleChange（空值那用户那真的）}）;预计（成分。形式。价值）。toequal.（{firstName：用户。firstName那姓：用户。姓}）;}）;

    在这个测试中，我们:

    • 生成一个假用户<李>援引ngonchanges（）方法，提供一个新的SimpleChangeA的对象用户。<李>期待价值的Formgroup.包括用户的名字和姓氏。

      然后，让我们断言Userchange.当表单被提交时，会触发输出事件:

      它（'提交时应该触发userChange事件'那（）= >{常量用户=generateUser.（）;常量firstName='Brian';常量firstNameDebugEl=夹具。debugElement。查询（经过。CSS.（“输入(formControlName =“firstName”)”））;常量firstNameEl=firstNameDebugEl。母语作为htmlinputelement.;常量Buttondebugel.=夹具。debugElement。查询（经过。CSS.（'按钮'））;夹具。探测器（）;让UpdatedUser.：用户;成分。Userchange.。订阅（用户= >（UpdatedUser.=用户））;成分。用户=用户;成分。ngonchanges.（{用户：新的SimpleChange（空值那用户那真的）}）;firstNameEl。价值=firstName;firstNameEl。DispatchEvent.（新事件（'输入'））;Buttondebugel.。triggereventhandler.（'点击'那空值）;预计（UpdatedUser.）。toequal.（{......用户那firstName}）;}）;

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

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

        使用初始用户数据填充表单后，更新名字输入值，并订阅Userchange.Eventemitter.我们可以期望()的更新用户发出的是提供的用户，具有更新的名称值。

        结论

        单元测试是非常值，并且使用像Jest这样的测试赛道使得能够快速迭代享受愉快的经验。

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