What is your minimum test setup for a stateful component?

I’m trying to write a library which provides a complex phoenix live component the the app dependant on it.

As part of that, I’m also trying to test it, but it’s looking like being able to test the component in a deeper way is a tad complicated.

I effectively have to

  • setup a full phoenix application, with an endpoint
  • setup a view which renders the component and fully delegates all component interaction onto it’s own state
  • setup a route for that view if I render using live, or use live_isolated
  • interact with and assert on the view itself, rather than the component

It works, but I’m wondering if anyone figured out anything simpler. Is there anything on the roadmap to simplify it?

It would even be useful to have just a conversation about it.

I am sure if this could be useful, maybe you can use this as a starting point.

you will have to add LiveView

1 Like

I am working on a similar project and I just mimicked the approach in this test_helper from LiveDashboard. It has some stuff specific to that project so I was able to prune it down a bit from there.

Wont have time to check until the next weekend, but it looks like it might be. Thank you for this.

1 Like

Didn’t actually consider looking at live dashboard, but it looks like it might be it. Seems like it sets up the bare minimum I’m looking for.

I wanted to do this today. In my test I defined a TestView module, which had a minimal render() function, then I passed this to live_isolated() as a second parameter.
This worked quite well, but it was awkward to test that handle_event calls were bubbling up to the parent view, I also had to define a minimal handle_event function in the TestView, which assigned some properties to the socket, and then had a conditional in my render function to return a completely different view.

I wonder if we could create a live_component_in_view function or something that just takes the stateful component, and add some other assertion for assert_handle_event("event", params)?

That would be my ideal scenario. I was going to look into it this weekend and try and figure it out. That + some way to ship css and js easily with the component, as a library, would really allow for an easier time with portable 3rd party components.