Cypress support for Angular component test harnesses.
npm install @hug/cypress-harness
🔬 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 pattern commonly used for integration testing.
``sh`
npm install @hug/cypress-harness --save-dev
`sh`
yarn add @hug/cypress-harness --dev
__Methods__
- getHarness(query) - searches for an harness instance from a given HarnessPredicategetAllHarnesses(query)
- - acts like getHarness, but returns an array of harness instancesgetInputHarness(filter)
- - searches for an harness instance from a MatInput qith the specified filtergetInputHarness(selector)
- - searches for an harness instance from a MatInput qith the specified selectorgetAutocompleteHarness(filter)
- - searches for an harness instance from a MatAutocomplete qith the specified filtergetAutocompleteHarness(selector)
- - searches for an harness instance from a MatAutocomplete qith the specified selectorgetListOptionHarness(filter)
- - searches for an harness instance from a MatListOption qith the specified filtergetListOptionHarness(selector)
- - searches for an harness instance from a MatListOption qith the specified selectorgetButtonHarness(filter)
- - searches for an harness instance from a MatButton qith the specified filtergetButtonHarness(selector)
- - searches for an harness instance from a MatButton qith the specified selectorgetButtonToggleGroupHarness(filter)
- - searches for an harness instance from a MatButtonToggle qith the specified filtergetButtonToggleGroupHarness(selector)
- - searches for an harness instance from a MatButtonToggle qith the specified selectorgetNavListHarness(filter)
- - searches for an harness instance from a MatNavList qith the specified filtergetNavListHarness(selector)
- - searches for an harness instance from a MatNavList qith the specified selectorgetNavListItemHarness(filter)
- - searches for an harness instance from a MatNavListItem qith the specified filtergetNavListItemHarness(selector)
- - searches for an harness instance from a MatNavListItem qith the specified selectorgetListItemHarness(filter)
- - searches for an harness instance from a MatListItem qith the specified filtergetListItemHarness(selector)
- - searches for an harness instance from a MatListItem qith the specified selectorgetCheckBoxHarness(filter)
- - searches for an harness instance from a MatCheckBox qith the specified filtergetCheckBoxHarness(selector)
- - searches for an harness instance from a MatCheckBox qith the specified selectorgetRadioButtonHarness(filter)
- - searches for an harness instance from a MatRadioButton qith the specified filtergetRadioButtonHarness(selector)
- - searches for an harness instance from a MatRadioButton qith the specified selectorgetRadioGroupHarness(filter)
- - searches for an harness instance from a MatRadioGroup qith the specified filtergetRadioGroupHarness(selector)
- - searches for an harness instance from a MatRadioGroup qith the specified selectorgetMenuHarness(filter)
- - searches for an harness instance from a MatMenu qith the specified filtergetMenuHarness(selector)
- - searches for an harness instance from a MatMenu qith the specified selectorgetMenuItemHarness(filter)
- - searches for an harness instance from a MatMenuItem qith the specified filtergetMenuItemHarness(selector)
- - searches for an harness instance from a MatMenuItem qith the specified selectorgetDatePickerInputHarness(filter)
- - searches for an harness instance from a MatDatePickerInput qith the specified filtergetDatePickerInputHarness(selector)
- - searches for an harness instance from a MatDatePickerInput qith the specified selectorgetSlideToggleHarness(filter)
- - searches for an harness instance from a MatSlideToggle qith the specified filtergetSlideToggleHarness(selector)
- - searches for an harness instance from a MatSlideToggle qith the specified selectorgetSelectHarness(filter)
- - searches for an harness instance from a MatSelect qith the specified filtergetSelectHarness(selector)
- - searches for an harness instance from a MatSelect qith the specified selectorgetOptionHarness(filter)
- - searches for an harness instance from a MatOption qith the specified filtergetOptionHarness(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 '@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].
See the [developer docs][developer].
#### > 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