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 => {
  ...
});