<script type="module">
import morphonentTest from 'https://cdn.skypack.dev/morphonent-test';
</script>
README
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:
gt; yarn add -D morphonent-test
or npm:
gt; 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.
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.
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 = faker.internet.userName()
const input = (value) => element('input', { type: 'text', onkeypress: (ev) => input(ev.currentTarget.value.toUpperCase()), value })
const result = await testing(input('')).write(text).textContent()
expect(result).toBe(text.toUpperCase())
Changing the type of event to be triggered:
import { keyup } from 'morphonent-test'
const text = faker.internet.userName()
const input = (value) => element('input', { type: 'text', onkeyup: (ev) => input(ev.currentTarget.value.toUpperCase()), value })
const result = await testing(input('')).write(text, keyup).textContent()
expect(result).toBe(text.toUpperCase())
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:
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).