当 Egg 遇上 DataHub 教你轻松搞定多场景服务
发布于 7 小时前 作者 yllziv 115 次浏览 来自 分享

大家好,本人前端开发一名。经常做一些 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 实践、多场景代码覆盖率实践。

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

回到顶部