Support for Angular component test harnesses Service
@badisi/wdio-harness is a 3rd party package, for more information please see GitHub | npm
@badisi/wdio-harness
🔬 WebdriverIO support for Angular component test harnesses.
Component test harnesses
A component harness is a class that lets a test interact with a component via a supported API. Each harness's API interacts with a component the same way a user would. By using the harness API, a test insulates itself against updates to the internals of a component, such as changing its DOM structure. The idea for component harnesses comes from the PageObject pattern commonly used for integration testing.
Installation
npm install @badisi/wdio-harness --save-dev
yarn add @badisi/wdio-harness --dev
Usage
Methods
createHarnessEnvironment(rootElement)
- gets a HarnessLoader instance from a given element (defaults to body)getHarness(harnessType, element)
- searches for an harness instance from a given ComponentHarness class and elementgetHarness(harnessType)
- searches for an harness instance from a given ComponentHarness classgetHarness(query)
- searches for an harness instance from a given HarnessPredicategetAllHarnesses(query)
- acts like getHarness, but returns an array of harness instanceswaitForAngular()
- waits for Angular to finish bootstrapping
Example
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');
});
});
More examples here.
Development
See the developer docs.
Contributing
> Want to Help ?
Want to file a bug, contribute some code or improve documentation ? Excellent!
But please read up first on the guidelines for contributing, and learn about submission process, coding rules and more.