local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 59 Pull requests 5 Projects 2 Releases Packages 1 Activity Actions

refactor: add data-testid selectors for groups ui
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse source
This commit is contained in:
Simon 2026-02-20 16:34:15 +01:00
parent 83b104ecf3
commit 123227a50e
Signed by: simon
GPG key ID: 40E7A58C4AA1EDB2
13 changed files with 231 additions and 384 deletions
Download patch file Download diff file Expand all files Collapse all files

119
test/mv_web/live/group_live/show_accessibility_test.exs
View file

@ -22,12 +22,13 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
|> element("button", "Add Member")
|> render_click()
html = render(view)
# Search input should have proper ARIA attributes
assert html =~ ~r/aria-label/ ||
html =~ ~r/aria-autocomplete/ ||
html =~ ~r/role=["']combobox["']/
# OR-chain: at least one of these ARIA/role attributes must be present
assert has_element?(view, "[data-testid=group-show-member-search-input][aria-label]") or
has_element?(
view,
"[data-testid=group-show-member-search-input][aria-autocomplete]"
) or
has_element?(view, "[data-testid=group-show-member-search-input][role=combobox]")
end
test "search input has correct aria-label and aria-autocomplete attributes", %{conn: conn} do
@ -35,16 +36,14 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
{:ok, view, _html} = live(conn, "/groups/#{group.slug}")
# Open inline input
view
|> element("button", "Add Member")
|> element("button[phx-click='show_add_member_input']")
|> render_click()
html = render(view)
# Search input should have ARIA attributes
assert html =~ ~r/aria-label.*[Ss]earch.*member/ ||
html =~ ~r/aria-autocomplete=["']list["']/
assert has_element?(
view,
"[data-testid=group-show-member-search-input][aria-autocomplete=list]"
)
end
test "remove button has aria-label with tooltip text", %{conn: conn} do
@ -67,11 +66,7 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
{:ok, view, _html} = live(conn, "/groups/#{group.slug}")
html = render(view)
# Remove button should have aria-label
assert html =~ ~r/aria-label.*[Rr]emove/ ||
html =~ ~r/aria-label.*member/i
assert has_element?(view, "[data-testid=group-show-remove-member][aria-label]")
end
test "add button has correct aria-label", %{conn: conn} do
@ -79,16 +74,11 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
{:ok, view, _html} = live(conn, "/groups/#{group.slug}")
# Open inline input
view
|> element("button", "Add Member")
|> element("button[phx-click='show_add_member_input']")
|> render_click()
html = render(view)
# Add button should have aria-label
assert html =~ ~r/aria-label.*[Aa]dd/ ||
html =~ ~r/button.*[Aa]dd/
assert has_element?(view, "[data-testid=group-show-add-selected-members-btn][aria-label]")
end
end
@ -100,16 +90,11 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
{:ok, view, _html} = live(conn, "/groups/#{group.slug}")
# Open inline input
view
|> element("button", "Add Member")
|> element("button[phx-click='show_add_member_input']")
|> render_click()
html = render(view)
# Inline add member area should have focusable elements
assert html =~ ~r/input|button/ ||
html =~ "#member-search-input"
assert has_element?(view, "[data-testid=group-show-member-search-input]")
end
test "inline input can be closed", %{conn: conn} do
@ -117,17 +102,11 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
{:ok, view, _html} = live(conn, "/groups/#{group.slug}")
# Open inline input
view
|> element("button", "Add Member")
|> element("button[phx-click='show_add_member_input']")
|> render_click()
assert has_element?(view, "#member-search-input")
# Click Add Member button again to close (or add a member to close it)
# For now, we verify the input is visible when opened
html = render(view)
assert html =~ "#member-search-input" || has_element?(view, "#member-search-input")
assert has_element?(view, "[data-testid=group-show-member-search-input]")
end
test "enter/space activates buttons when focused", %{conn: conn} do
@ -148,17 +127,14 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
{:ok, view, _html} = live(conn, "/groups/#{group.slug}")
# Open inline input
view
|> element("button", "Add Member")
|> element("button[phx-click='show_add_member_input']")
|> render_click()
# Select member
view
|> element("#member-search-input")
|> element("[data-testid=group-show-member-search-input]")
|> render_focus()
# phx-change is on the form, so we need to trigger it via the form
view
|> element("form[phx-change='search_members']")
|> render_change(%{"member_search" => "Bob"})
@ -167,14 +143,11 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
|> element("[data-member-id='#{member.id}']")
|> render_click()
# Add button should be enabled and clickable
view
|> element("button[phx-click='add_selected_members']")
|> element("[data-testid=group-show-add-selected-members-btn]")
|> render_click()
# Should succeed (member should appear in list)
html = render(view)
assert html =~ "Bob"
assert has_element?(view, "[data-testid=group-show-members-table]", "Bob")
end
test "focus management: focus is set to input when opened", %{conn: conn} do
@ -184,16 +157,11 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
{:ok, view, _html} = live(conn, "/groups/#{group.slug}")
# Open inline input
view
|> element("button", "Add Member")
|> element("button[phx-click='show_add_member_input']")
|> render_click()
html = render(view)
# Input should be visible and focusable
assert html =~ "#member-search-input" ||
html =~ ~r/autofocus|tabindex/
assert has_element?(view, "[data-testid=group-show-member-search-input]")
end
end
@ -203,16 +171,11 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
{:ok, view, _html} = live(conn, "/groups/#{group.slug}")
# Open inline input
view
|> element("button", "Add Member")
|> element("button[phx-click='show_add_member_input']")
|> render_click()
html = render(view)
# Input should have aria-label
assert html =~ ~r/aria-label.*[Ss]earch.*member/ ||
html =~ ~r/aria-label/
assert has_element?(view, "[data-testid=group-show-member-search-input][aria-label]")
end
test "search results are properly announced", %{conn: conn} do
@ -231,27 +194,20 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
{:ok, view, _html} = live(conn, "/groups/#{group.slug}")
# Open inline input
view
|> element("button", "Add Member")
|> element("button[phx-click='show_add_member_input']")
|> render_click()
# Search
view
|> element("#member-search-input")
|> element("[data-testid=group-show-member-search-input]")
|> render_focus()
# phx-change is on the form, so we need to trigger it via the form
view
|> element("form[phx-change='search_members']")
|> render_change(%{"member_search" => "Charlie"})
html = render(view)
# Search results should have proper ARIA attributes
assert html =~ ~r/role=["']listbox["']/ ||
html =~ ~r/role=["']option["']/ ||
html =~ "Charlie"
assert has_element?(view, "#member-dropdown[role=listbox]")
assert has_element?(view, "#member-dropdown", "Charlie")
end
test "flash messages are properly announced", %{conn: conn} do
@ -270,16 +226,14 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
{:ok, view, _html} = live(conn, "/groups/#{group.slug}")
# Add member
view
|> element("button", "Add Member")
|> element("button[phx-click='show_add_member_input']")
|> render_click()
view
|> element("#member-search-input")
|> element("[data-testid=group-show-member-search-input]")
|> render_focus()
# phx-change is on the form, so we need to trigger it via the form
view
|> element("form[phx-change='search_members']")
|> render_change(%{"member_search" => "David"})
@ -289,13 +243,10 @@ defmodule MvWeb.GroupLive.ShowAccessibilityTest do
|> render_click()
view
|> element("button[phx-click='add_selected_members']")
|> element("[data-testid=group-show-add-selected-members-btn]")
|> render_click()
html = render(view)
# Member should appear in list (no flash message)
assert html =~ "David"
assert has_element?(view, "[data-testid=group-show-members-table]", "David")
end
end
end