Постановка задачи. Предположим, у нас есть компонент с именем «ProductListComponent», который отображает список продуктов и позволяет пользователям добавлять новые продукты в список. Компонент имеет следующие особенности:
- Он отображает список продуктов, которые передаются ему в качестве входных данных.
- Он имеет форму, которая позволяет пользователям вводить название, цену и описание нового продукта.
- При отправке формы компонент добавляет новый товар в список товаров и очищает форму.
Пример модульного теста, который проверяет, что поведение отправки формы компонента работает правильно:
import { TestBed, async } from '@angular/core/testing'; import { ProductListComponent } from './product-list.component'; describe('ProductListComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ ProductListComponent ], }).compileComponents(); })); it('should add a new product to the list when the form is submitted', () => { const fixture = TestBed.createComponent(ProductListComponent); const component = fixture.componentInstance; // Set up the initial state of the component component.products = [ { name: 'Product 1', price: 10, description: 'Description 1' }, { name: 'Product 2', price: 20, description: 'Description 2' } ]; fixture.detectChanges(); // Simulate filling out and submitting the form component.newProductForm.controls.name.setValue('Product 3'); component.newProductForm.controls.price.setValue(30); component.newProductForm.controls.description.setValue('Description 3'); component.addProduct(); // Verify that the new product was added to the list expect(component.products).toEqual([ { name: 'Product 1', price: 10, description: 'Description 1' }, { name: 'Product 2', price: 20, description: 'Description 2' }, { name: 'Product 3', price: 30, description: 'Description 3' } ]); }); });
Пошаговое объяснение приведенного выше модульного теста:
- Импортирует необходимые инструменты тестирования и тестируемый компонент.
- Настраивает тестовую среду с помощью модуля
TestBed
. - Создает экземпляр компонента и устанавливает его начальное состояние.
- Имитирует заполнение и отправку формы, устанавливая значения элементов управления формы и вызывая функцию
addProduct
. - Проверяет, добавлен ли новый продукт в список продуктов, используя функцию
expect
и сравнивая ожидаемые и фактические значения.