Постановка задачи. Предположим, у нас есть компонент с именем «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' }
    ]);
  });
});

Пошаговое объяснение приведенного выше модульного теста:

  1. Импортирует необходимые инструменты тестирования и тестируемый компонент.
  2. Настраивает тестовую среду с помощью модуля TestBed.
  3. Создает экземпляр компонента и устанавливает его начальное состояние.
  4. Имитирует заполнение и отправку формы, устанавливая значения элементов управления формы и вызывая функцию addProduct.
  5. Проверяет, добавлен ли новый продукт в список продуктов, используя функцию expect и сравнивая ожидаемые и фактические значения.