npm 包 ember-cli-pact 使用教程

在前端开发中,我们常常需要跟后端的API进行集成,使前端的应用可以与后端的服务交互。一旦API变化频繁或者需要预先约定接口,那么单元测试集成将变得颇为不便。这个时候,你就需要使用mock server工具。ember-cli-pact 便是一个帮助你快量创建mock server的npm包,本文将扼要地介绍该包的使用方法。

ember-cli-pact是什么?

Pact是一个用于前后端集成测试和断言的工具,其中 ember-cli-pact可以帮助前端开发快速创建Pact Mock Server并与其协作。

安装和配置

首先,需要使用ember-cli安装ember-cli-pact :

----- ------- --------------

完成后,你将看到下列的文件被自动添加到你的应用中:

  • pact-mock-service.js 用来启动mock server
  • /pacts 用来存储pact测试协议的JSON文件

我们还需要安装@pact-foundation/pact-node,它是Pact的node版本,用来与Pact Mock Service进行协作:

--- ------- ---------- --------------------------

接着,我们需要创建一个Pact Helper来处理创建pact协议的相关操作。

----- -------- -----------

此时,在tests/helpers/pact.js中会产生如下代码:

------ - --------- - ---- -----------------
------ ------ ---- ---------------------------

------ -------- ---------------------------------- ----- -
  ----------------------- ------- ------
-

其中参数opts是Pact的配置对象。关于设置多个provider、设置异步timeout和使用参数的可解析组参照Pact Help文档。

创建 Pact Mock Service

我们将在测试中编写Pact测试,并在本地启动Pact Mock Service,然后在测试中使用它来验证测试结果。以下演示了创建一个简单测试的步骤。

首先,在test目录下创建一个新的测试"Pact Consumer Test" :

----- -------- --------------- --------------------

在 "pact-consumer-test"中编写创建 pact 和数据驱动测试的代码

-- --------------------------------------
------ - -------------------- - ---- ------------------
------ - ------- ---- - ---- --------
------ - -------------------- - ---- --------------
------ - ----- - ---- ----------------------

------------------ - ---- -------- ------ --------------- -
  ---------------------------------- - ---------------- ----------------------- ---
  ----------------------------

  --------- ------ ---- --- - --------- ----- ---------------- -
    ----- - ----------- - - ----------
    ----- ------------ - - ---- -------- --

    --- ------------ - ---

    -------------------
      ------ --- ---- ---------
      -------------- -- ------- --- ---- ------
      ------------ -
        ------- ------
        ----- -------------
      --
      ---------------- -
        ------- ----
        -------- ---------------- --------------------
        ----- ------------
      -
    ---

    ----- ------------------------------------------
    ----- -----------
    ---------------------- -------------- ----------
  ---
---

在上面代码中,我们首先调用了 setupPactForProvider方法,该方法用于初始化Pact Mock Server。之后,我们定义了需要Mock的数据,最后我们再次调用mockService.addInteractions方法将交互数据Mock到Pact Mock Server。最后,我们将在我们的页面上使用模拟的数据。

运行测试和 Pact Mock Server

有两种启动Pact Mock Server的方法:从命令线启动和在测试中调用。以下演示了在测试中启动Pact Mock Server的方法。

在测试运行前,我们需要为Pact Mock Server指定一个端口,避免与其他测试重叠。我们需要正式占用Mock Server端口,因此应用启动语句如下:

--------- ----- - -------------------- - -----

运行测试,Pact Mock Server就会自动启动。当测试结束后,Mock Server也就关闭了,下一次运行测试时服务端口就会自动释放。

结论

如上所述,ember-cli-pact 简化界面集成测试的流程。Pact Mock Server就像一个虚拟的后端服务,其与测试并行执行。在测试中,我们可以与它进行交互,以验证我们的前端是否可以正确与后端进行交互。如果你的程序与后端API密切流程,那么 ember-cli-pact 无疑是你不可或缺的工具之一。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60067357890c4f7277583dad


