Translating retry connection error message and fixing E2E tests

front/src/Components/UI/ErrorDialog.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { errorStore, hasClosableMessagesInErrorStore } from "../../Stores/ErrorStore";
+    import { _ } from "../../Translator/Translator";
 
     function close(): boolean {
         errorStore.clearClosableMessages();
@@ -8,7 +9,7 @@
 </script>
 
 <div class="error-div nes-container is-dark is-rounded" open>
-    <p class="nes-text is-error title">Error</p>
+    <p class="nes-text is-error title">{_("error.error")}</p>
     <div class="body">
         {#each $errorStore as error}
             <p>{error.message}</p>

front/src/Connexion/AxiosUtils.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 import * as rax from "retry-axios";
 import { errorStore } from "../Stores/ErrorStore";
+import { _ } from "../Translator/Translator";
 
 /**
  * This instance of Axios will retry in case of an issue and display an error message as a HTML overlay.
@@ -26,10 +27,13 @@ axiosWithRetry.defaults.raxConfig = {
         console.log(err);
         console.log(cfg);
         console.log(`Retry attempt #${cfg?.currentRetryAttempt} on URL '${err.config.url}'`);
-        errorStore.addErrorMessage("Unable to connect to WorkAdventure. Are you connected to internet?", {
-            closable: false,
-            id: "axios_retry",
-        });
+        errorStore.addErrorMessage(
+            _("error.connection-retry.unable-to-connect-to-workAdventure-are-you-connected-to-internet"),
+            {
+                closable: false,
+                id: "axios_retry",
+            }
+        );
     },
 };
 

front/translations/en-US/error.en-US.json

@@ -9,6 +9,10 @@
             "title": "Connection rejected",
             "sub-title": "You cannot join the World. Try again later {{error}}.",
             "details": "If you want more information, you may contact administrator or contact us at: hello@workadventu.re"
-        }
+        },
+        "connection-retry": {
+            "unable-to-connect-to-workAdventure-are-you-connected-to-internet": "Unable to connect to WorkAdventure. Are you connected to internet?"
+        },
+        "error": "Error"
     }
-}
+}

front/translations/fr-FR/error.fr-FR.json

@@ -9,6 +9,10 @@
             "title": "Connexion rejetée",
             "sub-title": "Vous ne pouvez pas rejoindre le monde. Réessayer plus tard {{error}}.",
             "details": "Si vous souhaitez obtenir de plus amples informations, vous pouvez contacter l'administrateur ou nous contacter à l'adresse suivante: hello@workadventu.re"
-        }
+        },
+        "connection-retry": {
+            "unable-to-connect-to-workAdventure-are-you-connected-to-internet": "Impossible de se connecter à WorkAdventure. Etes vous connecté à Internet?"
+        },
+        "error": "Erreur"
     }
-}
+}

tests/tests/reconnect.ts

@@ -3,7 +3,7 @@ import {assertLogMessage} from "./utils/log";
 const fs = require('fs');
 const Docker = require('dockerode');
 import { Selector } from 'testcafe';
-import {login} from "./utils/roles";
+import {login, resetLanguage} from "./utils/roles";
 import {findContainer, rebootBack, rebootPusher, resetRedis, startContainer, stopContainer} from "./utils/containers";
 
 fixture `Reconnection`
@@ -16,6 +16,8 @@ test("Test that connection can succeed even if WorkAdventure starts while pusher
 
     const errorMessage = Selector('.error-div');
 
+    await resetLanguage('en-US');
+
     await t
         .navigateTo('http://play.workadventure.localhost/_/global/maps.workadventure.localhost/tests/mousewheel.json')
         .expect(errorMessage.innerText).contains('Unable to connect to WorkAdventure')

tests/tests/translate.ts

@@ -0,0 +1,29 @@
+import { Selector } from 'testcafe';
+import {login} from "./utils/roles";
+
+fixture `Translation`
+    .page `http://play.workadventure.localhost/_/global/maps.workadventure.localhost/tests/mousewheel.json`;
+
+test("Test that I can switch to French", async (t: TestController) => {
+
+    const languageSelect = Selector('.languages-switcher');
+    const languageOption = languageSelect.find('option');
+
+    await login(t, 'http://play.workadventure.localhost/_/global/maps.workadventure.localhost/tests/mousewheel.json');
+
+    await t.click('.menuIcon img:first-child')
+        .click(Selector('button').withText('Settings'))
+        .click('.languages-switcher')
+        .click(languageOption.withText('Français (France)'))
+        .click(Selector('button').withText('Save'))
+
+        .click('.menuIcon img:first-child')
+        .expect(Selector('button').withText('Paramètres').innerText).contains('Paramètres');
+
+    t.ctx.passed = true;
+}).after(async t => {
+    if (!t.ctx.passed) {
+        console.log("Test failed. Browser logs:")
+        console.log(await t.getBrowserConsoleMessages());
+    }
+});

tests/tests/utils/roles.ts

@@ -1,6 +1,11 @@
-import { Role } from 'testcafe';
+import { Role, ClientFunction } from 'testcafe';
+
+export const resetLanguage = ClientFunction((browserLanguage) => window.localStorage.setItem('language', browserLanguage));
+
+export async function login(t: TestController, url: string, userName: string = "Alice", characterNumber: number = 2, browserLanguage: string|null = 'en-US') {
+
+    await resetLanguage(browserLanguage);
 
-export function login(t: TestController, url: string, userName: string = "Alice", characterNumber: number = 2) {
     t = t
         .navigateTo(url)
         .typeText('input[name="loginSceneName"]', userName)