Angular测试NgZorro nz-tree：treeClick调用验证及事件数据获取问题

问题根源 #

• 测试代码选择了外层的.inbox-tree div元素，但nzClick事件绑定在<nz-tree>组件本身，点击div无法触发组件的自定义事件。
• 触发事件时使用了原生click，但NgZorro树组件暴露的是自定义nzClick事件，两者不匹配。
• 未初始化组件的nodes数据，可能导致树节点未渲染，事件绑定逻辑未生效。

修正后的测试代码 #

首先需要导入NzTreeComponent：

import { NzTreeComponent } from 'ng-zorro-antd/tree';

然后修改测试用例：

it('should trigger treeClick when nz-tree is clicked', () => {
  // 1. 初始化树数据，确保节点渲染
  component.nodes = [
    {
      title: '测试节点',
      key: 'test-node',
      isLeaf: true
    }
  ];
  fixture.detectChanges();

  // 2. 获取nz-tree组件实例（而非外层div）
  const nzTree = fixture.debugElement.query(By.directive(NzTreeComponent));
  // 也可以用选择器：By.css('nz-tree')

  // 3. 监听treeClick方法
  spyOn(component, 'treeClick');

  // 4. 触发nz-tree的nzClick事件，传入符合组件要求的事件数据
  const mockTreeEvent = {
    node: component.nodes[0],
    event: new MouseEvent('click')
  };
  nzTree.triggerEventHandler('nzClick', mockTreeEvent);

  fixture.detectChanges();

  // 5. 验证方法调用
  expect(component.treeClick).toHaveBeenCalledTimes(1);
  // 可选：验证传入的事件数据是否正确
  expect(component.treeClick).toHaveBeenCalledWith(mockTreeEvent);
});

贴近真实用户操作的替代方案 #

如果需要模拟用户点击具体树节点的行为，可以直接触发节点的原生点击事件：

it('should trigger treeClick when tree node is clicked', () => {
  component.nodes = [
    { title: '测试节点', key: 'test-node', isLeaf: true }
  ];
  fixture.detectChanges();

  spyOn(component, 'treeClick');

  // 获取渲染后的树节点元素
  const treeNode = fixture.debugElement.query(By.css('.ant-tree-node'));
  // 触发原生点击事件
  treeNode.nativeElement.click();

  fixture.detectChanges();

  expect(component.treeClick).toHaveBeenCalledTimes(1);
});

内容的提问来源于stack exchange，提问作者Alen Aju