模拟使用 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 服务的解决方法。

【问题讨论】：

标签： ember.js storybook

【解决方案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/

【讨论】：