1

First off, I am still learning the basics of Angular 4 as part of an internship I'm doing; this is all still new to me.

Anyway, I want to simulate an error to an actual HTTP request I'm making in the controller of an Angular component where upon doing so, I can check to see if a Bootstrap error alert appears. (let's assume it's in a div with id "updateErrorMessage") Rather than programming the backend to immediately return an error response, I want to use the Jasmine and Karma testing framework to mock it.

I can't say exactly what the component is, but a more generic one would be, for example, making a PUT request to update the individuals table on a Salesforce Industries database with JSON data from a component called "UpdateIndividualsPage."

Based on this Salesforce developer question here, and this documentation page, the boilerplate code for making the request within a component function is something like:

this.http.post("https://na7.salesforce.com/services/apexrest/clinic01/v1/individual/", this.myJSON, options).map(response => {

}).catch((error: any) => {

}).subscribe();

where upon the response holding an error, I would set

errorOccurredUponUpdatingIndividualsDatabase = true

assuming 'errorOccurredUponUpdatingIndividualsDatabase' is a property in the UpdateIndividualsPage component.

In the updateindividualspage.component.spec.ts file, nested in a describe function call, I would have the boilerplate of a test case be something like:

it('should display update error message upon sending improper data to Salesforce database', () => {
});

Essentially, the last function call in my test would be,

expect(root_Element_Of_Component.querySelector('#updateErrorMessage').innerText).toBe('Error occurred upon updating the Salesforce Industries individuals database.');

I did read some other Stackoverflow questions about creating a mock HTTP error, but I'm not entirely sure, because again, I am still new to this.

Jasmine/Karma testing Angular 5 HTTP responses

mock http request in Angular 4

In Angular 5 testing, how to mock an http error?

I did try something similar to the last test case in the initial code given in this StackOverflow question, except I am only getting "Failed: Expected one matching request for criteria ...", meaning that I have a URL mismatch.

Is there a way for this test case to send an actual HTTP request to that server, but this test framework creates a mock error response? Or do I actually need to create a MockBackend instance and have it send the error, as an HTTP response, back to the frontend, to raise the flag on errorOccurredUponUpdatingIndividualsDatabase to display the Bootstrap alert?

The backend is already implemented, by the way.

GPD21352
  • 59
  • 1
  • 13

2 Answers2

0

Among other ways, the easiest way might be to create your own backend pages that return the error codes (404 etc) for you.

Steven McConnon
  • 2,650
  • 2
  • 16
  • 21
  • Problem is, a mock backend overrides an actual backend, and that can make certain automatic test cases fail. That's unless there is a way to program the mock backend handle only certain URLs. – GPD21352 Sep 12 '18 at 16:16
  • perhaps try using different ports so the servers can run side by side? – Steven McConnon Sep 13 '18 at 01:30
0

I prefer mocking HTTP calls in unit tests. In this way, I eliminate other variables. Actually you should eliminate all other variables except component that you are testing.

For mocking HTTP calls you can use nock.

scokmen
  • 571
  • 3
  • 19
  • Can nock be used in TypeScript / Angular? From the GitHub repo, it says it's for Node.js. I made a quick search for "Angular," "Jasmine," and "TypeScript," but didn't get any results. Based on [this](https://github.com/angular/angular/issues/24235), though, I personally think it isn't. – GPD21352 Sep 07 '18 at 13:09
  • @GPD21352 yes you can. Actually, jasmine tests run on node environment. – scokmen Sep 07 '18 at 18:03
  • Ah, interesting! I'll try that! :) I forgot this: Angular runs on a Node environment too... – GPD21352 Sep 07 '18 at 18:09
  • I'm having trouble importing the function into my Typescript code. I started out with "var nock = require('nock')" and got three warnings and one error, all related to this: Module not found: Error: Can't resolve 'fs.' The three warnings point to node_modules/nock/lib, and the error points to node_modules/mkdirp. – GPD21352 Sep 07 '18 at 18:30
  • @GPD21352 nock should be devDependency and should be excluded from bundle. Can you share the code? – scokmen Sep 07 '18 at 18:50
  • For now, all I have is just this in an **it** function call [not async]. var nock = require('nock'); nock('http://delayconnection.com'). get('/'). socketDelay(2000). reply(200, 'hey'); – GPD21352 Sep 07 '18 at 19:43
  • Not sure what you mean by "bundle," by the way. – GPD21352 Sep 10 '18 at 13:47