105 lines
6.5 KiB
Gherkin
105 lines
6.5 KiB
Gherkin
Feature: DashboardShell wordmark, sidebar collapse and the UserMenu
|
|
|
|
As the maintainer of RenewCMS
|
|
I want DashboardShell built from the exact primitives docs/design/components.md specifies —
|
|
AppLogo plus the "RenewCMS" wordmark in the sidebar header, and a UserMenu (UDropdownMenu on a
|
|
ghost UButton with a UAvatar) in the sidebar footer, with a collapsed rail that hides text but
|
|
never drops an accessible name
|
|
So that every verified route's sidebar matches the visual spec of record and stays usable when
|
|
collapsed, instead of the current plain-text "RenewCMS" header and "Log out" footer
|
|
|
|
Background:
|
|
Given DashboardShell is the layout for every verified route, per docs/design/routes.md
|
|
And DashboardShell composes a UDashboardGroup storage="local" with a UDashboardSidebar
|
|
collapsible :resizable="false" :default-size="14" :collapsed-size="3.5", per
|
|
docs/design/components.md's DashboardShell section
|
|
And the sidebar's #header slot renders AppLogo (the same reusable inline-SVG brand mark
|
|
AuthShell uses) followed by the "RenewCMS" wordmark text, not the plain
|
|
<span class="font-semibold">RenewCMS</span> the shell renders today
|
|
And the sidebar's #default slot is a UNavigationMenu orientation="vertical" :collapsed bound
|
|
to the sidebar's own collapsed state, with items Home, Articles, Users, Integration and Settings, in that order
|
|
And the sidebar's #footer slot renders a UserMenu component, not the plain
|
|
<span>Log out</span> text the shell renders today
|
|
And UserMenu is the account menu specified in features/profile_page.feature, anchored to a
|
|
ghost UButton block containing a UAvatar and the session's name (the display name when not
|
|
empty, else the username)
|
|
And the UAvatar's initials follow features/profile_page.feature (the first letters of the
|
|
first two words of a display name, the first two characters of a single word or of a
|
|
username, upper-cased; for example "marta" gives "MA"), and the avatar is aria-hidden
|
|
because the name is shown next to it
|
|
And UserMenu's groups, top to bottom, are: a header (the name and the email); Profile; a
|
|
checkbox group of System, Light and Dark bound to useColorMode().preference, with the
|
|
current preference's item checked; then Log out, in its own trailing group
|
|
And Log out calls POST /v1/auth/logout inside a try/finally with a loading flag (no catch),
|
|
then calls session.clear() and navigates to /login — the exact same shape PendingView.vue
|
|
and VerifyView.vue already use for their own log-out actions, not a new resilience pattern
|
|
And per docs/design/components.md's DashboardShell a11y note, in the collapsed rail the
|
|
UNavigationMenu's items show tooltips and keep their aria-label; the wordmark and UserMenu
|
|
apply that same spirit when the sidebar collapses to :collapsed-size="3.5"
|
|
|
|
Scenario: The sidebar header renders AppLogo and the "RenewCMS" wordmark
|
|
Given the user is on any verified route with the sidebar expanded
|
|
When DashboardShell mounts
|
|
Then the sidebar's #header slot renders an AppLogo before the text "RenewCMS"
|
|
And the wordmark text "RenewCMS" is visible next to the logo
|
|
And neither the logo nor the wordmark is a link, since there is nothing to navigate to from
|
|
the shell itself
|
|
|
|
Scenario: The sidebar collapse trigger toggles the rail and exposes aria-expanded
|
|
Given the user is on any verified route with the sidebar expanded
|
|
When the user activates UDashboardSidebarCollapse in the navbar's leading slot
|
|
Then the sidebar transitions to its :collapsed-size="3.5" icon-only rail
|
|
And UDashboardSidebarCollapse carries aria-expanded, reflecting the sidebar's new collapsed
|
|
state
|
|
When the user activates UDashboardSidebarCollapse again
|
|
Then the sidebar returns to its :default-size="14" expanded width
|
|
And aria-expanded reflects the expanded state
|
|
|
|
Scenario: UserMenu lists the header, Profile, color-mode checkboxes, then Log out
|
|
Given the session's username is "marta" and its email is "marta@renew.example"
|
|
When the user activates the UserMenu trigger in the sidebar footer
|
|
Then the menu opens with a UAvatar showing initials "MA" and the trigger's own name text
|
|
"marta"
|
|
And the first group is the header showing "marta" and "marta@renew.example"
|
|
And the next item is "Profile"
|
|
And the following group is a checkbox group with items System, Light and Dark, and exactly the
|
|
item matching the current useColorMode().preference is checked
|
|
And the final group contains only "Log out", separated from the color-mode group
|
|
|
|
Scenario Outline: Selecting a color-mode item updates the preference and its checked state
|
|
Given the user has opened the UserMenu dropdown
|
|
And the current useColorMode().preference is "<from>"
|
|
When the user activates the "<to>" checkbox item
|
|
Then useColorMode().preference is set to "<to>"
|
|
And the "<to>" item is checked and the "<from>" item is no longer checked
|
|
|
|
Examples:
|
|
| from | to |
|
|
| system | light |
|
|
| light | dark |
|
|
| dark | system |
|
|
|
|
Scenario: A successful logout clears the session and navigates to /login
|
|
Given the user has opened the UserMenu dropdown
|
|
When the user activates "Log out"
|
|
Then a POST request is made to /v1/auth/logout
|
|
And once it resolves, the local session is cleared
|
|
And the user is navigated to /login
|
|
|
|
Scenario: Collapsed sidebar hides the wordmark and username text but keeps an icon-only rail
|
|
Given the user is on any verified route
|
|
When the sidebar is collapsed to its :collapsed-size="3.5" icon-only rail
|
|
Then the AppLogo icon in the sidebar header remains visible, but the "RenewCMS" wordmark text
|
|
is hidden, not merely visually truncated
|
|
And the header keeps an accessible name for the brand mark (an aria-label or sr-only text
|
|
reading "RenewCMS" on the logo or its wrapper), so collapsing the rail is not a pure a11y
|
|
regression
|
|
And the UserMenu trigger in the sidebar footer still shows the UAvatar, but the name text
|
|
next to it is hidden
|
|
And the UserMenu trigger keeps an accessible name that includes the name (an aria-label
|
|
such as "marta — account menu", or a tooltip plus aria-label), matching the same
|
|
tooltip/aria-label spirit the collapsed rail's UNavigationMenu items already use per
|
|
docs/design/components.md's DashboardShell a11y note
|
|
And activating the collapsed UserMenu trigger still opens the same menu, with the same
|
|
header, Profile, color-mode checkbox group and Log out item as the expanded state
|