Pseudo-localización para pruebas automatizadas de i18n

La pseudo-localización es una técnica de prueba poderosa que transforma tu texto fuente en un idioma falso para identificar problemas de internacionalización (i18n) antes de que comience la traducción real. Esta guía te muestra cómo automatizar las pruebas de pseudo-localización usando el paquete pseudo-l10n de npm.

¿Qué es la Pseudo-localización?

La pseudo-localización es el proceso de transformar el texto fuente de tu aplicación en un idioma falso alterado que imita cómo se comporta la interfaz de usuario después de la traducción. Ayuda a los ingenieros de QA y a los desarrolladores a identificar problemas de i18n temprano en el ciclo de desarrollo.

Ejemplo de uso de la pseudo-localización para identificar problemas potenciales de internacionalización. La fuente y el tamaño son idénticos en ambos lados, pero soportar otros scripts a menudo requiere más espacio.

Por qué la Pseudo-localización es Útil

La pseudo-localización te ayuda a detectar problemas de i18n temprano:

• Expone roturas de diseño causadas por la expansión de texto (el alemán y el finlandés suelen ser un 30-40% más largos que el inglés).
• Superficie problemas de codificación al agregar caracteres acentuados para probar el soporte de UTF-8.
• Asegura que todas las cadenas sean traducibles: el texto codificado permanece sin cambios y es fácil de detectar.
• Revela el manejo incorrecto de marcadores: el contenido dinámico como {{name}} debe ser preservado.
• Ayuda a definir límites de longitud de traducción para componentes de UI con restricciones de espacio.

Estrategias de Automatización para QA

Aquí hay estrategias probadas para automatizar las pruebas de i18n con pseudo-localización:

Caracteres Acentuados y No Latinos

Reemplaza las letras latinas con formas acentuadas o diferentes scripts para probar la codificación de caracteres y el soporte de fuentes.

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

Verificación de QA: Asegúrate de que todos los caracteres se muestren correctamente y que nada se rompa debido a problemas de codificación.

Simulación de Expansión de Texto

Expande automáticamente cada cadena en ~30–40% para imitar idiomas largos como el alemán o el finlandés. Envuelve con marcadores visuales para facilitar la detección de recortes.

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

Verificación de QA: Usa comparación automática de capturas de pantalla para detectar desbordamiento de UI, recortes o desalineación.

Pruebas de Estrés de Marcadores

Reemplaza las variables de interpolación (marcadores) con marcadores visibles para verificar que se preserven durante la traducción.

Ejemplo: "Tienes {{count}} artículos" → "Tienes <COUNT> artículos"

Verificación de QA: Ejecuta pruebas de regresión; falla si falta un marcador o está escapado incorrectamente (&lt;COUNT&gt;).

Simulación RTL

Envuelve el texto en marcadores de derecha a izquierda (RTL) usando caracteres de control Unicode para simular árabe o hebreo.

Verificación de QA: Verifica que la alineación, la dirección del texto y el espejado sean correctos para los idiomas RTL.

Integración CI/CD

Agrega pseudo-localización a tu pipeline de pruebas automatizadas para detectar problemas de i18n antes de que lleguen a producción.

Verificación de QA: Bloquea el despliegue si las pruebas detectan traducciones faltantes, marcadores rotos o problemas de diseño.

Automatización con el Paquete pseudo-l10n

El paquete npm pseudo-l10n automatiza la pseudo-localización para tus archivos de traducción JSON, facilitando la integración de pruebas de i18n en tu flujo de trabajo de desarrollo.

Características Clave

• Expansión de Texto: Simula cómo el texto traducido suele ser un 30-40% más largo que el inglés.
• Caracteres Acentuados: Prueba la codificación UTF-8 y el soporte de fuentes con equivalentes acentuados.
• Marcadores Visuales: Envuelve cadenas con ⟦...⟧ marcadores para detectar fácilmente texto no traducido o truncado.
• Manejo de Marcadores: Preserva marcadores como {{name}}, {count}, %key%, etc.
• Simulación RTL: Simula idiomas de derecha a izquierda utilizando caracteres de control Unicode.

Instalación

Instala pseudo-l10n globalmente para uso en la línea de comandos:

npm install -g pseudo-l10n

O agrégalo como una dependencia de desarrollo:

npm install --save-dev pseudo-l10n

Uso Básico

Transforma tu archivo de traducción fuente en una versión pseudo-localizada:

pseudo-l10n input.json output.json

Transformación de Ejemplo

Entrada (en.json):

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

Salida (pseudo-en.json):

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

Características Avanzadas

Expansión Personalizada

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

Simulación RTL

Simula idiomas de derecha a izquierda como árabe o hebreo:

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

Reemplazar Marcadores para Pruebas Visuales

Reemplaza marcadores con marcadores en mayúsculas para una detección visual más fácil:

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

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

Soporte para Diferentes Formatos de Marcadores

El paquete soporta varios formatos de marcadores utilizados por diferentes bibliotecas de 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 Programático

Usa pseudo-l10n programáticamente en tus scripts de Node.js o proceso de construcción:

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}}!ēēēēē⟧

Integración en Tu Flujo de Trabajo

Scripts de npm

Agrega la generación de pseudo-localización a tus scripts de 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"
  }
}

Integración del Proceso de Construcción

Genera pseudo-locales como parte de tu proceso de construcción:

// 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 }
);

Integración en Pipeline CI/CD

Integra la pseudo-localización en tu pipeline de integración 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

Estrategia de Pruebas

1. Genera pseudo-locale durante tu proceso de construcción.
2. Agrega pseudo-locale a tu aplicación (por ejemplo, en el selector de idioma).
3. Prueba tu aplicación con pseudo-locale habilitado.
4. Revisa la aplicación en busca de problemas comunes de i18n.

Qué Buscar

• Faltan marcadores ⟦⟧ = cadenas no traducidas (texto codificado).
• Marcadores cortados = truncamiento de texto o desbordamiento de UI.
• Diseño roto = espacio insuficiente para la expansión del texto.
• Texto distorsionado = problemas de codificación o falta de soporte de fuente.
• Dirección de texto incorrecta = problemas RTL (para pseudo-locales RTL).

De Pruebas a Traducción Real

Una vez que hayas validado tu implementación de i18n con pseudo-localización, es hora de traducir tu aplicación para usuarios reales. Aquí es donde entran los servicios de traducción impulsados por IA como l10n.dev.

Por qué l10n.dev para Traducción de Producción

Después de asegurarte de que tu aplicación maneja la internacionalización correctamente con pseudo-localización, usa l10n.dev para traducción profesional impulsada por IA:

• Preserva marcadores, formato y estructura - justo como pseudo-l10n protege durante las pruebas.
• Soporta 165 idiomas con traducción AI consciente del contexto.
• Maneja formas plurales, interpolación y caracteres especiales automáticamente.
• Proporciona integración CI/CD a través de API o paquete npm (ai-l10n) para flujos de trabajo automatizados.
• Ofrece extensión de VS Code y UI web para traducción y revisión manual.

Flujo de Trabajo Completo de i18n

1. Prueba tu implementación de i18n con pseudo-l10n para detectar problemas temprano.
2. Corrige cualquier problema de diseño, codificación o marcadores descubierto durante las pruebas.
3. Traduce tus archivos fuente validados usando l10n.dev para traducciones listas para producción.

¿Listo para detectar problemas de i18n temprano y optimizar tu flujo de trabajo de localización?