Angular 7：当 <p-contextmenu> 存在时测试失败是 html答案

【问题标题】：Angular 7: Tests fails when <p-contextmenu> is present is htmlAngular 7：当 <p-contextmenu> 存在时测试失败是 html
【发布时间】：2019-09-14 03:15:15
【问题描述】：

这是我的html

<p-table #List [value]="orderLists" selectionMode="single" 
    [(selection)]="selectedOrder" [scrollable]="true"
    [(contextMenuSelection)]="selectedOrder" [contextMenu]="cm"
    scrollHeight="50vh" (onContextMenuSelect)="OnRowSelect($event)" 
    contextMenuSelectionMode="joint"
    [globalFilterFields]="['Name']"> <!--  table content -->
</p-table>
<p-contextMenu #cm [model]="contextListContextMenuItems" [target]="selectedOrder"></p-contextMenu>

这是访问上下文菜单的代码：

  ngOnInit() {
    this.logsVisible = false;
    this.contextListContextMenuItems = [{ label: 'View Order History', command: (event) => this.ShowHistory(this.selectedOrder) }];
  }

测试很基础，其实就是angular提供的开箱即用的测试模板：

    beforeEach(() => {
        fixture = TestBed.createComponent(OrderHistoryComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
  });

  it('should create', () => {
       expect(component).toBeTruthy();
  });

这是我的问题。测试失败并出现以下错误：

TypeError: element[NATIVE_ADD_LISTENER] is not a function
at DomEventsPlugin.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomEventsPlugin.addEventListener (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser/fesm5/platform-browser.js:1363:1)
at EventManager.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.EventManager.addEventListener (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser/fesm5/platform-browser.js:832:1)
at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.listen (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser/fesm5/platform-browser.js:1142:1)
at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.listen (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:24357:1)
at ContextMenu.push../node_modules/primeng/components/contextmenu/contextmenu.js.ContextMenu.ngAfterViewInit (http://localhost:9876/_karma_webpack_/webpack:/node_modules/primeng/components/contextmenu/contextmenu.js:120:1)
at callProviderLifecycles (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:22416:1)
at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:22390:1)
at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:22380:1)
at checkAndUpdateView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23316:1)
at callViewAction (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23548:1)

更新

PrimeNg 版本：7.1.3

TestBed.configureTestingModule 信息：

beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [TableModule, ContextMenuModule, DialogModule, ScrollPanelModule ],
  declarations: [OrderHistoryComponent],
  providers: [MessageService,
    {provide: OrderApiService, useClass: MockOrderApiService }, 
  ]
})
  .compileComponents(); 
}));

如果我注释掉 <p-contextMenu> 元素，它会按预期执行。在 Karma 调试窗口上，我看到上下文菜单文本“查看订单历史记录”。我还没有发出任何右键单击事件来触发上下文菜单的显示。

我做错了什么？

谢谢！

【问题讨论】：

你好像在用primeng，你的package.json是哪个版本的？您还可以从您的规范中显示 configureTestingModule 吗？它应该类似于 TestBed.configureTestingModule({ declarations: [OrderHistoryComponent], imports: [TableModule, ContextMenuModule], }) .compileComponents();
@WesleyTrantham。谢谢你！请查找更新信息。
p-table 的渲染是否依赖于来自OrderApiService 的数据？
@KarthickManoharan，不，它不依赖于OrderApiService，orderLists 是来自父级的输入值。如果我从项目中删除上下文菜单，测试会按预期运行。

标签： angular typescript

【解决方案1】：

您可以使用 schemas: [NO_ERRORS_SCHEMA] 忽略模板中的子组件

beforeEach(async(() => {
  TestBed.configureTestingModule({
  imports: [TableModule, ContextMenuModule, DialogModule, ScrollPanelModule ],
  declarations: [OrderHistoryComponent],
  providers: [MessageService,
     {provide: OrderApiService, useClass: MockOrderApiService }, 
  ],
  schemas: [NO_ERRORS_SCHEMA] // here
 }).compileComponents(); 
}));

【讨论】：

【解决方案2】：

我知道出了什么问题。我在上下文菜单中指定了一个[target]，根据primeng 文档，它说“要附加上下文菜单的元素的本地模板变量名称。”。我引用了一个实际的变量名。所以绑定永远不会发生。上下文菜单应该只是：

<p-contextMenu #cm [model]="contextListContextMenuItems"></p-contextMenu>

没有[target]="selectedOrder"

【讨论】：