feat(help): in-app help center with per-screen guides and pictures

A help icon on every screen opens a panel with the screen's overview, its
sub-screens, task guides with a framed picture per step, search across guides
and the wiki, and a switch to any other screen's help. Guides exist for the
dashboard, Vacay, Atlas, Collections, Journey (list, journal, studio), Settings
(all tabs), Admin (all tabs) and the trip frame; the trip's own screens are
in progress. Pictures are produced by Playwright (client/e2e/help), texts in
all 23 languages.
This commit is contained in:
Maurice
2026-09-21 23:20:27 +02:00
parent 151e32107f
commit 4346d7f2c1
483 changed files with 47654 additions and 33 deletions
@@ -0,0 +1,30 @@
import React from 'react'
import { describe, it, expect, beforeEach } from 'vitest'
import { render, screen, fireEvent } from '../../../tests/helpers/render'
import { useHelpStore } from '../../store/helpStore'
import { getHelpGuide } from '../../help/registry'
import HelpGuideView from './HelpGuideView'
const initial = useHelpStore.getState()
beforeEach(() => {
useHelpStore.setState(initial, true)
})
describe('HelpGuideView: links', () => {
it('offers the in-app link of a guide that has one and closes the dialog on the way', () => {
useHelpStore.setState({ open: true })
render(<HelpGuideView guide={getHelpGuide('widgets')!} />)
const link = screen.getByRole('link', { name: /Open Appearance settings/ })
expect(link).toHaveAttribute('href', '/settings?tab=appearance')
fireEvent.click(link)
expect(useHelpStore.getState().open).toBe(false)
})
it('lists every step and has no link for a quick guide', () => {
render(<HelpGuideView guide={getHelpGuide('delete-trip')!} />)
expect(screen.getAllByLabelText(/^Step \d$/)).toHaveLength(getHelpGuide('delete-trip')!.steps)
expect(screen.queryByRole('link', { name: /Open Appearance settings/ })).toBeNull()
expect(screen.getByRole('link', { name: /Open in Help & Docs/ })).toHaveAttribute('href', '/help/My-Trips-Dashboard#per-trip-actions')
})
})