Design system: Headless

Design system that emits no UI, useful for automated tests.

Testing the state, not the appearance

When using Decouple, the appearance of your app may differ from one UI implementation to another, or from one platform to another. There is no multiplatform way of testing the exact appearance of the UI.

However, as Decouple abstracts all the state and behavior of the UI, it is possible to test how components interact and their internal values. Although this is somewhat less informative than appearance testing, it is much easier to read, less likely to break with refactors, and works identically on all platforms.

This module allows you to:

  • test that pressing a button will execute a network request,

  • test that a button is disabled when form fields are invalid,

  • test that the data in a table corresponds to what the server sent.

This module does not help to:

  • test the visual appearance of a button,

  • test whether an implementation of the Decouple component library is correct.

Reading order

To create headless UI tests, please read HeadlessUI. If you use the Prepared test framework, see the corresponding compatibility module instead.

To create typesafe wrappers to allow other users to test your components, please read Component.

Packages

Link copied to clipboard
common

The Component class allows to declare typesafe immutable objects that wrap composable function calls.

common
common
common
Link copied to clipboard
common

Utilities for analyzing running compose functions.

Link copied to clipboard
common

HeadlessUI provides utilities to run a composable function in a test environment without starting an entire UI environment.

Link copied to clipboard
common

Representation of the state of composable functions during their execution.