无法测试 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);
    });
}

请在此处查看有关内容投影的更多详细信息，了解 PrimeNG 本身如何使用内容投影、使用您提供的模板在此处生成表格可能会有所帮助。

更新2

这是一个stackblitz，它演示了我的意思。我不想添加 PrimeNG 模块，因为我不知道您正在使用其中的哪一个，并且不需要掌握我所做的事情。因此我将 PrimeNG 的指令（PrimeTemplate）复制到 stackblitz 中。该指令用于确定所有内容子项。在您的情况下，PrimeNG 组件中的所有 ng-模板都有此指令。

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