Pseudo-localizzazione per test i18n automatizzati

La pseudo-localizzazione è una potente tecnica di test che trasforma il tuo testo sorgente in una lingua fittizia per identificare problemi di internazionalizzazione (i18n) prima che inizi la traduzione vera e propria. Questa guida ti mostra come automatizzare i test di pseudo-localizzazione usando il pacchetto npm pseudo-l10n.

Cos'è la pseudo-localizzazione?

La pseudo-localizzazione è il processo di trasformazione del testo sorgente della tua applicazione in una lingua fittizia alterata che imita come si comporta l'interfaccia utente dopo la traduzione. Aiuta i tester QA e gli sviluppatori a identificare problemi di i18n all'inizio del ciclo di sviluppo.

Esempio di utilizzo della pseudo-localizzazione per identificare potenziali problemi di internazionalizzazione. Il font e la dimensione sono identici su entrambi i lati, ma il supporto ad altri script spesso richiede più spazio.

Perché la pseudo-localizzazione è utile

La pseudo-localizzazione ti aiuta a rilevare i problemi di i18n precocemente:

• Espone rotture del layout causate dall'espansione del testo (tedesco e finlandese sono tipicamente il 30-40% più lunghi dell'inglese).
• Fa emergere problemi di codifica aggiungendo caratteri accentati per testare il supporto UTF-8.
• Assicura che tutte le stringhe siano traducibili: il testo hard-coded rimane invariato ed è facile da individuare.
• Rivela una gestione errata dei segnaposto: contenuti dinamici come {{name}} devono essere preservati.
• Aiuta a definire i limiti di lunghezza della traduzione per componenti UI con vincoli di spazio.

Strategie di automazione per QA

Ecco strategie comprovate per automatizzare i test i18n con la pseudo-localizzazione:

Caratteri accentati e non latini

Sostituisci le lettere latine con forme accentate o script diversi per testare la codifica dei caratteri e il supporto dei font.

Esempio: "Save" → "Šàvē"

Controllo QA: Assicurati che tutti i caratteri vengano visualizzati correttamente e che nulla si rompa a causa di problemi di codifica.

Simulazione di espansione del testo

Espandi automaticamente ogni stringa del ~30–40% per imitare lingue lunghe come il tedesco o il finlandese. Avvolgi con marcatori visivi per un facile rilevamento del clipping.

Esempio: "Save" → ⟦Šàvēēēēē⟧

Controllo QA: Usa il confronto automatico degli screenshot per individuare overflow dell'interfaccia, clipping o disallineamenti.

Stress test dei segnaposto

Sostituisci le variabili di interpolazione (segnaposto) con marcatori visibili per verificare che vengano preservati durante la traduzione.

Esempio: "You have {{count}} items" → "You have <COUNT> items"

Controllo QA: Esegui test di regressione; fallisci se un marcatore manca o è erroneamente sottoposto a escape (&lt;COUNT&gt;).

Simulazione RTL

Avvolgi il testo in marcatori da destra a sinistra (RTL) usando caratteri di controllo Unicode per simulare arabo o ebraico.

Controllo QA: Verifica che l'allineamento, la direzione del testo e il mirroring siano corretti per le lingue RTL.

Integrazione CI/CD

Aggiungi la pseudo-localizzazione alla tua pipeline di test automatizzati per rilevare problemi di i18n prima che raggiungano la produzione.

Controllo QA: Blocca il deployment se i test rilevano traduzioni mancanti, segnaposto rotti o problemi di layout.

Automatizzare con il pacchetto pseudo-l10n

Il pacchetto npm pseudo-l10n automatizza la pseudo-localizzazione per i tuoi file di traduzione JSON, rendendo facile integrare i test i18n nel tuo flusso di lavoro di sviluppo.

Funzionalità chiave

• Espansione del testo: simula come il testo tradotto sia spesso il 30-40% più lungo dell'inglese.
• Caratteri accentati: testa la codifica UTF-8 e il supporto dei font con equivalenti accentati.
• Marcatori visivi: avvolge le stringhe con marcatori ⟦...⟧ per individuare facilmente testo non tradotto o troncato.
• Gestione dei segnaposto: preserva segnaposto come {{name}}, {count}, %key%, ecc.
• Simulazione RTL: simula lingue da destra a sinistra usando caratteri di controllo Unicode.

Installazione

Installa pseudo-l10n globalmente per l'uso da riga di comando:

npm install -g pseudo-l10n

O aggiungilo come dipendenza di sviluppo:

npm install --save-dev pseudo-l10n

Utilizzo di base

Trasforma il tuo file di traduzione sorgente in una versione pseudo-localizzata:

pseudo-l10n input.json output.json

Esempio di trasformazione

Input (en.json):

{
  "welcome": "Welcome to our application",
  "greeting": "Hello, {{name}}!",
  "itemCount": "You have {{count}} items"
}

Output (pseudo-en.json):

{
  "welcome": "⟦Ŵëļçõɱë ţõ õür àƥƥļïçàţïõñēēēēēēēēēēēēēēēēēē⟧",
  "greeting": "⟦Ĥëļļõēēēēēē, {{name}}!ēēēēē⟧",
  "itemCount": "⟦Ŷõü ĥàṽë {{count}} ïţëɱšēēēēēēēēēēēēēēēē⟧"
}

