Ember-cli-mirage 是一个用于测试 Ember.js 应用程序的 npm 包。它允许您模拟出许多不同的场景，如在后端尚未准备好时的 API 接口、异常情况、并发访问等等。本教程将会详细地介绍 Ember-cli-mirage 的使用方法，包括安装、配置、基本用法和相关示例代码。
安装
安装 Ember-cli-mirage 包的最简单方法就是使用 npm 命令进行安装：
npm install --save-dev ember-cli-mirage
配置
完成安装后，我们需要将 Mirage 引入我们的测试文件中：
import {module, test} from 'qunit'; import {setupApplicationTest} from 'ember-qunit'; import {setupMirage} from 'ember-cli-mirage'; module('Acceptance | dashboard', function(hooks) { setupApplicationTest(hooks); setupMirage(hooks); });
基本用法
路由路由处理
我们可以定义一些路由的处理方法，例如：
this.get('/posts'); this.get('/posts/:id'); this.post('/posts'); this.put('/posts/:id'); this.del('/posts/:id');
这些方法都只是表单式的定型方法，当其与对应路由相匹配时将会触发对应的数据操作处理。
快捷方式操作
为了方便处理对象的增删改查操作，我们提供了一些类似于 jQuery 的操作方式：
this.post('/contacts'); this.get('/contacts/:id'); this.put('/contacts/:id'); this.patch('/contacts/:id'); this.del('/contacts/:id');
数据生成
在实际的应用开发过程中，我们通常要做数据生成的操作。在 Mirage 中，生成数据使用的是 Factories。
import { Factory } from 'ember-cli-mirage'; export default Factory.extend({ firstName(i) { return `Tiimus${i}`; }, lastName(i) { return `Adebayo${i}`; }, email(i) { return `laolapps${i}@gmail.com`; }, address(i){ return `St ${i}`}, });
在上面的 Factory 中，我们定义了一个仅仅只是模拟生成数据的类。factory 方法将会根据我们的定义，生成对应的数据。
示例代码
编写路由
先编写可用假数据工具的路由。为了方便起见，我们直接修改应用的 router.js，添加以下代码：
-- -------------------- ---- ------- ------ -------------------------- ---- -------------------------------------- ----- ------ - --------------------- -------- --- --------------------- - -------------------- --- ------ ------- -------展开代码
编写 Mirage 的路由配置
打开 Mirage 的路由配置文件 mirage/config.js，添加我们的路由：
-- -------------------- ---- ------- ------ ------- ---------- - -------------- - ------ ------------------ ---------- - ------ - ----- ------------------------------------ - ------ - ----- -------- --- -------- ----------- - ------ ----------- ------- ----------- - -- -- -- --- ---------------------- -------- -------- -------- - ----- ---- - ------------------------------------- ------ - ----- - ----- -------- --- -------- ----------- - ------ ----------- ------- ----------- - - -- --- -展开代码
编写测试
打开我们的测试模块 tests/acceptance/books-test.js，添加以下代码：
-- -------------------- ---- ------- ------ ------ ---- -------- ------ ------------------- ---- ------------------------------------------- ------------------------------- - -------- ---------- ------- ---------------- - ---------------- ------------------ - -------------------------- ---------- ---------------------------------- --- --- --- ---------- ------ ------ ---------------- - ------------------ ------------------ - -------------------------- ------------ ----------------------------------- --------------- --- ---展开代码
OK，现在我们已经完成了 Mock 数据的添加工作。运行测试，您将会看到测试已经通过了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59734
