如何在赛普拉斯测试中注入 Angular 服务进行登录

Question

我开始使用赛普拉斯测试我的 Angular 应用程序。 按照赛普拉斯的建议，我想通过在每次测试时绕过登录屏幕来节省测试时间，直接调用我的 Angular LoginService。

我按照这个例子： https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/logging-in__using-app-code作为基础（但它没有使用Angular服务）。

事情是这样的：

• 我有一个 LoginService，其登录方法以用户名和密码作为输入。 它联系服务器，当登录工作时，它会在应用程序中进行一些特定的初始化，我需要在运行每个测试之前执行这些初始化。
• LoginService 依赖于另一个自定义服务，比如 MyOwnService，以及 HttpClient 服务
• MyOwnService 又依赖于 HttpClient、MatSnackBar 和 Router（它们是常规的 Angular/Material 服务）

当应用程序正常运行时（在赛普拉斯之外），由于依赖注入，所有这些服务都会自动加载。

但是，从赛普拉斯测试中，我尝试了以下方法：

import { LoginService } from '../../src/app/services/login.service'
import { MyOwnService } from 'src/app/services/my-own.service'
import { HttpClient } from '@angular/common/http'
...
it('should work', () => {
    let http = new HttpClient()
    let snackBar = new MatSnackBar()
    let router = new Router()
    let myo = new MyOwnService(http, snackBar, router)
    let ls = new LoginService(myo, http)
    cy.wrap(ls.login({username: 'foo', password: 'bar'}), {}).then(user => {
         cy.log("would be nice to reach this")
    })
})

但它很丑，它不起作用，由于各种原因，包括从 Cypress 加载时，不再找到用于在 MyOwnService 代码中导入额外包的相对路径。

你有什么建议可以让依赖注入在赛普拉斯内部工作吗？ 或任何工作代码示例？

非常感谢！

Answer 1

我找到了一种通过使用'Cypress' window 属性来解决它的方法。

1. 在登录服务构造函数中：

    if (!environment.production) { // instrument Cypress only out of PROD
      if (window['Cypress']) {
        window['LoginService'] = this
      }
    }

2. 一旦实现登录（例如，在服务器使用令牌响应时）：

    window['LoggedIn'] = true

3. 在赛普拉斯自定义登录命令中：

Cypress.Commands.add("login", (email, password, url = '/') => {
  cy.visit('/special/lightweight/component/to/route/fake/login')
  cy.window().should('have.property', 'LoginService')
  cy.window()
    .then((w) => {
      w.LoginService.login({ email, password }).subscribe(x => {
        console.log("logged in")
      })
    })
  cy.window().should('have.property', 'LoggedIn')
  cy.visit(url)
})