如何使用 cypress 通过 Firebase 身份验证和 Firestore 对 Angular 应用程序进行 e2e 测试答案

【问题标题】：How to e2e test an Angular app with Firebase authentication and Firestore using cypress如何使用 cypress 通过 Firebase 身份验证和 Firestore 对 Angular 应用程序进行 e2e 测试
【发布时间】：2018-12-24 10:51:24
【问题描述】：

我有一个 Angular 应用程序，它使用 Firebase 身份验证登录，然后读取数据并将数据写入 Firestore 数据库。我想为它做一些 e2e 测试。

我宁愿使用模拟数据或本地服务器编写测试。

到目前为止，我还没有找到任何本地运行 Firestore 的方法。我看到您可以使用 cy.stub 存根方法，但我不清楚如何使用 Angular2 来实现。如何获取要在其中存根方法的对象？在实际代码中，它们是在构造函数中注入的依赖项

或者用 Angular 和 Firebase (AngularFire2) 编写 Cypress e2e 测试的首选方法是什么？有什么好的推荐吗？

谢谢

【问题讨论】：

不幸的是，cy.stub() 的例子有点零碎。在 angularfire2 的情况下，您不太可能以与单元测试相同的方式存根 firestore。我确实找到了这个代码片段（没有解释性说明）Recipe for Firebase authentication。它使用 Firebase 命令行工具将数据重定向到 /cypress/fixtures。

标签： angular firebase google-cloud-firestore angularfire2 cypress

【解决方案1】：

Firebase 不提供任何本地实现；它由（我推测）大量运行在 Google 服务器上的专有代码组成。

但对于孤立的搜索环境，您可以使用第二个 Firebase 数据库，该数据库与您的真实生产 Firebase 不同。我们通过使用 Angular CLI“环境”（最近更名为“配置”）来做到这一点。使用这种机制，您可以在运行测试时使用不同的 firebase 配置，而不是用于实际部署。

我意识到这并不能提供您正在寻找的答案，而是完全在本地运行的东西；但它工作得相当好，而且很容易设置。

（另外，这与 Cypress 无关......上述内容与 Protractor 一样好。）

【讨论】：

【解决方案2】：

我知道这是一个老问题，但我最近遇到了一个类似的问题（我认为）并提出了一个到目前为止效果很好的解决方案。

如果 AngularFire2 是强类型的，您可以将应用程序对它的访问封装在服务中，然后尝试编写该服务的简单存根，该存根返回一个对象，该对象遵循与 AngularFire2 服务相同的接口。

然后您可以使用 Angular 的依赖注入和环境文件来针对存根版本运行您的 e2e 测试。

因为它是类型安全的并且依赖于 AngularFire2 自己的类型，如果它们发生变化，那么你的存根将停止编译，你将不得不更新它（这很好！）。