无法读取未定义测试的属性“MobileServiceClient”

Question

我正在尝试测试我的组件，该组件的构造函数已注入名为 AzureService 的服务

这里是组件 sn-p：

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

您可以配置您的测试替身来测试您想要的服务的确切状态，或者稍后对其进行操作。然后列出你的测试替身服务作为提供者来代替你的真实服务：

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 不会未定义。