我有一个下面的拦截器auth-interceptor.service.ts
import {Injectable,Injector} from '@angular/core';
import {HttpErrorResponse,HttpEvent,HttpHandler,HttpInterceptor,HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {Cookie} from './cookie.service';
import {Router} from '@angular/router';
import {UserService} from './user.service';
import {ToasterService} from '../toaster/toaster.service';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private injector: Injector) {}

    private handleError(err: HttpErrorResponse): Observable<any> {
        let errorMsg;
        if (err.error instanceof Error) {
            // A client-side or network error occurred. Handle it accordingly.
            errorMsg = `An error occurred: ${err.error.message}`;
        } else {
            // The backend returned an unsuccessful response code.
            // The response body may contain clues as to what went wrong,errorMsg = `Backend returned code ${err.status},body was: ${err.error}`;
        }
        if (err.status === 401 || err.status === 403) {
            this.injector.get(UserService).purgeAuth();
            this.injector.get(ToasterService).showError(`Unauthorized`,errorMsg);
            this.injector.get(Router).navigateByUrl(`/login`);
        }
        console.error(errorMsg);
        return Observable.throw(errorMsg);
    }

    intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
        // Clone the request to add the new header.
        const authReq = req.clone({headers: req.headers.set(Cookie.tokenKey,Cookie.getToken())});
        // Pass on the cloned request instead of the original request.
        return next.handle(authReq).catch(err => this.handleError(err));
    }
}

现在我试图模拟http.get来抛出错误,因此方法handleError控制错误消息.

下面是我对测试用例auth-interceptor.service.specs.ts的方法

import {async,inject,Testbed} from '@angular/core/testing';

import {AuthInterceptor} from './auth-interceptor.service';
import {ApiService} from './api.service';
import {HttpClientTestingModule,HttpTestingController} from '@angular/common/http/testing';
import {environment} from '../../../environments/environment';

describe(`AuthInterceptor`,() => {
    const somePath = `/somePath`;

    beforeEach(() => {
        Testbed.configureTestingModule({
            imports: [HttpClientTestingModule],providers: [AuthInterceptor,ApiService]
        });
    });

    it(`should be created`,inject([AuthInterceptor],(service: AuthInterceptor) => {
        expect(service).toBeTruthy();
    }));


    it(`should log an error to the console on error on get()`,async(inject([ApiService,HttpTestingController],(apiService: ApiService,httpMock: HttpTestingController) => {
            spyOn(console,'error');
            apiService.get(somePath).subscribe((res) => {
                console.log(`in success:`,res);
            },(error) => {
                console.log(`in error:`,error);
            });

            const req = httpMock.expectOne(`${environment.apiUri}${somePath}`);
            req.flush({
                type: 'ERROR',status: 404,body: JSON.stringify({color: `blue`})
            });
            expect(console.error).toHaveBeenCalled();
        }))
    );
});

在刷新响应时,我不确定如何刷新错误响应,以便在我的拦截器中调用方法handleError,最终调用console.error.文档没有我的情况的任何例子.任何帮助或建议表示赞赏.

HttpTestingController类中的expectOne方法返回一个TestRequest对象.此TestRequest类具有可用于传递的flush方法

both successful and unsuccessful responses.

我们可以通过返回一个正文以及一些额外的响应头(如果有的话)来解决请求.相关信息可以在here找到.

现在,回过头来说明如何做到这一点.您可以根据您的使用情况自定义以下代码段.

http = Testbed.get(HttpTestingController);
let response:any;
let errResponse: any;
const mockerrorResponse = {
    status: 404,statusText: 'Bad Request'
};
const data = 'Invalid request parameters';
apiService.get(somePath).subscribe(res => response=res,err => errResponse=err);
http.expectOne('url/being/monitored').flush(data,mockerrorResponse);
expect(errResponse).toBe(data);

注意:在撰写此注释时,mockerrorResponse中需要statusText.相关信息可以在here找到.

P.S.:TestRequest类的错误方法可用于在我们的测试用例中模拟网络错误,因为它需要一个Error实例.以下代码段显示了这一点.

http.expectOne(someUrl).error(new ErrorEvent('network error'));

