Skip to content

Commit

Permalink
+angularjs
Browse files Browse the repository at this point in the history
  • Loading branch information
mrginglymus committed Dec 30, 2024
1 parent 40904ad commit d969796
Show file tree
Hide file tree
Showing 8 changed files with 84 additions and 224 deletions.
20 changes: 10 additions & 10 deletions libraries/__shared__/tests/src/advanced-tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,45 +59,45 @@ export default function (
describe('events', function () {
it('can declaratively listen to a lowercase DOM event dispatched by a Custom Element', async function () {
this.weight = 2
const { wc, click = wc.click.bind(wc) } = await renderComponentWithDeclarativeEvent.call(this)
const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithDeclarativeEvent.call(this)
expect(wc).to.exist
let handled = document.querySelector('#lowercase')
let handled = root.querySelector('#lowercase')
expect(handled.textContent).to.eql('false')
await click()
expect(handled.textContent).to.eql('true')
})

it('can declaratively listen to a kebab-case DOM event dispatched by a Custom Element', async function () {
this.weight = 1
const { wc, click = wc.click.bind(wc) } = await renderComponentWithDeclarativeEvent.call(this)
let handled = document.querySelector('#kebab')
const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithDeclarativeEvent.call(this)
let handled = root.querySelector('#kebab')
expect(handled.textContent).to.eql('false')
await click()
expect(handled.textContent).to.eql('true')
})

it('can declaratively listen to a camelCase DOM event dispatched by a Custom Element', async function () {
this.weight = 1
const { wc, click = wc.click.bind(wc) } = await renderComponentWithDeclarativeEvent.call(this)
let handled = document.querySelector('#camel')
const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithDeclarativeEvent.call(this)
let handled = root.querySelector('#camel')
expect(handled.textContent).to.eql('false')
await click()
expect(handled.textContent).to.eql('true')
})

it('can declaratively listen to a CAPScase DOM event dispatched by a Custom Element', async function () {
this.weight = 1
const { wc, click = wc.click.bind(wc) } = await renderComponentWithDeclarativeEvent.call(this)
let handled = document.querySelector('#caps')
const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithDeclarativeEvent.call(this)
let handled = root.querySelector('#caps')
expect(handled.textContent).to.eql('false')
await click()
expect(handled.textContent).to.eql('true')
})

it('can declaratively listen to a PascalCase DOM event dispatched by a Custom Element', async function () {
this.weight = 1
const { wc, click = wc.click.bind(wc) } = await renderComponentWithDeclarativeEvent.call(this)
let handled = document.querySelector('#pascal')
const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithDeclarativeEvent.call(this)
let handled = root.querySelector('#pascal')
expect(handled.textContent).to.eql('false')
await click()
expect(handled.textContent).to.eql('true')
Expand Down
8 changes: 4 additions & 4 deletions libraries/__shared__/tests/src/basic-tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,10 @@ export default function (

it('can display a Custom Element with children in the Shadow DOM and handle hiding and showing the element', async function () {
this.weight = 3
const { wc, toggle } = await renderComponentWithDifferentViews.call(this);
const { wc, toggle, root = document } = await renderComponentWithDifferentViews.call(this);
expectHasChildren(wc)
await toggle()
const dummy = document.querySelector('#dummy')
const dummy = root.querySelector('#dummy')
expect(dummy).to.exist
expect(dummy.textContent).to.eql('Dummy view')
await toggle()
Expand Down Expand Up @@ -106,9 +106,9 @@ export default function (
describe('events', async function () {
it('can imperatively listen to a DOM event dispatched by a Custom Element', async function () {
this.weight = 3
const { wc, click = wc.click.bind(wc) } = await renderComponentWithImperativeEvent.call(this)
const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithImperativeEvent.call(this)
expect(wc).to.exist
let handled = document.querySelector('#handled')
let handled = root.querySelector('#handled')
expect(handled.textContent).to.eql('false')
await click()
expect(handled.textContent).to.eql('true')
Expand Down
1 change: 1 addition & 0 deletions libraries/angularjs/karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ module.exports = function (config) {
extensions: ['.js'],
modules: [
path.resolve(__dirname, '../__shared__/webcomponents/src'),
path.resolve(__dirname, '../__shared__/tests/src'),
path.resolve(__dirname, './node_modules')
]
},
Expand Down
118 changes: 22 additions & 96 deletions libraries/angularjs/src/advanced-tests.js
Original file line number Diff line number Diff line change
@@ -1,114 +1,40 @@
import { expect } from "chai";
import prodApp from "./app.module";

describe("advanced support", () => {
import tests from 'advanced-tests';

describe('', function () {
beforeEach(angular.mock.module(prodApp));

let compile;
let scope;
let interval;

beforeEach(
inject(($compile, $rootScope, $interval) => {
compile = $compile;
scope = $rootScope.$new();
scope = $rootScope;
interval = $interval;
})
);

describe("attributes and properties", () => {
const prep = el => {
return compile(el)(scope)[0];
function render(component) {
const root = compile(component)(scope)[0];
scope.$apply();
const wc = root.querySelector('#wc');
return { wc, root }
}

tests({
renderComponentWithProperties() {
return render('<comp-with-props>')
},
renderComponentWithDeclarativeEvent() {
const { wc, root } = render('<comp-with-declarative-event>');
function click() {
wc.click();
scope.$digest();
}
return { wc, click, root };
}

it("will pass array data as a property", function() {
this.weight = 2;
let root = prep("<comp-with-props>")
scope.$digest()
let wc = root.querySelector('#wc')
let data = wc.arr;
expect(data).to.eql(['A', 'n', 'g', 'u', 'l', 'a', 'r']);
});

it("will pass object data as a property", function() {
this.weight = 2;
let root = prep("<comp-with-props>")
scope.$digest()
let wc = root.querySelector('#wc')
let data = wc.obj;
expect(data).to.eql({ org: "angular", repo: "angular" });
});

it("will pass object data to a camelCase-named property", function() {
this.weight = 2;
let root = prep("<comp-with-props>")
scope.$digest()
let wc = root.querySelector('#wc')
let data = wc.camelCaseObj;
expect(data).to.eql({ label: "passed" });
});
});

describe("events", () => {
it("can declaratively listen to a lowercase DOM event dispatched by a Custom Element", function() {
this.weight = 2;
const root = compile("<comp-with-declarative-event>")(scope)[0];
scope.$digest();
let wc = root.querySelector("#wc");
let handled = root.querySelector("#lowercase");
expect(handled.textContent).to.eql("false");
wc.click();
scope.$digest();
expect(handled.textContent).to.eql("true");
});

it("can declaratively listen to a kebab-case DOM event dispatched by a Custom Element", function() {
this.weight = 1;
const root = compile("<comp-with-declarative-event>")(scope)[0];
scope.$digest();
let wc = root.querySelector("#wc");
let handled = root.querySelector("#kebab");
expect(handled.textContent).to.eql("false");
wc.click();
scope.$digest();
expect(handled.textContent).to.eql("true");
});

it("can declaratively listen to a camelCase DOM event dispatched by a Custom Element", function() {
this.weight = 1;
const root = compile("<comp-with-declarative-event>")(scope)[0];
scope.$digest();
let wc = root.querySelector("#wc");
let handled = root.querySelector("#camel");
expect(handled.textContent).to.eql("false");
wc.click();
scope.$digest();
expect(handled.textContent).to.eql("true");
});

it("can declaratively listen to a CAPScase DOM event dispatched by a Custom Element", function() {
this.weight = 1;
const root = compile("<comp-with-declarative-event>")(scope)[0];
scope.$digest();
let wc = root.querySelector("#wc");
let handled = root.querySelector("#caps");
expect(handled.textContent).to.eql("false");
wc.click();
scope.$digest();
expect(handled.textContent).to.eql("true");
});

it("can declaratively listen to a PascalCase DOM event dispatched by a Custom Element", function() {
this.weight = 1;
const root = compile("<comp-with-declarative-event>")(scope)[0];
scope.$digest();
let wc = root.querySelector("#wc");
let handled = root.querySelector("#pascal");
expect(handled.textContent).to.eql("false");
wc.click();
scope.$digest();
expect(handled.textContent).to.eql("true");
});
});

});
147 changes: 40 additions & 107 deletions libraries/angularjs/src/basic-tests.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { expect } from "chai";
import {expect} from "chai";
import prodApp from "./app.module";

describe("basic support", () => {
import tests from 'basic-tests';

describe('', function () {
beforeEach(angular.mock.module(prodApp));

let compile;
let scope;
let interval;

beforeEach(
inject(($compile, $rootScope, $interval) => {
compile = $compile;
Expand All @@ -16,115 +18,46 @@ describe("basic support", () => {
})
);

describe("no children", () => {
it("can display a CE with no children", function() {
this.weight = 3;
const comp = compile("<comp-no-children>")(scope);
const wc = comp[0].querySelector("ce-without-children");
expect(wc).to.exist;
});
});

describe("with children", () => {
const prep = el => {
return compile(el)(scope)[0];
};
function expectHasChildren(wc) {
expect(wc).to.exist;
let shadowRoot = wc.shadowRoot;
let heading = shadowRoot.querySelector("h1");
expect(heading).to.exist;
expect(heading.textContent).to.eql("Test h1");
let paragraph = shadowRoot.querySelector("p");
expect(paragraph).to.exist;
expect(paragraph.textContent).to.eql("Test p");
}

it("can display a Custom Element with children in a Shadow Root", function() {
this.weight = 3;
const root = prep("<comp-with-children>");
let wc = root.querySelector("#wc");
expectHasChildren(wc);
});

it("can display a Custom Element with children in a Shadow Root and pass in Light DOM children", function() {
this.weight = 3;
const root = prep("<comp-with-children-rerender>");
function render(component) {
const root = compile(component)(scope)[0];
scope.$apply();
const wc = root.querySelector('#wc');
return { wc, root }
}

tests({
renderComponentWithoutChildren() {
return render('<comp-no-children>')
},
renderComponentWithChildren() {
return render('<comp-with-children>')
},
renderComponentWithChildrenRerender() {
const result = render('<comp-with-children-rerender>');
interval.flush(1000);
let wc = root.querySelector("#wc");
expectHasChildren(wc);
expect(wc.textContent.includes("2")).to.be.true;
});

it("can display a Custom Element with children in a Shadow Root and handle hiding and showing the element", function() {
this.weight = 3;
scope.showWc = true;
const root = prep(`<comp-with-different-views show-wc="showWc">`);
scope.$apply();
let wc = root.querySelector("#wc");
expectHasChildren(wc);

scope.showWc = false;
scope.$apply();

let dummy = root.querySelector("#dummy");
expect(dummy).to.exist;
expect(dummy.textContent).to.eql("Dummy view");

return result;
},
renderComponentWithDifferentViews() {
scope.showWc = true;
scope.$apply();
const { wc, root } = render('<comp-with-different-views show-wc="showWc">');

wc = root.querySelector("#wc");
expectHasChildren(wc);
});
});

describe("attributes and properties", function() {
let wc;
beforeEach(() => {
const comp = compile("<comp-with-props>")(scope);
scope.$digest();

wc = comp[0].querySelector("#wc");
});

it("will pass boolean data as either an attribute or a property", function() {
this.weight = 3;
let data = wc.bool || wc.hasAttribute("bool");
expect(data).to.be.true;
// Extra test to see if AngularJS just left its binding syntax on
// the attribute and didn't actually set anything :P
if (!wc.bool) {
data = wc.getAttribute("bool");
expect(data.includes("{{")).to.be.false;
function toggle() {
scope.showWc = !scope.showWc;
scope.$apply();
}
});

it("will pass numeric data as either an attribute or a property", function() {
this.weight = 3;
let data = wc.num || wc.getAttribute("num");
expect(parseInt(data, 10)).to.eql(42);
});

it("will pass string data as either an attribute or a property", function() {
this.weight = 3;
let data = wc.str || wc.getAttribute("str");
expect(data).to.eql("Angular");
});
});

describe("events", () => {
it("can imperatively listen to a DOM event dispatched by a Custom Element", function() {
this.weight = 3;
const root = compile("<comp-with-imperative-event>")(scope)[0];
scope.$digest();
let wc = root.querySelector("#wc");
let handled = root.querySelector("#handled");
expect(handled.textContent).to.eql("false");
wc.click();
scope.$digest();
expect(handled.textContent).to.eql("true");
});
return { wc, toggle, root }
},
renderComponentWithProperties() {
return render('<comp-with-props>')
},
renderComponentWithImperativeEvent() {
const { wc, root } = render('<comp-with-imperative-event>');
function click() {
wc.click();
scope.$digest();
}
return { wc, click, root };
}
});

});
Loading

0 comments on commit d969796

Please sign in to comment.