Angular 5 (Karma / Jasmine Testing) - Using a mock backend to mock error responses for error message


I don't quite understand how the MockBackend feature works as <a href="https://angular.io/api/http/testing/MockBackend" rel="nofollow">described over here</a>. I am completely new to Angular.

I want to program some test cases to make sure that when a server error occurs in the backend, the Angular components I have do display error messages on the frontend. That requires having HTTP requests that return errors on purpose. I am running into trouble with the jasmine-ajax and the nock packages, but someone told me about programming an instance

Even if you have an actual backend already implemented, can you still create a mock backend to test appearance of form messages which do require HTTP requests first before they are displayed?

One example is when the user is asked to fill out a sales form, and upon sending it over, the server encounters an error and sends a 500 Internal Server Error response back, which the frontend then displays a server error message.

I don't quite understand mock backends in Angular. My worry is that by having a mock backend, it will cause <em>all</em> the requests I'm making in the controllers of the components, as well as the requests made in the test cases, be issued to the <em>mock backend instead of the actual backend</em>, thereby introducing false-positive fails in my test suite.

If I program my test suite to use the MockBackend class from '@angular/http/testing', <strong>will this cause my HTTP requests on all the Angular components to be issued to that mock backend server instead of the actual server?</strong>

EDIT: This is a <a href="https://codecraft.tv/courses/angular/unit-testing/http-and-jsonp/#_using_the_code_mockbackend_code_to_simulate_a_response" rel="nofollow">case of what I'm referring to</a>. By using MockBackend, some of the tests that require sending HTTP requests to the actual server <strong>will not be sent.</strong>


Correct me if I'm wrong, judging by your description I assume you're using http module. You could consider upgrading to the <a href="https://angular.io/guide/http" rel="nofollow">httpClient</a> module, for which testing against server errors is pretty straightforward: <a href="https://angular.io/guide/http#testing-for-errors" rel="nofollow">https://angular.io/guide/http#testing-for-errors</a>

By the way unit tests should be self contained. You should mock all the dependencies (probably providers for your testing module) and not send any requests to the actual server. Both information and status codes can be mocked using <a href="https://angular.io/guide/http#testing-http-requests" rel="nofollow">http testing module</a>.


I consider mocking httpclient to be a code smell. I prefer creating my own api classes that wrap http or httpClient. Then in your unit tests you can use a jasmin spy to return data you need for your tests.

see this example <a href="https://angular.io/guide/http" rel="nofollow">https://angular.io/guide/http</a>

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class ConfigService { constructor(private http: HttpClient) { } } configUrl = 'assets/config.json'; getConfig() { return this.http.get(this.configUrl); }

then in your tests (pseudo code, don't remember the syntax):

spyOn(configService, 'getConfig').and.returnValues({data:123});


  • java.util.Scanner does not return to Prompt
  • Update statement containing aggregate not working in SQL server
  • Sending mail with ASP.NET
  • Python Beginner: How can I make text #1 look like text #2
  • Should ScheduledExecutorService.scheduleAt* methods re-schedule tasks if the task throws RuntimeExce
  • Property 'catch' does not exist on type 'PromiseLike
  • How to Cache Images Dynamically-Generated with PHP?
  • passing parameter to server in ExtJs
  • How to browse android SDK sources in Android studio 2.0
  • Peer to peer/adaptive payments with paypal [closed]
  • Is it possible to ask GIT, don't show a file?
  • How to generate an asynchronous reset verilog always blocks with chisel
  • LINQ join with filter criteria
  • css background images not always displayed
  • SQL getting multiple columns into one column
  • retrieving data from url in iphone
  • You tube videos are not playing
  • If I am creating a simple client server application in IntelliJ, how should this work?
  • How to create two column output from a single column
  • PushKit for VOIP iOS apps
  • 550 Access denied - Invalid HELO name
  • C++ pointer value changes with static_cast
  • Marklogic : Query response time is very high
  • AJAX Html Editor Extender upload image appearing blank
  • Retrieving value from sql ExecuteScalar()
  • How to convert from System.Drawing.Color to Excel.ColorFormat in C#? Change comment color
  • Window Size for Mac application
  • Hazelcast - OperationTimeoutException
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Comma separated Values
  • Matrix multiplication with MKL
  • python regex in pyparsing
  • Error creating VM instance in Google Compute Engine
  • Suggestions to manage Login/Logout transitions
  • Hits per day in Google Big Query
  • how does django model after text[] in postgresql [duplicate]
  • Authorize attributes not working in MVC 4
  • Busy indicator not showing up in wpf window [duplicate]
  • Python/Django TangoWithDjango Models and Databases
  • Net Present Value in Excel for Grouped Recurring CF