60 lines
1.9 KiB
Elixir
60 lines
1.9 KiB
Elixir
defmodule MvWeb.MemberLive.IndexStickyPinnedTest do
|
|
@moduledoc """
|
|
§1.19 — When the table scrolls vertically and horizontally, the header stays
|
|
sticky. Horizontal pinning is limited to the checkbox column (with a scroll
|
|
fade marking the boundary) rather than also pinning the Name column;
|
|
overflowing cell content truncates with ellipsis and exposes a hover/focus
|
|
tooltip.
|
|
"""
|
|
use MvWeb.ConnCase, async: false
|
|
|
|
import Phoenix.LiveViewTest
|
|
|
|
alias Mv.Helpers.SystemActor
|
|
|
|
@moduletag :ui
|
|
|
|
setup %{conn: conn} do
|
|
{:ok, _} =
|
|
Mv.Membership.create_member(
|
|
%{
|
|
first_name: "Reginald",
|
|
last_name: "Worthington-Smythe",
|
|
email: "reginald@example.com",
|
|
street: "A Very Long Street Name That Overflows",
|
|
house_number: "123",
|
|
postal_code: "10115",
|
|
city: "Berlin"
|
|
},
|
|
actor: SystemActor.get_system_actor()
|
|
)
|
|
|
|
%{conn: conn_with_oidc_user(conn)}
|
|
end
|
|
|
|
test "header is sticky and only the checkbox column is pinned", %{conn: conn} do
|
|
{:ok, _view, html} = live(conn, ~p"/members")
|
|
|
|
# Sticky header (desktop).
|
|
assert html =~ "lg:sticky"
|
|
assert html =~ "lg:top-0"
|
|
|
|
# Only the checkbox column is pinned (left-0) now; a scroll fade marks the
|
|
# boundary instead of also pinning the Name column at left-12.
|
|
assert html =~ "left-0"
|
|
assert html =~ "sticky-first-col-th"
|
|
refute html =~ "left-12"
|
|
end
|
|
|
|
test "composite cells truncate and expose a tooltip via title", %{conn: conn} do
|
|
{:ok, view, _html} = live(conn, ~p"/members")
|
|
|
|
name_cell = view |> element("[data-testid='member-name']") |> render()
|
|
assert name_cell =~ "truncate"
|
|
assert name_cell =~ ~s(title="Reginald Worthington-Smythe")
|
|
|
|
address_cell = view |> element("[data-testid='member-address']") |> render()
|
|
assert address_cell =~ "truncate"
|
|
assert address_cell =~ ~s(title="A Very Long Street Name That Overflows 123")
|
|
end
|
|
end
|