如何模拟您的整个后端服务器?

这是关于为测试目的模拟数据系列的最后一篇文章。到目前为止,我们已经看到了如何使用Mockaroo生成模拟数据然后如何将这些虚假数据整合到Angular应用中呢

今天,让我们更进一步,使用相同的JSON数据模拟整个后端服务器,包括CRUD (CReate Update Delete)操作,因此还可以测试数据更新。

输入JSON服务器

JSON服务器是一个小的npm库,读取JSON文件,并自动将其转换为RESTful web服务器.是的,你没有看错:我们所需要的输入就是文件中的JSON数据!

JSON的格式是一个单独的对象,其中每个属性都将转换为后端端点。例如,你需要支持两种类型的数据:用户而且团队

然后你的JSON数据库将是这样的:

              
              
{“用户”:【//所有用户数据的数组),“团队”:【//所有团队数据的数组]}
代码语言:JSON /带有注释的JSONjson

你可以用Mockaroo生成的模拟数据替换这些数组,然后运行JSON服务器会给你以下RESTful API:

  • HTTP GET /users=>返回所有用户的列表
  • HTTP GET /users/21=>返回用户Id = 21
  • HTTP POST /user=>创建新用户
  • HTTP DELETE /user/21=>删除用户Id = 21
  • HTTP PUT /user/21=>更新用户Id = 21

JSON服务器也支持分页全文搜索,定制的路线如果您希望向测试后端添加更多端点。对数据所做的任何更改也会保留在JSON文件中。这意味着您有一个用于测试的单一文件数据库,这非常棒!

如果你想试试,这里有一个完整的关于如何在Angular应用中使用JSON服务器的教程.的开始NPM包的一部分也有很好的文档记录。

如何在你的Angular应用中使用模拟数据?

我们上一期的时事通讯如何为Angular应用生成模拟数据Mockaroo。

今天,我们将介绍如何在我们的应用程序中使用这些数据,以便:

  • 作为一个临时的后端实现,这样你就可以在后端API准备好之前构建你的Angular组件。
  • 使用该数据作为单元测试的模拟。

在Angular应用中使用硬编码数据

假设我们需要在组件中显示用户列表,但后端还没有准备好该数据,或者我们想尝试使用假数据。我们转向Mockaroo,生成一个包含100个用户的JSON文件,然后复制粘贴该JSON字符串并将其分配给代码中的一个常量(例子-这篇文章剩下的所有链接都指向提到的文件的源代码):

然后,我们希望使用服务访问这些数据。我们已经有了UserService这是使用我们的后端,但我们想用我们的假数据替换那个调用:

所以我们生成了一个新的FakeUserService它的形状和UserService,但返回一个自定义的Observable的模拟数据,而不是发出HTTP请求:

最后,我们改变了依赖注入配置AppModule以便应用程序使用FakeUserService而不是UserService

现在,我们AppComponent相信它在使用一个真实的UserService,但实际上得到了一个FakeUserServiceAngular注入器:

这种方法的优点是不需要更改任何组件。要更改以启用/禁用模拟数据的惟一代码行是供应商配置在AppModule.就是这样!您可以访问Stackblitz这个例子的完整代码

在单元测试中使用相同的硬编码数据

一旦您遵循上述方法,在单元测试中使用这些数据将非常相似。我们可以重复使用FakeUserService通过配置Angular试验台在我们的单元测试中如下:

如何为我的应用程序生成模拟数据?

测试Angular应用程序可能很困难,因为我们的前端代码几乎完全依赖于后端数据,而且设置不同的数据库场景需要花费大量的时间和精力。有时候,我们甚至一开始就没有足够的数据进行测试。

这就是为什么我要介绍Mockaroo.在Mockaroo这个网站上,您可以生成尽可能多的数据用于测试目的。例如,如果你需要1000个带有随机电子邮件地址、国家和电话号码的假用户,Mockaroo可以生成所有这些。您甚至可以决定每个属性的空白百分比。

在下面的例子中,我决定将10%的电子邮件地址设置为空白:

下面是我在几秒钟内生成的一个JSON示例:

Mockaroo非常强大,因为它支持很多不同的数据类型,比如:

  • 电话号码、年龄、信用卡号码、支付卡类型、比特币地址……
  • 街道名称、城市名称、国家、纬度、经度、机场代码……
  • 名字、颜色、职位、性别、ssn、ein、大学名……

如果需要Mockaroo没有的数据类型,则可以提供正则表达式Mockaroo将使用它来为您创建与regexp匹配的数据。是的,就是这么好吃!

你可以生成多种格式的数据(JSON、CSV、SQL、Firebase等),然后在你的Angular应用程序中使用它作为模拟(硬编码对象),或者将数据存储在测试数据库中,用于集成测试。

对于最多1,000行的导出,可以免费使用Mockaroo。不过,每天运行的导出数量没有限制,因此如果需要超过1,000个项,可以反复导出更多随机数据您可以使用付费计划来增加或取消所有限制

如何更新我的Angular版本?

昨天,我们提到了为什么它是必要的让你的Angular版本尽可能保持最新

今天,我们来看看如何做到这一点。一个简明的答案是使用的说明https://update.angular.io因为所有的信息都在那里。您可以选择当前版本,即您想要升级到的版本,单击按钮,然后您将获得详细的TODO列表:

典型的升级包括:

  1. 升级当前版本的Angular CLI:安装-g @angular/cli@latest
  2. 将项目代码升级到最新版本:Ng更新@angular/core@latest @angular/cli@latest

ng更新命令会更新Angular和它的依赖项,如果框架的新版本有一些破坏性的变化(意味着一些函数或类被重命名或替换为其他东西),甚至会改变你的代码。是的,都是自动的!

在某些情况下,升级可能会更加困难:

  1. 例如,如果你有不再维护的依赖项,或者在几周/几个月后才升级-我会在本通讯的后续版本中解决这个问题。
  2. 如果Angular需要升级Node.js,这意味着升级你的开发环境和持续集成服务器。

同样,关键是要尽可能保持最新,每六个月升级一次5到10分钟的任务,而不是每隔几年就花2周的时间。

如何为Angular应用程序生成文档?

编写软件文档是很困难的。不仅如此,维护软件文档更加复杂,而且常常被人遗忘。

那么,解决方案是什么呢?使用自动化的解决方案如何:

  1. 从代码注释生成文档,不需要Wiki或任何第三方软件。
  2. 自动生成上述文档,并且可以作为构建过程的一部分。
  3. 向开发人员提供指标和反馈,鼓励他们编写更多的文档。

这样的解决方案是存在的。它被称为Compodoc.Compodoc可以从应用程序中编写的所有注释中生成一个类似javadoc的网站(您可以看到这里是此类文档的示例):

Compodoc可以通过npm全局安装:

              
npm安装- g@compodoc/ compodoc
代码语言:CSScss

或者你也可以在本地将它添加到单个Angular项目中ng添加项目文件夹中的原理图:

              
ng添加@compodoc/ compodoc
代码语言:CSScss

然后你就可以创建一个配置文件来决定包含哪些文件(例如,你可能想要排除test,并且Compodoc已经准备好只用一个命令就可以运行:

              
npxcompodoc- ptsconfig. doc. json
代码语言:CSScss

上面的命令创建了一个静态HTML网站,记录了整个应用程序的所有模块/组件/管道/指令/服务。

我最喜欢的功能是文档覆盖统计使用一个类似于开发人员所熟悉的测试覆盖率报告的报告,显示应用程序的哪些部分是良好记录的,哪些部分不是。