I recently finished up on a client project developing one of the company\u2019s first Angular 2 applications, which would be the first such application to go to production. I was on a team that consisted of only two developers: one for the backend RESTful web services and myself on the frontend Angular 2 application.<\/p>\n
When we first were getting the project off the ground, I found that I needed access to the REST services before they were ready. I needed a good way to mock them up. In this situation, I set up a mock service for an Angular 2 application using MockBackend<\/a>.<\/p>\n In this article I show a step-by-step example of setting up a mock of RESTful web service APIs for an Angular 2 application using Angular\u2019s MockBackend.<\/p>\n Before we get started, let\u2019s make sure that we have everything we need to work with our example application.<\/p>\n The tutorial uses Git as its versioning system. You can check for what version of Git you have installed by running. You can download and install Git from http:\/\/git-scm.com\/download<\/a>.<\/p>\n We are also using Node.js. You can download a Node.js installer from https:\/\/nodejs.org\/en\/download\/<\/a>. You can check your version of Node.js to make sure everything installed smoothly by running the following command:<\/p>\n Now that we have those two pieces, let\u2019s clone the Change your current directory to the The last part of the setup will be to install all the necessary Node Modules with the following command:<\/p>\n Once the install is complete everything should be set up to run the Angular application from where we are going to start. Run the following command to start the application:<\/p>\n Once the application is started, go to http:\/\/localhost:8181<\/a>\u00a0and you should see the start of Angular\u2019s Tour of Heroes tutorial application. I have used this as a starting point for this tutorial and more information can be found at https:\/\/angular.io\/docs\/ts\/latest\/tutorial\/<\/a>.<\/p>\n The code is currently set up to use Angular in-memory-web-api<\/a>\u00a0for mocking all the data and API calls. This is one way to mock our calls, but exists to support the Angular documentation. Because we are going to implement First, let\u2019s remove the dependency from our Next remove the In When done, the The last bit that needs changed is the URL for the API calls. The If we start our application again, everything appears to be fine, until we go the application in our browser. Our API URL isn\u2019t pointing to anything that is real at this point. Let\u2019s change that by setting up the In First let\u2019s comment out the I am leaving the Now we need to bring in The following imports will also need to be added:<\/p>\n Next we want to define and set our mock Add the following to the providers array:<\/p>\n We also need to add the After all of that, the The application is now all setup to use So let\u2019s now tell the First, create a new directory within your app named For my applications I like to keep my mock data in a separate file from the rest of the code. For this example create a Now all we need is some data. Place the following in Now let\u2019s create the backend. Create I have labeled this as a service and will make this Injectable:<\/p>\n We start by adding a constructor for the class that will inject Now define a function called Now we tell the backend what to do. We start by taking the If we go back and look at our Let\u2019s start by mocking up the API for the list of Heroes, that way we can see our mocked backend in action.<\/p>\n In We check that the request URL does indeed match the Heroes URL, and we check that the request method is To do so we create a new Our entire Our entire We have our backend mocked up, but we haven\u2019t used it yet. For that we need to inject it into our application.<\/p>\n Open First let\u2019s add the constructor and insert our Now in our constructor we can go ahead and call start on the service:<\/p>\n We also need to tell Angular that the Here is how the The last thing we will need to do is adjust what the to<\/p>\n Now when we run The process will be the same as mocking the Below is the completed Through this entire process we have set up a mock of our RESTful Webservice APIs. We can now use that mock to work on our application before the real APIs are ready. Once we are done with the mockup, we can then dispose of our provider for the This is just one example of using the Thanks for spending your time with me, and feel free to let me know of any questions.<\/p>\nSetup<\/h2>\n
$ git --version<\/pre>\n
$ node --version<\/pre>\n
angular-mockbackend<\/code> repository located at GitHub by using the following command:<\/p>\n$ git clone https:\/\/github.com\/TLein77\/angular-mockbackend.git<\/pre>\n
angular-mockbackend<\/code>:<\/p>\n$ cd angular-mockbackend<\/pre>\n
$ npm install<\/pre>\n
$ npm start<\/pre>\n
Angular in-memory-web-api<\/h2>\n
MockBackend<\/code>, let\u2019s go ahead and pull out the code that is needed for the in-memory-web-api<\/code>.<\/p>\npackage.json<\/code>. The new dependency block will be:<\/p>\njson\r\n\"dependencies\": {\r\n \"@angular\/common\": \"~2.3.0\",\r\n \"@angular\/compiler\": \"~2.3.0\",\r\n \"@angular\/core\": \"~2.3.0\",\r\n \"@angular\/forms\": \"~2.3.0\",\r\n \"@angular\/http\": \"~2.3.0\",\r\n \"@angular\/platform-browser\": \"~2.3.0\",\r\n \"@angular\/platform-browser-dynamic\": \"~2.3.0\",\r\n \"@angular\/router\": \"~3.3.0\",\r\n \"bootstrap\": \"3.3.7\",\r\n \"core-js\": \"^2.4.1\",\r\n \"font-awesome\": \"4.6.3\",\r\n \"jquery\": \"^3.1.1\",\r\n \"reflect-metadata\": \"^0.1.8\",\r\n \"rxjs\": \"5.0.0-rc.4\",\r\n \"zone.js\": \"^0.7.2\"\r\n },<\/pre>\nin-memory-data-service.ts<\/code> file from src\/app<\/code>.<\/p>\nsrc\/app\/app.module.ts<\/code>, we need to remove the import of the InMemoryWebApiModule<\/code> and InMemoryDataService<\/code>. We also need to remove InMemoryWebApiModule.forRoot(InMemoryDataService<\/code> from the Module imports.<\/p>\napp.module.ts<\/code> should look like the following:<\/p>\njavascript\r\nimport {NgModule} from \"@angular\/core\";\r\nimport {BrowserModule} from \"@angular\/platform-browser\";\r\nimport {AppComponent} from \".\/app.component\";\r\nimport {FormsModule} from \"@angular\/forms\";\r\nimport {HeroDetailComponent} from \".\/hero-detail\/hero-detail.component\";\r\nimport {HeroesComponent} from \".\/heroes\/heroes.component\";\r\nimport {HeroService} from \".\/hero\/hero.service\";\r\nimport {DashboardComponent} from \".\/dashboard\/dashboard.component\";\r\nimport {AppRoutingModule} from \".\/app-routing.module\";\r\nimport {HttpModule} from \"@angular\/http\";\r\n\r\n@NgModule({\r\n imports: [\r\n BrowserModule,\r\n FormsModule,\r\n AppRoutingModule,\r\n HttpModule\r\n ],\r\n declarations: [\r\n AppComponent,\r\n HeroesComponent,\r\n HeroDetailComponent,\r\n DashboardComponent,\r\n ],\r\n providers: [HeroService],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {}<\/pre>\nin-memory-web-api<\/code> URLs for this app are specified as api\/heroes<\/code> in src\/app\/hero\/hero.service.ts<\/code>. By using MockBackend<\/code> we can specify the URL to be what the real URL will be, or at least what we believe it will be. Let\u2019s change the heroesUrl<\/code> to be the following:<\/p>\nprivate heroesUrl = 'http:\/\/localhost:8080\/heroes';<\/pre>\n
MockBackend<\/code>.<\/p>\nMockBackend Setup<\/h2>\n
MockBackend<\/code> is used specifically for testing the Http<\/code> service. The class is used to override providers to other backends. So let\u2019s start by editing the app.module.ts<\/code> so our applications will be using the MockBackend<\/code> instead of the Http<\/code> service.<\/p>\napp.module.ts<\/code> we should have the following:<\/p>\n@NgModule({\r\n imports: [\r\n BrowserModule,\r\n FormsModule,\r\n AppRoutingModule,\r\n HttpModule\r\n ],\r\n declarations: [\r\n AppComponent,\r\n HeroesComponent,\r\n HeroDetailComponent,\r\n DashboardComponent,\r\n ],\r\n providers: [HeroService],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {}<\/pre>\nHttpModule<\/code> in the imports array:<\/p>\njavascript\r\nimports: [\r\n BrowserModule,\r\n FormsModule,\r\n AppRoutingModule,\r\n \/\/HttpModule\r\n],<\/pre>\n
HttpModule<\/code> in for the purpose that our app will not go to production with this set up. At some point we will want this to go to the real APIs for the application, and those will use the Http<\/code> service provided by the HttpModule<\/code>.<\/p>\nMockBackend<\/code> and BaseRequestOptions<\/code> to setup our mock Http<\/code> service. Add MockBackend<\/code> and BaseRequestOptions<\/code> to the providers array:<\/p>\nMockBackend,\r\nBaseRequestOptions<\/pre>\n
import {MockBackend} from \"@angular\/http\/testing\";\r\nimport {BaseRequestOptions} from \"@angular\/http\";<\/pre>\nHttp<\/code> service in our providers<\/code> array. We specify that this is a Provider<\/code> for Http<\/code> that depends on MockBackend<\/code> and BaseRequestOptions<\/code>.<\/p>\n{\r\n provide: Http,\r\n deps: [MockBackend, BaseRequestOptions],\r\n useFactory: (backend: MockBackend, options: BaseRequestOptions) => { return new Http(backend, options); }\r\n}<\/pre>\nHttp<\/code> import:<\/p>\nimport {BaseRequestOptions, Http} from \"@angular\/http\";<\/pre>\nAppModule<\/code> code will look like the following:<\/p>\nimport {NgModule} from \"@angular\/core\";\r\nimport {BrowserModule} from \"@angular\/platform-browser\";\r\nimport {AppComponent} from \".\/app.component\";\r\nimport {FormsModule} from \"@angular\/forms\";\r\nimport {HeroDetailComponent} from \".\/hero-detail\/hero-detail.component\";\r\nimport {HeroesComponent} from \".\/heroes\/heroes.component\";\r\nimport {HeroService} from \".\/hero\/hero.service\";\r\nimport {DashboardComponent} from \".\/dashboard\/dashboard.component\";\r\nimport {AppRoutingModule} from \".\/app-routing.module\";\r\nimport {MockBackend} from \"@angular\/http\/testing\";\r\nimport {BaseRequestOptions, Http} from \"@angular\/http\";\r\n\/\/import {HttpModule} from \"@angular\/http\";\r\n\r\n@NgModule({\r\n imports: [\r\n BrowserModule,\r\n FormsModule,\r\n AppRoutingModule,\r\n \/\/HttpModule\r\n ],\r\n declarations: [\r\n AppComponent,\r\n HeroesComponent,\r\n HeroDetailComponent,\r\n DashboardComponent,\r\n ],\r\n providers: [\r\n HeroService,\r\n MockBackend,\r\n BaseRequestOptions,\r\n {\r\n provide: Http,\r\n deps: [MockBackend, BaseRequestOptions],\r\n useFactory: (backend: MockBackend, options: BaseRequestOptions) => { return new Http(backend, options); }\r\n }\r\n ],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {}<\/pre>\nCreate the MockBackend<\/h2>\n
MockBackend<\/code>. All Http<\/code> service calls will now be intercepted by the MockBackend<\/code> and processed.<\/p>\nMockBackend<\/code> what to do when it gets the API calls.<\/p>\nmock-backend<\/code>.<\/p>\nsrc\/app\/mock-backend<\/pre>\n
mock-heroes.ts<\/code>.<\/p>\nsrc\/app\/mock-backend\/mock-heroes.ts<\/pre>\n
mock-heroes.ts<\/code>:<\/p>\nexport const HEROES: any[] = [\r\n {id: 11, name: 'Mr. Nice'},\r\n {id: 12, name: 'Narco'},\r\n {id: 13, name: 'Bombasto'},\r\n {id: 14, name: 'Celeritas'},\r\n {id: 15, name: 'Magneta'},\r\n {id: 16, name: 'RubberMan'},\r\n {id: 17, name: 'Dynama'},\r\n {id: 18, name: 'Dr IQ'},\r\n {id: 19, name: 'Magma'},\r\n {id: 20, name: 'Tornado'}\r\n];<\/pre>\nmock-backend.service.ts<\/code>.<\/p>\nsrc\/app\/mock-backend\/mock-backend.service.ts<\/pre>\n
@Injectable()\r\nexport class MockBackendService {\r\n\r\n}<\/pre>\nMockBackend<\/code>:<\/p>\nconstructor(\r\n\tprivate backend: MockBackend\r\n) {}<\/pre>\nstart<\/code>. This will be how the mock backend is started for the application.<\/p>\nstart(): void {\r\n\r\n}<\/pre>\nMockBackend<\/code> we injected and subscribing to its connections. Now we can look at each connection and tell what we want to do with the connection. I also supply the URL that we will be testing for and a regular expression to tell if we are passing a hero\u2019s id.<\/p>\nthis.backend.connections.subscribe((c: MockConnection) => {\r\n\tconst URL = \"http:\/\/localhost:8080\/heroes\";\r\n\tlet heroesIdRegex = \/\\\/heroes\\\/([0-9]+)\/i;\r\n});<\/pre>\nhero.service.ts<\/code> in src\/app\/hero\/<\/code>, we see that there are two methods that are calling our API. One to return a list of all the Heroes and one to get a specific Hero by id.<\/p>\nmock-backend.service.ts<\/code>, let\u2019s look at our MockConnection<\/code> and see if it is the API call for the list of heroes. We will do two things.<\/p>\nif (c.request.url === URL && c.request.method === 0) {\r\n\r\n}<\/pre>\nGET<\/code>. If both of these are true<\/code>, the we can return the list of Heroes.<\/p>\nResponse<\/code> with the JSON of the heroes in the body of the response. Then we respond using the MockConnection\u2019s mockRespond<\/code>.<\/p>\nc.mockRespond(new Response(new ResponseOptions({\r\n\tbody: JSON.stringify(HEROES)\r\n})));<\/pre>\nstart<\/code> function should now look like the following:<\/p>\nstart(): void {\r\n this.backend.connections.subscribe((c: MockConnection) => {\r\n const URL = \"http:\/\/localhost:8080\/heroes\";\r\n let heroesIdRegex = \/\\\/heroes\\\/([0-9]+)\/i;\r\n\r\n if (c.request.url === URL && c.request.method === 0) {\r\n c.mockRespond(new Response(new ResponseOptions({\r\n body: JSON.stringify(HEROES)\r\n })));\r\n }\r\n });\r\n}<\/pre>\nmock-backend.service.ts<\/code> to this point will be:<\/p>\nimport {Injectable} from \"@angular\/core\";\r\nimport {MockBackend, MockConnection} from \"@angular\/http\/testing\";\r\nimport {HEROES} from \".\/mock-heroes\";\r\nimport {ResponseOptions, Response} from \"@angular\/http\";\r\n\r\n@Injectable()\r\nexport class MockBackendService {\r\n constructor(\r\n private backend: MockBackend\r\n ) {}\r\n\r\n start(): void {\r\n this.backend.connections.subscribe((c: MockConnection) => {\r\n const URL = \"http:\/\/localhost:8080\/heroes\";\r\n let heroesIdRegex = \/\\\/heroes\\\/([0-9]+)\/i;\r\n\r\n if (c.request.url === URL && c.request.method === 0) {\r\n c.mockRespond(new Response(new ResponseOptions({\r\n body: JSON.stringify(HEROES)\r\n })));\r\n }\r\n });\r\n }\r\n}<\/pre>\nUse the Mocked Backend<\/h2>\n
src\/app\/app.component.ts<\/code>. Let\u2019s add some code to have our mock backend start on the construction of the AppComponent<\/code>.<\/p>\nMockBackendService<\/code>:<\/p>\nconstructor(\r\nprivate mockBackendService: MockBackendService\r\n) {\r\n\r\n}<\/pre>\nthis.mockBackendService.start();<\/pre>\n
MockBackendService<\/code> is a provider<\/code>, so let\u2019s add that to our component. It will now look like this:<\/p>\n@Component({\r\n selector: 'my-app',\r\n templateUrl: 'app.component.html',\r\n styleUrls: ['app.component.css'],\r\n providers: [MockBackendService]\r\n})<\/pre>\nAppComponent<\/code> should now look:<\/p>\nimport {Component} from \"@angular\/core\";\r\nimport {MockBackendService} from \".\/mock-backend\/mock-backend.service\";\r\n\r\nimport '..\/..\/public\/css\/styles.css';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: 'app.component.html',\r\n styleUrls: ['app.component.css'],\r\n providers: [MockBackendService]\r\n})\r\nexport class AppComponent {\r\n title = 'Tour of Heroes';\r\n\r\n constructor(\r\n private mockBackendService: MockBackendService\r\n ) {\r\n this.mockBackendService.start();\r\n }\r\n}<\/pre>\nHeroService<\/code> is reading from the response to set as the Hero[]<\/code>. In the getHeroes()<\/code> and getHero(id:number)<\/code> functions, change the following:<\/p>\nresponse.json().data<\/pre>\n
response.json()<\/pre>\n
$ npm start<\/code> and open the application at http:\/\/localhost:8181<\/a>,\u00a0we can see the dashboard displaying five heroes. If we click on a hero we still won\u2019t see their details though. Let\u2019s add that next.<\/p>\ngetHeroes()<\/code> function. We are just testing that it matches the heroesIdRegex<\/code> and that the request method is GET<\/code>. We then do a little more processing to return the correct Hero.<\/p>\nMockBackendService<\/code> including the getHero<\/code> function:<\/p>\nimport {Injectable} from \"@angular\/core\";\r\nimport {MockBackend, MockConnection} from \"@angular\/http\/testing\";\r\nimport {HEROES} from \".\/mock-heroes\";\r\nimport {ResponseOptions, Response} from \"@angular\/http\";\r\n\r\n@Injectable()\r\nexport class MockBackendService {\r\n constructor(\r\n private backend: MockBackend\r\n ) {}\r\n\r\n start(): void {\r\n console.log('MockBackendService start');\r\n this.backend.connections.subscribe((c: MockConnection) => {\r\n console.log('mockConnection url:: ' + c.request.url);\r\n const URL = \"http:\/\/localhost:8080\/heroes\";\r\n let heroesIdRegex = \/\\\/heroes\\\/([0-9]+)\/i;\r\n\r\n\r\n if (c.request.url === URL && c.request.method === 0) {\r\n console.log(JSON.stringify(HEROES));\r\n c.mockRespond(new Response(new ResponseOptions({\r\n body: JSON.stringify(HEROES)\r\n })));\r\n } else if (c.request.url.match(heroesIdRegex) && c.request.method === 0) {\r\n let matches = HEROES.filter((hero) => {\r\n return hero.id === +(c.request.url.match(heroesIdRegex)[1])\r\n });\r\n c.mockRespond(new Response( new ResponseOptions({\r\n body: JSON.stringify(matches[0])\r\n })));\r\n }\r\n });\r\n }\r\n}<\/pre>\nLast Thoughts<\/h2>\n
Http<\/code> service and switch back to using the HttpModule<\/code>. Then we remove the provider from the AppComponent<\/code> and the constructor and we are back to making the real API calls.<\/p>\nMockBackend<\/code>. We can and should also use this for implementation in our unit tests.<\/p>\n