将 ember-cli-storybook 中使用 ember-ajax 的 ember 服务模拟到 post 并获取数据的最佳方法是什么？

Question

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

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

Answer 1

我喜欢使用 mswjs.io 来模拟远程请求。它使用了一个 service worker，所以你仍然可以使用你的网络日志，就好像你仍然在使用你的真实 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);

但是由于您使用的是故事书，因此您需要的是该函数的内容。（并且没有测试独有的 setup/teardown 挂钩）

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/

将 ember-cli-storybook 中使用 ember-ajax 的 ember 服务模拟到 post 并获取数据的最佳方法是什么？

What is the best way to mock ember services that use ember-ajax in ember-cli-storybook to post and fetch data?

ember.js

storybook