测试 Angular 2 中“(window:resize)”事件触发的函数

2024-04-15

我正在尝试测试由窗口调整大小事件触发的函数(使用 Karma)。在现实世界中一切正常,但是当我尝试在测试中手动触发事件时,该函数永远不会被调用。这会导致测试失败。

这是我的 HTML:

<div id="topnav" 
     class="navbar navbar-graylight header-width" 
     role="banner" 
     (window:resize)="onResize($event)"></div>

这是我的 onResize() 函数:

@Component({
  selector: "main-header",
  templateUrl: "main-header.component.html",
})
export class MainHeaderComponent {

  public itWasTriggered = false;

  public onResize(event) {
    this.itWasTriggered = true;
  }
}

这是我的测试:

it("Why is onResize() not being ran", () => { 
   const heroEl = fixture.debugElement.query(By.css(".navbar-graylight"));
   heroEl.triggerEventHandler("window:resize", null); 
   expect(comp.itWasTriggered).toBe(true);
});

这是检查器中显示的内容:

<div _ngcontent-a-1="" class="navbar navbar-graylight header-width" id="topnav" role="banner">
  <!--template bindings={}-->
  <!--template bindings={}-->
</div>

我遇到了同样的问题,我在调整大小事件触发的函数上使用 Spy 解决了它。因此,你可以这样做:

  it('should trigger onResize method when window is resized', () => {
    const spyOnResize = spyOn(component, 'onResize');
    window.dispatchEvent(new Event('resize'));
    expect(spyOnResize).toHaveBeenCalled();
  });

这会更清楚,因为您不需要建立局部变量来检测它是否被触发。 ;)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

测试 Angular 2 中“(window:resize)”事件触发的函数 的相关文章

  • ng build 无法在“History”上执行“replaceState”:无法在原始“null”和 URL 的文档中创建带有 URL 的历史状态对象

    我使用的是 Google Chrome 版本 52 我希望能够通过访问 index html 在本地运行我的应用程序 而无需服务器 我能够访问我的应用程序的登陆页面 但是 当我尝试导航到另一个页面或单击任何按钮时 它无法工作 我尝试了很多方
  • Angular 2子组件引用父组件

    我有一个包含三个组件的应用程序 应用程序 编辑视图 对话框 应用程序组件包含 EditView 组件 该组件可以包含许多其他 EditView 组件和一个 Dialog 组件 如果 Dialog 组件在页面上可见 对话框组件包含应用程序组件
  • 模拟、存根和假对象之间有什么区别[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 尽管有大量资源 但即使在 SO 上 这些 Q A 中也仅对其中两个术语进行了比较 那么 简而言之 它们各自是什么 它们之间有何关系 或者他们根本就没有
  • Jasmine 2.0 rc* 等待未定义

    刚刚升级到茉莉花2 0 rc5 from 1 3现在我所有的测试都使用了waits 被打破了 因为waits and waitsFor 函数未定义 我似乎在网上找不到任何参考 有人知道替换 wait 的新 API 是什么吗 好吧 异步调用的
  • 为带有yield的函数编写单元测试

    我正在尝试为使用生成器的函数编写单元测试 下面是我的代码 def extract data body for i in body a re sub lt lt gt str i b re sub view xc2 xa0book xc2 x
  • 跨程序集和命名空间的依赖注入

    我正在解决一个 DI 问题 我认为我了解其原因 但我需要一些建议来解决 我构建了一个与 Sql 对话的独立程序集 将此程序集称为 a 以及另一个包含业务逻辑的程序集 将此程序集称为 b 我在 b 程序集中为 db 类创建了一个接口 由于该接
  • Angular 2 中不同模块组件的通信

    我有一个组件 我希望它将数据传递给另一个模块中的另一个组件 其实我的app component是这些子模块的父模块 我希望每个子模块发送一些数据到app component 但他们只是在路由意义上才是孩子和父母 所以我猜他们实际上并不是父母
  • grunt jasmine-node 测试运行两次

    我设置 grunt 来运行 node js 茉莉花测试 由于某种原因 使用此配置 结果总是显示双倍的测试 这是我的配置 我在用着茉莉花节点 https github com jasmine contrib grunt jasmine nod
  • subject.next 不在 ngOnInit 中触发

    有谁知道为什么这段代码 从主题初始化一个值 不起作用 是否存在错误或设计使然 我究竟做错了什么 ts import Component OnInit from angular core import Subject from rxjs Co
  • Angular2 RC6 HttpModule手动注入

    我正在将一个项目从 angular2 RC4 迁移到 RC6 并且我有一个自定义表单验证器 需要Http 在迁移之前我使用了ReflectiveInjector与HTTP PROVIDERS 但是对于 RC6 这不再可能了 因为HTTP P
  • 存储库本身通常不经过测试?

    抱歉 我对存储库模式 单元测试和 orm 工具还不熟悉 我一直在研究单元测试和存储库模式 并得出一些结论 我想知道我是否正确 存储库模式有助于在使用它的控制器中替换单元测试 例如 对吧 因为创建上下文 在 EF 中 或会话 在 NH 中 的
  • 如何使用 Angular2 数据表

    找不到任何使用教程angular2 data table图书馆在这里 https github com swimlane angular2 data table https github com swimlane angular2 data
  • 解析 Angular2 中的 xml 以在视图中呈现

    我是否需要解析 xml 以从 xml 获取数据以在 html 中呈现 我目前正在使用获取本地 xml 文件http get请求并在控制台日志中显示 xml 文件中的所有信息 我认为它只是在读取它 问题是如何在angular2中将xml转换为
  • Angular 4 - 请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”

    当我在浏览器上启动 Angular 应用程序时遇到问题 一切都可以用代码说话 但我仍然收到此错误 发现合成性质 routerAnimations 请包括其中之一BrowserAnimationsModule or NoopAnimation
  • Unit::Test 与 Rspec 之间的区别 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对感兴趣Test Unit and Rspec 有人可以向我解释一下两者之间的主要区别是什么 就它们的运作原理而言 测试 单位更类似于 JUn
  • 找不到方法的私有访问器

    在 Visual Studio 2010 下使用上下文菜单生成新的单元测试时 右键单击方法名称 gt 生成单元测试 我收到此错误 Private Accessor for methodName is not found Please reb
  • ngOnChange 不存储 previousValue 属性

    Angular2 RC4 angularfire2 2 0 0 beta 2 在我的子组件中我无法获取changes posX previousValue存储任何东西 父级 html 的片段 inside ngfor loop posX c
  • 明确的控制不会处置它们——风险是什么?

    有多个线程 a https stackoverflow com questions 1757116 remove tabpage dispose or clear or both b https stackoverflow com ques
  • 角度材质选择不会检测嵌套组件生成的选项的更改

    我正在尝试提取过滤和显示我的逻辑mat option是我的mat selects 到他们自己的组件中 然而 由于某种原因 会显示选项 但单击它们不会触发事件 我正在编写的网络应用程序有很多mat select每个都可能有很多mat opti
  • SystemJS 和 ES 模块导入的相对路径

    我在使用 SystemJS 和 ES 导入语法时导入 Angular2 组件时遇到问题 项目结构 ROOT src client app frameworks il8n analytics main components pages uti

随机推荐