javascript - 在规范文件中，如何测试以事件作为参数的组件方法？

Question

我有一个基于 primeng 代码的自动完成菜单。第一个代码块是我在组件文件中的代码。 filterBrands(event) 是我试图在单独的规范文件中测试的方法。第二 block 是 html 文件中的代码，其中包含实际页面的内容。我不太确定从哪里开始测试此方法。

组成部分:

    brands: string[] = ['Audi','BMW','Fiat','Ford','Honda','Jaguar','Mercedes','Renault','Volvo','VW'];

    filteredBrands: any[];

    brand: string;
    filterBrands(event) {
            this.filteredBrands = [];
            for(let i = 0; i < this.brands.length; i++) {
                let brand = this.brands[i];
                if(brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
                    this.filteredBrands.push(brand);
                }
            }
        }

html部分:

<p-autoComplete   header = "Brand Name" placeholder="Search Brand Name" [(ngModel)]="brand" 
     [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [minLength] = "1"
     [size] = "37" [dropdown] = "true" (input)  ="dt.filter($event.target.value,'displayName','contains')" (onSelect)="dt.filter(brand,'displayName','contains')">
 </p-autoComplete>

Answer 1

好的，首先，单元测试就是通过尽可能地将组件与其他依赖项隔离来测试组件。所以，我建议你只测试 filterBrands 的行为。功能而不用担心@Output的 completeMethod的 primeng :

it('should have "filterBrands()" pushing data',()=>{
  component.filteredBrands = [];
  const event = {query: "Au"};
  component.filterBrands(event);
  expect(component.filteredBrands.length).toBe(1);
  // and similarly more checks

})

顺便说一句，您可以通过以下方式以更多 JavaScript 方式使用它:

filterBrands(event) {
   this.filteredBrands = this.brands.filter(brand =>               
       brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0
   );
}

基本上，E2E 测试应该涵盖如何 primeng当它与您的组件集成时以及某些 keyboard 时的行为输入被提供给它。