1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/app-manager/test/test_template.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,256 @@
1.4 +<!DOCTYPE html>
1.5 +
1.6 +<html>
1.7 +
1.8 + <head>
1.9 + <meta charset="utf8">
1.10 + <title></title>
1.11 +
1.12 + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.13 + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
1.14 + </head>
1.15 +
1.16 + <div id="root">
1.17 + <span template='{"type":"textContent","path":"title"}'></span>
1.18 + <span template='{"type":"attribute","name":"title","path":"title"}'></span>
1.19 + <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'></span>
1.20 + <div template-for='{"path":"mop","childSelector":"#template-for"}'></div>
1.21 + <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'></div>
1.22 + </div>
1.23 +
1.24 + <div id="ref0">
1.25 + <span template='{"type":"textContent","path":"title"}'>ttt</span>
1.26 + <span title="ttt" template='{"type":"attribute","name":"title","path":"title"}'></span>
1.27 + <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'>foo2:foo_l10n/bar_l10n</span>
1.28 + <div template-for='{"path":"mop","childSelector":"#template-for"}'><span template='{"type":"textContent","path":"name","rootPath":"mop"}'>meh</span></div>
1.29 + <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'>
1.30 + <div>
1.31 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.0"}'>xx0</span>
1.32 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.0"}'>a</span>
1.33 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.0"}'>b</span>
1.34 + </div>
1.35 + <div>
1.36 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.1"}'>xx1</span>
1.37 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.1"}'>a</span>
1.38 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.1"}'>b</span>
1.39 + </div>
1.40 + </div>
1.41 + </div>
1.42 +
1.43 +
1.44 + <div id="ref1">
1.45 + <span template='{"type":"textContent","path":"title"}'>xxx</span>
1.46 + <span title="xxx" template='{"type":"attribute","name":"title","path":"title"}'></span>
1.47 + <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'>foo2:foo2_l10n/bar_l10n</span>
1.48 + <div template-for='{"path":"mop","childSelector":"#template-for"}'><span template='{"type":"textContent","path":"name","rootPath":"mop"}'>meh2</span></div>
1.49 + <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'>
1.50 + <div>
1.51 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.0"}'>xx0</span>
1.52 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.0"}'>a</span>
1.53 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.0"}'>b</span>
1.54 + </div>
1.55 + <div>
1.56 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.1"}'>xx1</span>
1.57 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.1"}'>a</span>
1.58 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.1"}'>b</span>
1.59 + </div>
1.60 + </div>
1.61 + </div>
1.62 +
1.63 + <div id="ref2">
1.64 + <span template='{"type":"textContent","path":"title"}'>xxx</span>
1.65 + <span title="xxx" template='{"type":"attribute","name":"title","path":"title"}'></span>
1.66 + <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'>foo2:yyy/zzz</span>
1.67 + <div template-for='{"path":"","childSelector":"#template-for"}'></div>
1.68 + <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'>
1.69 + <div>
1.70 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.0"}'>xx0</span>
1.71 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.0"}'>a</span>
1.72 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.0"}'>b</span>
1.73 + </div>
1.74 + <div>
1.75 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.1"}'>xx1</span>
1.76 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.1"}'>a</span>
1.77 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.1"}'>b</span>
1.78 + </div>
1.79 + </div>
1.80 + </div>
1.81 +
1.82 + <div id="ref3">
1.83 + <span template='{"type":"textContent","path":"title"}'>xxx</span>
1.84 + <span title="xxx" template='{"type":"attribute","name":"title","path":"title"}'></span>
1.85 + <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'>foo2:yyy/zzz</span>
1.86 + <div template-for='{"path":"","childSelector":"#template-for"}'></div>
1.87 + <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'>
1.88 + <div>
1.89 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.0"}'>xx0</span>
1.90 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.0"}'>a</span>
1.91 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.0"}'>b</span>
1.92 + </div>
1.93 + <div>
1.94 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.1"}'>xx1</span>
1.95 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.1"}'>a</span>
1.96 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.1"}'>b</span>
1.97 + </div>
1.98 + <div>
1.99 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.2"}'>xx2</span>
1.100 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.2"}'>a</span>
1.101 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.2"}'>b</span>
1.102 + </div>
1.103 + <div>
1.104 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.3"}'>xx3</span>
1.105 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.3"}'>a</span>
1.106 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.3"}'>b</span>
1.107 + </div>
1.108 + <div>
1.109 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.4"}'>xx4</span>
1.110 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.4"}'>a</span>
1.111 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.4"}'>b</span>
1.112 + </div>
1.113 + </div>
1.114 + </div>
1.115 +
1.116 + <div id="ref4">
1.117 + <span template='{"type":"textContent","path":"title"}'>xxx</span>
1.118 + <span title="xxx" template='{"type":"attribute","name":"title","path":"title"}'></span>
1.119 + <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'>foo2:yyy/zzz</span>
1.120 + <div template-for='{"path":"","childSelector":"#template-for"}'></div>
1.121 + <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'>
1.122 + <div>
1.123 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.0"}'>xx0</span>
1.124 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.0"}'>a</span>
1.125 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.0"}'>b</span>
1.126 + </div>
1.127 + <div>
1.128 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.1"}'>xx1</span>
1.129 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.1"}'>a</span>
1.130 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.1"}'>b</span>
1.131 + </div>
1.132 + <div>
1.133 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.2"}'>xx2</span>
1.134 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.2"}'>a</span>
1.135 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.2"}'>b</span>
1.136 + </div>
1.137 + <div>
1.138 + <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.3"}'>xx3</span>
1.139 + <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.3"}'>a</span>
1.140 + <span template='{"type":"textContent","path":"b","rootPath":"foo1.bar1.3"}'>b</span>
1.141 + </div>
1.142 + </div>
1.143 + </div>
1.144 +
1.145 +
1.146 +
1.147 + <template id="template-loop">
1.148 + <div>
1.149 + <span template='{"type":"textContent","path":"idx"}'></span>
1.150 + <span template='{"type":"textContent","path":"a"}'></span>
1.151 + <span template='{"type":"textContent","path":"b"}'></span>
1.152 + </div>
1.153 + </template>
1.154 +
1.155 + <template id="template-for">
1.156 + <span template='{"type":"textContent","path":"name"}'></span>
1.157 + </template>
1.158 +
1.159 + <script type="application/javascript;version=1.8" src="chrome://browser/content/devtools/app-manager/template.js"></script>
1.160 + <script type="application/javascript;version=1.8">
1.161 + SimpleTest.waitForExplicitFinish();
1.162 +
1.163 + const Cu = Components.utils;
1.164 + Cu.import("resource:///modules/devtools/gDevTools.jsm");
1.165 + const {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
1.166 + const {require} = devtools;
1.167 + const ObservableObject = require("devtools/shared/observable-object");
1.168 +
1.169 + let data = {
1.170 + title: "ttt",
1.171 + mop: {
1.172 + name: "meh",
1.173 + },
1.174 + foo1: {
1.175 + bar1: [
1.176 + {idx: "xx0", a: "a", b: "b"},
1.177 + {idx: "xx1", a: "a", b: "b"},
1.178 + ],
1.179 + },
1.180 + foo2: {
1.181 + foo_l10n: "foo_l10n",
1.182 + bar_l10n: "bar_l10n"
1.183 + },
1.184 + };
1.185 +
1.186 + let store = new ObservableObject(data);
1.187 +
1.188 + let changes = [
1.189 + {
1.190 + exec: function() {},
1.191 + reference: document.querySelector("#ref0")
1.192 + },
1.193 + {
1.194 + exec: function() {
1.195 + store.object.title = "xxx";
1.196 + store.object.foo2.foo_l10n = "foo2_l10n";
1.197 + store.object.mop.name = "meh2";
1.198 + },
1.199 + reference: document.querySelector("#ref1")
1.200 + },
1.201 + {
1.202 + exec: function() {
1.203 + store.object.foo2 = {
1.204 + foo_l10n: "yyy",
1.205 + bar_l10n: "zzz",
1.206 + }
1.207 + let forElt = document.querySelector("#root > [template-for]");
1.208 + forElt.setAttribute("template-for", '{"path":"","childSelector":"#template-for"}');
1.209 + t._processFor(forElt);
1.210 + },
1.211 + reference: document.querySelector("#ref2")
1.212 + },
1.213 + {
1.214 + exec: function() {
1.215 + let items = [];
1.216 + for (let i = 2; i < 5; i++) {
1.217 + items.push({idx: "xx" + i, a: "a", b: "b"});
1.218 + }
1.219 +
1.220 + store.object.foo1.bar1 = store.object.foo1.bar1.concat(items);
1.221 + },
1.222 + reference: document.querySelector("#ref3")
1.223 + },
1.224 + {
1.225 + exec: function() {
1.226 + store.object.foo1.bar1.pop();
1.227 + },
1.228 + reference: document.querySelector("#ref4")
1.229 + },
1.230 + ];
1.231 +
1.232 + function compare(node1, node2) {
1.233 + let text1 = node1.innerHTML;
1.234 + let text2 = node2.innerHTML;
1.235 + text1 = text1.replace(/\n/g,"");
1.236 + text2 = text2.replace(/\n/g,"");
1.237 + text1 = text1.replace(/\s+/g,"");
1.238 + text2 = text2.replace(/\s+/g,"");
1.239 + return text1 == text2;
1.240 + }
1.241 +
1.242 +
1.243 + let root = document.querySelector("#root");
1.244 +
1.245 + let t = new Template(root, store, (prop, args) => {
1.246 + return prop + ":" + args.join("/");
1.247 + });
1.248 +
1.249 + t.start();
1.250 +
1.251 + for (let i = 0; i < changes.length; i++) {
1.252 + let change = changes[i];
1.253 + change.exec();
1.254 + ok(compare(change.reference, root), "Content " + i + " looks good.");
1.255 + }
1.256 + SimpleTest.finish();
1.257 +
1.258 + </script>
1.259 +</html>
