模拟使用 ember-cli-storybook 中的 ember-ajax 发布和获取数据的 ember 服务的最佳方法是啥？

Posted 2023-02-19

【中文标题】模拟使用 ember-cli-storybook 中的 ember-ajax 发布和获取数据的 ember 服务的最佳方法是啥？

【英文标题】：What is the best way to mock ember services that use ember-ajax in ember-cli-storybook to post and fetch data?模拟使用 ember-cli-storybook 中的 ember-ajax 发布和获取数据的 ember 服务的最佳方法是什么？

【发布时间】：2021-10-13 07:50:43

【问题描述】：

我正在使用Ember CLI Storybook 创建一个组件故事，而不是内部依赖与互联网通信的服务，以获取和发布信息到后端。我这样做的方式是使用 ember-ajax。

我看到了如何从这个 section 模拟 ember 模型，但想知道是否有用于 ember ajax 服务的解决方法。

【参考方案1】：

我喜欢使用 mswjs.io 来模拟远程请求。它使用服务工作者，因此您仍然可以像使用真正的 API 一样使用网络日志。

我在这里有一个示例 repo，展示了如何设置它：https://github.com/NullVoxPopuli/ember-data-resources/

但是我会复制代码，以防我改变一些东西。

现在，在测试中，你会想要这样的东西：https://github.com/NullVoxPopuli/ember-data-resources/blob/main/tests/unit/find-record-test.ts#L17

module('findRecord', function (hooks) 
  setupMockData(hooks);

但由于您使用的是故事书，因此您需要的是该函数的内容。 （并且没有测试特有的设置/拆卸钩子）

https://github.com/NullVoxPopuli/ember-data-resources/blob/main/tests/unit/-mock-data.ts#L22

import  rest, setupWorker  from 'msw';

let worker;

export async function setupMockData() 
    if (!worker) 
      worker = setupWorker();
      await worker.start();
      // artificial timeout "just in case" worker takes a bit to boot
      await new Promise((resolve) => setTimeout(resolve, 1000));
      worker.printHandlers();
    

    let data = [
       id: '1', type: 'blogs', attributes:  name: `name:1`  ,
       id: '2', type: 'blogs', attributes:  name: `name:2`  ,
       id: '3', type: 'blogs', attributes:  name: `name:3`  ,
    ];

    worker.use(
      rest.get('/blogs', (req, res, ctx) => 
        let id = req.url.searchParams.get('q[id]');

        if (id) 
          let record = data.find((datum) => datum.id === id);

          return res(ctx.json( data: record ));
        

        return res(ctx.json( data ));
      ),

      rest.get('/blogs/:id', (req, res, ctx) => 
        let  id  = req.params;

        let record = data.find((datum) => datum.id === id);

        if (record) 
          return res(ctx.json( data: record ));
        

        return res(
          ctx.status(404),
          ctx.json( errors: [ status: '404', detail: 'Blog not found' ] )
        );
      )
    );

msw 的文档：https://mswjs.io/