Skip to content

Commit d6aade7

Browse files
kylebuch8mwcz
kylebuch8
authored and
mwcz
committed
adding render function and tests (#118)
* adding render function and tests Added the ability to delay the render of the template until the render() method is explicitly called by the component. Fixes #103 * use references in place of string literal and queryselectors
1 parent 321c9a8 commit d6aade7

File tree

5 files changed

+308
-258
lines changed

5 files changed

+308
-258
lines changed

‎elements/rhelement/rhelement.js‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,25 +43,15 @@ class RHElement extends HTMLElement {
4343
this.setAttribute("rh-type", value);
4444
}
4545

46-
constructor(tag, type) {
46+
constructor(tag, type, delayRender = false) {
4747
super();
4848

4949
this.tag = tag;
5050
this._queue = [];
51-
5251
this.template = document.createElement("template");
53-
this.template.innerHTML = this.html;
54-
55-
if (window.ShadyCSS && this.html) {
56-
ShadyCSS.prepareTemplate(this.template, this.tag);
57-
}
5852

5953
this.attachShadow({ mode: "open" });
6054

61-
if (this.html) {
62-
this.shadowRoot.appendChild(this.template.content.cloneNode(true));
63-
}
64-
6555
if (type) {
6656
this._queueAction({
6757
type: "setProperty",
@@ -71,6 +61,10 @@ class RHElement extends HTMLElement {
7161
}
7262
});
7363
}
64+
65+
if (!delayRender) {
66+
this.render();
67+
}
7468
}
7569

7670
connectedCallback() {
@@ -98,6 +92,17 @@ class RHElement extends HTMLElement {
9892
_setProperty({ name, value }) {
9993
this[name] = value;
10094
}
95+
96+
render() {
97+
this.shadowRoot.innerHTML = null;
98+
this.template.innerHTML = this.html;
99+
100+
if (window.ShadyCSS) {
101+
ShadyCSS.prepareTemplate(this.template, this.tag);
102+
}
103+
104+
this.shadowRoot.appendChild(this.template.content.cloneNode(true));
105+
}
101106
}
102107

103108
// reveal.startTimer();

‎elements/rhelement/rhelement.umd.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎elements/rhelement/test/rhelement_test.html‎

Lines changed: 106 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,120 @@
55
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
66
<script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
77
<script src="/components/web-component-tester/browser.js"></script>
8-
<script type="module" src="../rhelement.js"></script>
98
</head>
109
<body>
1110

1211
<rhelement>
1312
This is the element content.
1413
</rhelement>
1514

16-
<script>
15+
<script type="module">
16+
import RHElement from "../rhelement.js";
17+
18+
const colors = ["red", "yellow", "blue"];
19+
20+
class TestElement extends RHElement {
21+
static get tag() {
22+
return "test-element"
23+
}
24+
25+
get html() {
26+
return `
27+
<div>Test Element</div>
28+
`;
29+
}
30+
31+
constructor() {
32+
super(TestElement.tag, RHElement.RhTypes.Content);
33+
}
34+
}
35+
36+
RHElement.create(TestElement);
37+
38+
class TestElementDelayRender extends RHElement {
39+
static get tag() {
40+
return "test-element-delay-render";
41+
}
42+
43+
get html() {
44+
return `
45+
${this.colors.map(color => `
46+
<div>${color}</div>
47+
`).join("")}
48+
`;
49+
}
50+
51+
constructor() {
52+
super(TestElementDelayRender.tag, null, true);
53+
}
54+
55+
connectedCallback() {
56+
super.connectedCallback();
57+
58+
setTimeout(() => {
59+
this.colors = colors;
60+
this.render();
61+
}, 0);
62+
}
63+
}
64+
65+
RHElement.create(TestElementDelayRender);
66+
1767
suite('<rhelement>', () => {
18-
test('it should do something RHElementy', () => {
19-
// you need to write tests!!!
20-
const rhelement = document.querySelector('rhelement');
21-
const textContent = rhelement.innerText;
22-
assert.equal(textContent, 'This is the element content.', 'rhelement should do something');
68+
test("it should set the rh-type attribute if passed a type in the constructor", () => {
69+
const testElementEl = document.createElement("test-element");
70+
testElementEl.id = "test-element";
71+
document.body.appendChild(testElementEl);
72+
73+
const testElement = document.querySelector("test-element");
74+
assert.isTrue(testElement.hasAttribute("rh-type"));
75+
assert.equal(testElement.getAttribute("rh-type"), RHElement.RhTypes.Content);
76+
77+
document.body.removeChild(testElementEl);
78+
});
79+
80+
test("it should append the template to the shadow root in the constructor", () => {
81+
const testElementEl = document.createElement("test-element");
82+
testElementEl.id = "test-element";
83+
document.body.appendChild(testElementEl);
84+
85+
const testElementDelayRenderEl = document.createElement("test-element-delay-render");
86+
testElementDelayRenderEl.id = "test-element-delay-render";
87+
document.body.appendChild(testElementDelayRenderEl);
88+
89+
const testElement = document.querySelector("test-element");
90+
const testElementContent = testElement.shadowRoot.querySelector("div");
91+
92+
assert.equal(testElementContent.textContent, "Test Element");
93+
94+
const testElementDelayRender = document.querySelector("test-element-delay-render");
95+
const testElementDelayRenderShadowRoot = testElementDelayRender.shadowRoot;
96+
97+
assert.isNull(testElementDelayRenderShadowRoot.querySelector("div"));
98+
99+
document.body.removeChild(testElementEl);
100+
document.body.removeChild(testElementDelayRenderEl);
101+
});
102+
103+
test("it should append the template to the shadow root when the render method is called", done => {
104+
const testElementDelayRenderEl = document.createElement("test-element-delay-render");
105+
testElementDelayRenderEl.id = "test-element-delay-render";
106+
document.body.appendChild(testElementDelayRenderEl);
107+
108+
flush(() => {
109+
const testElementDelayRender = document.querySelector("test-element-delay-render");
110+
const testElementDelayRenderShadowRoot = testElementDelayRender.shadowRoot;
111+
const divs = testElementDelayRenderShadowRoot.querySelectorAll("div");
112+
113+
assert.lengthOf(divs, 3);
114+
115+
[...divs].forEach((div, index) => {
116+
assert.equal(div.textContent, colors[index]);
117+
});
118+
119+
document.body.removeChild(testElementDelayRenderEl);
120+
done();
121+
});
23122
});
24123
});
25124
</script>

0 commit comments

Comments
 (0)