style: highlight selected table and add tooltip

test/mv_web/components/core_components_table_test.exs

@@ -0,0 +1,154 @@
+defmodule MvWeb.Components.CoreComponentsTableTest do
+  @moduledoc """
+  Tests for the CoreComponents table: row hover/focus and selected styling.
+  """
+  use MvWeb.ConnCase, async: true
+
+  import Phoenix.LiveViewTest
+
+  alias MvWeb.CoreComponents
+
+  describe "table row_click styling" do
+    test "when row_click is set, table rows have hover and focus-within ring classes" do
+      rows = [%{id: "1", name: "Alice"}, %{id: "2", name: "Bob"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: fn _ -> nil end,
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || item["name"] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      assert html =~ "hover:ring-2"
+      assert html =~ "focus-within:ring-2"
+      assert html =~ "hover:ring-base-content/10"
+    end
+
+    test "when row_click is nil, table rows do not have hover ring classes" do
+      rows = [%{id: "1", name: "Alice"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: nil,
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      refute html =~ "hover:ring-2"
+      refute html =~ "focus-within:ring-2"
+    end
+  end
+
+  describe "table selected_row_id styling" do
+    test "when selected_row_id matches a row id, that row has data-selected and ring-primary" do
+      rows = [%{id: "one", name: "Alice"}, %{id: "two", name: "Bob"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: fn _ -> nil end,
+        selected_row_id: "two",
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      assert html =~ ~s(id="row-two")
+      assert html =~ ~s(data-selected="true")
+      assert html =~ "ring-primary"
+    end
+
+    test "when selected_row_id is nil, no row has data-selected" do
+      rows = [%{id: "1", name: "Alice"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: nil,
+        selected_row_id: nil,
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      refute html =~ ~s(data-selected="true")
+    end
+
+    test "when row_selected? is set, multiple rows can have data-selected and ring-primary" do
+      rows = [%{id: "a", name: "Alice"}, %{id: "b", name: "Bob"}, %{id: "c", name: "Claire"}]
+      selected_ids = MapSet.new(["a", "c"])
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: fn _ -> nil end,
+        row_selected?: fn item -> MapSet.member?(selected_ids, item.id) end,
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      # Two rows selected (a and c), one not (b)
+      assert html =~ ~s(id="row-a")
+      assert html =~ ~s(id="row-b")
+      assert html =~ ~s(id="row-c")
+      # data-selected appears twice (for row a and row c)
+      assert String.contains?(html, ~s(data-selected="true"))
+      assert html =~ "ring-primary"
+    end
+  end
+end

test/mv_web/live/member_live_authorization_test.exs

@@ -24,6 +24,7 @@ defmodule MvWeb.MemberLiveAuthorizationTest do
 
       {:ok, view, _html} = live(conn, "/members")
 
+      # Index table has no Edit/Delete per row (only sr-only Show link); ensure they are not present
       refute has_element?(view, "#row-#{member.id} [data-testid=member-edit]")
       refute has_element?(view, "#row-#{member.id} [data-testid=member-delete]")
     end
@@ -31,17 +32,18 @@ defmodule MvWeb.MemberLiveAuthorizationTest do
 
   describe "Member Index - Kassenwart (normal_user)" do
     @tag role: :normal_user
-    test "sees New Member and Edit buttons", %{conn: conn} do
+    test "sees New Member and Show link in row", %{conn: conn} do
       member = Fixtures.member_fixture()
 
       {:ok, view, _html} = live(conn, "/members")
 
       assert has_element?(view, "[data-testid=member-new]")
-      assert has_element?(view, "#row-#{member.id} [data-testid=member-edit]")
+      # Index table action column has sr-only Show link only (Edit is on member show page)
+      assert has_element?(view, "#row-#{member.id} [data-testid=member-show-link]")
     end
 
     @tag role: :normal_user
-    test "does not see Delete button", %{conn: conn} do
+    test "does not see Delete button in table", %{conn: conn} do
       member = Fixtures.member_fixture()
 
       {:ok, view, _html} = live(conn, "/members")
@@ -52,14 +54,14 @@ defmodule MvWeb.MemberLiveAuthorizationTest do
 
   describe "Member Index - Admin" do
     @tag role: :admin
-    test "sees New Member, Edit and Delete buttons", %{conn: conn} do
+    test "sees New Member and Show link in row", %{conn: conn} do
       member = Fixtures.member_fixture()
 
       {:ok, view, _html} = live(conn, "/members")
 
       assert has_element?(view, "[data-testid=member-new]")
-      assert has_element?(view, "#row-#{member.id} [data-testid=member-edit]")
-      assert has_element?(view, "#row-#{member.id} [data-testid=member-delete]")
+      # Index table action column has sr-only Show link only (Edit/Delete are on member show page)
+      assert has_element?(view, "#row-#{member.id} [data-testid=member-show-link]")
     end
   end
 

test/mv_web/member_live/index_membership_fee_status_test.exs

@@ -107,9 +107,9 @@ defmodule MvWeb.MemberLive.IndexMembershipFeeStatusTest do
 
       {:ok, view, _html} = live(conn, "/members")
 
-      # Toggle to current cycle (use the button in the header, not the one in the column)
+      # Toggle to current cycle (use the button in the header)
       view
-      |> element("button[phx-click='toggle_cycle_view'].btn.gap-2")
+      |> element("[data-testid=toggle-cycle-view]")
       |> render_click()
 
       html = render(view)

test/mv_web/member_live/index_test.exs

@@ -304,6 +304,44 @@ defmodule MvWeb.MemberLive.IndexTest do
     assert_redirect(view, ~p"/members/#{member}")
   end
 
+  describe "table row outline (hover and selected)" do
+    @describetag :ui
+
+    test "clickable rows have hover and focus-within ring classes", %{conn: conn} do
+      system_actor = Mv.Helpers.SystemActor.get_system_actor()
+
+      {:ok, _member} =
+        Mv.Membership.create_member(
+          %{first_name: "Hover", last_name: "Test", email: "hover@example.com"},
+          actor: system_actor
+        )
+
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, "/members")
+
+      # CoreComponents table adds hover and focus-within ring when row_click is set
+      assert html =~ "hover:ring-2"
+      assert html =~ "focus-within:ring-2"
+      assert html =~ "hover:ring-base-content/10"
+    end
+
+    test "selected outline only from checkbox selection, not from highlight param", %{conn: conn} do
+      system_actor = Mv.Helpers.SystemActor.get_system_actor()
+
+      {:ok, member} =
+        Mv.Membership.create_member(
+          %{first_name: "Highlight", last_name: "Only", email: "highlight@example.com"},
+          actor: system_actor
+        )
+
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members?highlight=#{member.id}")
+
+      # Outline is only for checkbox selection; highlight param does not set data-selected
+      refute has_element?(view, "tr#row-#{member.id}[data-selected='true']")
+    end
+  end
+
   describe "copy_emails feature" do
     setup do
       system_actor = Mv.Helpers.SystemActor.get_system_actor()