swimlane/ngx-ui-testing

Cypress Helper commands for testing application that utilize ngx-ui.

Installation

npm install --save-dev cypress-ngx-ui-testing

Import the @swimalne/ngx-ui-testing cypress/support/index.(ts|js) file:

import '@swimlane/ngx-ui-testing';

Extended Commands

The following Cypress commands have been extended to support testing ngx-ui components:

.clear

Overwrites cy.clear to work with ngx-ui elements: ngx-codemirror, ngx-input, ngx-date-time, ngx-select, ngx-toggle, ngx-checkbox, ngx-select, ngx-slider.

.clear()
.clear(options)

---

.click

Overwrites cy.click to work with ngx-ui elements: ngx-toggle, ngx-checkbox.

.click()
.click(options)
.click(position)
.click(position, options)
.click(x, y)
.click(x, y, options)

---

.check

Overwrites cy.check to work with ngx-ui elements: ngx-toggle, ngx-checkbox, ngx-radiobutton.

.check()
.check(options)

---

.uncheck

Overwrites cy.uncheck to work with ngx-ui elements: ngx-toggle, ngx-checkbox.

.uncheck()
.uncheck(options)

---

.select

Overwrites cy.select to work with ngx-ui elements: ngx-select, ngx-dropdown. Value can the value, index, or text content of the option to be selected.

.select(value)
.select(values)
.select(value, options)
.select(values, options)

---

New Commands

The following commands have been added (with an ngx prefix) to support testing ngx-ui components:

.ngxFindNativeInput

Given an ngx-ui element, returns the child native input element. Works with: ngx-codemirror, ngx-input, ngx-date-time, ngx-toggle, ngx-checkbox, ngx-select, ngx-slider, ngx-radiobutton.

.ngxFindNativeInput()

example

cy.get('ngx-input').ngxFindNativeInput().should('have.attr', 'type');

---

.ngxFindLabel

Given an element, returns the label element. Works with: ngx-input, ngx-date-time, ngx-toggle, ngx-checkbox, ngx-select.

.ngxFindLabel()

---

.ngxGetValue

Given an element, returns the element's value. Works with: ngx-codemirror, ngx-input, ngx-date-time, ngx-toggle, ngx-checkbox, ngx-select, ngx-slider, ngx-radiobutton, ngx-radiobutton-group.

.ngxGetValue()

example

cy.get('ngx-input').ngxGetValue().should('eq', 'foo');

---

.ngxFill

Like cy.type but clears existing text before and works with ngx-ui elements: ngx-codemirror, ngx-input, ngx-date-time, ngx-select.

.ngxFill(value)
.ngxFill(value, options)

example

cy.get('ngx-input').ngxFill('foo').ngxGetValue().should('eq', 'foo');
cy.get('ngx-select').ngxFill('foo').select('foo').ngxGetValue().should('eq', 'foo');

---

.ngxOpen

Open a ngx-ui components if it is closed. Works with ngx-select, ngx-section, ngx-dropdown, ngx-plus-menu.

.ngxOpen()

---

.ngxClose

Close a ngx-ui components if it is open. Works with ngx-select, ngx-section, ngx-dropdown, ngx-plus-menu, ngx-largeformat-dialog, ngx-notification, ngx-nag, ngx-alert-dialog, ngx-drawer.

.ngxClose()

---

.ngxCloseNotifications

Close all .ngx-notifications, if any. Will not fail if no notifications are found.

.ngxCloseNotifications()

---

.ngxSelectTab

Select a tab in a .ngx-tabs component by label or index.

.ngxSelectTab('Tab 1')
.ngxSelectTab(3)

Generic Helper Commands

These are helper commands not directly related to ngx-ui.

.getByName

Find element by name attribute. Alias for cy.get(``*[name="${name}"]``)

.getByName('name')

---

.getByLabel

Find element by label either within a ngx-ui component or via the for attribute.

.getByLabel('label')

---

.getByPlaceholder

Find element by placeholder.

.getByPlaceholder('label')

---

.withinEach

Like cy.within, but for each element.

.withinEach(callbackFn)

example

cy.get('.my-inputs').withinEach(el => {
  ...
});

---

.whileHovering

Like cy.within but also forces the element into a hover state. Useful for running assertions on a notification that persist while hovering.

.whileHovering(callbackFn)

---

.iff

Like cy.within but only if the element exists in the DOM. Accepts an optional child selector.

.iff(callbackFn)
.iff(selector, callbackFn)

example

cy.get('#my-input').iff(el => {
  ...
});

cy.get('#my-input').iff('div', el => {
  ...
});

---