如何在测试中模拟Angular 4.3 httpClient的错误响应的更多相关文章

  1. ios – 使用MonoTouch,HttpClient和Charles Proxy时的HTTP流量监控问题

    我是HttpClient类的新手,我遇到了使用CharlesProxy监视请求的问题.基本上我需要的是监视从模拟器或实际iOS设备发出的请求.Here您可以找到有关如何配置CharlesforiOS开发的精彩教程.我正在制作简单的HttpClient请求,只是一个简单的授权代码有效,用户正在被授权,并且正在返回承载令牌.但是问题是,我在模拟器上的请求没有出现在Charleshttp流量监控列表中.

  2. 开发Swift iOS应用程序“正确的方式”

    最近,我学习了Swift和开发iOS应用程序的基础知识。现在,我想自己开发一个真正的应用程序,但我非常关心编写好的代码,所以我已经寻找“最佳实践”,“设计模式”和“正确的方式”来实现它。在我的搜索中,我发现这个greattutorial关于SwiftiOS应用程序中通常使用的所有设计模式,以及他们使用的示例。不应该将httpClient和persistencyManager声明为协议,然后HttpClient和PersistencyManager类实现该协议?我应该在哪里告诉应用程序?最后但并非最不重要的

  3. android – 用我非常简单的calabash测试用例不断得到错误“HTTPClient :: ReceiveTimeoutError”

    我是calabash-android测试自动化库的新手.我花了两天时间来理解这个问题没有成功:(我正在使用calabash-android版本0.8.0,我按照文档pre-definedsteps进行测试.我的测试很简单,只需等待登录界面(这是一个包含id为“email_field”的输入字段的活动),输入用户名和密码.这是我在功能文件中的步骤:当我使用命令calabash-android运行my

  4. Android httpclient – 获取具有抢先身份验证的文件

    我使用此示例代码获取网站的HTML代码时遇到问题.http://svn.apache.org/repos/asf/httpcomponents/httpclient/branches/4.0.x/httpclient/src/examples/org/apache/http/examples/client/ClientPreemptiveBasicAuthentication.java我必须使用上

  5. Android Studio是否支持用于Android UI设计的AngularJS?

    我对AndroidStudio有疑问:AS在设计XML文件时是否支持AngularJS代码,例如:对于小动画或效果?

  6. android – 如何使用ClientID和ClientSecret在Phonegap中使用Angularjs登录Google OAuth2

    我正尝试使用Angularjs(使用IonicFramework)通过GoogleOAuth2从我的Phonegap应用程序登录.目前我正在使用http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html进行登录.但是当我使用Angular-UI-RouterforIonic时,它正在创建非常

  7. Android无法访问org.apache.http.client.HttpClient

    我正在使用androidstudio创建一个向服务器发出GET请求的应用程序.我的代码是这样的:问题是AndroidStudio标记了这一行有错误:说“无法访问org.apache.http.client.HttpClient”这是我的gradle文件:解决方法在AndroidSDK23中不推荐使用HttpClient,因为它推断,您可以在HttpURLConnection中迁移代码https:/

  8. Android HttpClient,DefaultHttpClient,HttpPost

    我如何将字符串数据(JSONObject.toString())发送到URL.我想在util类中编写一个静态方法来执行此操作.我希望方法签名如下publicstaticStringpostData(Stringurl,StringpostData)抛出SomeCustomException字符串url的格式应该是什么返回String是来自服务器的响应,作为json数据的字符串表示.编辑目前的连接工

  9. Android:HTTPClient

    我正在从svn.apache.org尝试http-cleint教程.在运行应用程序时,我在控制台中收到以下错误.我在AndroidManifest.xml中添加了android.permission.INTERNET.HalloAndroid.java中的java代码如下任何帮助深表感谢.解决方法问题解决了.AndroidManifest.xml文件中的这一行导致了麻烦.

  10. android – 同时使用多个AsyncTasks的HttpClient请求

    我正在开发一个需要同时下载多个文件的应用程序.我正在为每个文件创建一个具有自己的HttpClient的AsyncTask,但是下一个文件只有在上一个文件完成后才开始下载.可能是服务器端的问题吗?

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部