fix: authors profile pictute all accross the SPA

web/src/views/__tests__/AuthorsView.spec.ts

@@ -49,6 +49,40 @@ function manyAuthors(count: number): Author[] {
 	}))
 }
 
+describe('Authors: avatar image', () => {
+	const AVATAR_ID = 77
+	const AVATAR_URL = '/static/uploadedImages/camille.jpg'
+
+	function backendWithAvatar() {
+		const backend = createBackend()
+		backend.authors = backend.authors.map((author) =>
+			author.slug === 'camille-roche' ? { ...author, avatar_id: AVATAR_ID } : author,
+		)
+		backend.responders[`GET /v1/media/${AVATAR_ID}`] = () => ({
+			id: AVATAR_ID,
+			url: AVATAR_URL,
+		})
+		return backend
+	}
+
+	it('draws the saved avatar in the row of the author that has one', async () => {
+		await mountDirectory('authors', '/authors', { backend: backendWithAvatar() })
+		await flushPromises()
+
+		const images = Array.from(
+			document.body.querySelectorAll<HTMLImageElement>('[data-testid="directory-row"] img'),
+		)
+		expect(images.map((image) => image.getAttribute('src'))).toEqual([AVATAR_URL])
+	})
+
+	it('keeps the initials for authors without an avatar', async () => {
+		await mountDirectory('authors', '/authors')
+		await flushPromises()
+
+		expect(document.body.querySelectorAll('[data-testid="directory-row"] img')).toHaveLength(0)
+	})
+})
+
 describe.each(['owner', 'admin'])('Authors: default for %s', (role) => {
 	it('shows the header, the search field, the columns and the rows', async () => {
 		const backend = await mountDirectory('authors', '/authors', { role })

web/src/views/__tests__/EditorAuthorList.spec.ts

@@ -79,6 +79,31 @@ describe('Author list: an ordered list with the first author as the primary byli
 	})
 })
 
+describe('Author list: avatars', () => {
+	const AVATAR_ID = 61
+	const AVATAR_URL = '/static/uploadedImages/ines.jpg'
+
+	function rowImages() {
+		return authorRows().map((row) => row.querySelector('img')?.getAttribute('src') ?? null)
+	}
+
+	it('draws the avatar of an author loaded with the article and keeps the initials of the others', async () => {
+		const backend = backendWith('Inès Duarte', 'Jonas Pereira')
+		backend.article.authors = backend.article.authors!.map((author, index) =>
+			index === 0 ? { ...author, avatar_id: AVATAR_ID } : author,
+		)
+		backend.responders[`GET /v1/media/${AVATAR_ID}`] = () => ({
+			id: AVATAR_ID,
+			url: AVATAR_URL,
+		})
+
+		await mountMeta('editor', EDITOR, { backend })
+		await flushPromises()
+
+		expect(rowImages()).toEqual([AVATAR_URL, null])
+	})
+})
+
 describe('Author list: reorder with the keyboard', () => {
 	async function mountThree() {
 		const backend = backendWith('Inès Duarte', 'Jonas Pereira', 'Camille Roche')