feat(SPA): profile page, display name and the new account menu

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

@@ -379,6 +379,58 @@ describe('The greeting is identical across every load state at a fixed hour', ()
 	})
 })
 
+describe('The greeting names the person by display name, else username', () => {
+	afterEach(() => {
+		vi.restoreAllMocks()
+	})
+
+	it.each([
+		{ displayName: '', name: 'marta' },
+		{ displayName: 'Marta Alves', name: 'Marta Alves' },
+	])('reads the name "$name" for display name "$displayName"', async ({ displayName, name }) => {
+		vi.spyOn(Date.prototype, 'getHours').mockReturnValue(9)
+		setActivePinia(createPinia())
+		const session = useSessionStore()
+		session.session = { verified: true, username: 'marta', displayName }
+		session.status = 'ready'
+		global.fetch = fetchRouter({
+			'GET /v1/article/': () => mockResponse(200, sixArticles),
+		}) as unknown as typeof fetch
+		await router.push('/home')
+		const wrapper = mount(HomeView, {
+			attachTo: document.body,
+			global: { plugins: [router, uiPlugin] },
+		})
+		currentWrapper = wrapper
+		await flushPromises()
+
+		expect(wrapper.find('[data-testid="greeting"]').text()).toBe(`Good morning, ${name}`)
+	})
+
+	it('shows a display name saved after the page was mounted without a reload', async () => {
+		vi.spyOn(Date.prototype, 'getHours').mockReturnValue(9)
+		setActivePinia(createPinia())
+		const session = useSessionStore()
+		session.session = { verified: true, username: 'marta', displayName: '' }
+		session.status = 'ready'
+		global.fetch = fetchRouter({
+			'GET /v1/article/': () => mockResponse(200, sixArticles),
+		}) as unknown as typeof fetch
+		await router.push('/home')
+		const wrapper = mount(HomeView, {
+			attachTo: document.body,
+			global: { plugins: [router, uiPlugin] },
+		})
+		currentWrapper = wrapper
+		await flushPromises()
+
+		session.setDisplayName('Marta Alves')
+		await flushPromises()
+
+		expect(wrapper.find('[data-testid="greeting"]').text()).toBe('Good morning, Marta Alves')
+	})
+})
+
 describe('The greeting handles a missing username', () => {
 	it('renders the plain greeting without a stray comma when the session has no username', async () => {
 		vi.useFakeTimers()