feat: image variants settings screens

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

@@ -20,6 +20,7 @@ interface ShellOptions {
 	username?: string
 	displayName?: string
 	email?: string
+	role?: string
 	width?: number
 }
 
@@ -30,13 +31,14 @@ async function mountShell(path: string, options: ShellOptions = {}) {
 		username = 'marta',
 		displayName = '',
 		email = 'marta@renew.example',
+		role = undefined,
 		width = DESKTOP_WIDTH,
 	} = options
 	localStorage.clear()
 	setViewportWidth(width)
 	setActivePinia(createPinia())
 	vi.mocked(useApi).mockReturnValue({
-		getMe: vi.fn().mockResolvedValue({ verified: true, username, email, displayName }),
+		getMe: vi.fn().mockResolvedValue({ verified: true, username, email, displayName, role }),
 		request: vi.fn().mockResolvedValue(undefined),
 	})
 	await router.push(path)
@@ -382,3 +384,41 @@ describe('Account menu: opened from the drawer on mobile', () => {
 		expect(router.currentRoute.value.path).toBe('/login')
 	})
 })
+
+describe('DashboardShell Settings expands to the Media subpages', () => {
+	it.each(['owner', 'admin'])(
+		'shows Media: Variants and Cache under Settings for %s on /settings',
+		async (role) => {
+			const wrapper = await mountShell('/settings', { role })
+
+			const nav = wrapper.find('nav[aria-label="Main"]')
+			expect(nav.text()).toContain('Media')
+			const variants = nav.find('a[href="/settings/media/variants"]')
+			expect(variants.text()).toContain('Variants')
+			expect(variants.attributes('aria-current')).toBeUndefined()
+			const cache = nav
+				.findAll('[aria-disabled="true"], [disabled]')
+				.find((el) => el.text().includes('Cache'))
+			expect(cache).toBeDefined()
+			expect(nav.find('a[href="/settings"]').attributes('aria-current')).toBe('page')
+		},
+	)
+
+	it('marks Variants current and Settings not current on the variants page', async () => {
+		const wrapper = await mountShell('/settings/media/variants', { role: 'admin' })
+
+		const nav = wrapper.find('nav[aria-label="Main"]')
+		expect(nav.find('a[href="/settings/media/variants"]').attributes('aria-current')).toBe(
+			'page',
+		)
+		expect(nav.find('a[href="/settings"]').attributes('aria-current')).toBeUndefined()
+	})
+
+	it('shows no Media subpages without an owner or admin role', async () => {
+		const wrapper = await mountShell('/settings', { role: 'user' })
+
+		const nav = wrapper.find('nav[aria-label="Main"]')
+		expect(nav.find('a[href="/settings/media/variants"]').exists()).toBe(false)
+		expect(nav.text()).not.toContain('Cache')
+	})
+})