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

test: use data-testids instead of regex in a11y tests
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
Replace regex-based aria-label assertions with data-testid-based
has_element? checks for more stable tests that are resistant to
translation changes.
This commit is contained in:
Moritz 2025-12-16 14:55:50 +01:00
parent 62d04add8e
commit 1df1b4b238
1 changed files with 14 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

39
test/mv_web/member_live/index_custom_fields_accessibility_test.exs
View file

@ -52,14 +52,11 @@ defmodule MvWeb.MemberLive.IndexCustomFieldsAccessibilityTest do
field: field field: field
} do } do
conn = conn_with_oidc_user(conn) conn = conn_with_oidc_user(conn)
{:ok, _view, html} = live(conn, "/members") {:ok, view, _html} = live(conn, "/members")
# Check that the sort button has aria-label # Check that the sort button has aria-label and data-testid
assert html =~ ~r/aria-label=["']Click to sort["']/i or test_id = "custom_field_#{field.id}"
html =~ ~r/aria-label=["'].*sort.*["']/i assert has_element?(view, "[data-testid='#{test_id}'][aria-label='Click to sort']")
# Check that data-testid is present for testing
assert html =~ ~r/data-testid=["']custom_field_#{field.id}["']/
end end
test "sort header component shows correct ARIA label when sorted ascending", %{ test "sort header component shows correct ARIA label when sorted ascending", %{
@ -71,10 +68,9 @@ defmodule MvWeb.MemberLive.IndexCustomFieldsAccessibilityTest do
{:ok, view, _html} = {:ok, view, _html} =
live(conn, "/members?query=&sort_field=custom_field_#{field.id}&sort_order=asc") live(conn, "/members?query=&sort_field=custom_field_#{field.id}&sort_order=asc")
html = render(view) # Check that aria-label indicates ascending sort using data-testid
test_id = "custom_field_#{field.id}"
# Check that aria-label indicates ascending sort assert has_element?(view, "[data-testid='#{test_id}'][aria-label='ascending']")
assert html =~ ~r/aria-label=["'].*ascending.*["']/i
end end
test "sort header component shows correct ARIA label when sorted descending", %{ test "sort header component shows correct ARIA label when sorted descending", %{
@ -86,28 +82,21 @@ defmodule MvWeb.MemberLive.IndexCustomFieldsAccessibilityTest do
{:ok, view, _html} = {:ok, view, _html} =
live(conn, "/members?query=&sort_field=custom_field_#{field.id}&sort_order=desc") live(conn, "/members?query=&sort_field=custom_field_#{field.id}&sort_order=desc")
html = render(view) # Check that aria-label indicates descending sort using data-testid
test_id = "custom_field_#{field.id}"
# Check that aria-label indicates descending sort assert has_element?(view, "[data-testid='#{test_id}'][aria-label='descending']")
assert html =~ ~r/aria-label=["'].*descending.*["']/i
end end
test "custom field column header is keyboard accessible", %{conn: conn, field: field} do test "custom field column header is keyboard accessible", %{conn: conn, field: field} do
conn = conn_with_oidc_user(conn) conn = conn_with_oidc_user(conn)
{:ok, _view, html} = live(conn, "/members") {:ok, view, _html} = live(conn, "/members")
# Check that the sort button is a button element (keyboard accessible) # Check that the sort button is a button element (keyboard accessible)
assert html =~ ~r/<button[^>]*data-testid=["']custom_field_#{field.id}["']/ test_id = "custom_field_#{field.id}"
assert has_element?(view, "button[data-testid='#{test_id}']")
# Extract the button element for the custom field and check it doesn't have tabindex="-1"
button_match =
Regex.run(~r/<button[^>]*data-testid=["']custom_field_#{field.id}["'][^>]*>/, html)
assert button_match != nil, "Button with data-testid='custom_field_#{field.id}' not found"
button_html = List.first(button_match)
# Button should not have tabindex="-1" (which would remove from tab order) # Button should not have tabindex="-1" (which would remove from tab order)
refute button_html =~ ~r/tabindex=["']-1["']/ refute has_element?(view, "button[data-testid='#{test_id}'][tabindex='-1']")
end end
test "custom field column header has proper semantic structure", %{conn: conn, field: field} do test "custom field column header has proper semantic structure", %{conn: conn, field: field} do