@thesoulfresh/interactors
Advanced tools
Interactors and matchers for use with @interactors (a.k.a. bigtest).
All interactors provided by this package work against ARIA semantics so if your tests are passing, your accessibility is also decent (though that's no replacement for actual accessibility testing).
Extends the @interactors/html:Button with
the standard interactors and actions from the
HTML interactor from this package.
Additional Filters:
testIdtestIDlabeltextroleAdditional Actions:
debugDOM Pretty print the current DOM.InteractorConstructor
▸ printElements(el) => void
Print an element DOM to the console.
| Name | Type | Default Value | Description |
|---|---|---|---|
| el | - | - |
void
Provides actions you can merge into any interactor. Gives you the following actions:
Filters you can merge into any interactor. Gives you the following filters:
An element interactor that extends the HTML interactor from @interactors/html but also adds:
'[data-testid]' Get an element by its test id.'[aria-label]' Get an element by its accessibility label.'[role]' Get by accessibility role.Function
Interact with <table> elements.
Selector: table
Locator: The aria-label or the text from the aria-labelled by of the table.
Extends: {@link HTML}
Filters:
columnCount {number} The number of columns in the table.rowCount {number} The number of rows including header rows.dataCount {number} The number of rows excluding header rows.headers {string[]} The text from each of the header columns.cellValues {string[]} The text or input value of each table cell.
This will be a multidimensional array of row and cells
(ex. [['cell value', 'cell value', 'cell value'], ['cell value', ...]...])dataValues {string[]} The same as cellValues but excluding the header cells.Actions:
debugDOM Print the interactor DOMExample Usage:
// Given the HTML
<table aria-label="Monthly Views">
<thead>
<tr>
<th>Month</th>
<th>Views</th>
</tr>
<tbody>
<tr>
<td>January</td>
<td>10</td>
</tr>
<tr>
<td>February</td>
<td>8</td>
</tr>
</tbody>
</thead>
</table>
it('should have the correct cell data.', await () => {
const table = Table('Monthly Views');
await table.has({columnCount: 2});
await table.has({rowCount: 3});
await table.has({dataCount: 2});
await table.has({cellValues: [
['Month' , 'Views'],
['January' , '10'],
['February', '8']
]);
});
any
Extends the @interactors/html:TextField with
the standard interactors and actions from the
HTML interactor from this package.
Additional Filters:
testIdtestIDlabeltextroleAdditional Actions:
debugDOM Pretty print the current DOM.InteractorConstructor
▸ matchingArray(expected) => void
Check that the contents of a list
match the given list (including order).
Order is important and all values must match.
Nested matchers are taken into account.
Similar to Jest expect(actual).toEqual(['Foo', bar, 0]).
Example:
// The `value` filter of Foo must be an array with two
// elements 'Foo' and anything else, in that order.
Foo().has({value: matchingArray(['Foo', any(Number)])});
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | any | - | The list to match against which may include sub-matchers. |
void
▸ containingArray(expected) => void
Check that an array includes the given items
in any order. Nested matchers are taken into account.
Similar to Jest expect.arrayContaining.
Example:
// The `value` filter of Foo must be an array that includes
// the strings 'Foo' and 'Bar' in any order.
Foo().has({value: containingArray(['Foo', 'Bar']);
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | any | - | - |
void
▸ matchingObject(expected) => void
Check that the expect object has all of
the same properties of the actual object.
This is most useful as a sub-matcher inside
of containingArray or matchingArray.
Nested matchers are taken into account.
Similar to Jest expect(thing).toEqual({name: 'foo'})
// The `value` filter of Foo must be an object with
// only one property. The property must be 'name'
// and its value must be the string 'foo'.
Foo().has({value: matchingObject({name: 'foo'})});
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | any | - | - |
void
▸ containingObject(expected) => void
Check that the expect object is a subset of
the properties of the actual object.
Nested matchers are taken into account.
Similar to Jest expect.objectContaining
// The `value` filter of Foo must be an object with
// only one property. The property must be 'name'
// and its value must be the string 'foo'.
Foo().has({value: {name: 'foo'}});
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | any | - | - |
void
▸ any(expected) => void
Match any type constructor in the same
manner as Jest expect.any.
For example:
TextField().has({placeholder: any(String)});
Foo().has({thing: any(Number)});
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | Function | - | A type constructor that you expect the actual value to be. |
void
▸ anything() => void
Match any value in the same manner as Jest expect.anything()
void
▸ is(expected) => void
Strict equality check (ie ===).
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | any | - | - |
void
▸ greaterThan(expected) => void
Match any number greater than the given value.
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | number | - | - |
void
▸ greaterThanOrEqualTo(expected) => void
Match any number greater than or equal to the given value.
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | number | - | - |
void
▸ greaterThanOrEqual(expected) => void
alias for greaterThanOrEqualTo
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | number | - | - |
void
▸ lessThan(expected) => void
Match any number less than the given value.
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | number | - | - |
void
▸ lessThanOrEqualTo(expected) => void
Match any number less than or equal to the given value.
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | number | - | - |
void
▸ lessThanOrEqual(expected) => void
Alias for lessThanOrEqualTo
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | number | - | - |
void
▸ elementText(element) => string
Get the text inside of an element. This is similar to the
innerText function from @interactors/core but will also
trim the text.
| Name | Type | Default Value | Description |
|---|---|---|---|
| element | HTMLElement | - | - |
string
▸ elementContent(el, checks, collect) => string
Get the "user readable" value from an element. This can include its text, aria-label, input values, etc.
This function is most useful if don't know the type of
element you are reading and it could be one of multiple
different types (ex. input or div). For example, given
an array of table cells containing plain text and inputs,
you could get the readable text for all of them using
elements.map(el => elementContent(el, ['text', 'value']).
You can customize the order that values are retrieved
and which types of content are searched for using the checks
parameter. If the element includes multiple children with the
same type of content, you can either recieve just the first
value or collect them into a comma separated string using
the collect parameter.
// Given the following HTML
<div>
<span>Hello World</span>
<input value="foo" />
<input value="bar" />
</div>
// Get the text content only...
const text = elementContent(el);
// -> 'Hello World'
// Get the input values...
const values = elementContent(el, ['value']);
// -> 'foo, bar'
// Get the input values and then the text...
const combined = elementContent(el, ['value', 'text'], true);
// -> 'foo, bar, Hello World'
| Name | Type | Default Value | Description |
|---|---|---|---|
| el | HTMLElement | - | - |
| checks | ... | The list of content types to retrieve. Your options are 'text', 'value' for inputs, 'label' for aria-label. | |
| collect | boolean | false | false = return the value of the first matching content type. true = use all matching values. |
string
▸ getLabel(el) => string
Get the label text associated with an element. If the element has multiple object that define it's label, they will be combined with a space.
| Name | Type | Default Value | Description |
|---|---|---|---|
| el | any | - | - |
string
FAQs
interactors and matchers for bigtest
The npm package @thesoulfresh/interactors receives a total of 1 weekly downloads. As such, @thesoulfresh/interactors popularity was classified as not popular.
We found that @thesoulfresh/interactors demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.