猜你喜欢

  • npm 包 rate-map 使用教程

    简介 rate-map 是一个可以用来统计和处理 JavaScript 数组中各项出现频次的 npm 包。它的特点是功能简单易用,而且具有丰富的参数设置和灵活性。 安装 你可以通过 npm 安装 ra...

    4 年前
  • npm 包 @alexseitsinger/react-simple-text-input 使用教程

    前言 前端开发需要用到各种库和组件,而 npm 是非常常用的一个 JavaScript 包管理工具。本文介绍的 @alexseitsinger/react-simple-text-input 是一个前...

    4 年前
  • npm 包 @1602/react-native-cached-image 使用教程

    介绍 @1602/react-native-cached-image 是一款 React Native 应用中常用的图片缓存解决方案,其中内置多种预加载策略和 LRU(最近最少使用)缓存机制。

    4 年前
  • npm 包 webpack-package-manager 使用教程

    在前端开发中,webpack 是一个常用的打包工具,而 webpack-package-manager 是一个基于 npm 的 webpack 插件管理器,可以便捷地进行 webpack 插件的安装、...

    4 年前
  • 前端新手必看:使用 ts-quick 包快速转换 JavaScript 代码为 TypeScript 代码

    是否遇到过想要将自己的 JavaScript 代码改写成 TypeScript 代码,而无从下手的情况?又或者是想用 TypeScript 写一些项目,但因为复杂的语法和繁琐的类型定义而感到困惑?不用...

    4 年前
  • Gatsby-Starter-Location-Github 使用教程

    Gatsby-Starter-Location-Github 使用教程 Gatsby 是一个快速、现代且高效的网站生成框架,它使用 React 构建静态网站。Gatsby-Starter-Locati...

    4 年前
  • npm 包 bing-image-search 使用教程

    简介 在前端开发中,经常需要使用到图片搜索,bing-image-search 是一款npm包,提供易用的API接口,能够方便快速地搜索bing搜索引擎中的图片资源。

    4 年前
  • npm 包 open-twitch-dashboard 使用教程

    介绍 open-twitch-dashboard 是一个为 Twitch 平台构建的开源仪表板,该仪表板提供了有关 Twitch 频道和用户的实时数据统计信息。该 npm 包提供了一个方便的使用界面,...

    4 年前
  • npm 包 @unplugstudio/lory-a11y 使用教程

    什么是 @unplugstudio/lory-a11y? @unplugstudio/lory-a11y 是一款基于 lory 的轮播图组件,并实现了无障碍(a11y)功能,旨在为开发者提供一个易用、...

    4 年前
  • npm 包 heroprotocol-fallback 使用教程

    在前端开发中,我们常常需要使用到各种 npm 包来加速我们的开发进程。其中,heroprotocol-fallback 是一款非常实用的包,能够帮助我们解析 Heroes of the Storm (...

    4 年前
  • npm 包 rollodeqc-gh-members 使用教程

    在开发前端项目中,经常会需要获取 GitHub 组织或者用户的成员列表。虽然可以通过 GitHub 提供的 API 进行获取,但每次都需要手动操作,十分麻烦。于是,开发者 @rollodeqc 开发了...

    4 年前
  • npm 包 gatsby-plugin-tidy 使用教程

    在前端开发中,我们常常需要通过各种方式对项目进行优化以提高网站的性能和用户体验。其中一种方式就是通过压缩和优化 HTML、CSS、JavaScript 等资源,以减小文件体积并提高加载速度。

    4 年前
  • npm 包 application-storage 使用教程

    介绍 application-storage 是一个基于 localStorage 和 sessionStorage 的 JavaScript 库,它提供了一个统一的 API,让我们可以方便地管理客户...

    4 年前
  • npm 包 homebridge-ring-alarm 使用教程

    简介 homebridge-ring-alarm 是一个 Node.js 模块,是支持 Homebridge 的 Ring 安保设备的插件。它使得您的 Ring 安保设备可以集成到 HomeKit 中...

    4 年前
  • npm 包 fanart-api 使用教程

    在前端开发中,我们常常需要从不同的网站或 API 中获取图片、数据等信息,而 fanart-api 就是一款可以帮助我们从 fanart.tv 网站中获取艺术作品相关信息的 npm 包。

    4 年前
  • npm 包 bing-image-search-stream 使用教程

    简介 在前端开发中,我们时常需要向用户展示图片,但是找到合适的图片并下载下来并不是一个容易的任务。Microsoft 提供了一个强大的图像搜索引擎——Bing 图像搜索引擎,能够搜索到数量巨大的优质图...

    4 年前
  • npm 包 react-shockinflux-payview 使用教程

    介绍 react-shockinflux-payview 是一个 React 组件库,为用户提供了一种简单的方式来集成支付宝支付和微信支付功能。该包是基于 Shockinflux 开发,可以帮助前端开...

    4 年前
  • npm 包 react-rayr-component 使用教程

    react-rayr-component 是一款前端开发的 npm 包,它提供了一系列的 React 组件,能够大幅度简化前端开发的工作,并且还提供了强大的功能和拓展性,下面将详细介绍如何使用这个 n...

    4 年前
  • npm 包 @phlur/gatsby-plugin-s3 使用教程

    在前端开发中,静态网站的托管是一个重要的话题。亚马逊的 S3(Simple Storage Service)是一个囊括存储、管理和保存文本、图像、视频和任何其他类型文件的对象存储服务。

    4 年前
  • npm 包 action-typex 使用教程

    在前端开发中,我们通常使用 Redux 来进行状态管理。而在 Redux 中,action type 是一个非常重要的概念,它用来描述一个 action 的类型,以便在 reducer 中进行相应的处...

    4 年前

相关推荐

    暂无文章