refac: hardening pass with multiple overhauls

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

@@ -0,0 +1,134 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import uiPlugin from '@nuxt/ui/vue-plugin'
+import router from '@/router'
+import { useApi } from '@/composables/useApi'
+import DashboardShell from '../DashboardShell.vue'
+import { MOBILE_WIDTH, setViewportWidth } from './viewport'
+
+vi.mock('@/composables/useApi', async (importOriginal) => {
+	const actual = await importOriginal<typeof import('@/composables/useApi')>()
+	return {
+		...actual,
+		useApi: vi.fn(),
+	}
+})
+
+let mountedShell: VueWrapper | null = null
+
+async function mountMobileShell() {
+	localStorage.clear()
+	setViewportWidth(MOBILE_WIDTH)
+	setActivePinia(createPinia())
+	vi.mocked(useApi).mockReturnValue({
+		getMe: vi.fn().mockResolvedValue({
+			verified: true,
+			username: 'marta',
+			email: 'marta@renew.example',
+			displayName: '',
+		}),
+		request: vi.fn().mockResolvedValue(undefined),
+	})
+	await router.push('/home')
+	mountedShell = mount(DashboardShell, {
+		attachTo: document.body,
+		global: { plugins: [router, uiPlugin] },
+	})
+	await flushPromises()
+}
+
+function drawerChip() {
+	return document.body.querySelector<HTMLButtonElement>('[role="dialog"] button[aria-haspopup]')
+}
+
+function sheet() {
+	return document.body.querySelector('[role="menu"]')
+}
+
+function menuItem(label: string) {
+	return Array.from(
+		document.body.querySelectorAll<HTMLElement>('[role="menu"] [role="menuitem"]'),
+	).find((item) => item.textContent?.trim() === label)!
+}
+
+async function openDrawer() {
+	document.body.querySelector<HTMLButtonElement>('[data-slot="toggle"]')!.click()
+	await flushPromises()
+}
+
+async function openSheetFromChip() {
+	await openDrawer()
+	drawerChip()!.click()
+	await flushPromises()
+}
+
+const closingActions = [
+	{
+		name: 'pressing Escape',
+		close: async () => {
+			document.activeElement?.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+			)
+		},
+	},
+	{
+		name: 'tapping the backdrop',
+		close: async () => {
+			const overlay = document.body.querySelector<HTMLElement>('[data-slot="overlay"]')!
+			overlay.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
+			overlay.dispatchEvent(new MouseEvent('pointerup', { bubbles: true }))
+			overlay.click()
+		},
+	},
+	{
+		name: 'activating "Profile"',
+		close: async () => {
+			menuItem('Profile').click()
+		},
+	},
+]
+
+afterEach(async () => {
+	mountedShell?.unmount()
+	mountedShell = null
+	await router.push('/login')
+	document.body.innerHTML = ''
+})
+
+describe('Mobile account sheet focus', () => {
+	it.each(closingActions)(
+		'returns focus to the navbar toggle when the sheet closes by $name',
+		async ({ close }) => {
+			await mountMobileShell()
+			await openSheetFromChip()
+			expect(sheet()).not.toBeNull()
+
+			await close()
+			await flushPromises()
+
+			expect(sheet()).toBeNull()
+			expect(document.activeElement).toBe(document.body.querySelector('[data-slot="toggle"]'))
+		},
+	)
+
+	it('logs out from the sheet without throwing', async () => {
+		const unhandled = vi.fn()
+		process.on('unhandledRejection', unhandled)
+		await mountMobileShell()
+		await openSheetFromChip()
+
+		menuItem('Log out').click()
+		await flushPromises()
+
+		expect(router.currentRoute.value.path).toBe('/login')
+		expect(unhandled).not.toHaveBeenCalled()
+		process.off('unhandledRejection', unhandled)
+	})
+
+	it('does not put focus on the chip or the toggle when the sheet was never opened', async () => {
+		await mountMobileShell()
+
+		expect(document.activeElement).toBe(document.body)
+	})
+})

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

