akutil-common-test

Common test utilities for AtlasKit

Functions

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, target)

Simulate a user's keydown input

keyup(key, target)

Simulate a user's keyup input

keypress(key, target)

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.

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.

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
   );
 });

getShadowRoot(component)

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);

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

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.

keydown(key, target)

Simulate a user's keydown input

Kind: global function

Param	Description
key	– the key to press, will be passed to keycode
target	– a DOM element to trigger the event on. If undefined, triggered on the document.

keyup(key, target)

Simulate a user's keyup input

Kind: global function

Param	Description
key	– the key to press, will be passed to keycode
target	– a DOM element to trigger the event on. If undefined, triggered on the document.

keypress(key, target)

Simulate a user's keypress input

Kind: global function

Param	Description
key	– the key to press, will be passed to keycode
target	– a DOM element to trigger the event on. If undefined, triggered on the document.

checkInvisibility(elem)

returns true if and only if elem is invisible

Kind: global function

Param	Description
elem	– the element to check

checkVisibility(elem)

returns true if and only if elem is visible

Kind: global function

Param	Description
elem	– the element to check

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.

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.

Support and feedback

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!