将角度添加到窗口类型定义答案

【问题标题】：Add angular to window type definition将角度添加到窗口类型定义
【发布时间】：2019-02-28 13:09:09
【问题描述】：

我正在让赛普拉斯启动并运行。我想让 Cypress 直接调用我的一些函数来检查它们的输出。

尽管在我的测试中，我似乎无法获得对 angular 的引用。我看到了一些关于向全局窗口对象添加自定义“角度”属性的信息，但我似乎仍然无法弄清楚。

https://github.com/cypress-io/cypress/issues/3068#issuecomment-454109519

基于上面的示例，我将如何创建一个自定义属性，以便我可以在 Cypress 中获取角度对象？

【问题讨论】：

标签： angular typescript cypress

【解决方案1】：

使用以下内容在cypress/support 中创建index.d.ts（例如添加一个名为ng 的属性）：

interface Window {
  ng: {
    probe: typeof import("@angular/platform-browser/src/dom/debug/ng_probe").inspectNativeElement
    // // un-comment if you need these for some reason:
    // ɵcompilerFacade: import("@angular/compiler/src/jit_compiler_facade").CompilerFacadeImpl
    // coreTokens: {
    //   ApplicationRef: import("@angular/core").ApplicationRef
    //   NgZone: import("@angular/core").NgZone
    // }
  }
}

那么你应该可以使用：

cy.get('.some-ng-element').then(($el) => {
  const el = $el[0]  // get the DOM element from the jquery element
  const win = el.ownerDocument.defaultView // get the window from the DOM element
  const component = win.ng.probe(el).componentInstance
})

【讨论】：

嗯...不起作用。我什至尝试注销win.ng，但它未定义。
哎呀，在 ownerDocument 之后忘记了 .defaultView，告诉我这是否有效
@JustinYoung 要获得更好的类型补全，请参阅扩展Window 接口的更新代码。