fix(tests): fix i18n tests

web/i18n/en/translation.json

@@ -118,10 +118,12 @@
 	"Stream started": "Stream started",
 	"TROUBLESHOOT": "TROUBLESHOOT",
 	"Testing": {
-    "itemCount": "<strong><em>Missing translation Testing.itemCount: Please report</em></strong>",
+		"itemCount": "You have {{count}} items",
-    "messageCount": "<strong><em>Missing translation Testing.messageCount: Please report</em></strong>",
+		"itemCount_one": "You have {{count}} item",
-    "noPluralKey": "<strong><em>Missing translation Testing.noPluralKey: Please report</em></strong>",
+		"messageCount": "{{sender}} has sent {{count}} messages",
-    "simpleKey": "<strong><em>Missing translation Testing.simpleKey: Please report</em></strong>"
+		"messageCount_one": "{{sender}} has sent one message",
+		"noPluralKey": "This has no singular key (_one).",
+		"simpleKey": "Simple translation text"
 	},
 	"Time": "Time",
 	"Timestamp": "Timestamp",

web/tests/translation.test.tsx

@@ -7,30 +7,48 @@ import { Localization } from '../types/localization';
 jest.mock('next-export-i18n', () => ({
   useTranslation: () => ({
     t: (key: string, vars?: Record<string, any>) => {
-      // Mock translations for testing
+      // Use the actual keys as in localization.ts and translation.json
       const translations: Record<string, string> = {
         hello_world: 'Hello <strong>{{name}}</strong>, welcome to the world!',
-        'Chat is offline': 'Chat is offline',
+        chat_offline: 'Chat is offline',
         notification_message:
           'You can <a href="#">click here</a> to receive notifications when {{streamer}} goes live.',
-        simple_key: 'Simple translation text',
+        component_error: 'Error: {{message}}',
-
+        offline_basic: 'This stream is offline. Check back soon!',
-        // Pluralization test keys
+        // Testing keys
-        item_count_one: 'You have {{count}} item',
+        'Testing.simpleKey': 'Simple translation text',
-        item_count: 'You have {{count}} items', // Original key serves as plural form
+        'Testing.itemCount_one': 'You have {{count}} item',
-        message_count_one: 'You have {{count}} message from {{sender}}',
+        'Testing.itemCount': 'You have {{count}} items',
-        message_count: 'You have {{count}} messages from {{sender}}', // Original key serves as plural form
+        'Testing.messageCount_one': 'You have {{count}} message from {{sender}}',
-
+        'Testing.messageCount': 'You have {{count}} messages from {{sender}}',
-        // Keys without pluralization variants
+        'Testing.noPluralKey': 'This key has no plural variants - {{count}} things',
-        no_plural_key: 'This key has no plural variants - {{count}} things',
       };
 
-      let result = translations[key] || key;
+      let result = translations[key];
+
+      // If not found, try to fallback to a snake_case version (for legacy or fallback)
+      if (!result && key.includes('.')) {
+        const [ns, k] = key.split('.');
+        // Try snake_case
+        const snakeKey =
+          ns +
+          '.' +
+          k
+            .replace(/([A-Z])/g, '_$1')
+            .toLowerCase()
+            .replace(/^_/, '');
+        result = translations[snakeKey];
+      }
+
+      // If still not found, return the key itself
+      if (!result) {
+        result = key;
+      }
 
       // Simple variable replacement for testing
       if (vars) {
         Object.keys(vars).forEach(varKey => {
-          result = result.replace(`{{${varKey}}}`, vars[varKey]);
+          result = result.replace(new RegExp(`{{${varKey}}}`, 'g'), vars[varKey]);
         });
       }
 

web/types/localization.ts

@@ -118,10 +118,10 @@ export const Localization = {
   Testing: {
     testing: 'testing_string',
     another: 'another_test',
-    simpleKey: 'simple_key',
+    simpleKey: 'Testing.simpleKey',
-    itemCount: 'item_count',
+    itemCount: 'Testing.itemCount',
-    messageCount: 'message_count',
+    messageCount: 'Testing.messageCount',
-    noPluralKey: 'no_plural_key',
+    noPluralKey: 'Testing.noPluralKey',
   },
 } as const;