kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 03:39:55 +00:00
Code Issues Projects Releases Wiki Activity

Convert translator callbacks to async/await (#3048)

Browse Source 
Co-authored-by: veeck <michael@veeck.de>
This commit is contained in:
Veeck 2023-02-21 22:58:18 +01:00 committed by GitHub
parent a23769156e
commit 2b792cdbb8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 92 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -37,6 +37,7 @@ _This release is scheduled to be released on 2023-04-01._
- Update dates in Calendar widgets every minute
- Cleanup jest coverage for patches
- Update `stylelint` dependencies, switch to `stylelint-config-standard` and handle `stylelint` issues
- Convert translator callbacks to async/await
### Fixed

2
js/loader.js
View File

@ -160,7 +160,7 @@ const Loader = (function () {
Log.log("Scripts loaded for: " + module.name);
mObj.loadStyles(function () {
Log.log("Styles loaded for: " + module.name);
mObj.loadTranslations(function () {
mObj.loadTranslations().then(() => {
Log.log("Translations loaded for: " + module.name);
moduleObjects.push(mObj);
callback();

3
js/main.js
View File

@ -485,8 +485,7 @@ const MM = (function () {
Log.setLogLevel(config.logLevel);
Translator.loadCoreTranslations(config.language);
Loader.loadModules();
Translator.loadCoreTranslations(config.language).then(() => Loader.loadModules());
},
/**

20
js/module.js
View File

@ -302,10 +302,8 @@ const Module = Class.extend({
/**
* Load all translations.
*
* @param {Function} callback Function called when done.
*/
loadTranslations(callback) {
async loadTranslations() {
const translations = this.getTranslations() || {};
const language = config.language.toLowerCase();
@ -313,7 +311,6 @@ const Module = Class.extend({
const fallbackLanguage = languages[0];
if (languages.length === 0) {
callback();
return;
}
@ -321,17 +318,14 @@ const Module = Class.extend({
const translationsFallbackFile = translations[fallbackLanguage];
if (!translationFile) {
Translator.load(this, translationsFallbackFile, true, callback);
return;
return Translator.load(this, translationsFallbackFile, true);
}
Translator.load(this, translationFile, false, () => {
if (translationFile !== translationsFallbackFile) {
Translator.load(this, translationsFallbackFile, true, callback);
} else {
callback();
}
});
await Translator.load(this, translationFile, false);
if (translationFile !== translationsFallbackFile) {
return Translator.load(this, translationsFallbackFile, true);
}
},
/**

66
js/translator.js
View File

@ -11,26 +11,28 @@ const Translator = (function () {
* Load a JSON file via XHR.
*
* @param {string} file Path of the file we want to load.
* @param {Function} callback Function called when done.
* @returns {Promise<object>} the translations in the specified file
*/
function loadJSON(file, callback) {
async function loadJSON(file) {
const xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open("GET", file, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// needs error handler try/catch at least
let fileinfo = null;
try {
fileinfo = JSON.parse(xhr.responseText);
} catch (exception) {
// nothing here, but don't die
Log.error(" loading json file =" + file + " failed");
return new Promise(function (resolve, reject) {
xhr.overrideMimeType("application/json");
xhr.open("GET", file, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// needs error handler try/catch at least
let fileinfo = null;
try {
fileinfo = JSON.parse(xhr.responseText);
} catch (exception) {
// nothing here, but don't die
Log.error(" loading json file =" + file + " failed");
}
resolve(fileinfo);
}
callback(fileinfo);
}
};
xhr.send(null);
};
xhr.send(null);
});
}
return {
@ -48,7 +50,7 @@ const Translator = (function () {
* @returns {string} the translated key
*/
translate: function (module, key, variables) {
variables = variables || {}; //Empty object by default
variables = variables || {}; // Empty object by default
/**
* Combines template and variables like:
@ -101,21 +103,17 @@ const Translator = (function () {
* @param {Module} module The module to load the translation file for.
* @param {string} file Path of the file we want to load.
* @param {boolean} isFallback Flag to indicate fallback translations.
* @param {Function} callback Function called when done.
*/
load(module, file, isFallback, callback) {
async load(module, file, isFallback) {
Log.log(`${module.name} - Load translation${isFallback ? " fallback" : ""}: ${file}`);
if (this.translationsFallback[module.name]) {
callback();
return;
}
loadJSON(module.file(file), (json) => {
const property = isFallback ? "translationsFallback" : "translations";
this[property][module.name] = json;
callback();
});
const json = await loadJSON(module.file(file));
const property = isFallback ? "translationsFallback" : "translations";
this[property][module.name] = json;
},
/**
@ -123,30 +121,26 @@ const Translator = (function () {
*
* @param {string} lang The language identifier of the core language.
*/
loadCoreTranslations: function (lang) {
loadCoreTranslations: async function (lang) {
if (lang in translations) {
Log.log("Loading core translation file: " + translations[lang]);
loadJSON(translations[lang], (translations) => {
this.coreTranslations = translations;
});
this.coreTranslations = await loadJSON(translations[lang]);
} else {
Log.log("Configured language not found in core translations.");
}
this.loadCoreTranslationsFallback();
await this.loadCoreTranslationsFallback();
},
/**
* Load the core translations fallback.
* Load the core translations' fallback.
* The first language defined in translations.js will be used.
*/
loadCoreTranslationsFallback: function () {
loadCoreTranslationsFallback: async function () {
let first = Object.keys(translations)[0];
if (first) {
Log.log("Loading core translation fallback file: " + translations[first]);
loadJSON(translations[first], (translations) => {
this.coreTranslationsFallback = translations;
});
this.coreTranslationsFallback = await loadJSON(translations[first]);
}
}
};

63
tests/e2e/translations_spec.js
View File

@ -21,8 +21,8 @@ describe("Translations", () => {
server = app.listen(3000);
});
afterAll(() => {
server.close();
afterAll(async () => {
await server.close();
});
it("should have a translation file in the specified path", () => {
@ -48,17 +48,15 @@ describe("Translations", () => {
dom.window.onload = async () => {
const { Translator, Module, config } = dom.window;
config.language = "en";
Translator.load = sinon.stub().callsFake((_m, _f, _fb, callback) => callback());
Translator.load = sinon.stub().callsFake((_m, _f, _fb) => null);
Module.register("name", { getTranslations: () => translations });
const MMM = Module.create("name");
const loaded = sinon.stub();
MMM.loadTranslations(loaded);
await MMM.loadTranslations();
expect(loaded.callCount).toBe(1);
expect(Translator.load.args.length).toBe(1);
expect(Translator.load.calledWith(MMM, "translations/en.json", false, sinon.match.func)).toBe(true);
expect(Translator.load.calledWith(MMM, "translations/en.json", false)).toBe(true);
done();
};
@ -67,18 +65,16 @@ describe("Translations", () => {
it("should load translation + fallback file", (done) => {
dom.window.onload = async () => {
const { Translator, Module } = dom.window;
Translator.load = sinon.stub().callsFake((_m, _f, _fb, callback) => callback());
Translator.load = sinon.stub().callsFake((_m, _f, _fb) => null);
Module.register("name", { getTranslations: () => translations });
const MMM = Module.create("name");
const loaded = sinon.stub();
MMM.loadTranslations(loaded);
await MMM.loadTranslations();
expect(loaded.callCount).toBe(1);
expect(Translator.load.args.length).toBe(2);
expect(Translator.load.calledWith(MMM, "translations/de.json", false, sinon.match.func)).toBe(true);
expect(Translator.load.calledWith(MMM, "translations/en.json", true, sinon.match.func)).toBe(true);
expect(Translator.load.calledWith(MMM, "translations/de.json", false)).toBe(true);
expect(Translator.load.calledWith(MMM, "translations/en.json", true)).toBe(true);
done();
};
@ -88,17 +84,15 @@ describe("Translations", () => {
dom.window.onload = async () => {
const { Translator, Module, config } = dom.window;
config.language = "--";
Translator.load = sinon.stub().callsFake((_m, _f, _fb, callback) => callback());
Translator.load = sinon.stub().callsFake((_m, _f, _fb) => null);
Module.register("name", { getTranslations: () => translations });
const MMM = Module.create("name");
const loaded = sinon.stub();
MMM.loadTranslations(loaded);
await MMM.loadTranslations();
expect(loaded.callCount).toBe(1);
expect(Translator.load.args.length).toBe(1);
expect(Translator.load.calledWith(MMM, "translations/en.json", true, sinon.match.func)).toBe(true);
expect(Translator.load.calledWith(MMM, "translations/en.json", true)).toBe(true);
done();
};
@ -112,10 +106,8 @@ describe("Translations", () => {
Module.register("name", {});
const MMM = Module.create("name");
const loaded = sinon.stub();
MMM.loadTranslations(loaded);
await MMM.loadTranslations();
expect(loaded.callCount).toBe(1);
expect(Translator.load.callCount).toBe(0);
done();
@ -138,14 +130,13 @@ describe("Translations", () => {
<script src="file://${path.join(__dirname, "..", "..", "js", "translator.js")}">`,
{ runScripts: "dangerously", resources: "usable" }
);
dom.window.onload = () => {
dom.window.onload = async () => {
const { Translator } = dom.window;
Translator.load(mmm, translations[language], false, () => {
expect(typeof Translator.translations[mmm.name]).toBe("object");
expect(Object.keys(Translator.translations[mmm.name]).length).toBeGreaterThanOrEqual(1);
done();
});
await Translator.load(mmm, translations[language], false);
expect(typeof Translator.translations[mmm.name]).toBe("object");
expect(Object.keys(Translator.translations[mmm.name]).length).toBeGreaterThanOrEqual(1);
done();
};
});
}
@ -161,13 +152,12 @@ describe("Translations", () => {
<script src="file://${path.join(__dirname, "..", "..", "js", "translator.js")}">`,
{ runScripts: "dangerously", resources: "usable" }
);
dom.window.onload = () => {
dom.window.onload = async () => {
const { Translator } = dom.window;
Translator.load(mmm, translations.de, false, () => {
base = Object.keys(Translator.translations[mmm.name]).sort();
done();
});
await Translator.load(mmm, translations.de, false);
base = Object.keys(Translator.translations[mmm.name]).sort();
done();
};
});
@ -191,13 +181,12 @@ describe("Translations", () => {
<script src="file://${path.join(__dirname, "..", "..", "js", "translator.js")}">`,
{ runScripts: "dangerously", resources: "usable" }
);
dom.window.onload = () => {
dom.window.onload = async () => {
const { Translator } = dom.window;
Translator.load(mmm, translations[language], false, () => {
keys = Object.keys(Translator.translations[mmm.name]).sort();
done();
});
await Translator.load(mmm, translations[language], false);
keys = Object.keys(Translator.translations[mmm.name]).sort();
done();
};
});

56
tests/unit/classes/translator_spec.js
View File

@ -23,14 +23,13 @@ describe("Translator", () => {
});
});
afterAll(() => {
afterAll(async () => {
for (const socket of sockets) {
socket.destroy();
sockets.delete(socket);
}
server.close();
await server.close();
});
describe("translate", () => {
@ -158,35 +157,33 @@ describe("Translator", () => {
it("should load translations", (done) => {
const dom = new JSDOM(`<script>var Log = {log: () => {}};</script><script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`, { runScripts: "dangerously", resources: "usable" });
dom.window.onload = () => {
dom.window.onload = async () => {
const { Translator } = dom.window;
const file = "translation_test.json";
Translator.load(mmm, file, false, () => {
const json = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", file));
expect(Translator.translations[mmm.name]).toEqual(json);
done();
});
await Translator.load(mmm, file, false);
const json = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", file));
expect(Translator.translations[mmm.name]).toEqual(json);
done();
};
});
it("should load translation fallbacks", (done) => {
const dom = new JSDOM(`<script>var Log = {log: () => {}};</script><script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`, { runScripts: "dangerously", resources: "usable" });
dom.window.onload = () => {
dom.window.onload = async () => {
const { Translator } = dom.window;
const file = "translation_test.json";
Translator.load(mmm, file, true, () => {
const json = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", file));
expect(Translator.translationsFallback[mmm.name]).toEqual(json);
done();
});
await Translator.load(mmm, file, true);
const json = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", file));
expect(Translator.translationsFallback[mmm.name]).toEqual(json);
done();
};
});
it("should not load translations, if module fallback exists", (done) => {
const dom = new JSDOM(`<script>var Log = {log: () => {}};</script><script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`, { runScripts: "dangerously", resources: "usable" });
dom.window.onload = () => {
dom.window.onload = async () => {
const { Translator, XMLHttpRequest } = dom.window;
const file = "translation_test.json";
@ -198,13 +195,12 @@ describe("Translator", () => {
Hello: "Hallo"
};
Translator.load(mmm, file, false, () => {
expect(Translator.translations[mmm.name]).toBe(undefined);
expect(Translator.translationsFallback[mmm.name]).toEqual({
Hello: "Hallo"
});
done();
await Translator.load(mmm, file, false);
expect(Translator.translations[mmm.name]).toBe(undefined);
expect(Translator.translationsFallback[mmm.name]).toEqual({
Hello: "Hallo"
});
done();
};
});
});
@ -216,9 +212,9 @@ describe("Translator", () => {
<script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`,
{ runScripts: "dangerously", resources: "usable" }
);
dom.window.onload = () => {
dom.window.onload = async () => {
const { Translator } = dom.window;
Translator.loadCoreTranslations("en");
await Translator.loadCoreTranslations("en");
const en = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", "translation_test.json"));
setTimeout(() => {
@ -235,9 +231,9 @@ describe("Translator", () => {
<script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`,
{ runScripts: "dangerously", resources: "usable" }
);
dom.window.onload = () => {
dom.window.onload = async () => {
const { Translator } = dom.window;
Translator.loadCoreTranslations("MISSINGLANG");
await Translator.loadCoreTranslations("MISSINGLANG");
const en = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", "translation_test.json"));
setTimeout(() => {
@ -256,9 +252,9 @@ describe("Translator", () => {
<script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`,
{ runScripts: "dangerously", resources: "usable" }
);
dom.window.onload = () => {
dom.window.onload = async () => {
const { Translator } = dom.window;
Translator.loadCoreTranslationsFallback();
await Translator.loadCoreTranslationsFallback();
const en = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", "translation_test.json"));
setTimeout(() => {
@ -274,9 +270,9 @@ describe("Translator", () => {
<script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`,
{ runScripts: "dangerously", resources: "usable" }
);
dom.window.onload = () => {
dom.window.onload = async () => {
const { Translator } = dom.window;
Translator.loadCoreTranslations();
await Translator.loadCoreTranslations();
setTimeout(() => {
expect(Translator.coreTranslationsFallback).toEqual({});