feat: article editor core

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

@@ -28,7 +28,9 @@ function findMenuItemsByRole(role: string) {
 }
 
 function findCheckboxItem(label: string) {
-	return findMenuItemsByRole('menuitemcheckbox').find((el) => el.textContent?.trim() === label)
+	return findMenuItemsByRole('menuitemcheckbox').find(
+		(el) => el.textContent?.trim() === label,
+	)
 }
 
 beforeEach(() => {
@@ -56,8 +58,8 @@ describe("UserMenu's dropdown lists the account label, color-mode checkboxes, th
 
 		expect(groups[0].textContent).toContain('marta')
 
-		const checkboxLabels = findMenuItemsByRole('menuitemcheckbox').map((el) =>
-			el.textContent?.trim(),
+		const checkboxLabels = findMenuItemsByRole('menuitemcheckbox').map(
+			(el) => el.textContent?.trim(),
 		)
 		expect(checkboxLabels).toEqual(['System', 'Light', 'Dark'])
 
@@ -82,9 +84,15 @@ describe("UserMenu's dropdown lists the account label, color-mode checkboxes, th
 		const wrapper = mountMenu({ username: 'marta', collapsed: false })
 		await openMenu()
 
-		expect(findCheckboxItem('Dark')?.getAttribute('aria-checked')).toBe('true')
-		expect(findCheckboxItem('Light')?.getAttribute('aria-checked')).toBe('false')
-		expect(findCheckboxItem('System')?.getAttribute('aria-checked')).toBe('false')
+		expect(findCheckboxItem('Dark')?.getAttribute('aria-checked')).toBe(
+			'true',
+		)
+		expect(findCheckboxItem('Light')?.getAttribute('aria-checked')).toBe(
+			'false',
+		)
+		expect(findCheckboxItem('System')?.getAttribute('aria-checked')).toBe(
+			'false',
+		)
 
 		wrapper.unmount()
 	})
@@ -105,15 +113,23 @@ describe('Selecting a color-mode item updates the preference and its checked sta
 		const label = to.charAt(0).toUpperCase() + to.slice(1)
 		const fromLabel = from.charAt(0).toUpperCase() + from.slice(1)
 
-		findCheckboxItem(label)?.dispatchEvent(new MouseEvent('pointerup', { bubbles: true }))
-		findCheckboxItem(label)?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+		findCheckboxItem(label)?.dispatchEvent(
+			new MouseEvent('pointerup', { bubbles: true }),
+		)
+		findCheckboxItem(label)?.dispatchEvent(
+			new MouseEvent('click', { bubbles: true }),
+		)
 		await flushPromises()
 
 		expect(colorMode.preference).toBe(to)
 
 		await openMenu()
-		expect(findCheckboxItem(label)?.getAttribute('aria-checked')).toBe('true')
-		expect(findCheckboxItem(fromLabel)?.getAttribute('aria-checked')).toBe('false')
+		expect(findCheckboxItem(label)?.getAttribute('aria-checked')).toBe(
+			'true',
+		)
+		expect(findCheckboxItem(fromLabel)?.getAttribute('aria-checked')).toBe(
+			'false',
+		)
 
 		wrapper.unmount()
 	})
@@ -124,9 +140,9 @@ describe('A successful logout clears the session and navigates to /login', () =>
 		const wrapper = mountMenu({ username: 'marta', collapsed: false })
 		await openMenu()
 
-		const logOutItem = Array.from(document.body.querySelectorAll('[role="menuitem"]')).find(
-			(el) => el.textContent?.trim() === 'Log out',
-		)
+		const logOutItem = Array.from(
+			document.body.querySelectorAll('[role="menuitem"]'),
+		).find((el) => el.textContent?.trim() === 'Log out')
 		;(logOutItem as HTMLElement)?.click()
 		await flushPromises()
 
@@ -141,8 +157,12 @@ describe('Collapsed sidebar hides the wordmark and username text but keeps an ac
 		const wrapper = mountMenu({ username: 'marta', collapsed: true })
 
 		expect(wrapper.text()).not.toContain('marta')
-		expect(findTriggerButton()?.getAttribute('aria-label')).toBe('marta — account menu')
-		expect(document.body.querySelector('[data-slot="fallback"]')?.textContent).toBe('MA')
+		expect(findTriggerButton()?.getAttribute('aria-label')).toBe(
+			'marta — account menu',
+		)
+		expect(
+			document.body.querySelector('[data-slot="fallback"]')?.textContent,
+		).toBe('MA')
 
 		await openMenu()