Unable to Get Recommended Configuration for LiveView Testing to Work

[stratigos]

My ultimate problem is that when I click on a DELETE route (to test user log-out), I get a huge wall of errors culminating in (DBConnection.OwnershipError), when I have async: true for a Wallaby test. I believe this is due to my LiveView config for Wallaby. If I use async: false, this error goes away and my test passes as expected, though Id rather not have a random smattering of non async tests.

I am also using Elixir for the first time in ~5 years, and have not followed Elixir or Phoenix developments in that time. My team does not believe acceptance testing is valuable, and I think a web application cannot be managed well over time without acceptance testing. Thus I need to sell my team on this "new" culture of testing, which is getting difficult for me given that Wallaby has been quite time consuming for me to get set up properly (much of this due to my lack of Elixir/Phoenix fundamentals).

The current state of the readme suggests the a configuration for LiveView in wallaby tests so that they can be async. I have the following config for my app:

defmodule MyAppElixir.Hooks.AllowEctoSandbox do
  import Phoenix.LiveView
  import Phoenix.Component

  def on_mount(:default, _params, _session, socket) do
    IO.puts("THIS IS HAPPENING 🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
    allow_ecto_sandbox(socket)
    {:cont, socket}
  end

  defp allow_ecto_sandbox(socket) do
    %{assigns: %{phoenix_ecto_sandbox: metadata}} =
      assign_new(socket, :phoenix_ecto_sandbox, fn ->
        if connected?(socket), do: get_connect_info(socket, :user_agent)
      end)

    Phoenix.Ecto.SQL.Sandbox.allow(
      metadata,
      Application.get_env(:myapp_elixir, :sandbox)
    )
  end
end

And in my router, where I actually am somewhat clueless as to how to do this properly, esp with whatever is meant by the # ... in the README:

  scope "/", MyAppElixirWeb do
    pipe_through [:browser]

    live_session :default, on_mount: MyAppElixir.Hooks.AllowEctoSandbox do
      delete "/admins/log_out", AdminSessionController, :delete
    end
    # delete "/admins/log_out", AdminSessionController, :delete # this was the original route defined by generator
    # additionally there isnt a change in behavior, concerning the Wallaby test, when this route is wrapped
    #  with `live_session` or if the "vanilla" route is in place

    live_session :current_admin,
      on_mount: [{MyAppElixirWeb.AdminAuth, :mount_current_admin}] do
      live "/admins/confirm/:token", AdminConfirmationLive, :edit
      live "/admins/confirm", AdminConfirmationInstructionsLive, :new
    end
  end

I am essentially writing acceptance tests for mix phx.gen.auth .... Its pretty much vanilla generated auth code.

I do not believe the Hooks code is executing at all (for one, I cannot see the IO.inspect() results).

How can I know exactly how to implement this configuration, so that my acceptance tests can run async? For now I will keep this one "admin logout" test in its own file that has just one test to run async.

Is there something missing from my Phoenix knowledge that is assumed by the docs?

What exactly is expected to be between the do .. end in the docs regarding #... ? What does that comment represent?

This is how its defined in the README:

live_session :default, on_mount: MyApp.Hooks.AllowEctoSandbox do
  # ...
end

And finally, does placing routes within this block have any effect on the actual app? That is, this seems like test specific code, how am I able to isolate the behavior just to tests if I need to use my "production" routes in this block?

Thanks for any help that can be provided, I want to convince the word that acceptance testing is absolutely fundamental to a web application's success.

[mhanberg]

I don't believe the live session on mount hook is activated for normal controller routes.

You need to add the sandbox plug to your endpoint as indicated in the docs.

I'm on my phone right now but this is the snippet for quick viewing, you can find the rest in the readme.

# lib/your_app_web/endpoint.ex

defmodule YourAppWeb.Endpoint do
  use Phoenix.Endpoint, otp_app: :your_app

  if sandbox = Application.compile_env(:your_app, :sandbox, false) do
    plug Phoenix.Ecto.SQL.Sandbox, sandbox: sandbox
  end

  # ...

  socket("/live", Phoenix.LiveView.Socket,
    websocket: [connect_info: [:user_agent, session: @session_options]]
  )

[stratigos]

Thanks so much for looking into this. I believe I have followed the README exactly. Here is what my endpoint.ex looks like:

defmodule MyAppElixirWeb.Endpoint do
  use Phoenix.Endpoint, otp_app: :myapp_elixir

  # SQL Sandbox plug for concurrent tests.
  #
  # It's important that this is at the top of endpoint.ex
  # before any other plugs.
  #
  # https://github.com/elixir-wallaby/wallaby?tab=readme-ov-file#phoenix
  if sandbox = Application.compile_env(:myapp_elixir, :sandbox, false) do
    plug Phoenix.Ecto.SQL.Sandbox, sandbox: sandbox
  end

  # The session will be stored in the cookie and signed,
  # this means its contents can be read but not tampered with.
  # Set :encryption_salt if you would also like to encrypt it.
  @session_options [
    store: :cookie,
    key: "_some_name_for_a_key",
    signing_salt: "some-salt-value",
    same_site: "same-site-value"
  ]

  # `user_agent` must be included for concurrent acceptance tests
  socket("/live", Phoenix.LiveView.Socket,
    websocket: [connect_info: [:user_agent, session: @session_options]]
  )

# ... all the other things
end

With respect to:

I don't believe the live session on mount hook is activated for normal controller routes.

Thanks, Im new enough to Phoenix - and absolutely brand new to LiveView - that I hadnt realized that the DELETE /log_out route is not a LiveView route. Thats actually where my test(s) fail, the moment I leave a LiveView route by using Wallaby to click on a link or button that navigates to a non-LiveView route, I get the DBConnection.OwnershipError.

For other LiveView routes, I get a lot of "messages" printed out, but they dont fail or raise exceptions. The output from my test suite looks like this:

....................................."phx-F8Lhpw5tKciTzgVB mount:  - " Object
........................................."phx-F8Lhpw5tKciTzgVB socket: disconnect for page nav - " undefined
"phx-F8Lhpw5tKciTzgVB destroyed: the child has been removed from the parent - " undefined
" destroyed: the child has been removed from the parent - " undefined
..............................................................."phx-F8Lhp3MYASbPHgRm mount:  - " Object
"phx-F8Lhp3MYASbPHgRm socket: disconnect for page nav - " undefined
"phx-F8Lhp3MYASbPHgRm destroyed: the child has been removed from the parent - " undefined
" destroyed: the child has been removed from the parent - " undefined

The extra info printed in that output occurs when my "login" and "logout" wallaby tests run, which hit LiveView endpoints in the tests. The logout test - which goes from a LiveView route to a non-LiveView route, only passes when async: false is set, otherwise I get DBConnection.OwnershipError.

Any ideas on how I may have missed something in the config that would lead to this? The app is brand new, it has 2 data models, everything is done via generators and is just about vanilla, and the generated auth routes/controllers/modules are all vanilla. For tests Im using auto generated tests, Wallaby for acceptance, and ExMachina for factories in my Wallaby tests.

[mhanberg]

Two things:

• did you implement the sandbox module? And configure it to be used in the test env?

• those logs in your test output are JS logs emitted by liveview in the browser, which are then propagated up through wallaby and reprinted in the browser. You can either disable JS logs in wallaby or configure liveview not to print debug logs in the test env

[stratigos]

those logs in your test output are JS logs emitted by liveview in the browser, which are then propagated up through wallaby and reprinted in the browser. You can either disable JS logs in wallaby or configure liveview not to print debug logs in the test env

Thank you so much for helping educate me on this :)

