feat: SEO SPA editor integration

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

@@ -0,0 +1,89 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
+import { initializeLocale, setLocale } from '@/i18n'
+import { click, textOf, unmountMeta } from './metaTestKit'
+import {
+	FOUR_SUGGESTIONS,
+	answerChecks,
+	checkAnswer,
+	mountSeo,
+	openPanel,
+	openSection,
+	panelRoot,
+	seoBackend,
+} from './seoTestKit'
+
+vi.mock('@/composables/useApi', async (importOriginal) => {
+	const actual = await importOriginal<typeof import('@/composables/useApi')>()
+	return { ...actual, useApi: vi.fn() }
+})
+
+beforeEach(() => {
+	localStorage.clear()
+	sessionStorage.clear()
+	setLocale('fr')
+})
+
+afterEach(async () => {
+	await unmountMeta()
+	localStorage.clear()
+	initializeLocale()
+})
+
+describe('French', () => {
+	it('walks through the section, the panel and the dialog in French', async () => {
+		const backend = seoBackend()
+		answerChecks(backend, checkAnswer(FOUR_SUGGESTIONS))
+		backend.responders['GET /v1/article/12/seo'] = () => ({
+			title: 'T',
+			description: 'D',
+			canonical_url: 'https://renew.example/x',
+			robots: 'index, follow',
+			og: { type: 'article', image: '', image_alt: '' },
+			twitter: { card: 'summary' },
+			image: { url: '', alt: '', source: 'none' },
+			authors: [],
+			published_at: null,
+			modified_at: '2026-09-26T11:02:00Z',
+			fallbacks: { title: 'title', description: 'body', image: 'none', canonical: 'site' },
+			json_ld: { '@type': 'Article' },
+		})
+		await mountSeo(backend)
+		expect(document.body.querySelector('[data-testid="seo-summary"]')!.textContent).toBe(
+			'4 suggestions',
+		)
+
+		const body = await openSection()
+		const section = textOf(body)
+		expect(section).toContain('Adresse')
+		expect(section).toContain(
+			'Le titre meta fait 74 caractères. Les moteurs de recherche peuvent le couper après environ 60.',
+		)
+		expect(section).toContain('Aller au titre meta')
+		expect(section).toContain('+1 de plus dans Recherche et partage')
+		expect(section).toContain('Modifier la recherche et le partage')
+
+		const panel = await openPanel()
+		const panelContent = textOf(panel)
+		expect(panelContent).toContain('Recherche et partage')
+		expect(panelContent).toContain('Slug de l’URL')
+		expect(panelContent).toContain('Titre de l’article utilisé')
+		expect(panelContent).toContain('Partage social')
+		expect(panelContent).toContain('Avancé')
+		expect(panelContent).toContain('Masquer des moteurs de recherche')
+		expect(panelContent).toContain('Résultat de recherche')
+		expect(panelContent).toContain('Carte sociale')
+		expect(panelContent).toContain('Enregistrer les modifications')
+		await click('Annuler', panel)
+		await new Promise((resolve) => setTimeout(resolve, 50))
+		await flushPromises()
+		expect(panelRoot()).toBeNull()
+
+		await click('Ce que reçoit le frontend')
+		await flushPromises()
+		const dialog = textOf(document.body.querySelector('[data-testid="api-preview"]'))
+		expect(dialog).toContain('Formaté')
+		expect(dialog).toContain('JSON brut')
+		expect(dialog).toContain('Copier le JSON')
+	})
+})