🔬 Cypress 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](https://martinfowler.com/bliki/PageObject.html) pattern commonly used for integration testing.
[More info](https://material.angular.io/cdk/test-harnesses/overview)
## Installation
```sh
npm install @DSI-HUG/cypress-harness --save-dev
```
```sh
yarn add @DSI-HUG/cypress-harness --dev
```
## Usage
__Methods__
- `getHarness(query)` - searches for an harness instance from a given HarnessPredicate
- `getAllHarnesses(query)` - acts like getHarness, but returns an array of harness instances
- `getInputHarness(filter)` - searches for an harness instance from a MatInput qith the specified filter
- `getInputHarness(selector)` - searches for an harness instance from a MatInput qith the specified selector
- `getAutocompleteHarness(filter)` - searches for an harness instance from a MatAutocomplete qith the specified filter
- `getAutocompleteHarness(selector)` - searches for an harness instance from a MatAutocomplete qith the specified selector
- `getListOptionHarness(filter)` - searches for an harness instance from a MatListOption qith the specified filter
- `getListOptionHarness(selector)` - searches for an harness instance from a MatListOption qith the specified selector
- `getButtonHarness(filter)` - searches for an harness instance from a MatButton qith the specified filter
- `getButtonHarness(selector)` - searches for an harness instance from a MatButton qith the specified selector
- `getButtonToggleGroupHarness(filter)` - searches for an harness instance from a MatButtonToggle qith the specified filter
- `getButtonToggleGroupHarness(selector)` - searches for an harness instance from a MatButtonToggle qith the specified selector
- `getNavListHarness(filter)` - searches for an harness instance from a MatNavList qith the specified filter
- `getNavListHarness(selector)` - searches for an harness instance from a MatNavList qith the specified selector
- `getNavListItemHarness(filter)` - searches for an harness instance from a MatNavListItem qith the specified filter
- `getNavListItemHarness(selector)` - searches for an harness instance from a MatNavListItem qith the specified selector
- `getListItemHarness(filter)` - searches for an harness instance from a MatListItem qith the specified filter
- `getListItemHarness(selector)` - searches for an harness instance from a MatListItem qith the specified selector
- `getCheckBoxHarness(filter)` - searches for an harness instance from a MatCheckBox qith the specified filter
- `getCheckBoxHarness(selector)` - searches for an harness instance from a MatCheckBox qith the specified selector
- `getRadioButtonHarness(filter)` - searches for an harness instance from a MatRadioButton qith the specified filter
- `getRadioButtonHarness(selector)` - searches for an harness instance from a MatRadioButton qith the specified selector
- `getRadioGroupHarness(filter)` - searches for an harness instance from a MatRadioGroup qith the specified filter
- `getRadioGroupHarness(selector)` - searches for an harness instance from a MatRadioGroup qith the specified selector
- `getMenuHarness(filter)` - searches for an harness instance from a MatMenu qith the specified filter
- `getMenuHarness(selector)` - searches for an harness instance from a MatMenu qith the specified selector
- `getMenuItemHarness(filter)` - searches for an harness instance from a MatMenuItem qith the specified filter
- `getMenuItemHarness(selector)` - searches for an harness instance from a MatMenuItem qith the specified selector
- `getDatePickerInputHarness(filter)` - searches for an harness instance from a MatDatePickerInput qith the specified filter
- `getDatePickerInputHarness(selector)` - searches for an harness instance from a MatDatePickerInput qith the specified selector
- `getSlideToggleHarness(filter)` - searches for an harness instance from a MatSlideToggle qith the specified filter
- `getSlideToggleHarness(selector)` - searches for an harness instance from a MatSlideToggle qith the specified selector
- `getSelectHarness(filter)` - searches for an harness instance from a MatSelect qith the specified filter
- `getSelectHarness(selector)` - searches for an harness instance from a MatSelect qith the specified selector
- `getOptionHarness(filter)` - searches for an harness instance from a MatOption qith the specified filter
- `getOptionHarness(selector)` - searches for an harness instance from a MatOption qith the specified selector
__Example__
```ts
import { MatDatepickerInputHarness } from '@angular/material/datepicker/testing';
import { getHarness } from '@DSI-HUG/cypress-harness';
describe('Angular Material Harness', () => {
beforeEach(async () => {
await browser.url('http://localhost:4200');
});
it('MatDatePicker - setValue()', async () => {
cy.get('#demo-datepicker-input').should('be.visible');
getDatePickerInputHarness('#demo-datepicker-input').invoke('setValue', '9/27/1954');
getDatePickerInputHarness('#demo-datepicker-input').then(async datepicker => {
expect(await datepicker.getValue()).to.equal('9/27/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/DSI-HUG/cypress-harness/blob/main/DEVELOPER.md
[contributing]: https://github.com/DSI-HUG/cypress-harness/blob/main/CONTRIBUTING.md
[codeofconduct]: https://github.com/DSI-HUG/cypress-harness/blob/main/CODE_OF_CONDUCT.md
[examples]: https://github.com/DSI-HUG/cypress-harness/blob/main/projects/tests-e2e/harness.e2e.cy.ts
