无法测试Ng-Template中的输入

Question

如标题中所述，我正在尝试测试NG-Template中的输入。问题是，我无法访问输入。如果我从ng-template中取出输入，则可以在NG-Template内部使用。

emp.html的代码来自PrimeFaces文档。链接：https：//www.primefaces.org/primeng/#/table过滤部分

emp.html

<ng-template pTemplate="caption">         
 <div style="text-align: right">
  <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
   <input type="text" pInputText size="50" placeholder="Global Filter" 
   (input)="dt.filterGlobal($event.target.value, 'contains')"
   style="width:auto">
 </div>
</ng-template>

emp.component.spec.ts

describe('EmpComponent', () => {
let component: EmpComponent;
let fixture: ComponentFixture<EmpComponent>;
beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [SharedModule, HttpClientTestingModule],
    declarations: [ EmpComponent, TestTableComponent ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
    providers: [
      {provide: EmpService, useClass: MockEmpService},
    ]
  })
  .compileComponents();
}));
beforeEach(() => {
  fixture = TestBed.createComponent(EmpComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});
it('should create', () => {
  expect(component).toBeDefined();
});
it('check input', fakeAsync(() => {
  tick();
  fixture.detectChanges();
  const inputElement = 
  fixture.debugElement.query(By.css('input')).nativeElement;// Here it fails
  inputElement.value = 'some value';
  inputElement.dispatchEvent(new Event('input'));
  fixture.whenStable().then(() => {
    fixture.detectChanges();
    expect(inputElement.value).toEqual('some value');
  });  
}))

它给出以下错误：无法读取null的属性"本地元素"

Answer 1

您可以编写一个testomponent，该测试程序嘲笑模板周围的表（意味着它具有相同的选择器），该表仅输出内部模板。

在您的测试中，您可以像以前一样测试所有内容。

更新1

只是为了使我之前的意思更清楚。这是testtableComponent的外观的示例。我还没有写过编辑，所以这只是一个示例，可能无法开箱即用，但是您可以了解我的意思：

@Component({
 selector: 'p-table',
 template: `<ng-content></ng-content>`
})
class TestTableComponent {
  // I haven't worked with PrimeNG before, not sure whether this type gets exported
  @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate>;
}

<ng-content></ng-content>应显示所有内容primeTemplate的内容。不过，我没有尝试过。像Primeng一样，可能有必要从PrimeTemplate元素中获取Templateref。如果是这样，您的testtablecomponent看起来会像这样：

@Component({
 selector: 'p-table',
 template: `<ng-container *ngFor="let template of templates"><ng-container *ngTemplateOutlet="template"></ng-container></ng-container>`
})
class TestTableComponent implements NgAfterContentInit{
  // I haven't worked with PrimeNG before, not sure whether this type gets exported
  @ContentChildren(PrimeTemplate) primeTemplates: QueryList<PrimeTemplate>;
  templates: TemplateRef<any>[] = [];
  ngAfterContentInit() {
    this.templates.forEach((item) => {
      this.templates.push(item.template);
    });
}

在这里查看有关内容投影的更多详细信息而且可能有助于看看Primeng本身如何使用内容投影，使用您提供的模板在此处生成表。

更新2

这是一个stackblitz，它说明了我的意思。我不想添加Primeng模块，因为我不知道您正在使用哪个模块，也不需要掌握我所做的工作。因此，我将Primeng的指令（Primetemplate）复制到Stackblitz中。该指令用于确定所有内容儿童。在您的情况下，Primeng组件中的所有ng-template都有此指令。

唯一剩下的问题是，是否可以从Primeng导入PrimeTemplate。您需要尝试一下。如果Pimeng不导出PrimeTemplate，则可能需要编写自己的指令，并将其添加到要测试的所有模板中。您可以使用自己的指令收集NG-Templates。这不会那么好，因为您只会添加一个指令才是用于测试目的。因此，我希望Primeng出口该指令。