I’m using both Alpine and LiveView in my project and I’m in the process of writing a test to check if an element has an attribute value of style=display: none;
The particular element has an Alpine directive of x-show
attached to it, which should toggle the display.
# page template snippet
<div x-data="{ isShowable: <%= check_showable() %> }">
<div x-show="isShowable"
<button>MyButton</button>
</div>
</div>
What I am finding is that in my test, even when isShowable
is evaluated to false
, the button does not have style=display: none;
attached. I’ve checked this by parsing the rendered HTML using Floki.
However, if I launch my app and inspect my page in a browser, that style is applied.
# test assertion
{:ok, view, _html} = live(conn, "/page")
assert view
|> element("div[x-show='isShowable'][style='display: none;']")
|> has_element?()
Wondering if this is expected behaviour when using LiveViewTest and if I am missing something.