Stripes Component Interactors

One of the advantages of having a custom design system and component library is that we don't start from scratch when writing tests that target an application using it. We know very precicesly what shape the structure the DOM will take, and we can use that knowledge to our advantage when it comes to writing tests.

For most components in the stripes-components library, there is a corresponding interactor that can be used in your tests. For example, to interact with a stripes Button in a Jest test, you would do something like the following:

import { Button, Heading } from '@folio/stripes-testing';
import { App } from '../app';

describe('My Page', () => {
  beforeEach(() => render(<App>));

  it('can click a button to reveal a secret message', async () => {
    await Button('Click Me!').click();

    await Heading('Thank You!').exists();
  });
})

You can use these interactors inside any testing framework that runs in the same runtime environment as the DOM such as Karma, Jest, Cypress, or BigTest Platform. However, they cannot be used with test runners that runs tests in a remote runtime environment that does not include the DOM under test such as Selenium, or Nightmare.

See the general guide for working with interactors for more information

How do I write interactors for my own application?

The simplest answer to this question is that in the vast majority of cases, you should not need to write your own interactors for your application.

One of the goals of the @folio/stripes-testing library is that if your application is built with stripes components, then the ability to simulate any user interaction is baked in for free. Even though your application is built out of many complex components, your user still interacts directly with the low-level input components like "button", "textfield".

What about complex, repetitive actions like filling out a form?

Sometimes there are interactions that span many different components that need to be captured so that they can be used multiple times in multiple test cases. In this instance, you might be tempted to make a custom interactor to encapsulate this process. However, consider using a simple async function instead that itself uses interactors under the hood to manipulate the actual components:

export async function Login(username, password) {
  await TextField('username').fillIn(useranme);
  await TextField({ placeholder: 'password' }).fillIn(password);
}

you can now use this function anywhere inside your test code:

beforeEach(Login('abfab', 'absolutely-fabulous'));

What if I still think that there is an interactor missing?

If an async function won't do, and you think that what's called for is an interactor, then you might have found a gap in the @stripes/testing library itself. In that case, you can follow the guide for creating a custom interactor and make a pull request to this package.

