![]() Now you should be able to get started testing your Phoenix application using Wallaby. The LiveView receives the device response for the presented challenges and passes on the username and deviceresponse to the U2FEx. |> find(css("#question-form > div > button"))Įnd Example Wallaby test with 2 seconds of latency Conclusion Once a user has authorized the U2F-device to answer the registrationrequests by pressing a button on the device or touching it, the JavaScript-Hooks will send a finishregistration-event back to the LiveView. |> fill_in(text_field("Text"), with: "Latency isn't fun, but should be accounted for") Setting Up Install WallabyĪdd the dependency to your mix.exs: defp deps do If you wish to receive events from LiveView, add a phx-receive-events attribute to the element this hook is defined on which contains a list of events you wish. How to take back control over caching with Rails’ Active Storage and Amazon S3. How to write a small helper function to test your LiveView hooks. So you have access to all your favorite tools like ExUnit. Testing Phoenix LiveView hooks with Jest. Wallaby is a browser testing tool written in Elixir that allows you to drive a browser, and write browser-based tests all without leaving the Elixir ecosystem. If you just want to dive into the code, it can be found here. I gave a conference talk about this at The Big Elixir 2022 with a few more examples. This is how to store and restore data in a LiveView using Hooks and sessionStorage.Browser testing can be a powerful way to build confidence in your codebase, and it's easy to get started in a Phoenix app with Wallaby. When we refresh the page, the counter should reflect the value in the sessionStorage Conclusion To test this out, we can go into the developer settings and manually add key-value pair to sessionStorage Up until this point, we’ve been in familiar territoryPhoenix, LiveView, a little JS. We’ll see later that LiveView also allows us to send data back to the server via this. We now have a way to restore data from sessionStorage or localStorage into our LiveView! Note how LiveView gives you access to the underlying element of the hook, making it easy for us to grab the UUID we placed in data-user-uuid. In order to actually call the restore hook we need to add a unique ID to the element and attach our hook to it: NOTE: All hooks need to be defined above the following line let liveSocket = new LiveSocket("/live", Socket,, socket) do Git clone the complete solution check out the complete branch. The main branch will only contain the minimal amount of setup without implementing any hooks: ![]() Let’s clone the demo Phoenix LiveView app. Both storages use the same function getItem(key) where we provide a key which hopefully has the values we are looking for.įor more information regarding sessionStorage and localStorage see the Mozilla Docs Cloning the Demo Project If you wanted to persist the data, localStorage is what you are looking for. In this post we will be using sessionStorage as the data is wiped when we close the tab. ![]() These hooks allow for interoperability with JavaScript and grant us the ability to interact with a liveview during its lifecycle.įor storing the data, we will call a JavaScript hook inside a liveview function to store the value of a counter.įor fetching the data, we will be using the reconnected hook to fetch data from localStorage or sessionStorage. Sometimes we want to fetch or store data in localStorage or sessionStorage, we can fetch/store this data using LiveView hooks. Normally Im not a big fan of things that seem like magic, but in the case of Phoenix. Phoenix Liveview using LocalStorage or SessionStorage Using Phoenix Presence in LiveView > A Simple Example.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |