← Home
Browse lessons
Welcome to Testing LiveView Code setup and instructions Testing Rendering Scoping Assertions Testing Interactions Debugging LiveView Tests Testing Forms Testing Form Changes Testing Function Components Testing LiveComponents Testing Live Redirects Testing Live Patch Testing JS Hooks Testing Upload Previews Testing Uploads (Direct to Server) Testing Uploads (Direct to Cloud) Testing Async Assigns CSS Selectors for Tests Thank you!

Code setup and instructions

Code setup

Clone the repository found in https://github.com/germsvel/ranger

Getting set up

Once you have the codebase, follow these instructions:

  • Install Elixir and Erlang versions defined in .tool-versions.
  • Install dependencies with mix deps.get.
  • Create and migrate your database with mix ecto.setup.

That will also add some seed data that will be helpful for some of the demos.

  • Run mix test to make sure all tests pass.

It’s okay if there are warnings. The tests have some minimal setup importing helpers that are unused right now. We’ll use the helpers throughout the course.

  • Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server.

Now you can visit Ranger at localhost:4000.

Test files

Each lesson is associated with a different LiveView. That makes each lesson stand alone and allows us to focus on how to test a particular LiveView.

For each lesson, you should see two test files:

  • A “standard” test file, and
  • A “done” test file.

The standard test file is the test file that corresponds to the LiveView we’re about to test.

For example, when we’re considering testing CounterLive, which is located in lib/ranger_web/live/counter_live.ex, you will see two tests:

  • Standard test file: test/ranger_web/live/counter_live_test.exs,
  • Done test file: test/ranger_web/live/counter_live_done_test.exs.

As you can see, the only difference in filename is the “done” portion.

The first test (a.k.a “standard” test) is the blank canvas where we’ll be adding tests in the lesson.

The “done” test is a cheat sheet (which you should reference freely) with all the tests already written.

If you’re ever lost or want to double check how I wrote the final test, feel free to reference the “done” test.

With that out of the way, let’s get started!

Resources

If at any point you want to dive deeper into one of Phoenix LiveView’s test helpers, you can always find them at https://hexdocs.pm/phoenix_live_view/Phoenix.LiveViewTest.html.