Skip to content

Commit 8922323

Browse files
author
Steven Orvell
committed
update tests.
1 parent 348896a commit 8922323

6 files changed

+380
-3
lines changed

‎test/smoke/dom-bind-async.html

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
5+
<title>dom-bind</title>
6+
7+
<meta charset="utf-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
10+
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
11+
<link rel="import" href="../../polymer.html" async>
12+
13+
<script>
14+
document.querySelector('link').addEventListener('load', function() {
15+
app.render();
16+
});
17+
</script>
18+
19+
</head>
20+
<body>
21+
22+
<template is="dom-bind" id="app">
23+
24+
<h3>Repeat index</h3>
25+
<template is="dom-repeat" items="{{employees}}">
26+
<div style="padding: 3px 0px;">
27+
<button on-tap="modify">Modify</button>
28+
<span>{{index}}</span>
29+
<span>{{item.first}}</span>
30+
<span>{{item.last}}</span>
31+
</div>
32+
</template>
33+
34+
<h3>Show person by index, demonstrate "dom-if" expressions</h3>
35+
<template is="dom-repeat" items="{{employees}}">
36+
<div>
37+
<template is="dom-if" if="{{testit(index)}}">
38+
<div style="padding: 3px 0px;">
39+
<button on-tap="modify">Modify</button>
40+
<span>{{index}}</span>
41+
<span>{{item.first}}</span>
42+
<span>{{item.last}}</span>
43+
</div>
44+
</template>
45+
</div>
46+
</template>
47+
48+
<h3>Show person by index, demonstrate filter</h3>
49+
<template is="dom-repeat" items="{{employees}}" filter="onlyRob">
50+
<div>
51+
<div style="padding: 3px 0px;">
52+
<button on-tap="modify">Modify</button>
53+
<span>{{index}}</span>
54+
<span>{{item.first}}</span>
55+
<span>{{item.last}}</span>
56+
</div>
57+
</div>
58+
</template>
59+
60+
</template>
61+
62+
<script>
63+
var logEl = document.getElementById('log');
64+
var app = document.getElementById('app');
65+
app.testit = function(i) {
66+
return i > 1;
67+
};
68+
app.modify = function(e) {
69+
e.model.set('item.last', e.model.item.last + '*');
70+
};
71+
app.onlyRob = function(item) {
72+
return item.first == 'Rob';
73+
};
74+
app.bar = true;
75+
app.employees = [
76+
{first: 'Bob', last: 'Smith'},
77+
{first: 'Sally', last: 'Johnson'},
78+
{first: 'Rob', last: 'Instructs'},
79+
{first: 'Scott', last: 'Explains'},
80+
{first: 'Taylor', last: 'Blogs'}
81+
];
82+
83+
</script>
84+
85+
</body>
86+
</html>

‎test/smoke/dynamic-dom-bind.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
12+
<link rel="import" href="../../polymer.html">
13+
14+
<body>
15+
<x-test></x-test>
16+
17+
<dom-module id="x-foo">
18+
<template>
19+
<content></content>
20+
</template>
21+
<script>
22+
HTMLImports.whenReady(function() {
23+
Polymer({
24+
is: 'x-foo'
25+
});
26+
});
27+
</script>
28+
</dom-module>
29+
30+
<dom-module id="x-test">
31+
<template>
32+
Greeting:
33+
<x-foo id="myCustomElement"></x-foo>
34+
</template>
35+
<script>
36+
HTMLImports.whenReady(function() {
37+
Polymer({
38+
is: 'x-test',
39+
attached: function() {
40+
var appendTo = this.$.myCustomElement,
41+
t = document.createElement('template', 'dom-bind'),
42+
span = document.createElement('span');
43+
span.innerHTML = '{{hello}}';
44+
t.content.appendChild(span);
45+
t.hello = 'hey';
46+
Polymer.dom(appendTo).appendChild(t);
47+
}
48+
});
49+
});
50+
</script>
51+
</dom-module>
52+
53+
54+
</body>
55+

‎test/smoke/dynamic-dom-bind2.html

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
12+
<link rel="import" href="../../polymer.html">
13+
14+
<body>
15+
<x-outer></x-outer>
16+
17+
<dom-module id="x-outer">
18+
<template>
19+
<x-test id="test1"></x-test>
20+
<button on-tap="_addDomBindDirectly">Add dom-bind directly</button>
21+
<span>&lt;&lt;&lt; Doesn't work the first time</span>
22+
<br /><br />
23+
<x-test id="test2"></x-test>
24+
<button on-tap="_addDomBindIndirectly">Add dom-bind indirectly</button>
25+
<span>&lt;&lt;&lt; Works every time</span>
26+
</template>
27+
</dom-module>
28+
29+
<dom-module id="x-test">
30+
<template>
31+
<content></content>
32+
</template>
33+
</dom-module>
34+
35+
<script>
36+
HTMLImports.whenReady(function() {
37+
Polymer({
38+
is: 'x-test'
39+
});
40+
41+
Polymer({
42+
is: 'x-outer',
43+
_addDomBindDirectly: function() {
44+
var domBind = this._createDomBind();
45+
Polymer.dom(this.$.test1).appendChild(domBind);
46+
},
47+
_addDomBindIndirectly: function() {
48+
var domBind = this._createDomBind();
49+
50+
var tempContainer = document.createElement("div");
51+
tempContainer.appendChild(domBind);
52+
53+
Polymer.dom(this.$.test2).appendChild(tempContainer);
54+
},
55+
_createDomBind: function() {
56+
var domBind = document.createElement("template", "dom-bind");
57+
domBind.test = "hello";
58+
59+
var doc = domBind.content.ownerDocument;
60+
var div = doc.createElement("div");
61+
div.textContent = "{{test}}";
62+
63+
domBind.content.appendChild(div);
64+
65+
return domBind;
66+
}
67+
});
68+
});
69+
</script>
70+
71+
72+
</body>
73+

