Тестирование входных данных, выходных данных и DOM
Проверяйте отображённый результат и события
«Тестирование входных данных, выходных данных и DOM» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Проверка контракта компонента
Компоненты взаимодействуют через входные параметры (данные поступают внутрь), выходные события (события передаются наружу) и отображённый DOM. Хорошие тесты работают с этими тремя поверхностями и проверяют видимый результат, а не детали внутренней реализации.
Задание входного параметра
Присвойте значение свойству входного параметра экземпляра компонента, затем вызовите detectChanges(), чтобы повторно выполнить отображение. Для входных параметров-сигналов задавайте значение через fixture.componentRef.setInput().
fixture.componentInstance.label = 'Save';
fixture.detectChanges();
// signal inputs:
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();Чтение DOM с помощью querySelector
Используйте fixture.nativeElement.querySelector(), чтобы найти отображённые элементы и проверить их текст или атрибуты.
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();
const btn = fixture.nativeElement.querySelector('button');
expect(btn.textContent.trim()).toBe('Save');DebugElement и By.css
fixture.debugElement.query(By.css(...)) возвращает оболочку DebugElement. Её .nativeElement — это узел DOM, а расширенные запросы, которые она предоставляет, работают на разных платформах.
import { By } from '@angular/platform-browser';
const de = fixture.debugElement.query(By.css('.title'));
expect(de.nativeElement.textContent).toContain('Hello');queryAll для списков
Для повторяющихся элементов (например, в цикле @for) используйте queryAll, чтобы получить все совпадения и проверить их количество.
const items = fixture.debugElement.queryAll(By.css('li'));
expect(items.length).toBe(3);
expect(items[0].nativeElement.textContent).toContain('First');Имитация нажатия
Запускайте события DOM для проверки взаимодействия. Используйте triggerEventHandler на DebugElement или вызовите собственный метод .click(), затем выполните detectChanges().
const btn = fixture.debugElement.query(By.css('button'));
btn.triggerEventHandler('click');
fixture.detectChanges();
expect(fixture.componentInstance.count).toBe(1);Проверка выходного события
Подпишитесь на выходной параметр компонента (EventEmitter или выходной сигнал) до запуска действия, которое должно вызвать его передачу.
let emitted: string | undefined;
fixture.componentInstance.saved.subscribe((v: string) => (emitted = v));
fixture.debugElement.query(By.css('button')).triggerEventHandler('click');
expect(emitted).toBe('done');Проверка атрибутов и классов
Можно проверить условные классы и атрибуты, зависящие от входных параметров.
fixture.componentRef.setInput('active', true);
fixture.detectChanges();
const el = fixture.nativeElement.querySelector('.tab');
expect(el.classList.contains('active')).toBe(true);Обновление входных полей формы
Чтобы проверить текстовые поля, задайте значение входного элемента и отправьте событие input, чтобы привязки Angular обновились.
const input = fixture.nativeElement.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(fixture.componentInstance.text).toBe('hello');Почему после каждого изменения нужен detectChanges
И тесты на основе зон, и тесты без зон требуют явного вызова detectChanges() после изменения состояния, поскольку тест выполняется вне автоматического цикла Angular. Если забыть его вызвать, утверждение чаще всего видит устаревший DOM.
Проверяйте поведение, а не внутреннее устройство
Предпочитайте проверять отображённый результат и переданные события, а не закрытые поля. Так тесты остаются устойчивыми: изменение внутренней реализации не нарушит тест, если видимое пользователю поведение осталось прежним.
Быстрая проверка
Какой API предоставляет DebugElement?
Итоги
Вы задавали входные параметры через setInput, читали DOM с помощью querySelector и By.css, получали выходные события через подписку и имитировали события нажатия и ввода. Всегда вызывайте detectChanges() после изменения и проверяйте поведение, видимое пользователю.
Часто задаваемые вопросы
Урок «Тестирование входных данных, выходных данных и DOM» бесплатный?
Да — полный текст урока «Тестирование входных данных, выходных данных и DOM» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Тестирование входных данных, выходных данных и DOM»?
Проверяйте отображённый результат и события Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Тестирование входных данных, выходных данных и DOM»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- TestBed и приспособления компонентов
- Тестирование входных данных, выходных данных и DOM
- Имитация сервисов и зависимостей
- Тестирование сигналов и асинхронного кода