How to do "top-down" LiveView rendering tests of nested LiveComponents

1: Instead of using live to “mount” your LV in testing you can use live_isolated/3.

2: The snippet I wrote in the other post should work. After you mount your menu LV you can interact with it using the element and render_ helpers to reproduce the steps taken for the component to display and to interact with it. This will work as an integration test: you won’t update the LV assigns directly, instead you’ll mimic what the user does and assert that your LV/Component is updating correctly.

So basically after your router renders and mounts the LV you’ll end with this structure:

<html from layout>
  <html from some_view.html.eex>
    <html from your side_bar LV>
      <html from your component inside the LV that may not be here>
      </html from your component inside the LV that may not be here>
    </html from your side_bar LV>
  </html from some_view.html.eex>
</html from layout>

When you use live_isolated you’ll get only this chunk:

<html from your side_bar LV>
  <html from your component inside the LV that may not be here>
  </html from your component inside the LV that may not be here>
</html from your side_bar LV>

And then you can interact with it by passing CSS selectors to element and using the render_ functions to trigger events in your LV and components.

4 Likes