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.