@@ -0,0 +1,73 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import uiPlugin from '@nuxt/ui/vue-plugin'
+import inviteEmailCases from '../../../../test/testdata/invite_emails.json'
+import InviteUserModal from '../InviteUserModal.vue'
+
+const INVALID_EMAIL = 'Enter a full email address, like name@example.com.'
+
+const inviteUser = vi.fn()
+
+vi.mock('@/composables/useUsers', () => ({
+	useUsers: () => ({ inviteUser }),
+}))
+
+let wrapper: VueWrapper | null = null
+
+function emailInput() {
+	return document.body.querySelector<HTMLInputElement>('input[placeholder="name@example.com"]')!
+}
+
+function dialogText() {
+	return document.body.querySelector('[role="dialog"]')?.textContent ?? ''
+}
+
+function dispatch(element: HTMLElement, type: string) {
+	element.dispatchEvent(new Event(type, { bubbles: true }))
+}
+
+async function mountOpenModal() {
+	wrapper = mount(InviteUserModal, {
+		attachTo: document.body,
+		props: { open: true },
+		global: { plugins: [uiPlugin] },
+	})
+	await flushPromises()
+}
+
+function clickSend() {
+	const send = [...document.body.querySelectorAll('button')].find(
+		(button) => button.textContent?.trim() === 'Send invite',
+	)!
+	send.click()
+	return flushPromises()
+}
+
+afterEach(() => {
+	wrapper?.unmount()
+	wrapper = null
+	document.body.innerHTML = ''
+	inviteUser.mockReset()
+})
+
+describe('Invite modal email rule', () => {
+	it.each(inviteEmailCases)('gives "$email" the shared verdict (valid: $valid)', async (row) => {
+		inviteUser.mockResolvedValue({ id: 1 })
+		await mountOpenModal()
+
+		const input = emailInput()
+		input.value = row.email
+		dispatch(input, 'input')
+		dispatch(input, 'blur')
+		await flushPromises()
+		await clickSend()
+
+		if (row.valid) {
+			expect(dialogText()).not.toContain(INVALID_EMAIL)
+			expect(inviteUser).toHaveBeenCalledTimes(1)
+		} else {
+			expect(dialogText()).toContain(INVALID_EMAIL)
+			expect(inviteUser).not.toHaveBeenCalled()
+		}
+	})
+})

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

@@ -13,6 +13,7 @@ interface MenuProps {
 	displayName?: string
 	email?: string
 	collapsed: boolean
+	sheetOpen?: boolean
 }
 
 const baseProps: MenuProps = {
@@ -302,3 +303,31 @@ describe('Below lg the chip hands the menu to the bottom sheet', () => {
 		expect(menu()).toBeNull()
 	})
 })
+
+describe('Account menu: the chip on mobile follows the sheet', () => {
+	it('reports the sheet through aria-expanded and hands its own element to open-sheet', async () => {
+		setViewportWidth(MOBILE_WIDTH)
+		const wrapper = await mountMenu({ sheetOpen: false })
+
+		expect(chip().getAttribute('aria-expanded')).toBe('false')
+
+		await openMenu()
+
+		expect(wrapper.emitted('open-sheet')).toEqual([[chip()]])
+		expect(chip().getAttribute('aria-expanded')).toBe('false')
+		expect(menu()).toBeNull()
+
+		await wrapper.setProps({ sheetOpen: true })
+		expect(chip().getAttribute('aria-expanded')).toBe('true')
+
+		await wrapper.setProps({ sheetOpen: false })
+		expect(chip().getAttribute('aria-expanded')).toBe('false')
+	})
+
+	it('does not add the sand fill while the sheet is open', async () => {
+		setViewportWidth(MOBILE_WIDTH)
+		await mountMenu({ sheetOpen: true })
+
+		expect(chip().classList.contains('bg-secondary-200')).toBe(false)
+	})
+})