Pseudo-localizzazione per il testing automatizzato dell'i18n

La pseudo-localizzazione è una potente tecnica di testing che trasforma il tuo testo sorgente in una lingua finta per identificare problemi di internazionalizzazione (i18n) prima che inizi la traduzione effettiva. Questa guida ti mostra come automatizzare il testing della pseudo-localizzazione utilizzando il pacchetto pseudo-l10n npm.

Che cos'è la Pseudo-localizzazione?

La pseudo-localizzazione è il processo di trasformazione del testo sorgente della tua applicazione in una lingua alterata, finta che imita come si comporta l'interfaccia utente dopo la traduzione. Aiuta gli ingegneri QA e gli sviluppatori a identificare problemi di i18n precocemente nel 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 supportare altri script richiede spesso più spazio.

Perché la Pseudo-localizzazione è Utile

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

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

Strategie di Automazione per QA

Ecco strategie comprovate per automatizzare il testing dell'i18n con la pseudo-localizzazione:

Caratteri Accentuati & Non-Latini

Sostituisci le lettere latine con forme accentate o script diversi per testare il supporto della codifica dei caratteri e 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 di ~30–40% per imitare lingue lunghe come il tedesco o il finlandese. Avvolgi con marcatori visivi per una facile rilevazione del clipping.

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

Controllo QA: Utilizza il confronto automatico degli screenshot per individuare overflow dell'interfaccia utente, clipping o disallineamento.

Stress Testing dei Segnaposto

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

Esempio: "Hai {{count}} articoli" → "Hai <COUNT> articoli"

Controllo QA: Esegui test di regressione; fallisci se un marcatore è mancante o erratamente escapato (&lt;COUNT&gt;).

Simulazione RTL

Avvolgi il testo in marcatori da destra a sinistra (RTL) utilizzando caratteri di controllo Unicode per simulare l'arabo o l'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 catturare 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.

Automazione con il pacchetto pseudo-l10n

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

Caratteristiche Chiave

• Espansione del Testo: Simula come il testo tradotto è spesso più lungo del 30-40% rispetto all'inglese.
• Caratteri Accentuati: Testa la codifica UTF-8 e il supporto dei font con equivalenti accentati.
• Marker Visivi: Avvolge le stringhe con i marker ⟦...⟧ per individuare facilmente il testo non tradotto o troncato.
• Gestione dei Segnaposto: Preserva i segnaposto come {{name}}, {count}, %key%, ecc.
• Simulazione RTL: Simula lingue da destra a sinistra utilizzando caratteri di controllo Unicode.

Installazione

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

npm install -g pseudo-l10n

Oppure aggiungilo come dipendenza di sviluppo:

npm install --save-dev pseudo-l10n

Uso 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 l'arabo o l'ebraico:

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

Sostituisci i Segnaposto per il Test Visivo

Sostituisci i segnaposto con marker maiuscoli per una rilevazione visiva più facile:

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 utilizzati 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%"

Uso 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 Workflow

Script npm

Aggiungi la generazione di pseudo-localizzazione ai tuoi script 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-locali 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 integrazione 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 pseudo-locale durante il tuo processo di build.
2. Aggiungi pseudo-locale alla tua applicazione (ad es., nel selettore di lingua).
3. Testa la tua applicazione con pseudo-locale abilitato.
4. Esamina l'applicazione per problemi comuni di i18n.

Cosa Cercare

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

Da Test a Traduzione Reale

Una volta convalidata la tua implementazione i18n con la pseudo-localizzazione, è tempo di tradurre la tua applicazione per utenti reali. Qui entrano in gioco i servizi di traduzione alimentati da 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 traduzioni professionali alimentate da AI:

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

Workflow Completo di i18n

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

Pronto a catturare i problemi di i18n precocemente e semplificare il tuo workflow di localizzazione?