Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

Latest commit

 

History

History
1338 lines (928 loc) · 37.8 KB

interactors.md

File metadata and controls

1338 lines (928 loc) · 37.8 KB
Raw

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.

Table of Contents

Stripes-components

Stripes-smart-components

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