Skip to content

Commit 365c7e6

Browse files
e111077e111077
authored
Merge pull request #37 from PolymerElements/custom-elements-v1
<test-fixture> now works with Custom Elements v1
2 parents 35210e3 + 242e4ed commit 365c7e6

File tree

5 files changed

+294
-12
lines changed

5 files changed

+294
-12
lines changed

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
],
1111
"devDependencies": {
1212
"web-component-tester": "^4.0.0",
13-
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
13+
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
14+
"webcomponentsjs-v1": "webcomponents/webcomponentsjs#v1"
1415
},
1516
"main": "test-fixture.html",
1617
"ignore": []

‎test-fixture.html‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -235,11 +235,18 @@
235235

236236
forcePolyfillAttachedStateSynchrony: function () {
237237
// Force synchrony in attachedCallback and detachedCallback where
238-
// implemented, in the event that we are dealing with the async Web
239-
// Components Polyfill.
240-
if (window.CustomElements && window.CustomElements.takeRecords) {
238+
// implemented, in the event that we are dealing with one of these async
239+
// polyfills:
240+
// 1. Web Components CustomElements polyfill (v1 or v0).
241+
if (window.customElements && window.customElements.flush) {
242+
window.customElements.flush();
243+
} else if (window.CustomElements && window.CustomElements.takeRecords) {
241244
window.CustomElements.takeRecords();
242245
}
246+
// 2. ShadyDOM polyfill.
247+
if (window.ShadyDOM) {
248+
window.ShadyDOM.flush();
249+
}
243250
},
244251

245252
collectElementChildren: function (parent) {
@@ -313,9 +320,20 @@
313320
});
314321

