在ember-cli-storybook中模拟使用ember-ajax来发布和获取数据的ember服务的最佳方法是什么?

Question

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

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

Answer 1

我喜欢用mswjs用于模拟远程请求的IO。它使用service worker，所以你仍然可以像使用真正的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);

但是由于您使用的是storybook，因此您需要的是该函数的内容。(没有测试特有的setup/teardown钩子)

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

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/