Integration Testing LiveView Interactions

Where unit tests check isolated bits of code, integration tests verify the interactions between parts of a system. In this lesson, we’ll write an integration test that validates interactions within a single LiveView. We’ll write both tests without any JavaScript. This statement should get some attention from anyone used to the overhead of bringing in an external JavaScript dependency to write integration tests.

We don’t need JavaScript to test LiveView!

We’ll use the LiveViewTest module’s special LiveView testing functions to simulate LiveView connections without a browser. Our tests can mount and render LiveViews, trigger events, and then execute assertions against the rendered view. That’s the whole LiveView lifecycle.

We might have concerns about leaving JavaScript untested but remember, the JavaScript that supports LiveView is part of the LiveView framework itself, so we also don’t have to leverage JavaScript to test our LiveViews. We can trust that the JavaScript in the framework does what it’s supposed to do, and focus our attention on testing the specific behaviors and features that we built into our own LiveView, in pure Elixir.

As a result, the integration tests for LiveView are quick and easy to write and they run fast and concurrently.

Let’s write some tests.

Writing an Integration Test

We’ve unit tested the individual pieces of code responsible for our component’s filtering functionality. Now it’s time to test that same filtering behavior by exercising the overall LiveView. We’ll write one test together to introduce LiveView’s testing capabilities. Then, we’ll leave it up to you to add more tests to cover additional scenarios. Our test will simulate a user’s visit to /admin-dashboard, followed by their filter selection of the 18 and under age group. The test will verify an updated survey results chart that displays product ratings from users in that age group.

Because components run in their parent’s processes, we’ll focus our tests on the AdminDashboardLive LiveView, which is the SurveyResultsLive component’s parent. We’ll use LiveViewTest helper functions to run our admin dashboard LiveView and interact with the survey results component. Along the way, we’ll get a taste for the wide variety of interactions that the LiveViewTest module ...