Unable to read property "MobileServiceClient" undefined Testing

Question

I am trying to test my component that has a constructor that introduced the AzureService service

Here is a component snippet:

constructor(private azureService: AzureService) { } 

Here is the specified file:

 beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ DashbaordComponent, StatusComponent ], providers:[ AzureService] }).compileComponents(); })); it('should create the app', async(() => { const fixture = TestBed.createComponent(DashbaordComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); 

Here is the service:

 export declare var WindowsAzure; @Injectable() export class AzureService { constructor() { this.client = new WindowsAzure.MobileServiceClient(this.azureUrl); } } 

I can’t understand why this is not important. Azure-Apps-Client library imported into index.html file:

 <script src="//zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.2.0.0.js"></script> 

Is there any way to load this library before running the test?

Anyone lead to this?

UPDATE: Here is the reason the test failed:

UPDATE: Here is the component code:

  getModules() { this.result.updateInfo("Getting classes...") this.azureService.getProgrammesByWrapper().then(((res) => { this.result.updateInfo("Sorting classes...") this.displayModules(res); this.result.updateSuccess(true); })); } 

Answer 1

Instead of using the actual service, Google’s recommended approach is to use a test double for unit testing components. Although it seems like it makes sense to load the libraries you want, the unit test should focus only on testing component code.

The sub-test component does not need to be entered by real services. In fact, it is usually better if they are test doubles (cigarette butts, fakes, spies or mock-ups). The purpose of the specification is to test the component, not the service, and real services can be unpleasant.

To create a test double service stub , define a plain old javascript object in your .spec file that contains the necessary functions or properties for the component to work in this context, for example:

 const exampleServiceStub = { getProgrammesByWrapper(): Promise<Module[]> { return Promise.resolve([ { id: 1, title: "Test Module 1", description: "Example description." }, { id: 2, title: "Test Module 2", description: "Example description." } ]); } } 

You can set up your test double to check the exact status of the service you want, or to manipulate it later. Then list your test dual service as a provider to stand in place of your real service:

 TestBed.configureTestingModule({ declarations: [ ExampleComponent ], providers: [ {provide: ExampleService, useValue: exampleServiceStub } ] }); 

If you need to contact your service in your test, make sure you get it from the injector .

Update: You can check out the example I put together on Github by demonstrating this: component / service / test with a mock service .

Good luck

Answer 2

If you really need to use this service, try the following approaches. If not, try what @SpaceFozzy has suggested.

---

Approach # 1 (if you use angular-cli)

specify scripts with

 //... "app": { //... "scritps": ["//zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.2.0.0.js"] //... } //... 

update 1:

The above in action. It turns out that config scripts not for scripts from the network, but for a local script.

If you do not want to require a script, like approach number 2, you can still install it, but refer to it with scripts . as:

 //... "app": { //... "scritps": ["node_modules/azure-mobile-apps-client/path_to_script_you_want"] //... } //... 

It may be required when someone needs to use a script tag to link to a cdn version of a script on a production site.

link: https://github.com/angular/angular-cli/wiki/stories-global-scripts

Approach No. 2

you can install azure-mobile-apps-client via npm. https://www.npmjs.com/package/azure-mobile-apps-client

Then claim it where you need it:

 var WindowsAzure = require('azure-mobile-apps-client'); // Create a reference to the Azure App Service var clientRef = new WindowsAzure.MobileServiceClient('https://YOUR-SITE-NAME.azurewebsites.net'); 

Your WindowsAzure will not be undefined.