Skip to content

Commit ce2bb8f

Browse files
mrginglymusmrginglymus
committed
+dio
1 parent d969796 commit ce2bb8f

File tree

4 files changed

+66
-207
lines changed

4 files changed

+66
-207
lines changed

‎libraries/dio/karma.conf.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ module.exports = function(config) {
6161
resolve: {
6262
modules: [
6363
path.resolve(__dirname, '../__shared__/webcomponents/src'),
64+
path.resolve(__dirname, '../__shared__/tests/src'),
6465
path.resolve(__dirname, './node_modules')
6566
]
6667
},

‎libraries/dio/src/advanced-tests.js

Lines changed: 22 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,10 @@
1515
* limitations under the License.
1616
*/
1717

18-
import { h, render } from "dio.js";
19-
import { expect } from "chai";
20-
import {
21-
ComponentWithoutChildren,
22-
ComponentWithChildren,
23-
ComponentWithChildrenRerender,
24-
ComponentWithDifferentViews,
25-
ComponentWithProperties,
26-
ComponentWithUnregistered,
27-
ComponentWithImperativeEvent,
28-
ComponentWithDeclarativeEvent
29-
} from "./components";
18+
import {h, render} from "dio.js";
19+
import {ComponentWithDeclarativeEvent, ComponentWithProperties} from "./components";
20+
21+
import tests from 'advanced-tests';
3022

3123
// Setup the test harness. This will get cleaned out with every test.
3224
let app = document.createElement("div");
@@ -45,96 +37,23 @@ afterEach(function() {
4537
scratch = null;
4638
});
4739

48-
describe("advanced support", function() {
49-
50-
describe("attributes and properties", function() {
51-
it("will pass array data as a property", function() {
52-
this.weight = 2;
53-
render(<ComponentWithProperties />, scratch);
54-
let wc = scratch.querySelector("#wc");
55-
let data = wc.arr;
56-
expect(data).to.eql(["D", "I", "O"]);
57-
});
58-
59-
it("will pass object data as a property", function() {
60-
this.weight = 2;
61-
render(<ComponentWithProperties />, scratch);
62-
let wc = scratch.querySelector("#wc");
63-
let data = wc.obj;
64-
expect(data).to.eql({ org: "thysultan", repo: "dio.js" });
65-
});
66-
67-
it("will pass object data to a camelCase-named property", function() {
68-
this.weight = 2;
69-
render(<ComponentWithProperties />, scratch);
70-
let wc = scratch.querySelector("#wc");
71-
let data = wc.camelCaseObj;
72-
expect(data).to.eql({ label: "passed" });
73-
});
74-
75-
});
76-
77-
describe("events", function() {
78-
it("can declaratively listen to a lowercase DOM event dispatched by a Custom Element", function() {
79-
this.weight = 2;
80-
let component;
81-
render(<ComponentWithDeclarativeEvent ref={(instance) => {component = instance}} />, scratch);
82-
let wc = scratch.querySelector("#wc");
83-
expect(wc).to.exist;
84-
let handled = scratch.querySelector("#lowercase");
85-
expect(handled.textContent).to.eql("false");
86-
wc.click();
87-
component.forceUpdate();
88-
expect(handled.textContent).to.eql("true");
89-
});
90-
91-
it("can declaratively listen to a kebab-case DOM event dispatched by a Custom Element", function() {
92-
this.weight = 1;
93-
let component;
94-
render(<ComponentWithDeclarativeEvent ref={(instance) => {component = instance}} />, scratch);
95-
let wc = scratch.querySelector("#wc");
96-
let handled = scratch.querySelector("#kebab");
97-
expect(handled.textContent).to.eql("false");
98-
wc.click();
99-
component.forceUpdate();
100-
expect(handled.textContent).to.eql("true");
101-
});
102-
103-
it("can declaratively listen to a camelCase DOM event dispatched by a Custom Element", function() {
104-
this.weight = 1;
105-
let component;
106-
render(<ComponentWithDeclarativeEvent ref={(instance) => {component = instance}} />, scratch);
107-
let wc = scratch.querySelector("#wc");
108-
let handled = scratch.querySelector("#camel");
109-
expect(handled.textContent).to.eql("false");
110-
wc.click();
111-
component.forceUpdate();
112-
expect(handled.textContent).to.eql("true");
113-
});
114-
115-
it("can declaratively listen to a CAPScase DOM event dispatched by a Custom Element", function() {
116-
this.weight = 1;
117-
let component;
118-
render(<ComponentWithDeclarativeEvent ref={(instance) => {component = instance}} />, scratch);
119-
let wc = scratch.querySelector("#wc");
120-
let handled = scratch.querySelector("#caps");
121-
expect(handled.textContent).to.eql("false");
40+
function _render(Component) {
41+
let component
42+
render(<Component ref={(instance) => component = instance} />, scratch), scratch;
43+
const wc = scratch.querySelector("#wc");
44+
return { wc, component }
45+
}
46+
47+
tests({
48+
renderComponentWithProperties() {
49+
return _render(ComponentWithProperties);
50+
},
51+
renderComponentWithDeclarativeEvent() {
52+
const { wc, component } = _render(ComponentWithDeclarativeEvent);
53+
function click() {
12254
wc.click();
12355
component.forceUpdate();
124-
expect(handled.textContent).to.eql("true");
125-
});
126-
127-
it("can declaratively listen to a PascalCase DOM event dispatched by a Custom Element", function() {
128-
this.weight = 1;
129-
let component;
130-
render(<ComponentWithDeclarativeEvent ref={(instance) => {component = instance}} />, scratch);
131-
let wc = scratch.querySelector("#wc");
132-
let handled = scratch.querySelector("#pascal");
133-
expect(handled.textContent).to.eql("false");
134-
wc.click();
135-
component.forceUpdate();
136-
expect(handled.textContent).to.eql("true");
137-
});
138-
});
139-
140-
});
56+
}
57+
return { wc, click };
58+
}
59+
})

‎libraries/dio/src/basic-tests.js

Lines changed: 40 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -15,134 +15,73 @@
1515
* limitations under the License.
1616
*/
1717

18-
import { h, render } from "dio.js";
19-
import { expect } from "chai";
18+
import {h, render} from "dio.js";
19+
import {expect} from "chai";
2020
import {
2121
ComponentWithoutChildren,
2222
ComponentWithChildren,
2323
ComponentWithChildrenRerender,
2424
ComponentWithDifferentViews,
2525
ComponentWithProperties,
26-
ComponentWithUnregistered,
2726
ComponentWithImperativeEvent,
28-
ComponentWithDeclarativeEvent
2927
} from "./components";
3028

29+
import tests from 'basic-tests';
30+
3131
// Setup the test harness. This will get cleaned out with every test.
3232
let app = document.createElement("div");
3333
app.id = "app";
3434
document.body.appendChild(app);
3535
let scratch; // This will hold the actual element under test.
3636

37-
beforeEach(function() {
37+
beforeEach(function () {
3838
scratch = document.createElement("div");
3939
scratch.id = "scratch";
4040
app.appendChild(scratch);
4141
});
4242

43-
afterEach(function() {
43+
afterEach(function () {
4444
app.innerHTML = "";
4545
scratch = null;
4646
});
4747

48-
describe("basic support", function() {
49-
50-
describe("no children", function() {
51-
it("can display a Custom Element with no children", function() {
52-
this.weight = 3;
53-
render(<ComponentWithoutChildren />, scratch), scratch;
54-
let wc = scratch.querySelector("#wc");
55-
expect(wc).to.exist;
56-
});
57-
});
58-
59-
describe("with children", function() {
60-
function expectHasChildren(wc) {
61-
expect(wc).to.exist;
62-
let shadowRoot = wc.shadowRoot;
63-
let heading = shadowRoot.querySelector("h1");
64-
expect(heading).to.exist;
65-
expect(heading.textContent).to.eql("Test h1");
66-
let paragraph = shadowRoot.querySelector("p");
67-
expect(paragraph).to.exist;
68-
expect(paragraph.textContent).to.eql("Test p");
69-
}
70-
71-
it("can display a Custom Element with children in a Shadow Root", function() {
72-
this.weight = 3;
73-
render(<ComponentWithChildren />, scratch)
74-
let wc = scratch.querySelector("#wc");
75-
expectHasChildren(wc);
76-
});
77-
78-
it("can display a Custom Element with children in a Shadow Root and pass in Light DOM children", async function() {
79-
this.weight = 3;
80-
let component;
81-
render(<ComponentWithChildrenRerender ref={(instance) => {component = instance}} />, scratch)
82-
let wc = scratch.querySelector("#wc");
83-
await Promise.resolve();
84-
component.forceUpdate();
85-
expectHasChildren(wc);
86-
expect(wc.textContent.includes("2")).to.be.true;
87-
});
48+
function _render(Component) {
49+
let component
50+
render(<Component ref={(instance) => component = instance} />, scratch), scratch;
51+
const wc = scratch.querySelector("#wc");
52+
return { wc, component }
53+
}
8854

89-
it("can display a Custom Element with children in the Shadow DOM and handle hiding and showing the element", function() {
90-
this.weight = 3;
91-
let component;
92-
render(<ComponentWithDifferentViews ref={(instance) => {component = instance}} />, scratch);
93-
let wc = scratch.querySelector("#wc");
94-
expectHasChildren(wc);
95-
component.toggle();
96-
component.forceUpdate();
97-
let dummy = scratch.querySelector("#dummy");
98-
expect(dummy).to.exist;
99-
expect(dummy.textContent).to.eql("Dummy view");
55+
tests({
56+
renderComponentWithoutChildren() {
57+
return _render(ComponentWithChildren);
58+
},
59+
renderComponentWithChildren() {
60+
return _render(ComponentWithChildren);
61+
},
62+
async renderComponentWithChildrenRerender() {
63+
const { wc, component } = _render(ComponentWithChildrenRerender);
64+
await Promise.resolve();
65+
component.forceUpdate();
66+
return { wc }
67+
},
68+
renderComponentWithDifferentViews() {
69+
const { wc, component } = _render(ComponentWithDifferentViews);
70+
function toggle() {
10071
component.toggle();
10172
component.forceUpdate();
102-
wc = scratch.querySelector("#wc");
103-
expectHasChildren(wc);
104-
});
105-
});
106-
107-
describe("attributes and properties", function() {
108-
it("will pass boolean data as either an attribute or a property", function() {
109-
this.weight = 3;
110-
render(<ComponentWithProperties />, scratch);
111-
let wc = scratch.querySelector("#wc");
112-
let data = wc.bool || wc.hasAttribute("bool");
113-
expect(data).to.be.true;
114-
});
115-
116-
it("will pass numeric data as either an attribute or a property", function() {
117-
this.weight = 3;
118-
render(<ComponentWithProperties />, scratch);
119-
let wc = scratch.querySelector("#wc");
120-
let data = wc.num || wc.getAttribute("num");
121-
expect(parseInt(data, 10)).to.eql(42);
122-
});
123-
124-
it("will pass string data as either an attribute or a property", function() {
125-
this.weight = 3;
126-
render(<ComponentWithProperties />, scratch);
127-
let wc = scratch.querySelector("#wc");
128-
let data = wc.str || wc.getAttribute("str");
129-
expect(data).to.eql("DIO");
130-
});
131-
});
132-
133-
describe("events", function() {
134-
it("can imperatively listen to a DOM event dispatched by a Custom Element", function() {
135-
this.weight = 3;
136-
let component
137-
render(<ComponentWithImperativeEvent ref={(instance) => {component = instance}} />, scratch);
138-
let wc = scratch.querySelector("#wc");
139-
expect(wc).to.exist;
140-
let handled = scratch.querySelector("#handled");
141-
expect(handled.textContent).to.eql("false");
73+
}
74+
return { wc, toggle }
75+
},
76+
renderComponentWithProperties() {
77+
return _render(ComponentWithProperties);
78+
},
79+
renderComponentWithImperativeEvent() {
80+
const { wc, component } = _render(ComponentWithImperativeEvent);
81+
function click() {
14282
wc.click();
14383
component.forceUpdate();
144-
expect(handled.textContent).to.eql("true");
145-
});
146-
});
147-
84+
}
85+
return { wc, click };
86+
}
14887
});

‎libraries/dio/src/components.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,9 @@ export class ComponentWithProperties extends Component {
8989
const data = {
9090
bool: true,
9191
num: 42,
92-
str: 'DIO',
93-
arr: ['D', 'I', 'O'],
94-
obj: { org: 'thysultan', repo: 'dio.js' },
92+
str: 'custom',
93+
arr: ['c', 'u', 's', 't', 'o', 'm'],
94+
obj: { org: 'webcomponents', repo: 'custom-elements-everywhere' },
9595
camelCaseObj: { label: "passed" }
9696
};
9797
return (

0 commit comments

Comments
 (0)