Skip to content

Commit 1b04f61

Browse files
mrginglymusmrginglymus
committed
+angular
1 parent c9c9947 commit 1b04f61

File tree

6 files changed

+68
-224
lines changed

6 files changed

+68
-224
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default function (
5959
describe('events', function () {
6060
it('can declaratively listen to a lowercase DOM event dispatched by a Custom Element', async function () {
6161
this.weight = 2
62-
const { wc, click = wc.click } = await renderComponentWithDeclarativeEvent.call(this)
62+
const { wc, click = wc.click.bind(wc) } = await renderComponentWithDeclarativeEvent.call(this)
6363
expect(wc).to.exist
6464
let handled = document.querySelector('#lowercase')
6565
expect(handled.textContent).to.eql('false')
@@ -69,7 +69,7 @@ export default function (
6969

7070
it('can declaratively listen to a kebab-case DOM event dispatched by a Custom Element', async function () {
7171
this.weight = 1
72-
const { wc, click = wc.click } = await renderComponentWithDeclarativeEvent.call(this)
72+
const { wc, click = wc.click.bind(wc) } = await renderComponentWithDeclarativeEvent.call(this)
7373
let handled = document.querySelector('#kebab')
7474
expect(handled.textContent).to.eql('false')
7575
click()
@@ -78,7 +78,7 @@ export default function (
7878

7979
it('can declaratively listen to a camelCase DOM event dispatched by a Custom Element', async function () {
8080
this.weight = 1
81-
const { wc, click = wc.click } = await renderComponentWithDeclarativeEvent.call(this)
81+
const { wc, click = wc.click.bind(wc) } = await renderComponentWithDeclarativeEvent.call(this)
8282
let handled = document.querySelector('#camel')
8383
expect(handled.textContent).to.eql('false')
8484
click()
@@ -87,7 +87,7 @@ export default function (
8787

8888
it('can declaratively listen to a CAPScase DOM event dispatched by a Custom Element', async function () {
8989
this.weight = 1
90-
const { wc, click = wc.click } = await renderComponentWithDeclarativeEvent.call(this)
90+
const { wc, click = wc.click.bind(wc) } = await renderComponentWithDeclarativeEvent.call(this)
9191
let handled = document.querySelector('#caps')
9292
expect(handled.textContent).to.eql('false')
9393
click()
@@ -96,7 +96,7 @@ export default function (
9696

9797
it('can declaratively listen to a PascalCase DOM event dispatched by a Custom Element', async function () {
9898
this.weight = 1
99-
const { wc, click = wc.click } = await renderComponentWithDeclarativeEvent.call(this)
99+
const { wc, click = wc.click.bind(wc) } = await renderComponentWithDeclarativeEvent.call(this)
100100
let handled = document.querySelector('#pascal')
101101
expect(handled.textContent).to.eql('false')
102102
click()

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export default function (
106106
describe('events', async function () {
107107
it('can imperatively listen to a DOM event dispatched by a Custom Element', async function () {
108108
this.weight = 3
109-
const { wc, click = wc.click } = await renderComponentWithImperativeEvent.call(this)
109+
const { wc, click = wc.click.bind(wc) } = await renderComponentWithImperativeEvent.call(this)
110110
expect(wc).to.exist
111111
let handled = document.querySelector('#handled')
112112
expect(handled.textContent).to.eql('false')

‎libraries/angular/karma.conf.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ module.exports = function (config) {
6868
extensions: ['.js', '.ts'],
6969
modules: [
7070
path.resolve(__dirname, '../__shared__/webcomponents/src'),
71+
path.resolve(__dirname, '../__shared__/tests/src'),
7172
path.resolve(__dirname, './node_modules')
7273
]
7374
},

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

Lines changed: 20 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@
1717

1818
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
1919
import { TestBed } from "@angular/core/testing";
20-
import { By } from "@angular/platform-browser";
21-
import { expect } from "chai";
2220
import {
2321
ComponentWithoutChildren,
2422
ComponentWithChildren,
@@ -30,6 +28,16 @@ import {
3028
ComponentWithDeclarativeEvent
3129
} from "./components";
3230

31+
import tests from 'advanced-tests';
32+
33+
function render(Component) {
34+
const fixture = TestBed.createComponent(Component);
35+
fixture.detectChanges();
36+
const el = fixture.debugElement.nativeElement;
37+
const wc = el.querySelector('#wc');
38+
return { wc, fixture }
39+
}
40+
3341
beforeEach(function() {
3442
TestBed.configureTestingModule({
3543
declarations: [
@@ -46,105 +54,16 @@ beforeEach(function() {
4654
});
4755
});
4856

49-
describe("advanced support", function() {
50-
51-
describe("attributes and properties", function() {
52-
it("will pass array data as a property", function() {
53-
this.weight = 2;
54-
let fixture = TestBed.createComponent(ComponentWithProperties);
55-
fixture.detectChanges();
56-
let root = fixture.debugElement.nativeElement;
57-
let wc = root.querySelector("#wc");
58-
let data = wc.arr;
59-
expect(data).to.eql(["A", "n", "g", "u", "l", "a", "r"]);
60-
});
61-
62-
it("will pass object data as a property", function() {
63-
this.weight = 2;
64-
let fixture = TestBed.createComponent(ComponentWithProperties);
65-
fixture.detectChanges();
66-
let root = fixture.debugElement.nativeElement;
67-
let wc = root.querySelector("#wc");
68-
let data = wc.obj;
69-
expect(data).to.eql({ org: "angular", repo: "angular" });
70-
});
71-
72-
it("will pass object data to a camelCase-named property", function() {
73-
this.weight = 2;
74-
let fixture = TestBed.createComponent(ComponentWithProperties);
75-
fixture.detectChanges();
76-
let root = fixture.debugElement.nativeElement;
77-
let wc = root.querySelector("#wc");
78-
let data = wc.camelCaseObj;
79-
expect(data).to.eql({ label: "passed" });
80-
});
81-
});
82-
83-
describe("events", function() {
84-
it("can declaratively listen to a lowercase DOM event dispatched by a Custom Element", function() {
85-
this.weight = 2;
86-
let fixture = TestBed.createComponent(ComponentWithDeclarativeEvent);
87-
fixture.detectChanges();
88-
let root = fixture.debugElement.nativeElement;
89-
let wc = root.querySelector("#wc");
90-
let handled = root.querySelector("#lowercase");
91-
expect(handled.textContent).to.eql("false");
92-
wc.click();
93-
fixture.detectChanges();
94-
expect(handled.textContent).to.eql("true");
95-
});
96-
97-
it("can declaratively listen to a kebab-case DOM event dispatched by a Custom Element", function() {
98-
this.weight = 1;
99-
let fixture = TestBed.createComponent(ComponentWithDeclarativeEvent);
100-
fixture.detectChanges();
101-
let root = fixture.debugElement.nativeElement;
102-
let wc = root.querySelector("#wc");
103-
let handled = root.querySelector("#kebab");
104-
expect(handled.textContent).to.eql("false");
57+
tests({
58+
renderComponentWithProperties() {
59+
return render(ComponentWithProperties);
60+
},
61+
renderComponentWithDeclarativeEvent() {
62+
const { wc, fixture } = render(ComponentWithDeclarativeEvent);
63+
function click() {
10564
wc.click();
10665
fixture.detectChanges();
107-
expect(handled.textContent).to.eql("true");
108-
});
109-
110-
it("can declaratively listen to a camelCase DOM event dispatched by a Custom Element", function() {
111-
this.weight = 1;
112-
let fixture = TestBed.createComponent(ComponentWithDeclarativeEvent);
113-
fixture.detectChanges();
114-
let root = fixture.debugElement.nativeElement;
115-
let wc = root.querySelector("#wc");
116-
let handled = root.querySelector("#camel");
117-
expect(handled.textContent).to.eql("false");
118-
wc.click();
119-
fixture.detectChanges();
120-
expect(handled.textContent).to.eql("true");
121-
});
122-
123-
it("can declaratively listen to a CAPScase DOM event dispatched by a Custom Element", function() {
124-
this.weight = 1;
125-
let fixture = TestBed.createComponent(ComponentWithDeclarativeEvent);
126-
fixture.detectChanges();
127-
let root = fixture.debugElement.nativeElement;
128-
let wc = root.querySelector("#wc");
129-
let handled = root.querySelector("#caps");
130-
expect(handled.textContent).to.eql("false");
131-
wc.click();
132-
fixture.detectChanges();
133-
expect(handled.textContent).to.eql("true");
134-
});
135-
136-
it("can declaratively listen to a PascalCase DOM event dispatched by a Custom Element", function() {
137-
this.weight = 1;
138-
let fixture = TestBed.createComponent(ComponentWithDeclarativeEvent);
139-
fixture.detectChanges();
140-
let root = fixture.debugElement.nativeElement;
141-
let wc = root.querySelector("#wc");
142-
let handled = root.querySelector("#pascal");
143-
expect(handled.textContent).to.eql("false");
144-
wc.click();
145-
fixture.detectChanges();
146-
expect(handled.textContent).to.eql("true");
147-
});
148-
});
149-
66+
}
67+
return { wc, fixture, click };
68+
}
15069
});

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

Lines changed: 38 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@
1717

1818
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
1919
import { TestBed } from "@angular/core/testing";
20-
import { By } from "@angular/platform-browser";
21-
import { expect } from "chai";
20+
2221
import {
2322
ComponentWithoutChildren,
2423
ComponentWithChildren,
@@ -30,6 +29,8 @@ import {
3029
ComponentWithDeclarativeEvent
3130
} from "./components";
3231

32+
import tests from 'basic-tests';
33+
3334
beforeEach(function() {
3435
TestBed.configureTestingModule({
3536
declarations: [
@@ -46,121 +47,44 @@ beforeEach(function() {
4647
});
4748
});
4849

49-
describe("basic support", function() {
50+
function render(Component) {
51+
const fixture = TestBed.createComponent(Component);
52+
fixture.detectChanges();
53+
const el = fixture.debugElement.nativeElement;
54+
const wc = el.querySelector('#wc');
55+
return { wc, fixture }
56+
}
5057

51-
describe("no children", function() {
52-
it("can display a Custom Element with no children", function() {
53-
this.weight = 3;
54-
let fixture = TestBed.createComponent(ComponentWithoutChildren);
58+
tests({
59+
renderComponentWithoutChildren() {
60+
return render(ComponentWithoutChildren);
61+
},
62+
renderComponentWithChildren() {
63+
return render(ComponentWithChildren);
64+
},
65+
async renderComponentWithChildrenRerender() {
66+
const results = render(ComponentWithChildrenRerender);
67+
await new Promise((r) => setTimeout(r, 1000));
68+
results.fixture.detectChanges();
69+
return results;
70+
},
71+
renderComponentWithDifferentViews() {
72+
const { wc, fixture } = render(ComponentWithDifferentViews);
73+
function toggle() {
74+
fixture.componentInstance.toggle();
5575
fixture.detectChanges();
56-
let el = fixture.debugElement.nativeElement;
57-
let wc = el.querySelector("ce-without-children");
58-
expect(wc).to.exist;
59-
});
60-
});
61-
62-
describe("with children", function() {
63-
function expectHasChildren(wc) {
64-
expect(wc).to.exist;
65-
let shadowRoot = wc.shadowRoot;
66-
let heading = shadowRoot.querySelector("h1");
67-
expect(heading).to.exist;
68-
expect(heading.textContent).to.eql("Test h1");
69-
let paragraph = shadowRoot.querySelector("p");
70-
expect(paragraph).to.exist;
71-
expect(paragraph.textContent).to.eql("Test p");
7276
}
73-
74-
it("can display a Custom Element with children in a Shadow Root", function() {
75-
this.weight = 3;
76-
let fixture = TestBed.createComponent(ComponentWithChildren);
77-
fixture.detectChanges();
78-
let root = fixture.debugElement.nativeElement;
79-
let wc = root.querySelector("#wc");
80-
expectHasChildren(wc);
81-
});
82-
83-
it("can display a Custom Element with children in a Shadow Root and pass in Light DOM children", function(
84-
done
85-
) {
86-
this.weight = 3;
87-
let fixture = TestBed.createComponent(ComponentWithChildrenRerender);
88-
fixture.detectChanges();
89-
setTimeout(function() {
90-
fixture.detectChanges();
91-
let root = fixture.debugElement.nativeElement;
92-
let wc = root.querySelector("#wc");
93-
expectHasChildren(wc);
94-
expect(wc.textContent.includes("2")).to.be.true;
95-
done();
96-
}, 1000);
97-
});
98-
99-
it("can display a Custom Element with children in a Shadow Root and handle hiding and showing the element", function() {
100-
this.weight = 3;
101-
let fixture = TestBed.createComponent(ComponentWithDifferentViews);
102-
fixture.detectChanges();
103-
let component = fixture.componentInstance;
104-
let root = fixture.debugElement.nativeElement;
105-
let wc = root.querySelector("#wc");
106-
expectHasChildren(wc);
107-
component.toggle();
108-
fixture.detectChanges();
109-
let dummy = root.querySelector("#dummy");
110-
expect(dummy).to.exist;
111-
expect(dummy.textContent).to.eql("Dummy view");
112-
component.toggle();
113-
fixture.detectChanges();
114-
wc = root.querySelector("#wc");
115-
expectHasChildren(wc);
116-
});
117-
});
118-
119-
describe("attributes and properties", function() {
120-
it("will pass boolean data as either an attribute or a property", function() {
121-
this.weight = 3;
122-
let fixture = TestBed.createComponent(ComponentWithProperties);
123-
fixture.detectChanges();
124-
let root = fixture.debugElement.nativeElement;
125-
let wc = root.querySelector("#wc");
126-
let data = wc.bool || wc.hasAttribute("bool");
127-
expect(data).to.be.true;
128-
});
129-
130-
it("will pass numeric data as either an attribute or a property", function() {
131-
this.weight = 3;
132-
let fixture = TestBed.createComponent(ComponentWithProperties);
133-
fixture.detectChanges();
134-
let root = fixture.debugElement.nativeElement;
135-
let wc = root.querySelector("#wc");
136-
let data = wc.num || wc.getAttribute("num");
137-
expect(parseInt(data, 10)).to.eql(42);
138-
});
139-
140-
it("will pass string data as either an attribute or a property", function() {
141-
this.weight = 3;
142-
let fixture = TestBed.createComponent(ComponentWithProperties);
143-
fixture.detectChanges();
144-
let root = fixture.debugElement.nativeElement;
145-
let wc = root.querySelector("#wc");
146-
let data = wc.str || wc.getAttribute("str");
147-
expect(data).to.eql("Angular");
148-
});
149-
});
150-
151-
describe("events", function() {
152-
it("can imperatively listen to a DOM event dispatched by a Custom Element", function() {
153-
this.weight = 3;
154-
let fixture = TestBed.createComponent(ComponentWithImperativeEvent);
155-
fixture.detectChanges();
156-
let root = fixture.debugElement.nativeElement;
157-
let wc = root.querySelector("#wc");
158-
let handled = root.querySelector("#handled");
159-
expect(handled.textContent).to.eql("false");
77+
return { wc, fixture, toggle }
78+
},
79+
renderComponentWithProperties() {
80+
return render(ComponentWithProperties);
81+
},
82+
renderComponentWithImperativeEvent() {
83+
const { wc, fixture } = render(ComponentWithImperativeEvent);
84+
function click() {
16085
wc.click();
16186
fixture.detectChanges();
162-
expect(handled.textContent).to.eql("true");
163-
});
164-
});
165-
87+
}
88+
return { wc, fixture, click };
89+
}
16690
});

‎libraries/angular/src/components.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,9 @@ export class ComponentWithProperties {
9898
data = {
9999
bool: true,
100100
num: 42,
101-
str: 'Angular',
102-
arr: ['A', 'n', 'g', 'u', 'l', 'a', 'r'],
103-
obj: { org: 'angular', repo: 'angular' },
101+
str: 'custom',
102+
arr: ['c', 'u', 's', 't', 'o', 'm'],
103+
obj: { org: 'webcomponents', repo: 'custom-elements-everywhere' },
104104
camelCaseObj: { label: "passed" }
105105
}
106106
}

0 commit comments

Comments
 (0)