无法使用 ng-apimock 模拟 API 调用

Posted 2023-03-09

【中文标题】无法使用 ng-apimock 模拟 API 调用

【英文标题】：Not able to mock API calls using ng-apimock

【发布时间】：2020-03-20 00:14:42

【问题描述】：

我正在尝试使用 ng-apimock 模拟对 auth0 的 api 请求，同时在角度项目中使用量角器运行 e2e 测试。在使用量角器运行 e2e 测试时，对 browser.get('/') 的请求在我打算模拟的请求（即 /authorize）之前重定向到 localhost:4200/ngApimock/init。这会导致测试在收到模拟响应之前失败。我怀疑模拟设置本身会导致这样的错误。以下是我正在使用的当前配置

poxy.config：

"domain-url-to-target": 
    "target": "http://localhost:3000/authorize",
    "secure": false,
    "logLevel": "debug"
  ,
  "/ngapimock/*": 
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  

模拟：

    "expression": "/authorize",
    "method": "POST",
    "name": "postLoginForm",
    "responses": 
        "authSucess":
        "status": "302",
        "location": "http://localhost:4200/callback/....",
        "access_token": "Mock_Access_Token",
        "expires_in": 8600,
        "id_token": "Some_id_Token",
        "scope": "openid profile email",
        "token_type:": "Bearer"
        
    
 

步骤定义：

Given('statement', async functions (<params>)
await browser.get('/');
await ngApimock.selectScenario('postLoginForm','authSucess');
);

【参考方案1】：

您的量角器启动似乎没有在 /ngapimock/* 下公开 ngApimock 模拟 API 以供量角器测试使用。据我了解，它是量角器插件用于初始化、更改场景等的 REST API。

您可能想在另一个端口下为自己提供 ngApimock 模拟。为了实现这一点，您可以在 protractor.conf.js 文件中添加一个 beforeLaunch 回调：

beforeLaunch: function () 
    serveRestMocks(XXX);
, 

... 其中 XXX 是您想要提供其余模拟的端口号，serveRestMocks 是您自己提供模拟的函数，其灵感来自自述文件中的@ng-apimock/core 教程：https://github.com/ng-apimock/core#middleware

如果您使用带有代理配置的 Angular： 尝试将以下条目添加到您的 proxy.conf.json/proxy.conf.js

"/ngapimock/*": 
    "target": "http://localhost:XXX/",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
,

其中 XXX 是端口，用于提供 ngApimock 模拟。

如果您不使用 Angular，您可能需要弄清楚如何在与量角器服务器相同的端口上提供其余模拟。您可以使用以下演示页面获得灵感：https://github.com/ng-apimock/demo/tree/master/protractor-plugin

编辑：您还需要确保将模拟从旧格式转换为新格式：

const converter = require('@ng-apimock/core').converter;
converter.convert('src', // the directory where your old mock.json files are located
                  'dest', // the directory where the converted mock files are written to
                  '**/*.json'); // the optional glob pattern (defaults to: **/*.mock.json)

...取自本指南https://github.com/ng-apimock/core/blob/master/MIGRATION.md

【参考方案2】：

为此，您必须使用代理配置将 localhost:4200/ngApimock/init 之类的调用路由到模拟服务器后端。这可以使用 mock-proxy.conf.json 来完成，在 angular.json 中配置它。请参阅Mocking and Stubbing with protractor *** 答案了解所有必需的配置和设置。