如何在单元测试之外模拟Angular服务?

我正在开发Angular应用程序,因为后端在开发中仍然很落后,因此我正在构建替代的伪造服务,该服务提供来自本地JSON文件的数据,从而允许我在上测试应用程序的整个前端。我的本地工作站,而无需依赖任何外部资源。

问题在于,每次我需要测试与后端的集成时,从虚假服务切换到真实服务都是浪费时间,所以我想要一些可以通过简单标志在虚假服务和真实服务之间进行切换的东西在代码或CLI上。

fandly_jw 回答:如何在单元测试之外模拟Angular服务?

您可以为此使用代理。运行angular时,对localhost:4200的每个请求都可以重定向到具有相同路由的任何位置。带有并行运行的伪json的node-express或您可能拥有的另一个模拟服务器。

https://angular.io/guide/build#proxying-to-a-backend-server

,

最好使用独立的模拟服务器。因此,您的应用将更干净,更容易测试

1-您可以使用像这样的节点模拟服务器https://www.npmjs.com/package/mockserver-node

节点模拟服务器将模拟反向api,您只需为其提供json文件即可为每个http查询发送。您可以在http://mock-server.com/上查看更多详细信息。

2-在您的角度应用程序的package.json文件中,添加一个新脚本,该脚本将启动模拟服务器和您的应用程序。 示例:“ mock:profile”:“ npm-run-all --parallel模拟服务器appmock”

“ appmock”脚本将使用“ proxy.mock.conf.json”之类的代理文件,该代理文件会将所有api调用转发到模拟服务器。

'mockserver'脚本用于自行运行模拟服务器。就像“ node ./node/mock-server/mock.server.run.js”

要运行模拟模式,您只需使用'npm run mock:profile'来运行您的应用程序

,

我不确定您的服务是如何构建的,但是如果您具有抽象的“基本” http服务,则可以检查标志并更改执行GET请求以获取本地JSON数据的函数。

类似:

export class baseHttpService {
    let isMock: boolean = true;

    get(url: string,params: object = {}): Observable<any> { 
        if(!isMock) {
            return /* normal get function */
        } else {
            return this.http.get("your local json file");
        }
    }
}

在您的服务中,您调用此“基本” http服务的get函数:

export class UserService {

    getUser() Observable<any>{
        this.baseHttp.get(/* Api endpoint to get user */).subscribe(...);
    }
}

这样,您只需切换一个布尔值即可模拟所有服务。

PS 我真的很喜欢将您的应用“代理”到模拟服务器的想法,我觉得这可能不那么容易,但是如果您希望进行更改,这是解决问题的一种更好的方法您的JSON中的数据。

,

您可以在应用程序中添加MockInterceptor,从而将请求url更改为伪数据的json-Path。您可以使用production中的environment.ts值动态添加此拦截器。

本文链接:https://www.f2er.com/3166493.html

大家都在问