did you implement the sandbox module? And configure it to be used in the test env?

Thanks!! It looks like I have not, assuming you mean this:

# config/support/sandbox.ex

defmodule YourApp.Sandbox do
  def allow(repo, owner_pid, child_pid) do
    # Delegate to the Ecto sandbox
    Ecto.Adapters.SQL.Sandbox.allow(repo, owner_pid, child_pid)

    # Add custom process-sharing configuration
    Mox.allow(MyMock, owner_pid, child_pid)
  end
end

The first time I added Wallaby, I was not using any shared resources that I was aware of, so I interpreted this as optional:

then you can define a custom sandbox module

Clearly. now that Ive added LiveView and also want to run some async tests, this is not optional.

Im going to add this to my app and re-test.

[stratigos]

This did fix non LiveView tests that we failing to run async, they run async now.

The final thing I dont understand is what to put in the commented area here:

    live_session :default, on_mount: MyAppElixir.Hooks.AllowEctoSandbox do
      # ...
    end

Here is all of the code I have in this area of router.ex:

  scope "/", MyAppElixirWeb do
    pipe_through [:browser]

    delete "/admins/log_out", AdminSessionController, :delete

    live_session :default, on_mount: MyAppElixir.Hooks.AllowEctoSandbox do
      # ...
    end

    live_session :current_admin,
      on_mount: [{MyAppWeb.AdminAuth, :mount_current_admin}] do
      live "/admins/confirm/:token", AdminConfirmationLive, :edit
      live "/admins/confirm", AdminConfirmationInstructionsLive, :new
    end
  end

The live_session :default obviously does nothing since no routes are defined within that block. However, routes cannot be defined twice, and I believe that moving other live view routes into this block for the sake of testing has adverse effects on the application. Im simply unsure what I am supposed to do with #... in the live_session block.

Can you help me understand what to do with the live_session :default block?

[mhanberg]

I think you either don't need that live session block.

I believe those are used to allow sets of live views to use live navigation (changing pages without a full page refresh)

But I recommend reaching out to the live view team to confirm.

[stratigos]

Thank you, Ill do so.

I also found another issue I was having - the test environment was unable to find the sandbox file in config/support, as was suggested in the current README.

I was able to get it to find the module when placing it in the test/support/ dir.

Ive made a PR to suggest this small change in the README, if youre interested: #766

[mhanberg]

Thanks! merged.