I have a page in my Phoenix app with some LiveView code. When you click a button, it shows the Stripe credit card modal form via a Hook. It looks roughly like this:
So a user clicks the button, fills out the Stripe form, and when they submit it, the "save-card" event gets sent to the back-end. That will save their credit card info and then render some info to show that the save was successful.
My problem is, since the click and the form submit are done through hooks instead of phx-click and phx-submit attributes, I can’t figure out a way to test them. I want to be able to write a test that says “after the "save-card" event gets triggered, a confirmation message shows on the page”. But I can’t find a way to trigger the "save-card" event in a LiveView test without using something like render_click or render_submit which won’t work since I’m not using phx-click or phx-submit for the Stripe form. Is there a push_event testing function somewhere that I’m missing in the documentation? Or is there another way to do this?
Something like that is definitely an option, but I’m hoping there’s a way to just trigger the event within a LiveView test in elixir. There’s no way to invoke the Stripe form or fill it out without a tool like wallaby, but it seems like there ought to be a way to simulate the this.pushEvent call that would normally happen on the form submit.
The closest I’ve been able to get so far is setting up a handle_info function that works the same way handle_event does and testing that, because with handle_info, I can trigger it in the test like this
def handle_event("save-card", %{"token" => stripe_token}, socket) do
save_card(stripe_token, socket)
end
def handle_info({:test_save_card, stripe_token}, socket) do
save_card(stripe_token, socket)
end
then when handle_info tests pass, it should be a good bet that handle_event tests, if they were possible to write, would pass the same way. It’s hacky, but it basically works. Unfortunately, as far as I can tell, there’s no analog to send(view.pid, {:test_save_card, "some stripe token"}) that works to trigger handle_event.
If you have the socket in the test (I haven’t written any tests with liveview, but I imagine you have?) you can just call YourLiveView.Module.handle_event("save-card", %{"token" => "your_token"}, the_socket) and assert on the result of save card and any side effects?
This doesn’t test the client interface tough, just that if an event "save-card" with those params are sent through the live view it works correctly.
Yeah probably it’s possible to build the socket manually but I didn’t see any helpers for that while giving it a quick glance. I thought it would allow as it does with channels (the phx channelcase) you have some helpers to build it though.
Just FYI: There’s the render_hook/3 option now, which simulates sending an event through this.pushEvent("foo", "bar") in your JavaScript. It will then trigger the handle_event("foo", "bar", socket)-callback in your LiveView.
So, in your use case, you could write a test like:
I’d still like to know how to access the socket. I have a handle_event that gets called from the browser when a user releases the mouse button after drawing a box on an image.
My handle_event saves the latest coordinates in the assigns and then fires back all the boxes that the user has drawn to the browser to re-render them in JavaScript. I’d love to be able to assert that the assigns has the right data after processing what came back from the browser on mouseup.
Someone know how to test pushEventTo when targeting component ? render_hook/3 requires that component has the phx-hook on the target component however in my case i have the div with phx-hook outside and it uses the pushEventTo("from", ...) to update crop zone in real time. It is a multi file upload where user before uploading can crop all images in order to select required zone with correct aspect. So to test it i need to execute the handle_event on my FormComponent.
And when i do
