Integration testing Elixir with Wallaby

Wallaby is a library for running end-to-end integration tests in Elixir (probably Phoenix) apps. This tutorial starts from a freshly installed Phoenix (v 1.4.9) app called "Wally".

Install phantomjs (see part 2 for Chrome Webdriver)

npm install -g phantomjs

Add Wallaby to your mix.exs

{:wallaby, "~> 0.23", [runtime: false, only: :test]}

Edit your config/test.exs

Add the following and replace Wally and :wally to with your app name.

config/test.exs
config :wally, Wally.Endpoint,
    #...
    server: true
config :wally, :sql_sandbox, true # if you want tests to run concurrently
config :wallaby, screenshot_on_failure: true

Add the following to your test_helper.exs

Ecto.Adapters.SQL.Sandbox.mode(Wally.Repo, :manual)
{:ok, _} = Application.ensure_all_started(:wallaby)
Application.put_env(:wallaby, :base_url, WallyWeb.Endpoint.url())

And set up a SQL Sandbox at the top of your endpoint.ex (for concurrent tests)

if Application.get_env(:wally, :sql_sandbox) do
  plug Phoenix.Ecto.SQL.Sandbox
end

Finally, create an IntegrationCase helper module as in the video and write some integration tests. Wallaby has a number of different utilities, but the very lowest hanging fruit is probably Wallaby.Query. It uses jQuery-style CSS selector-based queries so you can write tests like this:

  import Wallaby.Query, only: [css: 2]

  test "has a big hero section", %{session: session} do
    session
    |> visit("/")
    |> find(css("section", count: 3))
    |> Enum.at(1)
    |> assert_has(css("h1", text: "Welcome to Phoenix!"))
  end

Next video: Integration testing Elixir with Wallaby Part 2