无法测试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的属性'nativeElement‘

Answer 1

您可以编写一个TestComponent来模拟您的模板周围的表(意味着它具有相同的选择器)，它只输出其中的模板。

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

更新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);
    });
}

有关内容投影的更多细节，请查看here，了解PrimeNG本身如何使用内容投影，以使用您提供的模板生成表here，这可能会有所帮助。

更新2

这是一个stackblitz，它演示了我的意思。我不想添加PrimeNG模块，因为我不知道您使用的是哪个模块，也不需要了解我所做的事情。因此，我将PrimeNG的指令(PrimeTemplate)复制到了stackblitz中。该指令用于确定所有内容子项。在您的示例中，PrimeNG组件中的所有ng-template都具有此指令。

剩下的唯一问题是，是否可以从PrimeNG导入PrimeTemplate。你需要试一试。如果PimeNG不能导出PrimeTemplate，那么您可能需要编写自己的指令，并将其添加到要测试的所有模板中。然后您可以使用自己的指令来收集ng-template。这并不是很好，因为您添加的指令只用于测试目的。所以我希望PrimeNG输出这个指令。