morphonent-test
morphonent-test is a testing library for verifying components written with morphonent.
- Easy. Bundled with sensible defaults.
- Fast. Runs entirely without mounting components in the DOM, for fast and easy checking.
- Async by default. Designed to work with asynchronous components as easy as with synchronous components.
Installation
morphonent-test is a simple npm package that you can install with yarn:
$> yarn add -D morphonent-test
or npm:
$> npm install --save-dev morphonent-test
Getting Started
morphonent-test exposes a component wrapper entirely made for introspecting and interacting with real components with a fluent API. We've also designed the library to be TDD friendly, so it's easy to change and mold to your needs.
Let's see an example test, using jest as the test runner.
;
You can also mock more concrete behaviour if you extract your event handlers.
;
API
testing
Builds a test component based on a root component. This is the main entrypoint to the testing library.
TestComponent.findWhere
Allows you to find a component given a condition. This is a low-level function and should be used only when strictly needed. Finding a component based on arbitrary conditions can be a hot-spot of bugs and expensive tests.
const blueGreen = const green = blueGreen
TestComponent.findById
Allows you to find a component given it's ID.
const blueGreen = const green = blueGreen
TestComponent.findByClass
Allows you to find a component given it's class name.
const blueGreen = const green = blueGreen
TestComponent.findChildren
Allows you to find the children elements of a component, if any.
const blueGreen = const all = await blueGreen
TestComponent.findFirst
Allows you to find the first element of a children tree.
const blueGreen = const blue = await blueGreen
TestComponent.findNth
Allows you to find the Nth element of a children tree, starting from 0.
const blueGreen = const green = await blueGreen
TestComponent.unfinishedTransition
Allows you to navigate through the first step of a transition.
const firstStep = 'Hello'const secondStep = async 'Bye' const all = const result = await all
TestComponent.finishedTransition
Allows you to navigate through the second step of a transition.
const firstStep = 'Hello'const secondStep = async 'Bye' const all = const result = await all
TestComponent.write
Simulates a set of events for writing text using the keyboard on the current selected component. By default, it triggers the onkeypress
event, but you can define any event that might suit your test.
const text = fakerinternetconst input = const result = await
Changing the type of event to be triggered:
const text = fakerinternetconst input = const result = await
TestComponent.trigger
Simulates an event on the current selected component and switches the pointer to the root component that returns the event handler. Right now, there are four default event types:
- click()
- keypress(keyCode)
- keydown(keyCode)
- keyup(keyCode)
But you can trigger other events using the event(name, props) function. For example, the keypress event is implemented as:
{ return event'onkeypress' keyCode }
An example test that clicks on a button that shows a message would be:
const hello = const test = const clickedTest = testconst content = await clickedTest
TestComponent.attribute
Returns a promise with the value of the specified attribute on an element.
const myComponent = const awesome = await
TestComponent.textContent
Returns a promise with the text content of an element. If the component has a value
attribute, it will return it's value instead (for inputs, for example).
const myComponent = const awesome = await
TestComponent.count
Returns the number of elements matched.
const list = const result = await