大家好，本人前端开发一名。经常做一些 H5 开发，也做一些 BFF 的开发。

BFF 户体验适配层，参考玉伯分享：《从前端技术到体验科技》

先说下前因后果

在 BFF 层我使用的是 Egg 框架进行开发，但是发现在提供的服务要面向多场景的时候，场景的还原就会变的很困难，我一直想通过 Mock 的手段解决。后面，我尝试使用 全周期的数据环境方案 - Macaca DataHub 来解决我遇到的多场景问题。

当我们的 BFF 层依赖某个服务，并且需要服务的多个场景，例如像 hackernews 首页一样，需要正常情况／空数据情况／报错情况等多种场景，我就通过 DataHub 对这些场景进行了端到端的 Mock。这几个场景的 Mock 如下图：

这样我就可以通过 DataHub 来切换项目中所依赖服务的各种场景，同时各个场景的字段也会自动合并成 API 文档，如下图：

让我的效率飞起来！

接下来，我想在每次改动代码的时候，自动帮我检查各个场景是否正常，避免重复的检查工作，因此我引入了自动化测试。比如，下面这段脚本就帮我完成了所有场景的检查，这样我后面的研发效率就非常高了，而且不用担心修改代码会引入新的坑。

it('list20 render should be ok', async function() {
  return driver
    .switchScene({
      hub: 'hackernews',
      pathname: 'topstories.json',
      scene: 'list20',
    })
    .getUrl(BASE_URL)
    .sleep(1000)
    .hasText('#wrapper > div.news-view.view.v-transition > div:nth-child(20) > span', '20');
});

it('list0 render should be empty', async function() {
  return driver
    .switchScene({
      hub: 'hackernews',
      pathname: 'topstories.json',
      scene: 'empty',
    })
    .getUrl(BASE_URL)
    .sleep(1000)
    .hasText('#wrapper > div.news-view.view.v-transition > p', 'empty');
});

让我们来看看对应的测试报告，可以非常清楚的看到各个场景。

来个总结

如上的实践带来全新的新的 Mock 数据管理和使用体验，希望你们会喜欢这种方式。另外，经过不断的摸索和尝试，想让大家以一种极简的方式具备这些功能。

我开发了一个 Egg 插件：egg-datahub，只需要在项目中一键引入即可。

不要吝啬你的 star：https://github.com/macacajs/egg-datahub，哈哈😄

直接上手试试？

直接在项目中按照 egg-datahub 中 README 进行配置即可。

为了让你更方便的上手，我提交了一个官方 Sample 到 Egg 中：hackernews-datahub。

你只需要

$ git clone https://github.com/eggjs/examples --depth=1
$ cd hackernews-datahub
$ npm install
$ npm run dev

此时，你已经看到 DataHub 启动的 log 了，可以直接访问了。

运行刚刚说的端到端测试：

$ npm run dev:e2e
$ npm run test:e2e

后续计划

hackernews-datahub 属于服务端渲染的典型，但是前端工程以 Webpack 居多，后面我会分享更多这方面的内容，包括前后端分离实践、Webpack 如何与 Egg 配合使用、分层自动化测试、各端 Mock 实践、多场景代码覆盖率实践。

如果你对本文的实践有什么问题、建议，以及对我下一篇分享感兴趣，都欢迎你的评论和交流。