README

@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

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

yarn add @badisi/wdio-harness --dev

Usage

Methods

createHarnessEnvironment(documentRoot) - gets a HarnessLoader instance for the given HTML element
getHarness(query) - searches for an instance of the given ComponentHarness class or HarnessPredicate
getAllHarnesses(query) - acts like getHarness, but returns an array of harness instances
waitForAngular() - waits for Angular to finish bootstrapping

Example

/** CommonJS */
// const { MatDatepickerInputHarness } = require('@angular/material/datepicker/testing');
// const { getHarness } = require('@badisi/wdio-harness');

/** ESM / Typescript */
import { MatDatepickerInputHarness } from '@angular/material/datepicker/testing';
import { getHarness, waitForAngular } from '@badisi/wdio-harness';

describe('Angular Material Harness', () => {
    beforeEach(async () => {
        await browser.url('http://localhost:4200');
        await waitForAngular();
    });

    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.

> Code of Conduct

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

Usage no npm install needed!