Pseudo-localisation pour les tests automatisés d'i18n

La pseudo-localisation est une technique de test puissante qui transforme votre texte source en une langue fictive pour identifier les problèmes d'internationalisation (i18n) avant que la traduction réelle ne commence. Ce guide vous montre comment automatiser les tests de pseudo-localisation en utilisant le package npm pseudo-l10n.

Qu'est-ce que la pseudo-localisation ?

La pseudo-localisation est le processus de transformation du texte source de votre application en une langue fictive modifiée qui imite le comportement de l'interface utilisateur après traduction. Elle aide les ingénieurs QA et les développeurs à identifier les problèmes d'i18n tôt dans le cycle de développement.

Exemple d'utilisation de la pseudo-localisation pour identifier des problèmes potentiels d'internationalisation. La police et la taille sont identiques des deux côtés, mais le support d'autres scripts nécessite souvent plus d'espace.

Pourquoi la pseudo-localisation est-elle utile ?

La pseudo-localisation vous aide à détecter les problèmes d'i18n tôt :

• Expose les ruptures de mise en page causées par l'expansion du texte (l'allemand et le finnois sont généralement 30-40 % plus longs que l'anglais).
• Met en évidence les problèmes d'encodage en ajoutant des caractères accentués pour tester le support UTF-8.
• Assure que toutes les chaînes sont traduisibles - le texte codé en dur reste inchangé et est facile à repérer.
• Révèle une mauvaise gestion des espaces réservés - le contenu dynamique comme {{name}} doit être préservé.
• Aide à définir les limites de longueur de traduction pour les composants d'interface utilisateur avec des contraintes d'espace.

Stratégies d'automatisation pour QA

Voici des stratégies éprouvées pour automatiser les tests d'i18n avec la pseudo-localisation :

Caractères accentués et non latins

Remplacez les lettres latines par des formes accentuées ou des scripts différents pour tester l'encodage des caractères et le support des polices.

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

Vérification QA : Assurez-vous que tous les caractères s'affichent correctement et que rien ne casse à cause des problèmes d'encodage.

Simulation d'expansion de texte

Développez automatiquement chaque chaîne d'environ 30 à 40 % pour imiter les langues longues comme l'allemand ou le finnois. Enveloppez avec des marqueurs visuels pour une détection facile du clipping.

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

Vérification QA : Utilisez la comparaison automatisée de captures d'écran pour repérer les débordements d'interface utilisateur, le clipping ou le désalignement.

Tests de stress des espaces réservés

Remplacez les variables d'interpolation (espaces réservés) par des marqueurs visibles pour vérifier qu'ils sont préservés pendant la traduction.

Exemple : "Vous avez {{count}} éléments" → "Vous avez <COUNT> éléments"

Vérification QA : Exécutez des tests de régression ; échouez si un marqueur est manquant ou mal échappé (&lt;COUNT&gt;).

Simulation RTL

Enveloppez le texte dans des marqueurs de droite à gauche (RTL) en utilisant des caractères de contrôle Unicode pour simuler l'arabe ou l'hébreu.

Vérification QA : Vérifiez que l'alignement, la direction du texte et le miroir sont corrects pour les langues RTL.

Intégration CI/CD

Ajoutez la pseudo-localisation à votre pipeline de tests automatisés pour détecter les problèmes d'i18n avant qu'ils n'atteignent la production.

Vérification QA : Bloquez le déploiement si les tests détectent des traductions manquantes, des espaces réservés cassés ou des problèmes de mise en page.

Automatisation avec le package pseudo-l10n

Le package npm pseudo-l10n automatise la pseudo-localisation pour vos fichiers de traduction JSON, facilitant l'intégration des tests d'i18n dans votre flux de travail de développement.

Fonctionnalités clés

• Expansion de texte : Simule comment le texte traduit est souvent 30 à 40 % plus long que l'anglais.
• Caractères accentués : Teste l'encodage UTF-8 et le support des polices avec des équivalents accentués.
• Marqueurs Visuels : Enveloppe les chaînes avec des marqueurs ⟦...⟧ pour repérer facilement le texte non traduit ou tronqué.
• Gestion des Espaces Réservés : Préserve les espaces réservés comme {{name}}, {count}, %key%, etc.
• Simulation RTL : Simule les langues de droite à gauche en utilisant des caractères de contrôle Unicode.

Installation

Installez pseudo-l10n globalement pour une utilisation en ligne de commande :

npm install -g pseudo-l10n

Ou ajoutez-le en tant que dépendance de développement :

npm install --save-dev pseudo-l10n

Utilisation de Base

Transformez votre fichier de traduction source en une version pseudo-localisée :

pseudo-l10n input.json output.json

Transformation d'Exemple

Entrée (en.json) :

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

Sortie (pseudo-en.json) :

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

Fonctionnalités Avancées

Expansion Personnalisée

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

Simulation RTL

Simulez les langues de droite à gauche comme l'arabe ou l'hébreu :

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

Remplacer les Espaces Réservés pour les Tests Visuels

Remplacez les espaces réservés par des marqueurs en majuscules pour une détection visuelle plus facile :

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

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

Support pour Différents Formats d'Espaces Réservés

Le package prend en charge divers formats d'espaces réservés utilisés par différentes bibliothèques 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%"

Utilisation Programmée

Utilisez pseudo-l10n de manière programmatique dans vos scripts Node.js ou votre processus de construction :

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

Intégration dans Votre Flux de Travail

Scripts npm

Ajoutez la génération de pseudo-localisation à vos scripts 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"
  }
}

Intégration du Processus de Construction

Générez des pseudo-locales dans le cadre de votre processus de construction :

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

Intégration de la Pipeline CI/CD

Intégrez la pseudo-localisation dans votre pipeline d'intégration continue :

# .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

Stratégie de Test

1. Générez une pseudo-locale pendant votre processus de construction.
2. Ajoutez la pseudo-locale à votre application (par exemple, dans le sélecteur de langue).
3. Testez votre application avec la pseudo-locale activée.
4. Examinez l'application pour détecter les problèmes courants d'i18n.

Que Chercher

• Marqueurs ⟦⟧ manquants = chaînes non traduites (texte codé en dur).
• Marqueurs coupés = troncature de texte ou débordement de l'interface utilisateur.
• Mise en page cassée = espace insuffisant pour l'expansion du texte.
• Texte brouillé = problèmes d'encodage ou support de police manquant.
• Mauvaise direction du texte = problèmes RTL (pour les pseudo-locales RTL).

Du Test à la Traduction Réelle

Une fois que vous avez validé votre implémentation i18n avec la pseudo-localisation, il est temps de traduire votre application pour de vrais utilisateurs. C'est là que les services de traduction alimentés par l'IA comme l10n.dev entrent en jeu.

Pourquoi l10n.dev pour la Traduction en Production

Après avoir vérifié que votre application gère correctement l'internationalisation avec la pseudo-localisation, utilisez l10n.dev pour une traduction professionnelle alimentée par l'IA :

• Préserve les espaces réservés, le format et la structure - tout comme la pseudo-l10n protège pendant les tests.
• Prend en charge 165 langues avec une traduction IA contextuelle.
• Gère automatiquement les formes plurielles, l'interpolation et les caractères spéciaux.
• Fournit une intégration CI/CD via API ou package npm (ai-l10n) pour des flux de travail automatisés.
• Propose une extension VS Code et une interface web pour la traduction manuelle et la révision.

Flux de Travail i18n Complet

1. Testez votre implémentation i18n avec la pseudo-l10n pour détecter les problèmes tôt.
2. Corrigez les problèmes de mise en page, d'encodage ou d'espaces réservés découverts lors des tests.
3. Traduisez vos fichiers sources validés en utilisant l10n.dev pour des traductions prêtes pour la production.

Prêt à détecter les problèmes d'i18n tôt et à rationaliser votre flux de travail de localisation ?