- afterMutations()
-
Runs a list of functions, pausing between each one to ensure the component has had time to re-render. Ensure that you pass
done
into the test and that you call it at the end as this will make your tests asyncronous. - getShadowRoot(component)
-
A simple helper method to retrieve a shadowRoot from a component
-
locateWebComponent(componentNamePrefix, [parentElement]) ⇒
Array.<Node>
-
locates a web component by its prefix.
Note: this is also used in protractor as a custom locator, so the signature of the method has to follow the protractor spec
- keydown(key, options)
-
Simulate a user's keydown input
- keyup(key, options)
-
Simulate a user's keyup input
- keypress(key, options)
-
Simulate a user's keypress input
- checkInvisibility(elem)
-
returns true if and only if
elem
is invisible - checkVisibility(elem)
-
returns true if and only if
elem
is visible - waitUntil(fn, timeout, step)
-
waitUntil is a testHelper to wait an arbitrary amount of time until a condition is met. It takes in a function (the condition of when to keep running) and returns a promise. This is useful when you want to make changes to a component and then ensure that it has been rendered before performing any tests. Within tests this is safe as they will automatically fail after 2000ms of not responding.
Runs a list of functions, pausing between each one to ensure the component
has had time to re-render.
Ensure that you pass done
into the test and that you call it at the end
as this will make your tests asyncronous.
Kind: global function
Param | Type | Description |
---|---|---|
fn... | function |
A list of functions to run in order. Each function is passed the return value of the last function (except for the last) |
JS Example
it('should respond to prop changes', (done) => {
afterMutations(
() => expect(component).to.be.in.some.state,
() => props(component, {propName, propValue}),
() => expect(component).to.be.in.another.state,
() -> props(component, {propName, anotherValue}),
() => expect(component).to.be.in.another.another.state,
done
);
});
A simple helper method to retrieve a shadowRoot from a component
Kind: global function
Param | Type | Description |
---|---|---|
component | Node |
A node to pull the shadowRoot from. |
JS Example
const elem = document.querySelector('.fixture').firstChild;
const sr = getShadowRoot(elem);
locates a web component by its prefix.
Note: this is also used in protractor as a custom locator, so the signature of the method has to follow the protractor spec
Kind: global function
Returns: Array.<Node>
- An array of DOM elements
Param | Type | Description |
---|---|---|
componentNamePrefix | String |
The name of the web component (will be used as a prefix) |
[parentElement] | Node |
The parent element to search in. Will use document if omitted. |
Simulate a user's keydown input
Kind: global function
Param | Type | Description |
---|---|---|
key | – the key to press, will be passed to keycode | |
options | Object |
– options for the event. |
options.target | – a DOM element to trigger the event on. Default:triggered on the document. | |
options.eventProperties | Object |
– properties to assign to the event (see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) |
Simulate a user's keyup input
Kind: global function
Param | Type | Description |
---|---|---|
key | – the key to press, will be passed to keycode | |
options | Object |
– options for the event. |
options.target | – a DOM element to trigger the event on. Default:triggered on the document. | |
options.eventProperties | Object |
– properties to assign to the event (see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) |
Simulate a user's keypress input
Kind: global function
Param | Type | Description |
---|---|---|
key | – the key to press, will be passed to keycode | |
options | Object |
– options for the event. |
options.target | – a DOM element to trigger the event on. Default:triggered on the document. | |
options.eventProperties | Object |
– properties to assign to the event (see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) |
returns true if and only if elem
is invisible
Kind: global function
Param | Description |
---|---|
elem | – the element to check |
returns true if and only if elem
is visible
Kind: global function
Param | Description |
---|---|
elem | – the element to check |
waitUntil is a testHelper to wait an arbitrary amount of time until a condition is met. It takes in a function (the condition of when to keep running) and returns a promise. This is useful when you want to make changes to a component and then ensure that it has been rendered before performing any tests. Within tests this is safe as they will automatically fail after 2000ms of not responding.
Kind: global function
Param | Default | Description |
---|---|---|
fn | function that must return true when it is time for the promise to continue | |
timeout | 2000 |
maximum amount of time waitUntil should wait before quiting (ms). |
step | 1 |
amount of time to wait between checks of the fn condition (ms). |
JS Example
const elem = document.querySelector('.fixture').firstChild;
// We put name our condition function so we can re-use it a couple of times
const elemRenderedImgTag = () => (elem.shadowRoot.querySelector('img') !== null);
// check that no image is rendered before we start
expect(elemRenderedImgTag()).to.be.false;
// set a property to make the image be rendered
elem.showImage = true;
// now wait until we can see the image rendered
waitUntil(elemRenderedImgTag).then(() => (expect(elemRenderedImgTag()).to.be.true));
// alternatively, we might want to do more things in the .then call, even chain more waitUntils
waitUntil(elemRenderedImgTag).then(() => {
expect(elemRenderedImgTag()).to.be.true;
doSomeMoreStuff(elem);
return waitUntil(someOtherConditionIsTrue());
}).then(() => {
// Now we can do more stuff in here!
});
// You can also set a maximum amount of time to wait (and how long to wait in between attempts)
waitUntil(elemRenderedImgTag, 1000, 10).then(() => (expect(elemRenderedImgTag()).to.be.true));
// this will check if the img was rendered every 10ms for up to a total of ~1 second.
Let us know what you think of our components and docs, your feedback is really important for us.
Ask a question in our forum.
Check if someone has already asked the same question before.
Are you in trouble? Let us know!