‎test/unit/dom-bind-elements1.html

+36-1
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,39 @@
77
}
88
}
99
});
10-
</script>
10+
</script>
11+
12+
<dom-module id="x-content">
13+
<template><div id="container"><content></content></div></template>
14+
<script>
15+
Polymer({
16+
is: 'x-content'
17+
});
18+
</script>
19+
</dom-module>
20+
21+
<dom-module id="x-attach-dom-bind">
22+
<template><x-content id="local"></x-content></template>
23+
<script>
24+
Polymer({
25+
is: 'x-attach-dom-bind',
26+
attached: function() {
27+
var t = document.createElement('template', 'dom-bind'),
28+
span = document.createElement('span');
29+
span.innerHTML = '{{hello}}';
30+
t.content.appendChild(span);
31+
t.hello = 'hey';
32+
Polymer.dom(this.$.local).appendChild(t);
33+
}
34+
});
35+
</script>
36+
</dom-module>
37+
38+
<dom-module id="x-compose">
39+
<template><x-content id="local"></x-content></template>
40+
<script>
41+
Polymer({
42+
is: 'x-compose'
43+
});
44+
</script>
45+
</dom-module>

‎test/unit/polymer-dom-elements.html

+112-2
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
Polymer({
5656
is: 'x-test-no-distribute'
5757
});
58-
</script>
58+
</script>
5959

6060
<dom-module id="x-distribute">
6161
<template>
@@ -72,7 +72,7 @@
7272
</div>
7373
</div>
7474
</template>
75-
</dom-element>
75+
</dom-module>
7676

7777
<script>
7878
Polymer({
@@ -184,4 +184,114 @@
184184
<script>Polymer({
185185
is: 'x-clonate'
186186
});</script>
187+
</dom-module>
188+
189+
<dom-module id="x-attach3">
190+
<style>
191+
:host {
192+
display: block;
193+
border: 1px dashed orange;
194+
padding: 4px;
195+
box-sizing: border-box;
196+
}
197+
198+
:host ::content .add3 {
199+
box-sizing: border-box;
200+
height: 20px;
201+
background: #333;
202+
border: 2px solid yellow;
203+
}
204+
</style>
205+
<template>
206+
<content></content>
207+
<template is="dom-if" if="{{shouldIf(done.count)}}">
208+
<x-attach2></x-attach2>
209+
</template>
210+
</template>
211+
<script>Polymer({
212+
is: 'x-attach3',
213+
properties: {
214+
done: {value: {count: 0}}
215+
},
216+
ready: function() {
217+
this.done.count++;
218+
},
219+
attached: function() {
220+
var d = document.createElement('div');
221+
d.className = 'add3';
222+
Polymer.dom(this).appendChild(d);
223+
},
224+
shouldIf: function(x) {
225+
return x < 3;
226+
}
227+
});</script>
228+
</dom-module>
229+
230+
<dom-module id="x-attach2">
231+
<style>
232+
:host {
233+
display: block;
234+
border: 1px dashed tomato;
235+
padding: 4px;
236+
}
237+
238+
:host ::content .add2 {
239+
box-sizing: border-box;
240+
height: 20px;
241+
background: gray;
242+
border: 2px solid yellow;
243+
}
244+
</style>
245+
<template>
246+
<x-attach3><content></content></x-attach3>
247+
<template is="dom-if" if="{{shouldIf(done.count)}}">
248+
<x-attach1></x-attach1>
249+
</template>
250+
</template>
251+
<script>
252+
Polymer({
253+
is: 'x-attach2',
254+
properties: {
255+
done: {value: {count: 0}}
256+
},
257+
ready: function() {
258+
this.done.count++;
259+
},
260+
attached: function() {
261+
var d = document.createElement('div');
262+
d.className = 'add2';
263+
Polymer.dom(this).appendChild(d);
264+
},
265+
shouldIf: function(x) {
266+
return x < 3;
267+
}
268+
});</script>
269+
</dom-module>
270+
271+
<dom-module id="x-attach1">
272+
<style>
273+
:host {
274+
display: block;
275+
border: 1px dashed seagreen;
276+
padding: 4px;
277+
}
278+
279+
:host ::content .add1 {
280+
box-sizing: border-box;
281+
height: 20px;
282+
background: lightgray;
283+
border: 2px solid yellow;
284+
}
285+
</style>
286+
<template>
287+
<x-attach2><content></content></x-attach2>
288+
</template>
289+
<script>Polymer({
290+
is: 'x-attach1',
291+
attached: function() {
292+
var d = document.createElement('div');
293+
d.className = 'add1';
294+
Polymer.dom(this).appendChild(d);
295+
}
296+
});</script>
187297
</dom-module>

0 commit comments

Comments
 (0)