View Source Ensemble (ensemble v0.0.1)

Test LiveView with ARIA roles.

If you are new to the concepts of accessible names or roles I recommend reading W3C’s guides:

Note: Ensemble has only a partial implementation of the accessible name algorithm, specifically it supports aria-label and descendant content but does not yet support aria-labelledby due to the constraints of selectors.

Summary

Functions

Checks if the given element with role (and optional accessible name) exists within view.

Find element with a unique role or accessible name combo to scope a function to.

Functions

Link to this function

has_role?(view, role, opts_or_accessible_name \\ [])

View Source

Checks if the given element with role (and optional accessible name) exists within view.

Examples

defmodule TodoLiveTest do
  use YourAppWeb.ConnCase, async: true

  import Phoenix.LiveViewTest
  import Ensemble

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

    assert view |> has_role?(:banner)
    assert view |> has_role?(:main)
    assert view |> has_role?(:contentinfo)

    assert view |> has_role?(:navigation, "Primary")

    refute view |> has_role?(:link, "Does not exist")
  end
end
Link to this function

role(view, role, opts_or_accessible_name \\ [])

View Source

Find element with a unique role or accessible name combo to scope a function to.

It expects the current LiveView, a role, and an accessible name.

Examples

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