BurntCaramel

BurntCaramel

Ensemble - Test LiveView with ARIA Roles

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

Most Liked

wceolin

wceolin

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.

Where Next?

Popular in Announcing Top

danschultzer
In short Plug n’ play OAuth 2.0 provider library. Just set up a resource owner schema with Ecto (your user schema), install the dependen...
New
josevalim
Hi everyone, We would like to announce that Plataformatec is working on a new MySQL driver called MyXQL. Our goal is to eventually integ...
New
pkrawat1
Presenting Aviacommerce, open source e-commerce platform in Elixir Aviacommerce is an open source e-commerce platform in Elixir. We at...
New
bryanjos
Hi, I wanted share a small library we at Revelry Labs made for rendering react components from the server side. There are instructions fo...
New
Eiji
ExApi is a library that I’m developing now and hope release soon This library will allow to: list all apis list all api implementation...
New
mbuhot
Leverage Open Api 3.0 (Swagger) to document, test, validate and explore your Plug and Phoenix APIs. Generate and serve a JSON Open API ...
New
kip
Image is an image processing library for Elixir. It is based upon the fabulous vix library that provides a libvips wrapper for Elixir. I...
622 18474 194
New
type1fool
WebAuthnLiveComponent WebAuthnComponents See this post about renaming the package. Passwordless authentication for Phoenix LiveView app...
New
zachdaniel
Ash Framework What is Ash? Ash Framework is a declarative, resource-oriented application development framework for Elixir. A resource can...
New
handnot2
Samly can be used to enable SAML 2.0 Single Sign On in a Plug/Phoenix application. This library uses Erlang esaml to provide plug enabl...
New

Other popular topics Top

Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 41539 114
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
boundedvariable
I am going through the kafka architecture. All the features what the kafka is providing are already in Erlang. I would like hear your opi...
New

We're in Beta

About us Mission Statement