Сервіс підтримки тестових стендів для компонентів Angular
@badisi/wdio-harness це сторонній пакет, для отримання додаткової інформації відвідайте GitHub | npm
@badisi/wdio-harness
🔬 WebdriverIO підтримка тестових стендів для компонентів Angular.
Тестові стенди для компонентів
Стенд для компонентів - це клас, який дозволяє тесту взаємодіяти з компонентом через підтримуваний API. API кожного стенду взаємодіє з компонентом так само, як це робив би користувач. Використовуючи API стенду, тест захищає себе від оновлень внутрішньої структури компонента, таких як зміна його DOM-структури. Ідея стендів для компонентів походить від патерну PageObject, який зазвичай використовується для інтеграційного тестування.
Встановлення
npm install @badisi/wdio-harness --save-dev
yarn add @badisi/wdio-harness --dev
Використання
Методи
createHarnessEnvironment(rootElement)
- отримує екземпляр HarnessLoader з заданого елемента (за замовчуванням body)getHarness(harnessType, element)
- шукає екземпляр стенду з заданого класу ComponentHarness та елементаgetHarness(harnessType)
- шукає екземпляр стенду з заданого класу ComponentHarnessgetHarness(query)
- шукає екземпляр стенду з заданого HarnessPredicategetAllHarnesses(query)
- діє як getHarness, але повертає масив екземплярів стендівwaitForAngular()
- чекає завершення завантаження Angular
Приклад
import { MatDatepickerInputHarness } from '@angular/material/datepicker/testing';
import { getHarness } from '@badisi/wdio-harness';
describe('Angular Material Harness', () => {
beforeEach(async () => {
await browser.url('http://localhost:4200');
});
it('MatDatePicker', async () => {
const datepicker = await getHarness(MatDatepickerInputHarness.with({ selector: '#demo-datepicker-input' }));
await datepicker.setValue('9/27/1954');
expect(await datepicker.getValue()).withContext('Date should be 9/27/1954').toBe('9/27/1954');
await datepicker.openCalendar();
const calendar = await datepicker.getCalendar();
await calendar.next();
await calendar.selectCell({ text: '20' });
expect(await datepicker.getValue()).withContext('Date should be 10/20/1954').toBe('10/20/1954');
});
});
Більше прикладів тут.
Розробка
Дивіться документацію для розробників.