Как в тестовом файле протестировать метод компонента, в качестве параметра которого указано событие? - PullRequest
Новая
       22

Как в тестовом файле протестировать метод компонента, в качестве параметра которого указано событие?

2 голосов
/ 25 июня 2019

У меня есть меню автозаполнения, основанное на основном коде.Первый блок кода - это то, что у меня есть в файле компонента.И filterBrands (событие) - это метод, который я пытаюсь протестировать в отдельном файле спецификаций.Второй блок - это код в 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>

1 Ответ

1 голос
/ 25 июня 2019

Хорошо, во-первых, модульное тестирование - это тестирование компонента путем его максимально возможной изоляции от других зависимостей.Итак, я бы посоветовал вам протестировать только поведение функции 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.

...