Question

正如标题中所述，我正在尝试测试ng模板中的输入。问题是，我无法访问输入。如果我从ng模板中取出输入，则可以使用，但是我需要在ng模板中输入。

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模板都具有此指令。

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

无法测试ng-template中的输入

1 个答案:

更新1

更新2