@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.

More info

Installation

``sh
npm install @badisi/wdio-harness --save-dev
`

`sh
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 element
- getHarness(harnessType) - searches for an harness instance from a given ComponentHarness class
- getHarness(query) - searches for an harness instance from a given HarnessPredicate
- getAllHarnesses(query) - acts like getHarness, but returns an array of harness instances
- waitForAngular() - waits for Angular to finish bootstrapping

__Example__

`ts
import '@angular/compiler'; // required since Angular v21
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][examples].

Development

See the [developer docs][developer].

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][contributing], and learn about submission process, coding rules and more.

#### > Code of Conduct

Please read and follow the [Code of Conduct][codeofconduct] and help me keep this project open and inclusive.

[developer]: https://github.com/Badisi/wdio-harness/blob/main/DEVELOPER.md
[contributing]: https://github.com/Badisi/wdio-harness/blob/main/CONTRIBUTING.md
[codeofconduct]: https://github.com/Badisi/wdio-harness/blob/main/CODE_OF_CONDUCT.md
[examples]: https://github.com/Badisi/wdio-harness/blob/main/projects/tests-e2e/harness.e2e.ts