LiveView Pro Course Update: Testing

Hey Friends,

We’re back with another LiveView Pro course update!

Hopefully you’ve had a chance to check out the mapping, charting, and authentication updates.

And this week we’re wrapping up the outline for another section of the Pro course: ✅ testing.

If you’ve done any browser-based testing, then you’re in for a real treat.

Just as LiveView has changed how we create interactive user experiences, it has also changed how we test them. For the better!

Here are a few of our favorite things about testing LiveViews…

1. No configuration necessary.

None! You don’t have to monkey around with installing a web driver to drive all user interactions through a headless browser. Instead, your tests interact with LiveViews via process communication. No headless browser required.

2. Tests are blazing fast!

Without a headless browser gumming up the works, LiveView tests run orders of magnitude faster and are more reliable than typical browser-based tests. It makes sense: there’s no middle-man collecting a tax.

How fast? Well, we anticipate that the final code bundle for the Pro course will include 70+ LiveView tests. So far we’ve written 55 of them and they run in 0.7 seconds:

Not too shabby for end-to-end tests. 😲

3. They read like a good story.

And we’re suckers for a good story.

For example, here’s a test for a volunteer checking out of an event:

view
|> element("button", "Check Out")
|> render_click()

assert has_element?(view, "button", "Check In")

And here’s a test (with a custom helper) to make sure we find a suitable boat for our next water adventure:

view
|> form("#change-filter", %{prices: ["$"]})
|> render_change()

assert has_element?(view, boat(budget_boat))
refute has_element?(view, boat(expensive_boat))

In a nutshell, with LiveView’s testing conveniences you can write browser-like tests from the comfort of Elixir without the overhead of a headless browser being in the mix. And that’s a huge win!

But pros know that writing tests isn’t the ultimate goal.

As with any browser-based testing library, it’s easy to get carried away with all the possibilities. We’ve all experienced test suites that include low-value, brittle tests that become a maintenance hassle. Someone changes the style of the page, and you end up fixing tests the rest of the afternoon. 😩

The pro’s goal is to build up a suite of high-value, effective tests.

So designing this section of the course took a bit longer than we expected (they all have!). We wanted to combine the right amount of “how to write tests” with “what to test” to set you on the right path.

To help us do that, we reached out to German Velasco who’s working on an entire course dedicated to testing LiveView effectively. He graciously reviewed all our tests and lended us his valuable feedback and insights.

We think you’ll love the result!

So buckle up to binge watch hours and hours of testing!

Just kidding. 🤪

Writing 50+ tests from scratch would test your patience… and ours! You’d likely score a nap though. 😴

So in the videos we’ll strategically write tests for some of the LiveViews we’ve built so far, focusing on tests that teach us something new, including:

• External user events

• Internal events

• Live Navigation

• Components

• Pub-Sub

• JS Hooks

• Custom Helpers

Then in the exercises you can apply what you learned toward testing features we didn’t test together. And the final code bundle will include tests for all the LiveViews as a reference.

Want to guess last week’s FAQ?

If you guessed “When can I get the Pro course?”, then you win the big prize! 🏆

Seriously, we very much appreciate your interest and patience. Good things take time. 😀

In next week’s update we hope to have more details about early access. So stay tuned!