Funzionalità avanzate

Espansione personalizzata

pseudo-l10n en.json pseudo-en.json --expansion=30

Simulazione RTL

Simula lingue da destra a sinistra come arabo o ebraico:

pseudo-l10n en.json pseudo-ar.json --rtl

Sostituisci segnaposto per test visivi

Sostituisci i segnaposto con marcatori maiuscoli per un rilevamento visivo più semplice:

pseudo-l10n en.json pseudo-en.json --replace-placeholders

# Input:  { "greeting": "Hello, {{name}}!" }
# Output: { "greeting": "⟦Ĥëļļõēēēēēē, <NAME>!ēēēēē⟧" }

Supporto per diversi formati di segnaposto

Il pacchetto supporta vari formati di segnaposto usati da diverse librerie i18n:

# For i18next (default)
pseudo-l10n en.json pseudo-en.json --placeholder-format="{{key}}"

# For Angular/React Intl
pseudo-l10n en.json pseudo-en.json --placeholder-format="{key}"

# For sprintf style
pseudo-l10n en.json pseudo-en.json --placeholder-format="%key%"

Utilizzo programmatico

Usa pseudo-l10n programmaticamente nei tuoi script Node.js o nel processo di build:

const { generatePseudoLocaleSync, pseudoLocalize } = require('pseudo-l10n');

// Generate a pseudo-localized JSON file
generatePseudoLocaleSync('en.json', 'pseudo-en.json', {
  expansion: 40,
  rtl: false
});

// Pseudo-localize a single string
const result = pseudoLocalize('Hello, {{name}}!');
console.log(result);
// Output: ⟦Ĥëļļõēēēēēēēēēēēēēē, {{name}}!ēēēēē⟧

Integrazione nel tuo flusso di lavoro

Script npm

Aggiungi la generazione della pseudo-localizzazione agli script del tuo package.json:

{
  "scripts": {
    "pseudo": "pseudo-l10n src/locales/en.json src/locales/pseudo-en.json",
    "pseudo:rtl": "pseudo-l10n src/locales/en.json src/locales/pseudo-ar.json --rtl"
  }
}

Integrazione nel processo di build

Genera pseudo-locales come parte del tuo processo di build:

// build.js
const { generatePseudoLocaleSync } = require('pseudo-l10n');

// Generate pseudo-locales as part of build
generatePseudoLocaleSync(
  './src/locales/en.json',
  './src/locales/pseudo-en.json',
  { expansion: 40 }
);

generatePseudoLocaleSync(
  './src/locales/en.json',
  './src/locales/pseudo-ar.json',
  { rtl: true }
);

Integrazione nella pipeline CI/CD

Integra la pseudo-localizzazione nella tua pipeline di distribuzione continua:

# .github/workflows/test.yml
- name: Generate pseudo-locales
  run: |
    npm install -g pseudo-l10n
    pseudo-l10n src/locales/en.json src/locales/pseudo-en.json

- name: Run i18n tests
  run: npm run test:i18n

Strategia di test

1. Genera la pseudo-locale durante il processo di build.
2. Aggiungi la pseudo-locale alla tua applicazione (es. nel selettore di lingua).
3. Testa la tua applicazione con la pseudo-locale abilitata.
4. Esamina l'applicazione per problemi comuni di i18n.

Cosa cercare

• Marcatori ⟦⟧ mancanti = stringhe non tradotte (testo hard-coded).
• Marcatori tagliati = troncamento del testo o overflow dell'interfaccia.
• Layout rotto = spazio insufficiente per l'espansione del testo.
• Testo confuso = problemi di codifica o mancanza di supporto dei font.
• Direzione del testo errata = problemi RTL (per pseudo-locales RTL).

Dal test alla traduzione reale

Una volta convalidata la tua implementazione i18n con la pseudo-localizzazione, è ora di tradurre la tua applicazione per utenti reali. È qui che entrano in gioco i servizi di traduzione basati su AI come l10n.dev.

Perché l10n.dev per la traduzione in produzione

Dopo aver assicurato che la tua app gestisca correttamente l'internazionalizzazione con la pseudo-localizzazione, usa l10n.dev per una traduzione professionale basata su AI:

• Preserva segnaposto, formato e struttura: proprio come pseudo-l10n protegge durante i test.
• Supporta 165 lingue con traduzione AI consapevole del contesto.
• Gestisce automaticamente forme plurali, interpolazione e caratteri speciali.
• Fornisce integrazione CI/CD tramite API o pacchetto npm (ai-l10n) per flussi di lavoro automatizzati.
• Offre un'estensione VS Code e un'interfaccia web per la traduzione e la revisione manuale.

Flusso di lavoro i18n completo

1. Testa la tua implementazione i18n con la pseudo-localizzazione per individuare tempestivamente i problemi.
2. Correggi eventuali problemi di layout, codifica o segnaposto scoperti durante i test.
3. Traduci i tuoi file sorgente convalidati usando l10n.dev per traduzioni pronte per la produzione.

Pronto a individuare tempestivamente i problemi di i18n e a semplificare il tuo flusso di lavoro di localizzazione?