mirror of
https://github.com/we-promise/sure.git
synced 2026-05-29 23:39:03 +00:00
Pixel-level alignment to the design's §05 mock + cleanup from a DS
audit pass.
Paddings, margins, font sizes
- Health strip: my-4 → mt-4 mb-5 to match the design's 16px / 20px
vertical breathing room.
- Search filters bar: gap-2 → gap-2.5; mt-2 → mt-5 mb-3 (was missing
the 12px bottom margin entirely).
- Search box: rounded-lg → rounded-[10px]; px-3 py-2 → px-[14px]
py-[9px]. Search icon downsized w-4 → w-3.5 to match.
- Chip group: p-1 → p-[3px]; rounded-lg → rounded-[10px].
- Chip: py-1 → py-[5px]; rounded-md → rounded-lg.
- Group heading: mt-2 → mt-[18px]; mb-1 → mb-1.5.
- Status pill: text-xs → text-[11px].
- Provider card: gap-3 → gap-2.5 (outer + top); name gets explicit
text-sm; tagline + foot 14px → 13px; arrow icon w-4 → w-3.5.
- Sync icon button: p-1 → fixed w-7 h-7 (28×28) so the row hit
target matches the design's column width.
- Connect drawer header logo glyph: text-[10px] → text-xs (matches
the available card's logo-glyph treatment).
Component / partial cleanup (DS audit follow-ups)
- New _maturity_badge partial replaces the inline span that was
duplicated in 3 places (_connection_row, _drawer_header,
provider_card.html.erb).
- Settings::ProviderCard.maturity_label class method centralizes the
MATURITY_LABELS lookup; callers no longer reach into the constant.
- _connection_row title: <h2> → <h3> (the row sits inside the
"Your connections" h2 group heading; nested h2s flattened the
outline).
- show.html.erb encryption error: <h3> → <h2> for the same reason.
Locale
- Drop orphaned keys: settings.providers.groups.connected and
groups.needs_attention (no view code uses them) plus the leftover
show.coinbase_title block.
- Health strip "needs reconsent" → "needs attention" so the strip
copy lines up with the per-row status pill ("Action needed") and
the original group heading wording.
A11y
- focus-visible:ring-2 on chip buttons, provider-card link, and
focus-within:ring-2 on the search input wrapper. Keyboard users
now get a visible focus state.
- Search input: explicit autocomplete="off" (erb_lint hint).
163 lines
6.0 KiB
Ruby
163 lines
6.0 KiB
Ruby
require "application_system_test_case"
|
|
|
|
class Settings::ProvidersTest < ApplicationSystemTestCase
|
|
setup do
|
|
@user = users(:family_admin)
|
|
@family = families(:dylan_family)
|
|
login_as @user
|
|
end
|
|
|
|
test "shows status pill on section header for a configured provider" do
|
|
SimplefinItem.create!(family: @family, name: "Test SimpleFIN", access_url: "https://bridge.simplefin.org/simplefin/access")
|
|
|
|
visit settings_providers_path
|
|
|
|
within("details", text: "SimpleFIN") do
|
|
assert_text "Connected"
|
|
end
|
|
end
|
|
|
|
test "unconfigured SimpleFIN appears in Available with a connect affordance" do
|
|
visit settings_providers_path
|
|
|
|
assert_no_selector "details", text: "SimpleFIN"
|
|
|
|
within available_provider_cards_container do
|
|
assert_text "SimpleFIN"
|
|
assert_selector "a[data-turbo-frame='drawer']", text: "Connect"
|
|
end
|
|
end
|
|
|
|
test "connected providers are grouped under Your connections in alphabetical title order" do
|
|
SimplefinItem.create!(family: @family, name: "Test SimpleFIN", access_url: "https://bridge.simplefin.org/simplefin/access")
|
|
|
|
visit settings_providers_path
|
|
|
|
titles = all("details").map { |d| d.find("summary h3", match: :first).text.squish }
|
|
assert_equal titles.sort_by(&:downcase), titles, "Connection panels should render alphabetically by title"
|
|
|
|
connections_heading = page.find(:xpath, "//h2[contains(normalize-space(), 'Your connections')]")
|
|
available_heading = page.find(:xpath, "//h2[contains(normalize-space(), 'Available')]")
|
|
connections_y = connections_heading.native.location.y
|
|
available_y = available_heading.native.location.y
|
|
|
|
assert_operator connections_y, :<, page.find("details", text: "SimpleFIN").native.location.y
|
|
assert_operator page.find("details", text: "SimpleFIN").native.location.y, :<, available_y
|
|
end
|
|
|
|
test "expanding a section still works as expected" do
|
|
SimplefinItem.create!(family: @family, name: "Test SimpleFIN", access_url: "https://bridge.simplefin.org/simplefin/access")
|
|
|
|
visit settings_providers_path
|
|
|
|
assert_selector "details:not([open])", text: "SimpleFIN"
|
|
|
|
find("details", text: "SimpleFIN").find("summary").click
|
|
|
|
assert_selector "details[open]", text: "SimpleFIN"
|
|
within("details[open]", text: "SimpleFIN") do
|
|
assert_text "Setup Token"
|
|
end
|
|
end
|
|
|
|
test "groups providers into Your connections and Available with counts" do
|
|
SimplefinItem.create!(family: @family, name: "Test SimpleFIN", access_url: "https://bridge.simplefin.org/simplefin/access")
|
|
|
|
visit settings_providers_path
|
|
|
|
connections_heading = find(:xpath, "//h2[contains(., 'Your connections')]")
|
|
normalized = connections_heading.text.squish
|
|
assert_match(/Your connections .*· \d+/, normalized)
|
|
|
|
connections_y = connections_heading.native.location.y
|
|
available_heading = find(:xpath, "//h2[contains(., 'Available')]")
|
|
available_y = available_heading.native.location.y
|
|
simplefin_y = find("details", text: "SimpleFIN").native.location.y
|
|
|
|
assert_operator connections_y, :<, simplefin_y, "Your connections heading should appear above SimpleFIN section"
|
|
assert_operator simplefin_y, :<, available_y, "SimpleFIN should appear above Available heading"
|
|
|
|
available_grid_top = available_provider_cards_container.native.location.y
|
|
assert_operator available_y, :<, available_grid_top, "Available heading should appear above the card grid"
|
|
end
|
|
|
|
test "action needed group is absent when no providers have issues" do
|
|
SimplefinItem.create!(family: @family, name: "Test SimpleFIN", access_url: "https://bridge.simplefin.org/simplefin/access")
|
|
|
|
visit settings_providers_path
|
|
|
|
assert_selector "h2", text: /\AYour connections/
|
|
assert_no_selector "h2", text: /\AAction needed/
|
|
end
|
|
|
|
test "enable banking with expiring session appears in your connections and auto-opens" do
|
|
item = EnableBankingItem.new(
|
|
family: @family,
|
|
name: "Test Bank",
|
|
country_code: "DE",
|
|
application_id: "test-app-id",
|
|
session_id: "test-session",
|
|
session_expires_at: 5.days.from_now
|
|
)
|
|
# Skip certificate validation for test purposes
|
|
item.save!(validate: false)
|
|
|
|
visit settings_providers_path
|
|
|
|
assert_selector "h2", text: /\AYour connections/
|
|
|
|
# Auto-expanded warning sections hide compact meta behind `group-open:hidden`;
|
|
# collapse once so the re-consent copy is visible again.
|
|
enable = find("details", text: /Enable Banking/)
|
|
enable.find("summary").click if enable.matches_selector?(":open")
|
|
|
|
assert_selector "details:not([open])", text: /Enable Banking/
|
|
assert_text "Re-consent needed in 5 days"
|
|
end
|
|
|
|
test "search input filters provider cards by name" do
|
|
visit settings_providers_path
|
|
|
|
find('[data-providers-filter-target="input"]').set("Coinbase")
|
|
|
|
assert_selector "a[data-providers-filter-target='card']", text: /Coinbase/i
|
|
assert_no_selector "a[data-providers-filter-target='card']", text: /Binance/i
|
|
end
|
|
|
|
test "kind chip narrows the grid to providers of that kind" do
|
|
visit settings_providers_path
|
|
|
|
click_on "Crypto"
|
|
|
|
assert_selector "a[data-providers-filter-target='card']", text: /Coinbase/i
|
|
assert_no_selector "a[data-providers-filter-target='card']", text: /SimpleFIN/i
|
|
end
|
|
|
|
test "available providers render as a card grid" do
|
|
visit settings_providers_path
|
|
|
|
within available_provider_cards_container do
|
|
assert_text "SimpleFIN"
|
|
assert_selector "a[data-turbo-frame='drawer']", minimum: 1
|
|
end
|
|
end
|
|
|
|
test "clicking a provider card opens the connect drawer" do
|
|
visit settings_providers_path
|
|
|
|
within available_provider_cards_container do
|
|
find("a[data-turbo-frame='drawer']", text: "SimpleFIN").click
|
|
end
|
|
|
|
assert_selector "dialog[open]"
|
|
assert_text "Setup Token"
|
|
end
|
|
|
|
private
|
|
|
|
# Card grid rendered after the `#available` group heading (following sibling div.grid)
|
|
def available_provider_cards_container
|
|
find("#available").find(:xpath, "following-sibling::div[contains(concat(' ', normalize-space(@class), ' '), ' grid ')]")
|
|
end
|
|
end
|