feat(SPA): media page T0

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

@@ -58,14 +58,21 @@ afterEach(async () => {
 	document.body.innerHTML = ''
 })
 
-describe('DashboardShell renders the five navigation destinations', () => {
-	it('lists Home, Articles, Users, Integration and Settings in order, with only Articles carrying aria-current', async () => {
+describe('DashboardShell renders the six navigation destinations', () => {
+	it('lists Home, Articles, Media, Users, Integration and Settings in order, with only Articles carrying aria-current', async () => {
 		const wrapper = await mountShell('/article')
 
 		const hrefs = wrapper
 			.findAll('nav[aria-label="Main"] a')
 			.map((link) => link.attributes('href'))
-		expect(hrefs).toEqual(['/home', '/article', '/users', '/integration', '/settings'])
+		expect(hrefs).toEqual([
+			'/home',
+			'/article',
+			'/media',
+			'/users',
+			'/integration',
+			'/settings',
+		])
 
 		const home = wrapper.find('a[href="/home"]')
 		const articles = wrapper.find('a[href="/article"]')
@@ -78,7 +85,7 @@ describe('DashboardShell renders the five navigation destinations', () => {
 		expect(integration.attributes('aria-current')).toBeUndefined()
 	})
 
-	it('lists the same five destinations in the mobile drawer and Settings current', async () => {
+	it('lists the same six destinations in the mobile drawer and Settings current', async () => {
 		await mountShell('/settings', { width: MOBILE_WIDTH })
 
 		const toggle = document.body.querySelector('[data-slot="toggle"]') as HTMLButtonElement
@@ -91,12 +98,36 @@ describe('DashboardShell renders the five navigation destinations', () => {
 		expect(links.map((link) => link.getAttribute('href'))).toEqual([
 			'/home',
 			'/article',
+			'/media',
 			'/users',
 			'/integration',
 			'/settings',
 		])
-		expect(links[4].querySelector('[class*="lucide"], svg')).not.toBeNull()
-		expect(links[4].getAttribute('aria-current')).toBe('page')
+		expect(links[5].querySelector('[class*="lucide"], svg')).not.toBeNull()
+		expect(links[5].getAttribute('aria-current')).toBe('page')
+	})
+
+	it('marks Media with aria-current on /media, in the sidebar and in the mobile drawer', async () => {
+		const wrapper = await mountShell('/media')
+
+		const media = wrapper.find('a[href="/media"]')
+		expect(media.text()).toContain('Media')
+		expect(media.attributes('aria-current')).toBe('page')
+		expect(media.find('svg, [class*="lucide"]').exists()).toBe(true)
+		expect(wrapper.find('a[href="/article"]').attributes('aria-current')).toBeUndefined()
+		expect(wrapper.find('a[href="/users"]').attributes('aria-current')).toBeUndefined()
+		wrapper.unmount()
+		mountedShell = null
+		document.body.innerHTML = ''
+
+		await mountShell('/media', { width: MOBILE_WIDTH })
+		const toggle = document.body.querySelector('[data-slot="toggle"]') as HTMLButtonElement
+		toggle.click()
+		await flushPromises()
+		const drawerMedia = document.body.querySelector(
+			'[role="dialog"] nav[aria-label="Main"] a[href="/media"]',
+		)
+		expect(drawerMedia?.getAttribute('aria-current')).toBe('page')
 	})
 
 	it('marks Users with aria-current on /users', async () => {
@@ -232,11 +263,11 @@ describe('The account chip shows the display name and no item is current on /pro
 		expect(trigger?.getAttribute('aria-label')).toBe('Marta Alves — account menu')
 	})
 
-	it('marks none of the five navigation items current on /profile', async () => {
+	it('marks none of the six navigation items current on /profile', async () => {
 		const wrapper = await mountShell('/profile')
 
 		const links = wrapper.findAll('nav[aria-label="Main"] a')
-		expect(links).toHaveLength(5)
+		expect(links).toHaveLength(6)
 		links.forEach((link) => expect(link.attributes('aria-current')).toBeUndefined())
 	})
 })