`.tagName, 'DIV');
15 | });
16 |
17 | // two
18 | test("Throws exceptions on invalid definition", function (t) {
19 | t.plan(6);
20 | t.throws(function () {
21 | p();
22 | }, "no arguments");
23 | t.throws(function () {
24 | p({});
25 | }, "no render property");
26 | t.throws(function () {
27 | p({render: 'invalid'});
28 | }, "render property not a function");
29 | t.throws(function () {
30 | p({render() {return 'invalid';}});
31 | }, "render function doesn't return a node");
32 | t.throws(function () {
33 | p({render() {return h`
`;}});
34 | }, "root element tagName must contain a dash");
35 | t.doesNotThrow(() => {
36 | p({render() {return h``;}});
37 | }, "acceptable definition doesn't throw an error");
38 | });
39 |
40 | // three
41 | test("Replaces a Custom Element's DOM with a VDOM", function (t) {
42 | t.plan(3);
43 | t.equal($('id-three-old').tagName, 'DIV');
44 | p({
45 | render() {
46 | return h``;
47 | }
48 | });
49 | t.equal($('id-three-old'), null);
50 | t.equal($('id-three-new').tagName, 'DIV');
51 | });
52 |
53 | // four
54 | test("Attached callback is executed", function (t) {
55 | t.plan(1);
56 | p({
57 | render() {
58 | return h``;
59 | },
60 | attached() {
61 | t.pass("callback called");
62 | }
63 | });
64 | t.timeoutAfter(1000);
65 | });
66 |
67 | // five
68 | test("Render function can use attributes of element to render", function (t) {
69 | t.plan(1);
70 | p({
71 | render() {
72 | let textFive = this.attributes['att-five'] ? this.attributes['att-five'].value: 'val-null';
73 | return h`${textFive}
`;
74 | }
75 | });
76 | t.equal($('id-five').innerText, 'val-five');
77 | });
78 |
79 | // six
80 | test("Mutations of the element's attributes will trigger a render", function (t) {
81 | t.plan(1);
82 | p({
83 | render() {
84 | let textSix = this.attributes['att-six'] ? this.attributes['att-six'].value : 'val-null';
85 | return h`${textSix}`;
86 | }
87 | });
88 | $('id-six').setAttribute('att-six', 'val-six-new');
89 | // todo: if dom update takes too long this timeout interval might not work
90 | setTimeout(function () {
91 | t.equal($('id-six').innerText, 'val-six-new');
92 | }, 1000);
93 | });
--------------------------------------------------------------------------------