test_l10n_args.html (3239B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test DOMLocalization's data-l10n-args handling</title> 6 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 8 <script type="application/javascript"> 9 "use strict"; 10 const l10nReg = new L10nRegistry(); 11 const fs = [ 12 { path: "/localization/en-US/mock.ftl", source: ` 13 test-simple = Hello { $prop } 14 test-selector = { $prop -> 15 [true] YES 16 *[other] NO 17 } 18 test-error = Hey 19 ` }, 20 ]; 21 const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); 22 l10nReg.registerSources([source]); 23 24 const tests = [ 25 // [data-l10n-id, data-l10n-args, expected text content], 26 27 [`test-simple`, `{ "prop": "str" }`, `Hello str`], 28 [`test-simple`, `{ "prop": 10 }`, `Hello 10`], 29 [`test-simple`, `{ "prop": 10.1 }`, `Hello 10.1`], 30 [`test-simple`, `{ "prop": -2 }`, `Hello -2`], 31 [`test-simple`, `{ "prop": true }`, `Hello true`], 32 [`test-simple`, `{ "prop": false }`, `Hello false`], 33 34 [`test-selector`, `{ "prop": "true" }`, `YES`], 35 [`test-selector`, `{ "prop": "false" }`, `NO`], 36 [`test-selector`, `{ "prop": 10 }`, `NO`], 37 [`test-selector`, `{ "prop": true }`, `YES`], 38 [`test-selector`, `{ "prop": false }`, `NO`], 39 40 // Passing null is also valid as long as the property is not referred. 41 [`test-simple`, `{ "prop": "str", "prop2": null }`, `Hello str`], 42 ]; 43 44 const errorTests = [ 45 // Unexpected top-level value. 46 `10`, 47 `"foo"`, 48 `true`, 49 `false`, 50 `[]`, 51 52 // Unsupported property value types. 53 `{ "prop": [] }`, 54 `{ "prop": {} }`, 55 56 // Syntax Error. 57 `a`, 58 `"`, 59 `'foo'`, 60 `{ prop: 10 }`, 61 `{ "prop" }`, 62 `{ "prop": }`, 63 `{ "prop": "a }`, 64 `[`, 65 `}`, 66 `{`, 67 `}`, 68 `{ "prop": [ }`, 69 `{ "prop": { }`, 70 `{ "prop": 10, }`, 71 ]; 72 73 window.onload = async function() { 74 SimpleTest.waitForExplicitFinish(); 75 76 const domLoc = new DOMLocalization( 77 [], 78 false, 79 l10nReg, 80 ["en-US"], 81 ); 82 83 const container = document.querySelector("#test-container"); 84 85 domLoc.addResourceIds(["/mock.ftl"]); 86 domLoc.connectRoot(document.body); 87 88 for (const [id, args, expected] of tests) { 89 const span = document.createElement("span"); 90 span.setAttribute("data-l10n-id", id); 91 span.setAttribute("data-l10n-args", args); 92 container.append(span); 93 94 await domLoc.translateRoots(); 95 96 is(span.textContent, expected, `translation for "${id}" with ${args} should become "${expected}"`); 97 98 span.remove(); 99 } 100 101 for (const args of errorTests) { 102 const span = document.createElement("span"); 103 span.setAttribute("data-l10n-id", "test-error"); 104 span.setAttribute("data-l10n-args", args); 105 container.append(span); 106 107 let thrown = false; 108 109 try { 110 await domLoc.translateRoots(); 111 } catch (e) { 112 thrown = true; 113 } 114 115 ok(thrown, `${args} should throw error`); 116 117 span.remove(); 118 } 119 120 SimpleTest.finish(); 121 }; 122 </script> 123 </head> 124 <body> 125 <div id="test-container"> 126 </div> 127 </body> 128 </html>