@atlaskit/util-common-test

Shared test helpers used by AtlasKit components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@atlaskit/util-common-test
2.4.25 years ago6 years agoMinified + gzip package size for @atlaskit/util-common-test in KB

Readme

AtlasKit component registry Commitizen friendly semantic-release Report an issue
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 <code>done</code> into the test and that you call it at the end
as this will make your tests asyncronous.</p>
hasClass(component, ...classes)

A simple helper method to check whether a node has a set of classNames on it. Will return true, only if a component is provided and it has all the classNames applied to it.

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.


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

hasClass(component, ...classes)

A simple helper method to check whether a node has a set of classNames on it. Will return true, only if a component is provided and it has all the classNames applied to it.
Kind: global function
| Param | Type | Description | | --- | --- | --- | | component | Node | A node to check for classNames. | | ...classes | String | A list of classNames to check for the existance of |
JS Example
const elem = document.querySelector('.fixture').firstChild;
 const elemIsHidden = hasClass(elem, 'hidden');
 const elemIsSelectedAndHidden = hasClass(elem, 'hidden', 'selected');

keydown(key, options)

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

keyup(key, options)

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

keypress(key, options)

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

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 | Description | | --- | --- | | fn | function that must return true when it is time for the promise to continue | | timeout | maximum amount of time waitUntil should wait before quiting (ms). | | step | 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.equal(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.equal(true)));

 // alternatively, we might want to do more things in the .then call, even chain more waitUntils

 waitUntil(elemRenderedImgTag).then(() => {
   expect(elemRenderedImgTag()).to.equal(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.equal(true)));
 // this will check if the img was rendered every 10ms for up to a total of ~1 second.

Please note that this module could have dependencies that are governed by the Atlassian Design Guidelines license which will be automatically included on install. Each dependency has a license file that indicates whether the Atlassian Design Guidelines license applies.

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.
Are you in trouble? Read through our contribution guidelines
and raise an issue to us.