1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>MozLitElement Tests</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
<script>
let html, render, renderTarget, defaultTemplate, MozLitElement;
var mockL10n;
add_setup(async function setup() {
({ html, render } = await import(
"chrome://global/content/vendor/lit.all.mjs"
));
({ MozLitElement } = await import(
"chrome://global/content/lit-utils.mjs"
));
renderTarget = document.getElementById("render");
const l10nReg = new L10nRegistry();
const fs = [{
path: "/localization/en-US/mock.ftl",
source: `
example-label =
.label = Example label!
.message = And a message!
.tooltiptext = Also a tooltiptext!
.rename = Also renamed!
.accesskey = E
`,
}];
const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
l10nReg.registerSources([source]);
mockL10n = new DOMLocalization(["/mock.ftl"], false, l10nReg, ["en-US"]);
mockL10n.addResourceIds(["/mock.ftl"]);
defaultTemplate = html`
<example-element data-l10n-id="example-label"></example-element>
`;
});
async function renderTemplate(template = defaultTemplate) {
render(template, renderTarget);
return renderTarget.firstElementChild;
}
function defineExampleElement() {
class ExampleElement extends MozLitElement {
static properties = {
label: { type: String, fluent: true },
message: { type: String, fluent: true },
tooltipText: { type: String, fluent: true },
renamedAttribute: { type: String, fluent: true, attribute: "rename" },
mappedAttribute: { type: String, mapped: true, attribute: "mapped" },
ariaLabel: { type: String, mapped: true },
accessKey: { type: String, mapped: true, fluent: true },
};
render() {
return this.label + this.message + this.tooltipText + this.renamedAttribute + this.accessKey;
}
updated(changes) {
if (changes.has("label") && this.label) {
this.dispatchEvent(new CustomEvent("label-changed"));
}
}
}
customElements.define("example-element", ExampleElement);
}
add_task(async function testL10nAttrs() {
let el = await renderTemplate();
window.el = el;
defineExampleElement();
is(el.shadowRoot.textContent, "", "There's no text");
is(
el.dataset.l10nAttrs,
"label,message,tooltiptext,rename,accesskey",
"data-l10n-attrs is set"
);
await new Promise(r => el.addEventListener("label-changed", r, { once: true }));
is(
el.shadowRoot.textContent,
"Example label!And a message!Also a tooltiptext!Also renamed!E",
"Text rendered automatically on upgrade"
);
is(el.accessKey, "E", "accessKey is mapped with custom attribute");
ok(!el.hasAttribute("accesskey"), "renamed attribute was removed");
});
add_task(async function testMappedAttributes() {
let el = await renderTemplate(
html`<example-element accesskey="f" mapped="mapped-val" aria-label="Label!"></example-element>`
);
is(el.accessKey, "f", "accessKey property is correct");
ok(!el.hasAttribute("accesskey"), "accesskey attribute was removed");
is(el.mappedAttribute, "mapped-val", "mappedAttribute is mapped with custom attribute");
ok(!el.hasAttribute("mapped"), "mapped attribute was removed");
is(el.ariaLabel, "Label!", "ariaLabel property is set");
ok(!el.hasAttribute("aria-label"), "aria-label was removed");
});
</script>
</head>
<body>
<div id="render"></div>
</body>
</html>
|
