Angular 7中的单元测试jQuery点击事件答案

【问题标题】：unit testing jquery click event in angular 7Angular 7中的单元测试jQuery点击事件
【发布时间】：2019-07-04 18:32:18
【问题描述】：

我有一个 Angular 应用程序，其中有一个 <a> 标签，看起来像这样。

<a class="add-new-item" href="javascript:void(0);" >Add Item</a>

单击此链接后，应用程序会运行一个 jquery 函数，该函数会动态地将一些 html 添加到代码中。

  $("body").on("click", ".add-new-item", function(e) {
    e.preventDefault();
    var parent = $(this).parent();
    parent.find(".item-wrapper").append(
      $(".menu-item", parent)
        .eq(0)
        .clone(true)
    );
  });

我写了下面的测试。

  it("add new item link should add a new item", () => {
    const elementDe: DebugElement = fixture.debugElement;
    const addNewDe = elementDe.query(By.css(".add-new-item"));
    const newWrapperItem = elementDe.query(By.css(".item-wrapper"));

    expect(newWrapperItem.childNodes.length).toEqual(1);
    addNewDe.nativeElement.click();
    expect(newWrapperItem.childNodes.length).toEqual(2);
  });

但这不会调用上面提到的jquery click event 导致Expected 1 to equal 2. 错误。现在我不确定这样做的正确方法是什么。

【问题讨论】：

为什么要绑定 jQuery 而不是 ng-click，为什么要使用 jQuery 创建标记而不是 Angular 生成它？
我正在使用一个用 javascript 和 html 编写的主题，我将主题转换为 Angular 并进行了最小的更改。这就是为什么它在 javascript 中。
只是吹毛求疵，但你的意思是在“jQuery”中。这都是javascript。 :)
我的意思是“jQuery”。
您的单元测试是否可以访问 jQuery？我会尝试将其更改为 $(addNewDe.nativeElement).trigger('click') 以强制创建事件。如果没有，应该有一篇关于在 vanilla javascript 中生成和调度事件的帖子。

标签： jquery angular unit-testing karma-jasmine

【解决方案1】：

解决了，

我必须在 karma.config.js 中包含 javascript 文件才能正常运行。

This question 对我来说是一个很好的起点。

【讨论】：