315322
try {
316-
document.registerElement('test-fixture', {
317-
prototype: TestFixturePrototype
318-
});
323+
if (window.customElements) {
324+
function TestFixture() {
325+
return ((window.Reflect && Reflect.construct) ?
326+
Reflect.construct(HTMLElement, [], TestFixture)
327+
: HTMLElement.call(this)) || this;
328+
}
329+
TestFixture.prototype = TestFixturePrototype;
330+
TestFixture.prototype.constructor = TestFixture;
331+
customElements.define('test-fixture', TestFixture);
332+
} else {
333+
document.registerElement('test-fixture', {
334+
prototype: TestFixturePrototype
335+
});
336+
}
319337
} catch (e) {
320338
if (window.WCT) {
321339
console.warn('if you are using WCT, you do not need to manually import test-fixture.html');

‎test/index.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@
1515
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
1616
<script src="../../web-component-tester/browser.js"></script>
1717

18-
<link rel="import" href="../../polymer/polymer.html">
19-
2018
</head>
2119
<body>
2220
<script>
2321
WCT.loadSuites([
24-
'test-fixture.html',
25-
'handle-multiple-registrations.html'
22+
'test-fixture.html', // shady
23+
'test-fixture.html?dom=shadow', // shadow
24+
'test-fixture-v1.html?wc-shadydom=true&wc-ce=true', // shady
25+
'test-fixture-v1.html', // shadow
26+
'handle-multiple-registrations.html',
2627
]);
2728
</script>
2829
</body>

‎test/test-fixture-v1.html‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2015 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+
<html>
12+
<head>
13+
<title>test-fixture</title>
14+
15+
<script>
16+
// Save original HTMLElement constructor since customElements v1 polyfill
17+
// overrides it https://github.com/webcomponents/webcomponentsjs/issues/623
18+
var _HTMLElement = window.HTMLElement;
19+
</script>
20+
21+
<script src="../../webcomponentsjs-v1/webcomponents-lite.js"></script>
22+
<script src="../../web-component-tester/browser.js"></script>
23+
24+
<link rel="import" id="test-fixture-import" href="../test-fixture.html">
25+
<script src="../test-fixture-mocha.js"></script>
26+
</head>
27+
<body>
28+
<script>
29+
(function() {
30+
function XCustom() {
31+
if (window.Reflect) {
32+
return Reflect.construct(HTMLElement, [], XCustom)
33+
}
34+
return HTMLElement.call(this) || this;
35+
}
36+
37+
XCustom.constructor = XCustom;
38+
XCustom.prototype = Object.create(HTMLElement.prototype);
39+
XCustom.prototype.onDetached = function() {};
40+
XCustom.prototype.disconnectedCallback = function() {
41+
this.onDetached();
42+
};
43+
44+
customElements.define('x-custom', XCustom);
45+
})();
46+
</script>
47+
<test-fixture id="TrivialFixture">
48+
<template>
49+
<div id="Foo"></div>
50+
</template>
51+
</test-fixture>
52+
<test-fixture id="ComplexDomFixture">
53+
<template>
54+
<div id="Bar">
55+
<div id="BarChild"></div>
56+
</div>
57+
<div id="BarSibling"></div>
58+
</template>
59+
</test-fixture>
60+
<test-fixture id="MultiTemplateFixture">
61+
<template>
62+
<div id="Baz"></div>
63+
</template>
64+
<template>
65+
<div id="Qux"></div>
66+
<div id="QuxSibling"></div>
67+
</template>
68+
</test-fixture>
69+
<test-fixture id="CommentedSingleChildFixture">
70+
<template>
71+
<!-- comment -->
72+
<!-- comment -->
73+
<div id="Foo"></div>
74+
<!-- comment -->
75+
</template>
76+
</test-fixture>
77+
<test-fixture id="CommentedMultiChildFixture">
78+
<template>
79+
<!-- comment -->
80+
<div id="Bar">
81+
<div id="BarChild"></div>
82+
</div>
83+
<!-- comment -->
84+
<!-- comment -->
85+
<div id="BarSibling"></div>
86+
<!-- comment -->
87+
<div id="Baz"></div>
88+
</template>
89+
</test-fixture>
90+
<test-fixture id="AttachedFixture">
91+
<template>
92+
<x-custom></x-custom>
93+
</template>
94+
</test-fixture>
95+
<script>
96+
describe('test-fixture import', function() {
97+
it('loads from test-fixture import', function() {
98+
var importNode = document.getElementById('test-fixture-import');
99+
expect(importNode.import).to.not.be.null;
100+
});
101+
});
102+
describe('<test-fixture>', function () {
103+
var trivialFixture;
104+
var complexDomFixture;
105+
var multiTemplateFixture;
106+
var commentedSingleChildFixture;
107+
var commentedMultiChildFixture;
108+
109+
beforeEach(function () {
110+
trivialFixture = document.getElementById('TrivialFixture');
111+
complexDomFixture = document.getElementById('ComplexDomFixture');
112+
multiTemplateFixture = document.getElementById('MultiTemplateFixture');
113+
commentedSingleChildFixture = document.getElementById('CommentedSingleChildFixture');
114+
commentedMultiChildFixture = document.getElementById('CommentedMultiChildFixture');
115+
});
116+
117+
afterEach(function () {
118+
trivialFixture.restore();
119+
complexDomFixture.restore();
120+
multiTemplateFixture.restore();
121+
commentedSingleChildFixture.restore();
122+
commentedMultiChildFixture.restore();
123+
});
124+
125+
describe('an stamped-out fixture', function () {
126+
var attachedFixture;
127+
var element;
128+
129+
beforeEach(function () {
130+
attachedFixture = document.getElementById('AttachedFixture');
131+
element = attachedFixture.create();
132+
});
133+
134+
afterEach(function () {
135+
attachedFixture.restore();
136+
});
137+
138+
it('detaches the fixtured DOM when it is restored', function () {
139+
var detached = false;
140+
141+
element.onDetached = function () {
142+
detached = true;
143+
};
144+
145+
attachedFixture.restore();
146+
expect(detached).to.be.eql(true);
147+
});
148+
});
149+
150+
describe('when create is called', function () {
151+
var el;
152+
153+
beforeEach(function () {
154+
el = trivialFixture.create();
155+
});
156+
157+
it('clones all template fragments within itself', function () {
158+
expect(el).to.be.ok;
159+
expect(document.getElementById('Foo')).to.be.ok;
160+
});
161+
162+
it('detaches all fixture templates from itself', function () {
163+
expect(trivialFixture.querySelectorAll('template').length).to.be.equal(0);
164+
});
165+
166+
describe('and then restore is called', function () {
167+
beforeEach(function () {
168+
trivialFixture.restore();
169+
});
170+
171+
it('re-attaches all fixture templates', function () {
172+
expect(trivialFixture.querySelectorAll('template').length).to.be.equal(1);
173+
});
174+
175+
it('removes all cloned elements from itself', function () {
176+
expect(document.getElementById('Foo')).to.not.be.ok;
177+
});
178+
});
179+
180+
describe('for a dom with a single root element', function () {
181+
it('returns a reference to the root element', function () {
182+
expect(el).to.be.instanceOf(_HTMLElement);
183+
});
184+
});
185+
186+
describe('for a complex dom', function () {
187+
var els;
188+
189+
beforeEach(function () {
190+
els = complexDomFixture.create();
191+
});
192+
193+
it('fixtures all the dom elements in the template', function () {
194+
expect(document.getElementById('Bar')).to.be.ok;
195+
expect(document.getElementById('BarSibling')).to.be.ok;
196+
expect(document.getElementById('BarChild')).to.be.ok;
197+
});
198+
199+
it('returns an array of root elements', function () {
200+
expect(els).to.be.instanceOf(Array);
201+
expect(els[0]).to.be.instanceOf(_HTMLElement);
202+
expect(els[1]).to.be.instanceOf(_HTMLElement);
203+
});
204+
});
205+
206+
describe('when there are multiple templates', function () {
207+
var groups;
208+
209+
beforeEach(function () {
210+
groups = multiTemplateFixture.create();
211+
});
212+
213+
it('fixtures elements from all of the templates', function () {
214+
expect(document.getElementById('Baz')).to.be.ok;
215+
expect(document.getElementById('Qux')).to.be.ok;
216+
});
217+
218+
it('returns an array with elements grouped by template', function () {
219+
expect(groups).to.be.instanceOf(Array);
220+
expect(groups[0]).to.be.instanceOf(_HTMLElement);
221+
expect(groups[1]).to.be.instanceOf(Array);
222+
expect(groups[1][0]).to.be.instanceOf(_HTMLElement);
223+
expect(groups[1][1]).to.be.instanceOf(_HTMLElement);
224+
});
225+
});
226+
227+
describe('when there are comments in the template', function() {
228+
var el;
229+
var els;
230+
231+
beforeEach(function () {
232+
el = commentedSingleChildFixture.create();
233+
els = commentedMultiChildFixture.create();
234+
});
235+
236+
it('returns a single element if the template has a single child', function() {
237+
expect(el).to.be.instanceOf(_HTMLElement);
238+
});
239+
240+
it('returns multiple elements if the template has multiple children', function() {
241+
expect(els).to.be.instanceOf(Array);
242+
expect(els.length).to.equal(3);
243+
});
244+
});
245+
});
246+
247+
describe('when the fixture global is called', function () {
248+
var el;
249+
250+
beforeEach(function () {
251+
el = fixture('TrivialFixture');
252+
});
253+
254+
it('generates a DOM fragment from the associated fixture', function () {
255+
expect(el).to.be.equal(document.getElementById('Foo'));
256+
});
257+
});
258+
});
259+
</script>
260+
261+
</body>
262+
</html>

‎test/test-fixture.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414

1515
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
1616
<script src="../../web-component-tester/browser.js"></script>
17-
<script src="../test-fixture-mocha.js"></script>
1817

1918
<link rel="import" id="test-fixture-import" href="../test-fixture.html">
19+
<script src="../test-fixture-mocha.js"></script>
2020
</head>
2121
<body>
2222
<script>

0 commit comments

Comments
 (0)