Documentation

Testing

Unit UI testing with Karibu-Testing

As Vaadin UI is built server-side, it is possible to test the server-side UI without a deployment or browser. The maven dependency linkki-vaadin-flow-test provides utilities for unit UI testing using JUnit.

This library utilized Karibu-Testing which provides additional functionalities unit UI tests, e.g. allowing calling UI.getCurrent without mocking the setup such as VaadinSession or CurrentRequest. For tests with Karibu, linkki provides an extension to make the configuration and assertion easier with linkki projects.

Maven Dependency

<dependency>
    <groupId>org.linkki-framework</groupId>
    <artifactId>linkki-vaadin-flow-test</artifactId>
</dependency>

Conditions for AssertJ

The utility class ComponentConditions provides UI specific conditions that can be used with AssertJ.

Example usage of ComponentConditions

import static org.linkki.core.ui.test.ComponentConditions.childOf;
import static org.linkki.core.ui.test.ComponentConditions.anyVisibleChildOfType;

...

    @Test
    void testChildOf() {
        var grandChild = new Div();
        var child = new Div(grandChild);
        var layout = new Div(child);

        assertThat(layout).isNot(childOf(child));
        assertThat(child).is(childOf(layout));
        assertThat(grandChild).doesNotHave(anyVisibleChildOfType(Div.class));
    }

Component representation for AssertJ

The class ComponentTreeRepresentation can be used to convert the string representation of a component tree into a more readable format.

Example usage of ComponentTreeRepresentation

import static org.linkki.core.ui.test.ComponentTreeRepresentation;
import static org.linkki.core.ui.test.ComponentConditions.exactlyOneVisibleChildOfType;

...

    @Test
    void testChildOf() {
        var grandChild = new Div();
        var child = new Div(grandChild);
        var layout = new Div(child);

        assertThat(layout)
                .withRepresentation(new ComponentTreeRepresentation())
                .has(exactlyOneVisibleChildOfType(Div.class));
    }

Since layout has two Div children, assertThat will fail and return the following output:

Example AssertJ output with ComponentTreeRepresentation

java.lang.AssertionError:
Expecting actual:
  └── Div[]
    └── Div[]
        └── Div[]

to have exactly one visible child matching type Div

Mock Vaadin setup with KaribuUIExtension

While some of the UI components created with Vaadin can be tested easily in a regular unit test, the setup gets difficult when dialogs, locales or routing are involved.

Karibu makes this easier by providing the class MockVaadinUI, which not only sets up a UI instance along with the session, but also can handle routes.

The linkki Karibu module further simplify the set-up with the JUnit extension KaribuUIExtension.

Simple set-up: KaribuUIExtension with @ExtendWith

In the most simple use case, this class can be directly annotated on the test class with @ExtendWith(KaribuUIExtension.class). This will make sure that the Vaadin UI is set up in beforeEach and is cleaned up properly in afterEach.

Additionally, a test using KaribuUIExtension can be annotated with @WithLocale to define the UI’s locale, defaulting to german.

KaribuUIExtension with @ExtendWith

@ExtendWith(KaribuUIExtension.class)
class SimpleTestClass {

    @Test
    void testUI() {
        assertThat(UI.getCurrent()).isNotNull();
    }

}

Complex configuration of KaribuUIExtension

KaribuUIExtension can also be used for more complex configurations. It provides factory methods with which a configuration can be passed. The configuration can be for exampled used to:

add routes
add error routes
add instances for parent layouts
define whether the deployment is in production mode or
define the locale.

To use the configuration, the KaribuUIExtension must be used with @RegisterExtension.

KaribuUIExtension with complex configuration

    class RegisterExtensionWithConfiguration {

        @RegisterExtension
        static KaribuUIExtension extension = KaribuUIExtension
                .withConfiguration(withDefaults()
                        .setProductionMode(true)
                        .addRoute(MyView.class, () -> myView)
                        .addRoutes(ViewWithParentLayout.class,
                                   ViewWithException.class)
                        .addErrorRoutes(ErrorPage.class)
                        .addInstance(ParentLayout.class, ParentLayout::new));
        ...
    }

Locale

The locale can be either set with the annotation @WithLocale, or with the method setLocale in the configuration.