Question

我有一个基于自动填充代码的自动完成菜单。第一个代码块是我在组件文件中拥有的代码。而filterBrands（event）是我尝试在单独的spec文件中测试的方法。第二个块是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的{{1}}中的completeMethod：

primeng

和附带说明，您可以通过以下方式以更多JavaScript方式获取它：

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

})

基本上，端到端测试应涵盖filterBrands(event) { this.filteredBrands = this.brands.filter(brand => brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0 ); }与组件集成以及向其提供某些primeng输入时的行为。

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

1 个答案: