@intlayer/docs 5.8.1 → 6.0.0-canary.0

package/docs/fr/testing.md

@@ -0,0 +1,200 @@
+---
+createdAt: 2025-03-01
+updatedAt: 2025-09-20
+title: Tester votre contenu
+description: Découvrez comment tester votre contenu avec Intlayer.
+keywords:
+  - Test
+  - Intlayer
+  - Internationalisation
+  - CMS
+  - Système de gestion de contenu
+  - Éditeur visuel
+slugs:
+  - doc
+  - testing
+---
+
+# Tester votre contenu
+
+Ce guide montre comment vérifier automatiquement que vos dictionnaires sont complets, détecter les traductions manquantes avant la mise en production, et tester l’interface localisée dans votre application.
+
+---
+
+## Ce que vous pouvez tester
+
+- **Traductions manquantes** : échouer le CI si des locales requises manquent dans un dictionnaire.
+- **Rendu de l’interface localisée** : afficher des composants avec un fournisseur de locale spécifique et vérifier le texte/attributs visibles.
+- **Audits au moment de la compilation** : exécuter un audit rapide localement via la CLI.
+
+---
+
+## Démarrage rapide : audit via CLI
+
+Lancez l’audit depuis la racine de votre projet :
+
+```bash
+npx intlayer content test
+```
+
+Options utiles :
+
+- `--env-file [path]` : charger les variables d’environnement depuis un fichier.
+- `-e, --env [name]` : sélectionner un profil d’environnement.
+- `--base-dir [path]` : définir le répertoire de base de l’application pour la résolution.
+- `--verbose` : afficher les logs détaillés.
+- `--prefix [label]` : préfixer les lignes de log.
+
+Note : la CLI affiche un rapport détaillé mais ne retourne pas un code d’erreur en cas d’échec. Pour un contrôle en CI, ajoutez un test unitaire (ci-dessous) qui vérifie qu’aucune locale requise n’est manquante.
+
+---
+
+## Test programmatique (Vitest/Jest)
+
+Utilisez l’API CLI d’Intlayer pour vérifier qu’il n’y a pas de traductions manquantes pour vos locales requises.
+
+```ts file=i18n.test.ts
+/* @vitest-environment node */
+import { listMissingTranslations } from "intlayer/cli";
+import { describe, expect, it } from "vitest";
+
+describe("traductions", () => {
+  it("n’a pas de locales requises manquantes", () => {
+    const result = listMissingTranslations();
+
+    if (result.missingRequiredLocales.length > 0) {
+      // Utile lorsque le test échoue localement ou en CI
+      console.log(result.missingTranslations);
+    }
+
+    expect(result.missingRequiredLocales).toHaveLength(0);
+  });
+});
+```
+
+Équivalent Jest :
+
+```ts file=i18n.test.ts
+import { listMissingTranslations } from "intlayer/cli";
+
+test("n’a pas de locales requises manquantes", () => {
+  const result = listMissingTranslations();
+
+  if (result.missingRequiredLocales.length > 0) {
+    // eslint-disable-next-line no-console
+    console.log(result.missingTranslations);
+  }
+
+  expect(result.missingRequiredLocales).toHaveLength(0);
+});
+```
+
+Comment ça fonctionne :
+
+- Intlayer lit votre configuration (locales, requiredLocales) et les dictionnaires déclarés, puis rapporte :
+  - `missingTranslations` : pour chaque clé, quelles locales sont manquantes et dans quel fichier.
+  - `missingLocales` : l’union de toutes les locales manquantes.
+  - `missingRequiredLocales` : sous-ensemble limité aux `requiredLocales` (ou toutes les locales si `requiredLocales` n’est pas défini).
+
+---
+
+## Tester une interface localisée (React / Next.js)
+
+Rendez les composants sous un fournisseur Intlayer et vérifiez le contenu visible.
+
+Exemple React (Testing Library) :
+
+```tsx
+import { IntlayerProvider } from "react-intlayer/client";
+import { render, screen } from "@testing-library/react";
+import { MyComponent } from "./MyComponent";
+
+test("renders localized title in English", () => {
+  render(
+    <IntlayerProvider locale="en-US">
+      <MyComponent />
+    </IntlayerProvider>
+  );
+
+  expect(screen.getByText("Titre anglais attendu")).toBeInTheDocument();
+});
+```
+
+Exemple Next.js (App Router) : utilisez le wrapper du framework :
+
+```tsx
+import { IntlayerClientProvider } from "next-intlayer/client";
+import { render, screen } from "@testing-library/react";
+import { MyPage } from "./MyPage";
+
+test("affiche le titre localisé en français", () => {
+  render(
+    <IntlayerClientProvider locale="fr-FR">
+      <MyPage />
+    </IntlayerClientProvider>
+  );
+  expect(
+    screen.getByRole("heading", { name: "Titre attendu" })
+  ).toBeInTheDocument();
+});
+```
+
+Conseils :
+
+- Lorsque vous avez besoin des valeurs brutes des chaînes pour des attributs (par exemple, `aria-label`), accédez au champ `.value` retourné par `useIntlayer` dans React.
+- Gardez les dictionnaires proches des composants pour faciliter les tests unitaires et le nettoyage.
+
+---
+
+## Intégration Continue
+
+Ajoutez un test qui fait échouer la compilation lorsque des traductions requises sont manquantes.
+
+`package.json` :
+
+```json
+{
+  "scripts": {
+    "test:i18n": "vitest run -c"
+  }
+}
+```
+
+Exemple GitHub Actions :
+
+```yaml
+name: CI
+on: [push, pull_request]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run test:i18n
+```
+
+Optionnel : lancez l'audit CLI pour un résumé lisible par un humain en parallèle des tests :
+
+```bash
+npx intlayer content test --verbose
+```
+
+---
+
+## Dépannage
+
+- Assurez-vous que votre configuration Intlayer définit `locales` et (optionnellement) `requiredLocales`.
+- Si votre application utilise des dictionnaires dynamiques ou distants, exécutez les tests dans un environnement où les dictionnaires sont disponibles.
+- Pour les monorepos mixtes, utilisez `--base-dir` pour indiquer au CLI la racine correcte de l'application.
+
+---
+
+## Historique du document
+
+| Version | Date       | Modifications          |
+| ------- | ---------- | ---------------------- |
+| 6.0.0   | 2025-09-20 | Introduction des tests |

package/docs/hi/autoFill.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-13
-updatedAt: 2025-06-29
+updatedAt: 2025-09-20
 title: ऑटो फिल
-description: Intlayer में ऑटो फिल फ़ंक्शन का उपयोग कैसे करें ताकि पूर्वनिर्धारित पैटर्न के आधार पर सामग्री स्वचालित रूप से भरी जा सके। अपने प्रोजेक्ट में ऑटो फिल फीचर्स को कुशलतापूर्वक लागू करने के लिए इस दस्तावेज़ का पालन करें।
+description: Intlayer में ऑटो फिल फ़ंक्शन का उपयोग कैसे करें ताकि पूर्वनिर्धारित पैटर्न के आधार पर सामग्री स्वचालित रूप से भरी जा सके। अपने प्रोजेक्ट में ऑटो फिल फीचर्स को प्रभावी ढंग से लागू करने के लिए इस दस्तावेज़ का पालन करें।
 keywords:
   - ऑटो फिल
   - सामग्री स्वचालन
@@ -20,25 +20,25 @@ slugs:
 # ऑटोफिल सामग्री घोषणा फ़ाइल अनुवाद
 
 **ऑटोफिल सामग्री घोषणा फ़ाइलें** आपके विकास कार्यप्रवाह को तेज़ करने का एक तरीका हैं।
+
 ऑटोफिल तंत्र सामग्री घोषणा फ़ाइलों के बीच एक _मास्टर-स्लेव_ संबंध के माध्यम से काम करता है। जब मुख्य (मास्टर) फ़ाइल अपडेट होती है, तो Intlayer स्वचालित रूप से उन परिवर्तनों को व्युत्पन्न (ऑटोफिल की गई) घोषणा फ़ाइलों पर लागू कर देगा।
 
 ```ts fileName="src/components/example/example.content.ts"
 import { Locales, type Dictionary } from "intlayer";
 
-// exampleContent एक शब्दकोश के रूप में परिभाषित है जो सामग्री को दर्शाता है
 const exampleContent = {
   key: "example",
   locale: Locales.ENGLISH,
   autoFill: "./example.content.json",
   content: {
-    contentExample: "यह सामग्री का एक उदाहरण है",
+    contentExample: "यह सामग्री का एक उदाहरण है", // सामग्री का उदाहरण
   },
 } satisfies Dictionary;
 
 export default exampleContent;
 ```
 
-यहाँ एक [प्रति-भाषा सामग्री घोषणा फ़ाइल](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/per_locale_file.md) है जो `autoFill` निर्देश का उपयोग करती है।
+यहाँ `autoFill` निर्देश का उपयोग करते हुए एक [प्रति-स्थान सामग्री घोषणा फ़ाइल](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/per_locale_file.md) है।
 
 फिर, जब आप निम्नलिखित कमांड चलाते हैं:
 
@@ -46,7 +46,7 @@ export default exampleContent;
 npx intlayer fill --file 'src/components/example/example.content.ts'
 ```
 
-Intlayer स्वचालित रूप से व्युत्पन्न घोषणा फ़ाइल `src/components/example/example.content.json` में बनाएगा, मुख्य फ़ाइल में पहले से घोषित नहीं किए गए सभी स्थानीय भाषाओं को भरते हुए।
+Intlayer स्वचालित रूप से व्युत्पन्न घोषणा फ़ाइल `src/components/example/example.content.json` बनाएगा, जिसमें मुख्य फ़ाइल में पहले से घोषित नहीं किए गए सभी स्थानों को भरा जाएगा।
 
 ```json5 fileName="src/components/example/example.content.json"
 {
@@ -63,23 +63,23 @@ Intlayer स्वचालित रूप से व्युत्पन्
 }
 ```
 
-उसके बाद, दोनों घोषणा फ़ाइलों को एकल शब्दकोश में मर्ज किया जाएगा, जिसे मानक `useIntlayer("example")` हुक (react) / कॉम्पोज़ेबल (vue) का उपयोग करके एक्सेस किया जा सकता है।
+इसके बाद, दोनों घोषणा फ़ाइलों को एकल शब्दकोश में मर्ज किया जाएगा, जिसे मानक `useIntlayer("example")` हुक (react) / कॉम्पोज़ेबल (vue) का उपयोग करके एक्सेस किया जा सकता है।
 
-## ऑटोफिल्ड फ़ाइल प्रारूप
+## ऑटोफिल की गई फ़ाइल प्रारूप
 
-स्वचालित रूप से भरे गए घोषणा फ़ाइलों के लिए अनुशंसित प्रारूप **JSON** है, जो स्वरूपण प्रतिबंधों से बचने में मदद करता है। हालांकि, Intlayer `.ts`, `.js`, `.mjs`, `.cjs`, और अन्य प्रारूपों का भी समर्थन करता है।
+सिफारिश की गई स्वरूप ऑटोफिल की गई घोषणा फ़ाइलों के लिए **JSON** है, जो स्वरूपण प्रतिबंधों से बचने में मदद करता है। हालांकि, Intlayer `.ts`, `.js`, `.mjs`, `.cjs`, और अन्य स्वरूपों का भी समर्थन करता है।
 
 ```ts fileName="src/components/example/example.content.ts"
 const exampleContent = {
   key: "example",
   autoFill: "./example.filled.content.ts",
   content: {
-    // आपका कंटेंट
+    // आपकी सामग्री
   },
 };
 ```
 
-यह फ़ाइल इस स्थान पर उत्पन्न होगी:
+यह फ़ाइल इस स्थान पर उत्पन्न करेगा:
 
 ```
 src/components/example/example.filled.content.ts
@@ -87,8 +87,8 @@ src/components/example/example.filled.content.ts
 
 > `.js`, `.ts`, और समान फ़ाइलों का निर्माण इस प्रकार काम करता है:
 >
-> - यदि फ़ाइल पहले से मौजूद है, तो Intlayer इसे AST (Abstract Syntax Tree) का उपयोग करके पार्स करेगा ताकि प्रत्येक फ़ील्ड का पता लगाया जा सके और कोई भी गायब अनुवाद जोड़ा जा सके।
-> - यदि फ़ाइल मौजूद नहीं है, तो Intlayer इसे डिफ़ॉल्ट कंटेंट घोषणा फ़ाइल टेम्पलेट का उपयोग करके उत्पन्न करेगा।
+> - यदि फ़ाइल पहले से मौजूद है, तो Intlayer इसे AST (Abstract Syntax Tree) का उपयोग करके पार्स करेगा ताकि प्रत्येक फ़ील्ड का पता लगाया जा सके और कोई भी गायब अनुवाद डाला जा सके।
+> - यदि फ़ाइल मौजूद नहीं है, तो Intlayer इसे डिफ़ॉल्ट सामग्री घोषणा फ़ाइल टेम्पलेट का उपयोग करके उत्पन्न करेगा।
 
 ## पूर्ण पथ (Absolute Paths)
 
@@ -99,20 +99,20 @@ const exampleContent = {
   key: "example",
   autoFill: "/messages/example.content.json",
   content: {
-    // आपका कंटेंट
+    // आपकी सामग्री
   },
 };
 ```
 
-यह फ़ाइल इस स्थान पर उत्पन्न होगी:
+यह फ़ाइल इस स्थान पर उत्पन्न करेगा:
 
 ```
 /messages/example.content.json
 ```
 
-## प्रति-स्थान कंटेंट घोषणा फ़ाइलों का स्वचालित निर्माण
+## प्रति-स्थानीय सामग्री घोषणा फ़ाइलों का स्वचालित निर्माण (Autogenerate Per-Locale Content Declaration Files)
 
-`autoFill` फ़ील्ड **प्रति-स्थान** कंटेंट घोषणा फ़ाइलों के निर्माण का भी समर्थन करता है।
+`autoFill` फ़ील्ड **प्रति-स्थानीय** सामग्री घोषणा फ़ाइलों के निर्माण का भी समर्थन करता है।
 
 ```ts fileName="src/components/example/example.content.ts"
 const exampleContent = {
@@ -122,7 +122,7 @@ const exampleContent = {
     es: "./example.es.content.json",
   },
   content: {
-    // आपका कंटेंट
+    // आपकी सामग्री
   },
 };
 ```
@@ -132,7 +132,9 @@ const exampleContent = {
 - `src/components/example/example.fr.content.json`
 - `src/components/example/example.es.content.json`
 
-## विशिष्ट स्थानीय ऑटोफिल फ़िल्टर करें
+> इस मामले में, यदि ऑब्जेक्ट में सभी स्थानीय भाषाएँ शामिल नहीं हैं, तो Intlayer बाकी स्थानीय भाषाओं की फ़ाइलें उत्पन्न करने से बचता है।
+
+## विशिष्ट स्थानीय ऑटोफिल को फ़िल्टर करें (Filter Specific Locale Autofill)
 
 `autoFill` फ़ील्ड के लिए एक ऑब्जेक्ट का उपयोग करने से आप फ़िल्टर लागू कर सकते हैं और केवल विशिष्ट स्थानीय फ़ाइलें उत्पन्न कर सकते हैं।
 
@@ -143,7 +145,7 @@ const exampleContent = {
     fr: "./example.fr.content.json",
   },
   content: {
-    // आपका कंटेंट
+    // आपकी सामग्री
   },
 };
 ```
@@ -152,19 +154,20 @@ const exampleContent = {
 
 ## पथ चर (Path Variables)
 
-आप उत्पन्न फ़ाइलों के लक्षित पथों को गतिशील रूप से हल करने के लिए `autoFill` पथ के अंदर चर का उपयोग कर सकते हैं।
+ आप उत्पन्न फ़ाइलों के लिए लक्षित पथों को गतिशील रूप से हल करने के लिए `autoFill` पथ के अंदर वेरिएबल्स का उपयोग कर सकते हैं।
 
-**उपलब्ध चर:**
+**उपलब्ध वेरिएबल्स:**
 
 - `{{locale}}` – स्थानीय कोड (जैसे `fr`, `es`)
+- `{{fileName}}` – फ़ाइल नाम (जैसे `index`)
 - `{{key}}` – शब्दकोश कुंजी (जैसे `example`)
 
-```ts fileName="src/components/example/example.content.ts"
+```ts fileName="src/components/example/index.content.ts"
 const exampleContent = {
   key: "example",
   autoFill: "/messages/{{locale}}/{{key}}.content.json",
   content: {
-    // आपका कंटेंट
+    // आपकी सामग्री
   },
 };
 ```
@@ -174,6 +177,25 @@ const exampleContent = {
 - `/messages/fr/example.content.json`
 - `/messages/es/example.content.json`
 
+```ts fileName="src/components/example/index.content.ts"
+const exampleContent = {
+  key: "example",
+  autoFill: "./{{fileName}}.content.json",
+  content: {
+    // आपकी सामग्री
+  },
+};
+```
+
+यह उत्पन्न करेगा: 
+
+- `./index.content.json`
+- `./index.content.json`
+
 ## दस्तावेज़ इतिहास
 
-- 5.5.10 - 2025-06-29: इतिहास प्रारंभ किया गया
+| संस्करण | दिनांक      | परिवर्तन                     |
+| ------- | ---------- | --------------------------- |
+| 6.0.0   | 2025-09-20 | वैश्विक कॉन्फ़िगरेशन जोड़ें    |
+| 6.0.0   | 2025-09-17 | `{{fileName}}` वेरिएबल जोड़ें |
+| 5.5.10  | 2025-06-29 | इतिहास आरंभ करें                |