<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css"
type="text/css"?>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1363862
-->
<window title="Node.localize - Bug 1363862"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<script type="application/javascript"
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<!-- test results are displayed in the html:body -->
<body xmlns="http://www.w3.org/1999/xhtml">
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1363862"
target="_blank">Mozilla Bug 1363862</a>
</body>
<!-- test code goes here -->
<script type="application/javascript"><![CDATA[
/** Test for Bug 1363862 **/
const translations = {
"key1": {
value: "Value 1",
attrs: null,
},
"key2": {
value: null,
attrs: [
{name: "label", value: "Value 2"},
{name: "accesskey", value: "K"},
]
},
"key3": {
value: "Value 3",
attrs: [
{name: "accesskey", value: "V"},
]
},
"key4": undefined,
"key5": {
value: null,
attrs: [
{name: "value", value: "Submit Value"},
]
}
}
/**
* This function serves as an approximation of what Localization does.
*/
async function mockFormatTranslations(l10nItems) {
testL10nItems(l10nItems);
return l10nItems.map(l10nItem => {
return translations[l10nItem.l10nId];
});
}
/**
* This function serves as an approximation of what DOMLocalization does.
*/
async function translateFragment(frag) {
const untranslatedElements = await frag.localize(async l10nItems => {
const translations = await mockFormatTranslations(l10nItems);
return translations;
});
return untranslatedElements;
}
/**
* Test items returned from Node.localize to make sure they match what
* we would read using JS DOM.
*/
function testL10nItems(l10nItems) {
for (l10nItem of l10nItems) {
const elem = document.querySelector(`[data-l10n-id=${l10nItem.l10nId}]`);
SimpleTest.isDeeply(
l10nItem.l10nArgs,
JSON.parse(elem.getAttribute("data-l10n-args") || null),
"l10nArgs should match data-l10n-args"
);
ok(l10nItem.l10nAttrs === (elem.getAttribute("data-l10n-attrs") || null),
"l10nAttrs should match data-l10n-attrs");
ok(l10nItem.localName === elem.localName,
"l10nItem.localeName should match elem.localName");
ok(l10nItem.namespaceURI === elem.namespaceURI,
"l10nItem.namespaceURI should match elem.namespaceURI");
ok(l10nItem.type === (elem.getAttribute("type") || null),
"l10nItem.type should match elem.type");
}
}
async function testLocalization() {
const container = document.getElementById("testContainer");
const untranslatedElements = await translateFragment(container);
// We will walk through all translations and check if they
// were correctly populated onto the DOM.
for (const [l10nId, translation] of Object.entries(translations)) {
const elem = document.querySelector(`[data-l10n-id=${l10nId}]`);
// If there is no translation then the element should be returned
// as part of the `untranslatedElements`.
if (translation === undefined) {
const i = Object.keys(translations).indexOf(l10nId);
ok(untranslatedElements[i] === elem);
continue;
}
if (translation.value !== null) {
ok(elem.textContent === translation.value,
"element's textContent should be populated with the translation value");
}
if (translation.attrs !== null) {
for (const {name, value} of translation.attrs) {
ok(elem.getAttribute(name) === value,
"attribute value should be populated from the translation");
}
}
}
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addLoadEvent(testLocalization);
]]></script>
<box id="testContainer">
<label data-l10n-id="key1" />
<label data-l10n-id="key2" data-l10n-args='{"unreadCount": 5}' />
<label data-l10n-id="key3" />
<label data-l10n-id="key4" />
<html:input type="submit" data-l10n-id="key5" />
</box>
</window>