无法阅读属性＆＃39; MobileServiceClient＆＃39;未定义的测试

Question

我正在尝试测试具有已注入名为AzureService

服务的构造函数的组件

以下是组件摘要：

constructor(private azureService: AzureService) { }

以下是规范文件：

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();
  }));

以下是服务：

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

我无法理解为什么在index.html文件中导入的Azure-Apps-Client库并不重要：

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

我可以在运行测试之前加载这个库吗？

任何导致这个？

更新：以下是测试失败的原因：

更新：以下是组件代码：

  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

建议的方法by Google，而不是使用实际服务，是使用test-double进行单元测试组件。虽然加载所需的库似乎是有意义的，但单元测试应该只关注测试组件代码。

  

被测组件不必注入真实服务。事实上，如果它们是测试双打（存根，假货，间谍或嘲笑）通常会更好。规范的目的是测试组件，而不是服务，真正的服务可能会有麻烦。

要创建服务的测试双stub，请在.spec文件中定义一个普通的旧javascript对象，其中包含组件在此上下文中工作所需的函数或属性，如此：

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." }
    ]);
  }
}

您可以配置test-double来测试您想要的服务的确切状态，或稍后进行操作。然后将您的测试双重服务列为提供者，代替您的真实服务：

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

如果您需要在测试中参考您的服务，请务必get it from the injector。

<强>更新 您可以查看我在Github上放在一起的示例：component / service / test with a mock service。

祝你好运！

Answer 2

如果您确实需要使用该服务，请尝试以下方法。如果没有，请尝试@SpaceFozzy建议的内容。

方法＃1（如果使用angular-cli）

使用

指定scripts

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

更新1：

以上内容有效。事实证明，scripts配置不适用于网络脚本，而适用于本地脚本。

如果您不想要像方法＃2那样需要脚本，您仍然可以安装它，但可以从scripts引用它。像：

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

当有人需要使用脚本标记来引用生产网站上的cdn-version脚本时，可能需要这样做。

  

参考：https://github.com/angular/angular-cli/wiki/stories-global-scripts

方法＃2

您可以通过npm安装azure-mobile-apps-client。 https://www.npmjs.com/package/azure-mobile-apps-client

然后在任何需要的地方都需要它：

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');

您的WindowsAzure未定义。