akutil-common-test v7.0.3

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.

Kind: global function

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

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

keydown(key, options)

Simulate a user's keydown input

Kind: global function

keyup(key, options)

Simulate a user's keyup input

Kind: global function

keypress(key, options)

Simulate a user's keypress input

Kind: global function

checkInvisibility(elem)

returns true if and only if elem is invisible

Kind: global function

checkVisibility(elem)

returns true if and only if elem is visible

Kind: global function

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

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!