时间戳

首页 > 解决方案 > 在规范文件中，如何测试以事件为参数的组件方法？

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

问题描述

我有一个基于primeng代码的自动完成菜单。第一个代码块是我在组件文件中的内容。而 filterBrands(event) 是我试图在单独的规范文件中测试的方法。第二个块是 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>

标签： javascriptangularunit-testingkarma-jasmineprimeng

解决方案

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

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向它提供一些输入时的行为方式。

推荐阅读