Feature/post media translations (#42)
* chore: updated todo with translation ideas * feat: first take at the implementation of translations * fix: small addition for the translation feature * feat: support language switching in the editor and preview * feat: better handling of long bodies by not running them through a json envelope * fix: unknown macros have better fallback * feat: api for python to get translations * fix: strip dumb prefix of content in translation * feat: extend meta diff for translations * feat: hook up translations to rebuild-from-disk * feat: generation of the website prefers project language, falling back to canonical language * fix: crashes during rendering * feat: translation validation report * fix: made the translation validation actually work * chore: reorganization of menu * fix: some topics cleanup * chore: updated doc * feat: translations for media * feat: more aligned in UI/UX * feat: edit translations possible * chore: added full multi-language todo * chore: updated todo for clarity * feat: implementation of full multi-linguality * fix: page creation creates pages * fix: flags on every page * fix: better prompt * feat: made MCP server aware of language content * feat: python tools for translations * fix: better fill-in-translations * fix: better prompt for translation. maybe. * fix: losing posts from search due to translation process * fix: translation validation handles in-db content and fill-in of missing translations fixed to flush * fix: faster scanning for infilling of missing translations * chore: updated agent instructions * feat: calendar and tag cloud respect current language now * fix: retries going up * fix: got metadata-diff and rebuild into sync * fix: extended meta-diff for timestamps * fix: made website validation look at translated content, too * fix: multi-lingual search * chore: refactor Editor.tsx into two separate editors * feat: do language detection when no explicit language given --------- Co-authored-by: hugo <hugoms@me.com>
This commit is contained in:
Georg Bauer
@@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { render, act, fireEvent, screen } from '@testing-library/react';
|
||||
import { render, act, fireEvent, within } from '@testing-library/react';
|
||||
|
||||
let lastSuggestionFields: Array<{ key: string; label: string; currentValue: string; suggestedValue?: string; disabled?: boolean; warning?: string }> = [];
|
||||
const menuListeners = new Map<string, () => void | Promise<void>>();
|
||||
|
||||
vi.mock('@monaco-editor/react', () => ({
|
||||
default: () => <div data-testid="monaco-editor" />,
|
||||
@@ -93,6 +94,11 @@ vi.mock('../../../src/renderer/components/Lightbox', () => ({
|
||||
Lightbox: () => null,
|
||||
useMarkdownImages: () => [],
|
||||
}));
|
||||
vi.mock('../../../src/renderer/components/MilkdownEditor', () => ({
|
||||
MilkdownEditor: ({ content, onChange }: { content: string; onChange: (value: string) => void }) => (
|
||||
<textarea data-testid="milkdown-editor" value={content} onChange={(event) => onChange(event.target.value)} />
|
||||
),
|
||||
}));
|
||||
vi.mock('../../../src/renderer/components/PostLinks', () => ({ PostLinks: () => null }));
|
||||
vi.mock('../../../src/renderer/components/LinkedMediaPanel', () => ({ LinkedMediaPanel: () => null }));
|
||||
vi.mock('../../../src/renderer/components/ErrorModal', () => ({ ErrorModal: () => null }));
|
||||
@@ -128,7 +134,7 @@ vi.mock('../../../src/renderer/components/Toast', () => ({
|
||||
},
|
||||
}));
|
||||
|
||||
import { PostEditor } from '../../../src/renderer/components/Editor/Editor';
|
||||
import { PostEditor } from '../../../src/renderer/components/Editor/PostEditor';
|
||||
import { useAppStore } from '../../../src/renderer/store';
|
||||
|
||||
const createPost = (overrides: Record<string, unknown> = {}) => ({
|
||||
@@ -154,10 +160,26 @@ const createPost = (overrides: Record<string, unknown> = {}) => ({
|
||||
...overrides,
|
||||
});
|
||||
|
||||
const createTranslation = (overrides: Record<string, unknown> = {}) => ({
|
||||
id: 'translation-1',
|
||||
translationFor: 'post-1',
|
||||
language: 'fr',
|
||||
title: 'Bonjour',
|
||||
excerpt: 'Resume',
|
||||
content: 'Contenu',
|
||||
status: 'draft' as const,
|
||||
createdAt: new Date('2026-02-16T12:00:00.000Z'),
|
||||
updatedAt: new Date('2026-02-16T12:00:00.000Z'),
|
||||
publishedAt: null,
|
||||
filePath: 'posts/test-post.fr.md',
|
||||
...overrides,
|
||||
});
|
||||
|
||||
describe('Editor AI post suggestions', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
lastSuggestionFields = [];
|
||||
menuListeners.clear();
|
||||
const neverSettles = new Promise<never>(() => {});
|
||||
|
||||
(window as any).electronAPI ??= {};
|
||||
@@ -168,9 +190,23 @@ describe('Editor AI post suggestions', () => {
|
||||
|
||||
(window as any).addEventListener = vi.fn();
|
||||
(window as any).removeEventListener = vi.fn();
|
||||
(window as any).dispatchEvent = vi.fn();
|
||||
(window as any).electronAPI.on = vi.fn((event: string, handler: () => void | Promise<void>) => {
|
||||
menuListeners.set(event, handler);
|
||||
return () => {
|
||||
menuListeners.delete(event);
|
||||
};
|
||||
});
|
||||
|
||||
(window as any).electronAPI.posts.hasPublishedVersion = vi.fn().mockReturnValue(neverSettles);
|
||||
(window as any).electronAPI.posts.getTranslations = vi.fn().mockResolvedValue([]);
|
||||
(window as any).electronAPI.posts.getTranslation = vi.fn().mockResolvedValue(null);
|
||||
(window as any).electronAPI.posts.publishTranslation = vi.fn().mockResolvedValue(createPost());
|
||||
(window as any).electronAPI.posts.upsertTranslation = vi.fn().mockImplementation(async (postId: string, language: string, data: Record<string, string>) =>
|
||||
createTranslation({ translationFor: postId, language, ...data, status: 'draft' })
|
||||
);
|
||||
(window as any).electronAPI.posts.getPreviewUrl = vi.fn().mockResolvedValue('http://127.0.0.1:4123/preview');
|
||||
(window as any).electronAPI.posts.publish = vi.fn().mockResolvedValue(createPost({ status: 'published' }));
|
||||
(window as any).electronAPI.posts.update = vi.fn().mockImplementation(async (_postId: string, payload: Record<string, string>) => ({
|
||||
...createPost(),
|
||||
...payload,
|
||||
@@ -184,6 +220,9 @@ describe('Editor AI post suggestions', () => {
|
||||
excerpt: 'A concise summary.',
|
||||
slug: 'better-title',
|
||||
});
|
||||
(window as any).electronAPI.chat.translatePost = vi.fn().mockResolvedValue({
|
||||
success: true,
|
||||
});
|
||||
|
||||
useAppStore.setState({
|
||||
activeProject: { id: 'project-1', name: 'Test', path: '/tmp/test' } as any,
|
||||
@@ -201,7 +240,8 @@ describe('Editor AI post suggestions', () => {
|
||||
publishedAt: new Date('2026-02-16T12:00:00.000Z'),
|
||||
}));
|
||||
|
||||
render(<PostEditor postId="post-1" />);
|
||||
const view = render(<PostEditor postId="post-1" />);
|
||||
const ui = within(view.container);
|
||||
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
@@ -210,11 +250,11 @@ describe('Editor AI post suggestions', () => {
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: '⚡ Quick Actions' }));
|
||||
fireEvent.click(ui.getByRole('button', { name: '⚡ Quick Actions' }));
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: /AI: Suggest Title, Summary & Slug/i }));
|
||||
fireEvent.click(ui.getByRole('button', { name: /AI: Suggest Title, Summary & Slug/i }));
|
||||
});
|
||||
|
||||
const slugField = lastSuggestionFields.find((field) => field.key === 'slug');
|
||||
@@ -225,7 +265,8 @@ describe('Editor AI post suggestions', () => {
|
||||
it('submits the AI slug for a never-published draft when applying suggestions', async () => {
|
||||
(window as any).electronAPI.posts.get = vi.fn().mockResolvedValue(createPost());
|
||||
|
||||
render(<PostEditor postId="post-1" />);
|
||||
const view = render(<PostEditor postId="post-1" />);
|
||||
const ui = within(view.container);
|
||||
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
@@ -234,15 +275,15 @@ describe('Editor AI post suggestions', () => {
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: '⚡ Quick Actions' }));
|
||||
fireEvent.click(ui.getByRole('button', { name: '⚡ Quick Actions' }));
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: /AI: Suggest Title, Summary & Slug/i }));
|
||||
fireEvent.click(ui.getByRole('button', { name: /AI: Suggest Title, Summary & Slug/i }));
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: 'apply-suggestions' }));
|
||||
fireEvent.click(ui.getByRole('button', { name: 'apply-suggestions' }));
|
||||
});
|
||||
|
||||
expect((window as any).electronAPI.posts.update).toHaveBeenCalledWith(
|
||||
@@ -250,4 +291,203 @@ describe('Editor AI post suggestions', () => {
|
||||
expect.objectContaining({ title: 'Better Title', slug: 'better-title' })
|
||||
);
|
||||
});
|
||||
|
||||
it('opens a translation modal from quick actions and creates the translation on confirm', async () => {
|
||||
(window as any).electronAPI.posts.get = vi.fn().mockResolvedValue(createPost({ title: '' }));
|
||||
|
||||
const view = render(<PostEditor postId="post-1" />);
|
||||
const ui = within(view.container);
|
||||
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
expect(ui.queryByRole('button', { name: 'Translate to...' })).toBeNull();
|
||||
expect(ui.queryByText('Select target language')).toBeNull();
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(ui.getByRole('button', { name: '⚡ Quick Actions' }));
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(ui.getByRole('button', { name: /Translate to\.\.\./i }));
|
||||
});
|
||||
|
||||
expect(ui.getByRole('heading', { name: 'Translations' })).toBeInTheDocument();
|
||||
expect(ui.getByText('Select target language')).toBeInTheDocument();
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.change(ui.getByLabelText('Select target language'), { target: { value: 'fr' } });
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(ui.getByRole('button', { name: 'Translate to...' }));
|
||||
});
|
||||
|
||||
expect((window as any).electronAPI.chat.translatePost).toHaveBeenCalledWith('post-1', 'fr');
|
||||
});
|
||||
|
||||
it('renders available translations as compact flag indicators in metadata', async () => {
|
||||
(window as any).electronAPI.posts.get = vi.fn().mockResolvedValue(createPost({ title: '' }));
|
||||
(window as any).electronAPI.posts.getTranslations = vi.fn().mockResolvedValue([
|
||||
createTranslation(),
|
||||
createTranslation({
|
||||
id: 'translation-2',
|
||||
language: 'de',
|
||||
title: 'Hallo',
|
||||
status: 'published',
|
||||
filePath: 'posts/test-post.de.md',
|
||||
}),
|
||||
]);
|
||||
|
||||
const view = render(<PostEditor postId="post-1" />);
|
||||
const ui = within(view.container);
|
||||
const { container } = view;
|
||||
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
expect(container.querySelector('.editor-translations-panel')).toBeNull();
|
||||
expect(container.querySelector('.metadata-toggle-header .editor-translations-flags')).not.toBeNull();
|
||||
expect(ui.getByLabelText('French (Draft)')).toBeInTheDocument();
|
||||
expect(ui.getByLabelText('German (Published)')).toBeInTheDocument();
|
||||
expect(container.querySelector('.editor-translations-flags')).not.toBeNull();
|
||||
expect(container.querySelector('.editor-translation-actions')).toBeNull();
|
||||
expect(container.querySelector('.editor-translation-language')).toBeNull();
|
||||
});
|
||||
|
||||
it('switches the active editing language with flags and saves translated title excerpt and content to that language', async () => {
|
||||
(window as any).electronAPI.posts.get = vi.fn().mockResolvedValue(createPost({
|
||||
language: 'en',
|
||||
title: 'Hello world',
|
||||
excerpt: 'Canonical excerpt',
|
||||
content: 'Canonical content',
|
||||
}));
|
||||
(window as any).electronAPI.posts.getTranslations = vi.fn().mockResolvedValue([
|
||||
createTranslation({ language: 'fr', title: 'Bonjour', excerpt: 'Resume', content: 'Contenu' }),
|
||||
]);
|
||||
|
||||
const view = render(<PostEditor postId="post-1" />);
|
||||
const ui = within(view.container);
|
||||
const { container } = view;
|
||||
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(ui.getByRole('button', { name: /Metadata/i }));
|
||||
});
|
||||
|
||||
const flags = container.querySelectorAll('.metadata-toggle-header .editor-translation-flag');
|
||||
expect(flags).toHaveLength(2);
|
||||
expect(ui.getByDisplayValue('Hello world')).toBeInTheDocument();
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(ui.getByLabelText('French (Draft)'));
|
||||
});
|
||||
|
||||
expect(ui.getByDisplayValue('Bonjour')).toBeInTheDocument();
|
||||
expect((ui.getByLabelText('French (Draft)') as HTMLElement).className).toContain('active');
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(ui.getByRole('button', { name: /Excerpt/i }));
|
||||
});
|
||||
|
||||
expect(ui.getByDisplayValue('Resume')).toBeInTheDocument();
|
||||
expect(ui.getByTestId('milkdown-editor')).toHaveValue('Contenu');
|
||||
|
||||
const titleInput = container.querySelector('#post-editor-post-1-title') as HTMLInputElement;
|
||||
const excerptInput = container.querySelector('#post-editor-post-1-excerpt') as HTMLTextAreaElement;
|
||||
const contentInput = ui.getByTestId('milkdown-editor') as HTMLTextAreaElement;
|
||||
|
||||
const setTextValue = (element: HTMLInputElement | HTMLTextAreaElement, value: string) => {
|
||||
const prototype = Object.getPrototypeOf(element);
|
||||
const valueSetter = Object.getOwnPropertyDescriptor(prototype, 'value')?.set;
|
||||
fireEvent.focus(element);
|
||||
valueSetter?.call(element, value);
|
||||
fireEvent.input(element, { target: { value } });
|
||||
fireEvent.change(element, { target: { value } });
|
||||
fireEvent.blur(element);
|
||||
};
|
||||
|
||||
await act(async () => {
|
||||
setTextValue(titleInput, 'Salut modifie');
|
||||
setTextValue(excerptInput, 'Resume modifie');
|
||||
setTextValue(contentInput, 'Contenu modifie');
|
||||
});
|
||||
|
||||
expect(ui.getByDisplayValue('Salut modifie')).toBeInTheDocument();
|
||||
expect(ui.getByDisplayValue('Resume modifie')).toBeInTheDocument();
|
||||
expect(ui.getByTestId('milkdown-editor')).toHaveValue('Contenu modifie');
|
||||
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(ui.getByRole('button', { name: 'Publish' }));
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
expect((window as any).electronAPI.posts.upsertTranslation).toHaveBeenCalledWith(
|
||||
'post-1',
|
||||
'fr',
|
||||
expect.objectContaining({
|
||||
title: 'Salut modifie',
|
||||
excerpt: 'Resume modifie',
|
||||
content: 'Contenu modifie',
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('requests preview URL with lang when a translation is the active editing language', async () => {
|
||||
(window as any).electronAPI.posts.get = vi.fn().mockResolvedValue(createPost({
|
||||
language: 'en',
|
||||
title: 'Hello world',
|
||||
content: 'Canonical content',
|
||||
}));
|
||||
(window as any).electronAPI.posts.getTranslations = vi.fn().mockResolvedValue([
|
||||
createTranslation({ language: 'fr', title: 'Bonjour', content: 'Contenu' }),
|
||||
]);
|
||||
|
||||
const view = render(<PostEditor postId="post-1" />);
|
||||
const ui = within(view.container);
|
||||
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(ui.getByRole('button', { name: /Metadata/i }));
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(ui.getByLabelText('French (Draft)'));
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(ui.getByRole('button', { name: 'Preview (Read-only)' }));
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
expect((window as any).electronAPI.posts.getPreviewUrl).toHaveBeenLastCalledWith('post-1', {
|
||||
draft: true,
|
||||
lang: 'fr',
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user