Ensemble - Test LiveView with ARIA Roles

Your Libraries & OS Mentoring Libraries
, , ,
1

I made ensemble for testing ARIA roles in Phoenix LiveView. If you’ve ever used react-testing-library or Playwright you might have come across getByRole , it’s gold for both making writing tests simpler and improving the accessibility of your web app.

import Ensemble and you have access to has_role?/3 and role/3, which are like has_element?/3 and element/3 from LiveViewTest but accept ARIA roles and an accessible name instead of a selector:

defmodule TodoLiveTest do
  use YourAppWeb.ConnCase, async: true

  import Phoenix.LiveViewTest
  import Ensemble

  test "has landmarks and nav", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todos")

    assert view |> role(:banner) |> render() =~ ~r|^<header|
    assert view |> role(:main) |> render() =~ ~r|^<main|
    assert view |> role(:contentinfo) |> render() =~ ~r|^<footer|

    assert view |> role(:navigation, "Primary") =~ ~r|^<nav|
    assert view |> role(:link, "Home") =~ ~r|^<a href="/"|
  end

  test "subscribe form", %{conn: conn} do
    assert view |> role(:form) =~ ~r|^<form|
    assert view |> role(:textbox, "Email") =~ ~r|^<input type="text"|
    assert view |> role(:checkbox, "Send newsletter") =~ ~r|^<input type="checkbox"|
    assert view |> role(:button, "Subscribe") =~ ~r|^<button type="submit"|
  end

  test "submit form", %{conn: conn} do
    assert view
            |> role(:button, "Subscribe")
            |> render_click() =~ "Thanks for subscribing!"
  end
end
10 Likes
2

As someone coming from a JS background, one of things I was missing was something like the react-testing-library. I was actually thinking about creating a library for this, so thank you so much for creating it! :slight_smile: I’m gonna give it a try.

1 Like