style: consistent badges with sufficient color contrast
This commit is contained in:
parent
d614ad2219
commit
d0b8cb672a
22 changed files with 534 additions and 77 deletions
91
test/mv_web/components/core_components_badge_test.exs
Normal file
91
test/mv_web/components/core_components_badge_test.exs
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
defmodule MvWeb.Components.CoreComponentsBadgeTest do
|
||||
@moduledoc """
|
||||
Unit tests for the Core Components badge (WCAG-compliant, non-transparent).
|
||||
"""
|
||||
use MvWeb.ConnCase, async: true
|
||||
|
||||
import Phoenix.Component
|
||||
import Phoenix.LiveViewTest
|
||||
import MvWeb.CoreComponents
|
||||
|
||||
describe "badge/1" do
|
||||
test "default variant renders with badge and badge-neutral classes (visible, not ghost)" do
|
||||
assigns = %{}
|
||||
|
||||
html =
|
||||
rendered_to_string(~H"""
|
||||
<.badge variant="neutral">Label</.badge>
|
||||
""")
|
||||
|
||||
assert html =~ "badge"
|
||||
assert html =~ "badge-neutral"
|
||||
assert html =~ "badge-soft"
|
||||
refute html =~ "badge-ghost"
|
||||
assert html =~ "Label"
|
||||
end
|
||||
|
||||
test "success variant renders badge-success and badge-soft" do
|
||||
assigns = %{}
|
||||
|
||||
html =
|
||||
rendered_to_string(~H"""
|
||||
<.badge variant="success">Paid</.badge>
|
||||
""")
|
||||
|
||||
assert html =~ "badge-success"
|
||||
assert html =~ "badge-soft"
|
||||
assert html =~ "Paid"
|
||||
end
|
||||
|
||||
test "outline style includes bg-base-100 for contrast" do
|
||||
assigns = %{}
|
||||
|
||||
html =
|
||||
rendered_to_string(~H"""
|
||||
<.badge variant="primary" style="outline">Outline</.badge>
|
||||
""")
|
||||
|
||||
assert html =~ "badge-outline"
|
||||
assert html =~ "bg-base-100"
|
||||
assert html =~ "Outline"
|
||||
end
|
||||
|
||||
test "solid style has no badge-soft or badge-outline" do
|
||||
assigns = %{}
|
||||
|
||||
html =
|
||||
rendered_to_string(~H"""
|
||||
<.badge variant="error" style="solid">Error</.badge>
|
||||
""")
|
||||
|
||||
assert html =~ "badge-error"
|
||||
refute html =~ "badge-soft"
|
||||
refute html =~ "badge-outline"
|
||||
assert html =~ "Error"
|
||||
end
|
||||
|
||||
test "size sm adds badge-sm" do
|
||||
assigns = %{}
|
||||
|
||||
html =
|
||||
rendered_to_string(~H"""
|
||||
<.badge variant="neutral" size="sm">Small</.badge>
|
||||
""")
|
||||
|
||||
assert html =~ "badge-sm"
|
||||
assert html =~ "Small"
|
||||
end
|
||||
|
||||
test "renders as span (non-interactive)" do
|
||||
assigns = %{}
|
||||
|
||||
html =
|
||||
rendered_to_string(~H"""
|
||||
<.badge variant="info">Info</.badge>
|
||||
""")
|
||||
|
||||
assert html =~ ~r/<span[^>]*class="[^"]*badge[^"]*"/
|
||||
refute html =~ ~r/<button/
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
@ -254,6 +254,14 @@ defmodule MvWeb.Helpers.MembershipFeeHelpersTest do
|
|||
end
|
||||
end
|
||||
|
||||
describe "status_variant/1" do
|
||||
test "returns badge variant for <.badge> (suspended uses warning to match edit button)" do
|
||||
assert MembershipFeeHelpers.status_variant(:paid) == :success
|
||||
assert MembershipFeeHelpers.status_variant(:unpaid) == :error
|
||||
assert MembershipFeeHelpers.status_variant(:suspended) == :warning
|
||||
end
|
||||
end
|
||||
|
||||
describe "status_color/1" do
|
||||
test "returns correct color classes for statuses" do
|
||||
assert MembershipFeeHelpers.status_color(:paid) == "badge-success"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue