Merge pull request #2142 from Parvinmh/languageCode

language code string for built-in languages

Author: binrysearch

example/html-tooltip/index.html

@@ -74,6 +74,7 @@ <h4>Section Six</h4>
         var intro = introJs.tour();
           intro.setOptions({
             hideNext: true,
+            language: 'de_DE',
             steps: [
               {
                 title: '<p>Welcome</p>',

src/i18n/language.test.ts

@@ -0,0 +1,156 @@
+import { Translator, getAvailableLanguages, LanguageCode } from "./language";
+
+// Store original navigator
+const originalNavigator = global.navigator;
+
+// Mock navigator object
+const createMockNavigator = (language?: string, userLanguage?: string) => {
+  const mockNavigator: any = {};
+
+  if (language !== undefined) mockNavigator.language = language;
+  if (userLanguage !== undefined) mockNavigator.userLanguage = userLanguage;
+
+  if (language === undefined && userLanguage === undefined) {
+    mockNavigator.language = "en-US";
+  }
+
+  Object.defineProperty(global, "navigator", {
+    value: mockNavigator,
+    writable: true,
+    configurable: true,
+  });
+
+  return mockNavigator;
+};
+
+describe("Translator", () => {
+  beforeEach(() => createMockNavigator());
+  afterAll(() => {
+    Object.defineProperty(global, "navigator", {
+      value: originalNavigator,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  describe("Constructor", () => {
+    it("should use provided language code", () => {
+      const translator = new Translator("es_ES");
+      expect(translator.translate("buttons.next")).toBe("Siguiente");
+    });
+
+    it("should detect browser language and match locale", () => {
+      createMockNavigator("fr-FR");
+      const translator = new Translator();
+      expect(translator.translate("buttons.next")).toBe("Suivant");
+    });
+
+    it("should fallback to en_US for unsupported languages", () => {
+      createMockNavigator("zh-CN");
+      const translator = new Translator();
+      expect(translator.translate("buttons.next")).toBe("Next");
+    });
+
+    it("should handle underscores and dashes in language codes", () => {
+      createMockNavigator("es_ES");
+      const translator1 = new Translator();
+      expect(translator1.translate("buttons.next")).toBe("Siguiente");
+
+      createMockNavigator("fr-FR");
+      const translator2 = new Translator();
+      expect(translator2.translate("buttons.next")).toBe("Suivant");
+    });
+  });
+
+  describe("setLanguage", () => {
+    it("should change active language correctly", () => {
+      const translator = new Translator("en_US");
+      translator.setLanguage("fr_FR");
+      expect(translator.translate("buttons.done")).toBe("Terminé");
+
+      translator.setLanguage("fa_IR");
+      expect(translator.translate("buttons.done")).toBe("پایان");
+    });
+
+    it("should work with all supported languages", () => {
+      const translator = new Translator();
+      (["en_US", "es_ES", "fr_FR", "de_DE", "fa_IR"] as LanguageCode[]).forEach(
+        (code) => {
+          translator.setLanguage(code);
+          expect(typeof translator.translate("buttons.next")).toBe("string");
+        }
+      );
+    });
+  });
+
+  describe("translate", () => {
+    let translator: Translator;
+
+    beforeEach(() => (translator = new Translator("en_US")));
+
+    it("should translate standard keys", () => {
+      expect(translator.translate("buttons.next")).toBe("Next");
+      expect(translator.translate("buttons.prev")).toBe("Back");
+      expect(translator.translate("buttons.done")).toBe("Done");
+    });
+
+    it("should return key if not found", () => {
+      expect(translator.translate("nonexistent.key")).toBe("nonexistent.key");
+    });
+  });
+
+  describe("getAvailableLanguages", () => {
+    it("should return all language codes", () => {
+      const codes = getAvailableLanguages();
+      expect(codes).toEqual(
+        expect.arrayContaining(["en_US", "es_ES", "fr_FR", "de_DE", "fa_IR"])
+      );
+    });
+  });
+
+  describe("Integration with Tour options", () => {
+    class MockTour {
+      private _options: any = {};
+      setOptions(options: any) {
+        const processed = { ...options };
+        if (processed.language) {
+          const translator = new Translator(processed.language);
+          processed.nextLabel =
+            processed.nextLabel ?? translator.translate("buttons.next");
+          processed.prevLabel =
+            processed.prevLabel ?? translator.translate("buttons.prev");
+          processed.doneLabel =
+            processed.doneLabel ?? translator.translate("buttons.done");
+        }
+        this._options = { ...this._options, ...processed };
+      }
+      getOption(key: string) {
+        return this._options[key];
+      }
+    }
+
+    it("should translate labels based on language code", () => {
+      const tour = new MockTour();
+      tour.setOptions({ language: "es_ES" });
+      expect(tour.getOption("nextLabel")).toBe("Siguiente");
+      expect(tour.getOption("prevLabel")).toBe("Atrás");
+      expect(tour.getOption("doneLabel")).toBe("Hecho");
+    });
+
+    it("should not override custom labels", () => {
+      const tour = new MockTour();
+      tour.setOptions({ language: "fr_FR", nextLabel: "Custom Next" });
+      expect(tour.getOption("nextLabel")).toBe("Custom Next");
+      expect(tour.getOption("doneLabel")).toBe("Terminé");
+    });
+
+    it("should handle multiple languages sequentially", () => {
+      const tour = new MockTour();
+      tour.setOptions({ language: "de_DE" });
+      expect(tour.getOption("nextLabel")).toBe("Weiter");
+
+      tour.setOptions({ language: "fa_IR" });
+      expect(tour.getOption("nextLabel")).toBe("بعدی");
+    });
+  });
+});

src/i18n/language.ts

@@ -1,64 +1,81 @@
 import enUS from "./en_US";
 import faIR from "./fa_IR";
-import de_DE from "./de_DE";
+import deDE from "./de_DE";
 import esES from "./es_ES";
 import frFR from "./fr_FR";
 
 type MessageFormat = (...args: any[]) => string;
-type Message = string | MessageFormat;
-export type Language = { [key: string]: Message | Language };
 
-const languages: Record<string, Language> = {
+const languages = {
   en_US: enUS,
   fa_IR: faIR,
-  de_DE: de_DE,
+  de_DE: deDE,
   es_ES: esES,
   fr_FR: frFR,
-};
+} as const;
+
+export type LanguageCode = keyof typeof languages;
+export const DefaultLanguage: LanguageCode = "en_US";
+
+/**
+ * Get all available language codes
+ */
+export function getAvailableLanguages(): LanguageCode[] {
+  return Object.keys(languages) as LanguageCode[];
+}
 
 export class Translator {
-  private _language: Language;
+  private _languageCode: LanguageCode;
 
-  constructor(language?: Language) {
-    if (language) {
-      this._language = language;
+  constructor(languageCode?: LanguageCode) {
+    if (languageCode && languages[languageCode]) {
+      this._languageCode = languageCode;
     } else {
       const rawLang = (
         navigator.language ||
         (navigator as any).userLanguage ||
-        "en-US"
+        DefaultLanguage
       ).replace("-", "_");
 
-      const normalizedLang = Object.keys(languages).find(
+      const normalizedLang = (Object.keys(languages) as LanguageCode[]).find(
         (key) => key.toLowerCase() === rawLang.toLowerCase()
       );
 
-      this._language = normalizedLang ? languages[normalizedLang] : enUS;
+      this._languageCode = normalizedLang ?? DefaultLanguage;
     }
   }
 
-  setLanguage(language: Language) {
-    this._language = language;
+  setLanguage(code: LanguageCode) {
+    if (languages[code]) {
+      this._languageCode = code;
+    }
+  }
+
+  getLanguage(): LanguageCode {
+    return this._languageCode;
+  }
+
+  private get messages() {
+    return languages[this._languageCode];
   }
 
   private getString(
     message: string,
-    lang: Language = this._language
+    langObj: any = this.messages
   ): MessageFormat | null {
-    if (!lang || !message) return null;
+    if (!langObj || !message) return null;
 
     const splitted = message.split(".");
     const key = splitted[0];
 
-    if (lang[key]) {
-      const val = lang[key];
-
+    if (langObj[key]) {
+      const val = langObj[key];
       if (typeof val === "string") {
         return (): string => val;
       } else if (typeof val === "function") {
         return val;
       } else {
-        return this.getString(splitted.slice(1).join("."), val as Language);
+        return this.getString(splitted.slice(1).join("."), val);
       }
     }