How do I test a LiveView hook triggered by a Stripe form?

[neurodynamic]

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:

Hooks.StripeFormButton = {
  mounted() {    
    this.el.addEventListener("click", () => {
      showStripeForm({
        onSuccess: (token) => {
          this.pushEvent("save-card", {token: token})
        }
      })
    })
  }
}

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?

[outlog]

think you’ll need to test using something like wallaby eg headless chrome/firefox… since this requires a js runtime…

you can see https://www.tddphoenix.com for getting started - excellent resource…

could be wrong though, but don’t see how elixir side should/can know what goes on in js hooks…

[neurodynamic]

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

send(view.pid, {:test_save_card, "some stripe token"})

and if my setup looks 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.

[mnussbaumer]

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.

[neurodynamic]

Yes, I think this might work, but so far I haven’t been able to figure out how to get access to the socket in tests, either

[mnussbaumer]

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.