grangerelixx
How to test and assert order of elements in LiveView?
I have a LiveView page that returns a list of students names and ids sorted in a table.
In test,
{:ok, index, html} = live(conn, Routes.students_path(conn, :index, class.id))
I can see that the html here has the names of the students sorted but there are other unnecessary contents(for my test in this case) in between these names. So how can I eliminate other contents and just test only the names are in the expected sort order?
Most Liked
sodapopcan
PhoenixTest now has a very clean way to do this:
visit(conn, "/")
|> assert_has(".my-list li", "One", at: 1)
|> assert_has(".my-list li", "Two", at: 2)
|> assert_has(".my-list li", "Three", at: 3)
sodapopcan
I just take the simple boneheaded approach:
insert(
:list,
items: [
build(:item, name: "One"),
build(:item, name: "Two"),
build(:item, name: "Three")
]
)
assert lv
|> element(".list-container")
|> render() =~ ~r/One.*Two.*Three/s
The s regex modifier allows matching over line breaks.
sodapopcan
So I don’t know why I never thought of this before but out of the box you can use CSS selectors along with has_element?/3 for much more fine-grained and reliable results than my current regex solution:
assert has_element?(lv, ".my-list li:nth-child(1)", "One")
assert has_element?(lv, ".my-list li:nth-child(2)", "Two")
assert has_element?(lv, ".my-list li:nth-child(3)", "Three")
cc: @travisf
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance










