feat: home screen and navigation design

web/src/components/__tests__/DashboardShell.spec.ts

@@ -14,11 +14,15 @@ vi.mock('@/composables/useApi', async (importOriginal) => {
 	}
 })
 
-async function mountShell(path: string) {
+async function mountShell(path: string, username = 'marta') {
 	setActivePinia(createPinia())
-	vi.mocked(useApi).mockReturnValue({ getMe: vi.fn().mockResolvedValue({ verified: true }) })
+	vi.mocked(useApi).mockReturnValue({
+		getMe: vi.fn().mockResolvedValue({ verified: true, username }),
+		request: vi.fn().mockResolvedValue(undefined),
+	})
 	await router.push(path)
 	const wrapper = mount(DashboardShell, {
+		attachTo: document.body,
 		global: {
 			plugins: [router, uiPlugin],
 		},
@@ -29,6 +33,7 @@ async function mountShell(path: string) {
 
 afterEach(async () => {
 	await router.push('/login')
+	document.body.innerHTML = ''
 })
 
 describe('DashboardShell renders the three navigation destinations', () => {
@@ -66,3 +71,86 @@ describe('DashboardShell shows the offline banner when the browser reports offli
 		onLineSpy.mockRestore()
 	})
 })
+
+describe('The sidebar header renders AppLogo and the "RenewCMS" wordmark', () => {
+	it('renders the logo before the wordmark text, neither as a link', async () => {
+		const wrapper = await mountShell('/home')
+
+		const header = wrapper.find('[data-slot="header"]')
+		expect(header.find('svg[role="img"][aria-label="RenewCMS"]').exists()).toBe(true)
+		expect(header.text()).toContain('RenewCMS')
+		expect(header.find('a').exists()).toBe(false)
+
+		const headerHtml = header.html()
+		expect(headerHtml.indexOf('<svg')).toBeLessThan(headerHtml.indexOf('RenewCMS</span>'))
+	})
+})
+
+describe('The sidebar collapse trigger toggles the rail and exposes aria-expanded', () => {
+	it('flips the rail and aria-expanded on repeated activation', async () => {
+		await mountShell('/home')
+
+		const collapseButton = () =>
+			document.body.querySelector('[data-testid="sidebar-collapse"]') as HTMLButtonElement
+
+		expect(collapseButton().getAttribute('aria-expanded')).toBe('true')
+
+		collapseButton().click()
+		await flushPromises()
+
+		expect(collapseButton().getAttribute('aria-expanded')).toBe('false')
+
+		collapseButton().click()
+		await flushPromises()
+
+		expect(collapseButton().getAttribute('aria-expanded')).toBe('true')
+	})
+})
+
+describe('A successful logout clears the session and navigates to /login', () => {
+	it('calls POST /v1/auth/logout, clears the session and navigates to /login', async () => {
+		await mountShell('/home')
+
+		const logOutItem = () =>
+			Array.from(document.body.querySelectorAll('[role="menuitem"]')).find(
+				(el) => el.textContent?.trim() === 'Log out',
+			) as HTMLElement
+
+		const trigger = document.body.querySelector('button[aria-haspopup]') as HTMLButtonElement
+		trigger.click()
+		await flushPromises()
+
+		logOutItem().click()
+		await flushPromises()
+
+		expect(vi.mocked(useApi)().request).toHaveBeenCalledWith(
+			'/v1/auth/logout',
+			expect.objectContaining({ method: 'POST' }),
+		)
+		expect(router.currentRoute.value.path).toBe('/login')
+	})
+})
+
+describe('Collapsed sidebar hides the wordmark and username text but keeps an accessible name', () => {
+	it('hides visible text but keeps accessible names for the logo and the user menu', async () => {
+		await mountShell('/home')
+
+		const collapseButton = document.body.querySelector(
+			'[data-testid="sidebar-collapse"]',
+		) as HTMLButtonElement
+		collapseButton.click()
+		await flushPromises()
+
+		const header = document.body.querySelector('[data-slot="header"]') as HTMLElement
+		expect(header.querySelector('svg[role="img"][aria-label="RenewCMS"]')).toBeTruthy()
+		expect(header.textContent).not.toContain('RenewCMS')
+		expect(header.querySelector('span[aria-hidden="true"]')).toBeNull()
+
+		const footer = document.body.querySelector('[data-slot="footer"]') as HTMLElement
+		expect(footer.textContent).not.toContain('marta')
+
+		const userMenuTrigger = footer.querySelector('button[aria-haspopup]') as HTMLButtonElement
+		expect(userMenuTrigger.getAttribute('aria-label')).toBe('marta — account menu')
+		expect(footer.querySelector('[data-slot="fallback"]')?.textContent).toBe('MA')
+	})
+})