@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).
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.Example 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
▸ 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
▸ equal(expected) => void
Lose equality check using lodash isEqual.
Note: This currently does not handle sub-matching.
| Name | Type | Default Value | Description |
|---|---|---|---|
| expected | any | - | - |
void
▸ equals(expected) => void
Alias for equal
| 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. | |
| collect | boolean | false | false = return the value of the first matching content type. true = use all matching values. |
string
FAQs
interactors and matchers for bigtest
The npm package @thesoulfresh/interactors receives a total of 2 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
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.