Accordion
AutoSuggest
Avatar
Badge
Button
ButtonGroup
Checkbox
Dropdown
Datepicker (Calendar Widget)
IconButton
KeyValue
Layer
List (ListItem)
MultiColumnList (MultiColumnListCell)
MultiSelect (`MultiSelectOption)
NavList
Pane (PaneHeader)
RadioButton
RichTextEditor
SearchField
Select
Selection
TextArea
TextField
Tooltip

Stripes-smart-components

AddressList
AddressEdit
EditableList
EditableListRow
EntryManager

Accordion

The accordion element

Synopsis

import { Accordion } from '@folio/stripes-testing';

Accordion('Location').is({ open: true });

Locator

Accordions are identified by their header. For example:

Accordion('Categories').exists();

Actions

clickHeader(): clicks on an accordion to either open or close it
focus: transfers focus to the open/close toggle of this accordion

Filters

id: string = the DOM element id of this accordion. The id filter is provided for debugging, but should not generally be used in tests since it is not a user-facing value
label: string = the user identifying text of this accordion. This is the same value as the locator.
open: boolean = true if this accordion is expanded, false, if not
focused: boolean = true if the keyboard focus is anywhere inside this accordion
index: number = the 0 based index of this accordion with in a pane set. So for example Accordion('Users').has({ index: 2 }) would assert that the "Users" accordion was 3rd in its accordion set.

AddressList

Renders a fieldgroup of common address form fields.

Related: AddressEdit, AddressView

Synopsis

import { AddressList } from '@folio/stripes-testing';

// expand collapsed address list
AddressList().toggleMore();

// add address to address list...
AddressList().addAddress();

// assert that Address list displays 2 addresses
AddressList().has({ count: 3 });

actions

toggleMore: clicks the expansions
clickEdit: number - clicks the edit button at the given index
addAddress: clicks the add button, exposes a new address form
deleteAddress: number - deletes the address at a given index

filters

count: number of visible address views in the list

AddressEdit

Synopsis

import { AddressEdit } from '@folio/stripes-testing';

// find address form at index 1
AddressEdit({ index: 1 });

// find address form with validation errors
AddressEdit({ error: true });

// save the values (click the save button on the address form)
AddressEdit().save();

Actions

save - Clicks the save button
cancel - Clicks the cancel button
delete - Clicks the delete button

Filters

index: number - filters by index.
error: boolean - whether or not the form contains an error.

AutoSuggest

Type-ahead suggestion list component using a text field.

Synopsis

// find via visible label
AutoSuggest('country').exists();
// fill in value to the field
AutoSuggest.fillIn('blue');

Locator

Located via the visible label text.

Filters

open: boolean = true if the avatar is rendering its fallback svg graphic.
selected: string = filter by the selected option from the suggestion list.
value: string = filter/assert by the value of the text input.

Actions

fillIn: string = focuses, fills, blurs the text field.
enterFilter: string = focuses, and fills the text field with a string (opens suggestion list).
select: string = clicks the suggestion labeled with the provided string.

Avatar

Avatar component used for displaying a profile picture.

Synopsis

// interact with a single Avatar instance...
Avatar().exists();
// interact with an avatar instance containing image with filename containing 'pic'
Avatar(including('pic')).exists();

Locator

A specific avatar can be located via the image filename, via including or matches.

Filters

placeholder: boolean = true if the avatar is rendering its fallback svg graphic.
image: boolean = true if the avatar is rendering an <img> tag.

Badge

Renders a circular icon with small text content (a number/count).

Locator

Locate via the containing text ('1').

Synopsis

// interact with a single Badge instance...
Badge().exists();
// badge containing the number 2...
Badge('2');
// assert value....
Badge.has({ value: 2 });

Locator

Locate via the text content/number within the badge.

Filters

color: string = one of primary, red, default - use with including or matches
value: string = text rendered within the badge.

Button

The Button element

Synopsis

import { Button } from '@folio/stripes-testing';

Button('Click Me').click();

Locator

Buttons are located by their text content. For example:

Button('Click Me').has({ text: 'Click Me' });

Actions

click(): clicks the button

Filters

id: string = the DOM element id of this button. The id filter is provided for debugging, but should not generally be used in tests since it is not a user-facing value
text: string = the text content of the button. This is the same value as the locator.
href: string = the href of the button, if provided
button: boolean = true if the button is a <button> button element
anchor: boolean = true if the button is a <a> anchor element
default: boolean = true if the button contains the default class
ariaLabel: string = the button's ariaLabel attribute
visible: boolean = true if the button is visible
focused: boolean = true if the button is in-focus

ButtonGroup

Component used for styling a set of buttons.

Synopsis

// click the button with the label 'holdings'
ButtonGroup().click('holdings');

Filters

buttonCount: number = number of child buttons in buttonGroup.

Actions

click: string = click the child button with the provided label.

Callout

User notification component. Informs on success/failure of actions within the system.

Synopsis

Callout('There was a problem').exists();
// check type of callout
Callout.has({ type: calloutType.error });

Filters

id: string = the id of the callout element.
type: string = one of 'success', 'error', 'info', 'warning' - different callout types that set corresponding styles to the callout.

Actions

dismiss: clicks the dismiss (X) button in the callout.

Card

Card is a presentational component representing a box of related information.

Synopsis

Card().exists();
// card with certain text exists...
Card('Card content text').exists();

Filters

headerStart: string= text contained in 'header start' element of the card.
headerEnd: string= text contained in the 'header end' element of the card.
style: string= style of the card. One of 'default' 'positive' 'negative'

Checkbox

The checkbox element

Synopsis

import { checkbox } from '@folio/stripes-testing';

Checkbox('Label').is({ checked: true });

Locator

A checkbox is identified by the label. For example:

Checkbox('Label').exists();

Actions

click: clicks on checkbox label to toggle the checked status
focus: transfers focus to the enclosing label of this checkbox
clickInput: clicks on the actual checkbox (helpful if there is no label)
clickAndBlur: clicking also focuses the checkbox, this will immediately blur after the click which will trigger the field validation

Filters

id: string = the DOM element id of this checkbox. The id filter is provided for debugging, but should not generally be used in tests since it is not a user-facing value
title: string = the element title
label: string = the user identifying text of this checkbox. This is the same value as the locator.
checked: boolean = true if this checkbox is expanded, false, if not
valid: boolean = true is valid
value: string = the checkbox value if defined
focused: boolean = true if the keyboard focus is anywhere inside this checkbox
ariaLabel: boolean = the aria label as passed via the props
ariaInvalid: boolean = true is rendered with 'true', otherwise false
feedbackText: string = the text related to the validation warning or error
hasWarning: boolean = true if the checkbox has a warning [class]
hasError: boolean = true if the checkbox has an error [class]

Datepicker

The datepicker and related elements

Datepicker (input element)

Synopsis

import { Datepicker } from '@folio/stripes-testing';

Datepicker().has({ today: true, required: true });

Locator

Datepickers can be identified by their label. For example:

Datepicker('Start Date').is({ visible: true });

Actions

openCalendar: clicks the icon that opens the calendar widget
clear: removes the value from the field
click: clicks the field
focusInput: focuses the input
fillIn(value: string): fill in a specific date value as if the user typed in the field
focus: focuses the input field
blur: blurs the input field

Filters

id: string = the DOM element id of this datepciker. The id filter is provided for debugging, but should not generally be used in tests since it is not a user-facing value
label: string = the user identifying text of this datepicker. This is the same value as the locator.
placeholder: string = the input placeholder which is a user identifying text if label is not sufficiently unique.
focused: boolean = true if the keyboard focus targets the input
warning: boolean = true if in a warning state
error: boolean = true if in an error state
inputValue: string = the value in input
inputDay: number = the day that is in the input
today: boolean = true if the date in the input is today's date
empty: boolean = true if the date in the input is cleared
visible: boolean = true if the input is visible
disabled: boolean = true if the input is disabled
readOnly: boolean = true if the input is set to read only
required: boolean = true if the input is a required field

Calendar Widget

Synopsis

import { Calendar } from '@folio/stripes-testing';

Calendar().is({ visible: true });

Locator

The calendar widget does not have a locator. Only one widget may be visible at a time.

Actions

click: clicks on the calendar widget container
focus: focuses on the calendar widget container
clickDay(value: string): clicks the day passed on the calendar widget
focusDay(value: string): focuses on a day passed within the calendar widget
setYear(value: string): sets the year passed within the year input field in the widget

Filters

today: boolean = true if the input today's date
month: string = the currently selected month
year: string = the currently selected year
days: [string, string, ...] = an array of strings representing all of the days present (and not excluded) as two digits, 03 for the third day of the month. Note that days which are shown that are not within the currently selected month are surrounded by underscores, e.g. _31_, _01_
excludedDays: [string, string, ...] = the inverse of days, an array of strings representing all of the dates that are excluded
portal: boolean = true if the widget is created within the #OverlayContainer portal
visible: boolean = true if the input is visible
focused: boolean = true if the calendar widget container is focused
focusedWithin: boolean = true if anything within the widget has focus

Dropdown

The Stripes Dropdown component

Synopsis

import { Dropdown } from '@folio/stripes-testing';

Dropdown('Menu').choose('Contact Us');

Dropdowns are identified by their label, or trigger

Dropdown('Menu').exists();

Actions

choose(optionName: string): clicks a given option in the dropdown

Filters

open: boolean = true if the dropdown is open
visible: boolean = true if the dropdown is visible
label: string = the user identifying text of this dropdown. This is the same value as the locator.

EditableList (Smart component)

Editable table component.

Synopsis

import { EditableList, ColumnHeader, TextField } from '@folio/stripes-testing';

// Assert that a particular column is present
EditableList().find(ColumnHeader('name')).exists();

// Assert that editing is disabled on rows
EditableList().has({ editDisabled: true });

// Fill in a value...
EditableListRow()
  .find(TextField(including('name')))
  .fillIn('test');

Filters

rowCount: number the number of rows in the table (includes editable rows)
addDisabled: boolean Whether or not the add button is disabled
editDisabled: boolean Whether or not the row-level edit buttons are disabled
deleteDisabled: boolean Whether or not the row-level delete buttons are disabled
addButton: boolean Whether or not the Add button is present.
editButtons: boolean Whether or not the Edit buttons are present.
deleteButtons: boolean Whether or not the Delete buttons are present.

Actions

add: clicks the add button, addint an item to the list.

EditableListRow

For use within the Editable list...

// Fill in a value...
EditableListRow().find(TextField(including('name'))).fillIn('test');

Filters

index: number the number of the row - 0-based. Defaults to 0.
saveDisabled: boolean Whether or not the save button is disabled.

Actions

edit: clicks the edit button on a non-edit row, activating edit mode.
delete: clicks the delete button on a non-edit row.
cancel: clicks the cancel button on a row in edit mode.
save: clicks the save button on a row in edit mode.

EntryManager (Smart Component)

Creates a hierarchical navigation view with links, detail pages and edit forms. Includes additional interactors for EntryForm and EntryDetails. Additional tests and assertions can also be performed using the Button and Link interactors.

Synopsis

import { EntryManager, EntryDetails, EntryForm } from '@folio/stripes-testing';

// Click the link with the 'Central Office' text
EntryManager().navTo('Central Office');

// Assert that the Entry Detail page is present.
EntryDetails(including('Central Office')).exists();

// click the save button on an EntryForm
EntryForm('Central Office').save();

Actions

EntryManager

navTo: string clicks the link in the EntryManager's navigation list with the supplied text.
createEntry: clicks the button to create a new entry.

EntryForm

save: clicks the EntryForm's 'save' button.

IconButton

The IconButton element

Synopsis

import { IconButton } from '@folio/stripes-testing';

IconButton('Close').click();

Locator

An IconButton is located by its aria-label. For example:

IconButton('Close').has({ ariaLabel: 'Close' });

Actions

focus(): sets focus on the icon button
click(): clicks the icon button

Filters

id: string = the DOM element id of this icon button. The id filter is provided for debugging, but should not generally be used in tests since it is not a user-facing value
href: string = the href of the icon button, if provided
hash: string = the hash of the icon button, if provided
button: boolean = true if the icon button is a <button> button element
anchor: boolean = true if the icon button is a <a> anchor element
ariaLabel: string = the button's ariaLabel attribute
focused: boolean = true if the button is in-focus

KeyValue

Key Value are simple label/text pairs.

Synopsis

import { KeyValue } from '@folio/stripes-testing';

KeyValue('Occupation').has({ value: 'librarian' });

Locator

KeyValue pairs are identified by their key. E.g.

KeyValue('Occupation').exists();

Filters

value: string = The value associated with the key
subValue: string = KeyValue components can have a subvalue which is a slightly less emphasized

Layer

The layer element

Synopsis

import { Layer } from '@folio/stripes-testing';
Layer('layer label').is({ visible: true });

Locator

Layers are hidden initially and more structural in nature. As such, they can be identified by visual context. This is not applicable to screen readers however so the component requires an aria-label to suit. For example:

Layer('layer label').exists();

Actions

None.

Filters

id: string = the DOM element id of this layer. The id filter is provided for debugging, but should not generally be used in tests since it is not a user-facing value
ariaLabel: string = the user identifying text of this layer. This is the same value as the locator.
visible: boolean = the state of the layer's visibility. Note that with the initial state of this element, it does not exist in the DOM, and it will be unable to find an element with { visible: false }.
focused: boolean = true if the keyboard focus is anywhere inside this layer

List

List (Container)

The list element

Synopsis

import { List } from '@folio/stripes-testing';
List('list-id').is({ count: 10 });

Locator

The List is able to be located by the id due the structural nature of the element.

List('list-id').exists();

Actions

None.

Filters

count: number = the number of items in the List, counting from 0, e.g. Array.length

ListItem

Synopsis

import { ListItem } from '@folio/stripes-testing';
ListItem('list-id').has({ index: 10 });

Locator

The ListItem is located by the text content.

ListItem('Jane Doe').exists();

Actions

click(): clicks the list item

Filters

index: number = find an item within a list based on the index

MultiColumnList

The MultiColumnList element contains two interactors: an interactor for the overall container, MultiColumnList, and an interactor that let's you target specific cells, MultiColumnListCell.

MultiColumnList (Container)

Synopsis

import { MultiColumnList } from '@folio/stripes-testing';
MultiColumnList().is({ visible: true });

Locator

The MultiColumnList is able to be located by the id due the structural nature of the element.

MultiColumnList('mcl-container').exists();

Alternatively when only one is rendered on the page, you will likely prefer to omit the locator.

MultiColumnList().exists();

Actions

clickHeader: clicks on the overall header element
scrollBy({direction: string, value: int}): scrolls the container in selected direction by the specified pixels entered as a value, will trigger the related scroll events
click({row: int, column: string}): clicks a cell within the MCL with the specified to row and column. Both row and column default to the cell in the first row and first column

Filters

id: string = the DOM element id of this layer. The id filter is provided for debugging, but should not generally be used in tests since it is not a user-facing value
columns: [string, string, ...] = an array of strings representing each column header text
headerInteractivity: [boolean, boolean, ...] = an array of boolean representing if each column header is clickable
columnCount: number = the number of columns in the MCL
rowCount: number = the number of rows in the MCL, counting from 0, e.g. Array.length
height: number = the container height, e.g. el.offsetHeight
width: number = the container width, e.g. el.offsetWidth
visible: boolean = true if the button is visible

MultiColumnListCell

Synopsis

import { MultiColumnListCell } from '@folio/stripes-testing';
MultiColumnListCell('Jane Doe').is({ content: true });

Locator

The MultiColumnListCell is located by the text content.

MultiColumnListCell('Jane Doe').is({ selected: true });

Actions

click: clicks on the cell

Filters

content: string = the content within a cell
row: number = find a cell within a row based on the index
column: string = find a cell within a column, preferred over columnIndex
columnIndex: number = find a cell within a column based on the index, prefer use of column as that is user facing
selected: boolean = true if the cell is selected
measured: boolean = if the width of the cell has been measured

MultiSelect

The MultiSelect element with autocompletion

Synopsis

import { MultiSelect } from '@folio/stripes-testing';
MultiSelect('Tags').select(['important', 'urgent']);

Locator

The MultiSelect is located by the label.

MultiSelect('Tags');

Actions

open: opens the menu with all available values
fillIn(string): filters values for selection by substring
select(string[]): selects multiple values from a menu

Filters

selected: string[] = the current selected values

NavList

Renders a list of links or buttons.

Synopsis

import { NavList } from '@folio/stripes-testing';

Navlist().has({ id: 'myNavListId' });

// assert that NavList contains 5 items
Navlist().has({ count: 5 });

Filters

count: number -number of links in the list

Actions

navTo: string -clicks a link the link with the supplied string.

Pane

Pane (Container)

The pane element

Synopsis

import { Pane } from '@folio/stripes-testing';

Pane('Search Result').is({ visible: true });

Locator

Panes are identified by their title. For example:

Pane('Search Result').exists();

Actions

dismiss: clicks on close button on the selected pane
focus: focuses the pane
blurs: blurs (removes focus of) the pane

Filters

id: string = the DOM element id of this pane. The id filter is provided for debugging, but should not generally be used in tests since it is not a user-facing value
title: string = the user identifying text of this pane. This is the same value as the locator.
subtitle: string = an additional user identifying text if needed to differentiate between panes.
focused: boolean = true if the keyboard focus is anywhere inside this pane
index: number = the 0 based index of this pane with in a pane set. So for example Pane('Users').has({ index: 2 }) would assert that the "Users" pane was 3rd in its pane set.

PaneHeader

The header element of Pane

Synopsis

import { PaneHeader } from '@folio/stripes-testing';

PaneHeader('EBSCO').is({ visible: true });

Locator

Headers are identified by their title. For example:

Pane('EBSCO').exists();

RadioButton

The RadioButton element

Synopsis

import { RadioButton } from '@folio/stripes-testing';

RadioButton('Label').is({ checked: true });

Locator

A RadioButton is identified by the label. For example:

RadioButton('Label').exists();

Actions

click: clicks on RadioButton label to toggle the checked status
focus: transfers focus to the RadioButton input
blur: blurs (removes focus of) the RadioButton

Filters

id: string = the DOM element id of this radio button. The id filter is provided for debugging, but should not generally be used in tests since it is not a user-facing value
title: string = the element title
label: string = the user identifying text of this radio button. This is the same value as the locator.
checked: boolean = true if this radio button is checked, false, if not
valid: boolean = true if the radio button is valid
value: string = the radio button value if defined
focused: boolean = true if the keyboard focus is anywhere inside this radio button
ariaLabel: boolean = the aria label as passed via the props
ariaInvalid: boolean = true is rendered with 'true', otherwise false
feedbackText: string = the text related to the validation warning or error
hasWarning: boolean = true if the radio button has a warning [class]
hasError: boolean = true if the radio button has an error [class]

RadioButtonGroup

Wrapper component for set of RadioButton components.

RadioButtonGroup('Label').exists();
// set an option (labeled 'Blue') in a RadioButtonGroup
RadioButtonGroup('Label').choose('Blue');

Locator

RadioButtonGroups are primarily selected from their label prop (rendered as a <legend>)

Filters

id: string = Dom element id of RadioButtonGroup
option: string = interact with the corresponding labeled option within the RadioButtonGroup
checkedOption: string = interact with given option (label), if checked
feedbackText: string = interact/assert against error text.

Actions

choose: string = chooses option at corresponding label.
focus: string = focuses the radio button at the corresponding label.
blur: blurs the focus from the currently focused radio button.

RepeatableField

Field component for list of objects containing the same fields/properties. Users can add or remove individual items.

Synopsis

// a RepeatableField can be located via its level/legend
const rf = RepeatableField('Modes of Issuance').exists();
// assert against the item count
rf.has({ itemCount: 2 });
// click the add button
rf.clickAddButton();
// since item fields can vary, an item can be filled in via a function...
const fillFields = (interactor) => {
  interactor.find(TextField('name')).fillIn('Thomas');
  interactor.find(Select('honorific')).chooseAndBlur('Mr');
};
rf.fillItem({ index: 1, fillFn: fillFields });

Locator

A RepeatableField can be located via its level/legend innerText.

Filters

id: string = Dom element id of the RepeatableField's fieldset.
emptyMessage: string = the empty message of the repeatable field, if present.
removeButton: boolean = whether or not the delete button is present
addButton: boolean = whether or not the add button is present
addDisabled: boolean = whether or not the add button is disabled.
remvoeDisabled: boolean = whether or not the remove button(s) is/are disabled.
itemCount: number = filter/assert against an item count.
headLabels: boolean = head labels present.

Actions

clickAddButton: clicks the add button, adding a blank item.
clickRemoveButton: number = clicks the remove button on an item at the supplied index.
fillItem: index-number, fillFn-function = fills fields within an item via the fillFn function - use additional interactors for fields.

RichTextEditor

The Rich text editor component

Synopsis

import { RichTextEditor } from '@folio/stripes-testing';

RichTextEditor('Body').has({ text: 'Note body' });

Locator

A RichTextEditor is identified by the label. For example:

RichTextEditor('Body').exists();

Actions

`fillIn(string): fills in the editor with a given value

Filters

value: string = the current value of the editor

SearchField

Stripes SearchField component for initiating queries

Synopsis

import { SearchField } from '@folio/stripes-testing';

SearchField().has({ id: 'searchFieldTest' });

Locator

A SearchField is located by ___. For example:

SearchField('Label').exists();

Actions

selectIndex(string): selects the searchable index to perform this search on. For example "users" or "locations"
fillIn(value: string): fills in the text field with a given value

Filters

id: string = the DOM element id of the contained select element. Note that this not the id of the React component. The id filter is provided for debugging, but should not generally be used in tests since it is not a user-facing value.
placeholder: string = The placeholder text of the contained input element.
value: string = the value property of the contained input element.
readOnly: boolean = true if the contained input is read-only.
disabled: boolean = true if the contained input is disabled.

Select

Stripes Select component wraps a basic <select> tag, but also has other features to integrate it with forms, including things like error states, etc..

Synopsis

import { Select } from '@folio/stripes-testing';

Select('Currency').choose('USD');

Locator

Selects are identified by their label

Select('Country').exists();

Actions

choose(optionName: string): selects the option matching option name

Filters

id: string = the DOM element id of the actual html select element. Note that this not the id of the React component. The id filter is provided for debugging, but should not generally be used in tests since it is not a user-facing value
label: string = the user identifying text of this select. This is the same value as the locator.
placeholder: string = The placeholder text of the contained select element
value: string = the value property of the select element. It will be the currently selected option
error: string = text of the error associated with this select. If there is no error, then this will be undefined
warning: string = text of the warning associated with this select. If there is no warning, then this will be undefined
valid: boolean = is this select valid?

Selection

Stripes-components Select substitute with filterable options list.

Locator

Selection components are located via their label.

Filters

id: string = DOM element id of the button which the user interacts with.
value: string = the inner text of the button, set as the value of the component.
error: string = text of the error associated with this control.
warning: string = text of the warning associated with this control.
open: boolean = whether or not the options list is open.
focused: boolean = whether or not the control is in focus.

Actions

toggle: open/close the options list.
filterOptions: string = conditionally open the list (if closed) and enter a string into the filter field.
choose: string = conditionally open the options list and choose an item corresponding to the provided label.
focus: focuses the control.

TextArea

Stripes TextArea component wraps a standard textarea element, adding support for things like controls and error states.

Synopsis

import { TextArea } from '@folio/stripes-testing';

TextArea('leave a comment').exists();

Locator

A TextArea is located by its label property:

TextArea('leave a comment').has({ text: 'leave a comment' });

Filters

id: string = the DOM element id of this textarea. The id filter is provided for debugging, but should not generally be used for tests
label: string = the label of the textarea
value: string = the current value of the textarea
error: string = text of the error associated with this textarea. If there is no error, then this will be undefined
warning: string = text of the warning associated with this textarea. If there is no warning, then this will be undefined
valid: boolean = is this textarea valid?

Actions

blur(): removes focus from the textarea
fillIn(value: string): fills in the textarea with a given value
focus(): sets focus on the textarea

TextField

Stripes TextField component wraps a standard input text element, adding support for things like controls and error states.

Synopsis

import { TextField } from '@folio/stripes-testing';

TextField('First Name').exists();

Locator

Text fields are located by their label or by the aria-label attribute overwise:

TextField('First Name').has({ label: 'First Name' });

Filters

id: string = the DOM element id of this text field. The id filter is providerd for debugging, but should not generally be used for tests
label: string = the label of the text field
type: string = the type of the text field. should always return 'text'
value: string = the current value of the text field
focused: boolean = true if the text field is currently in focus
readOnly: boolean = true if the text field is read-only
startControl: string = the text content of the startControl element
endControl: string = the text content of the endControl element
error: string = text of the error associated with this text field. If there is no error, then this will be undefined
warning: string = text of the warning associated with this text field. If there is no warning, then this will be undefined
valid: boolean = is this text field valid?

Actions

blur(): removes focus from the text field
clear(): clears the text field's current value
fillIn(value: string): fills in the text field with a given value
focus(): sets focus on the text field

Tooltip

Informational text that appears next to an element on mouseover in order to provide additional instructions

Synopsis

import { Tooltip } from '@folio/stripes-testing';

Tooltip('Throw this user to the trash').exists();

Locator

Tooltips are located by their text property:

Tooltip('save this document').has({ text: 'save this document' });

Filters

id: string = the DOM element id of this tooltip. The id filter is providerd for debugging, but should not generally be used for tests
text: string = the text of the toolip
subtext: string = subtext of the tooltip
visible: boolean = true if the tooltip is currently showing
proximity: boolean = true if this tooltip is a proximity tooltip in the DOM for the benefit of assitive technology. You should not generally need to use this filter in tests

Files

interactors.md

Latest commit

History

interactors.md

File metadata and controls

Stripes Component Interactors

How do I write interactors for my own application?

What about complex, repetitive actions like filling out a form?

What if I still think that there is an interactor missing?

Table of Contents

Stripes-components

Stripes-smart-components

Accordion

Synopsis

Locator

Actions

Filters

AddressList

Synopsis

actions

filters

AddressEdit

Synopsis

Actions

Filters

AutoSuggest

Synopsis

Locator

Filters

Actions

Avatar

Synopsis

Locator

Filters

Badge

Locator

Synopsis

Locator

Filters

Button

Synopsis

Locator

Actions

Filters

ButtonGroup

Synopsis

Filters

Actions

Callout

Synopsis

Filters

Actions

Card

Synopsis

Filters

Checkbox

Synopsis

Locator

Actions

Filters

Datepicker

Datepicker (input element)

Synopsis

Locator

Actions

Filters

Calendar Widget

Synopsis

Locator

Actions

Filters

Dropdown

Synopsis

Actions

Filters

EditableList (Smart component)

Synopsis

Filters

Actions