模拟ember服务使用ember-cli故事书中的ember-ajax来发布和获取数据的最佳方式是什么?

7bsow1i6  于 2022-10-20  发布在  其他
关注(0)|答案(1)|浏览(84)

我正在使用Ember CLI Storybook创建一个组件的故事,该组件内部依赖于与互联网通信的服务来获取信息并将信息发布到后端。我这样做的方式是使用ember ajax。
我从本节中了解了如何模拟ember模型,但想知道是否有ember ajax服务的解决方案。

ve7v8dk2

ve7v8dk21#

我喜欢使用mswjs。io用于模拟远程请求。它使用一个服务工作者,所以您仍然可以像使用真实的API一样使用网络日志。
这里有一个示例存储库,演示如何设置它: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/

相关问题