From 518ac40d6b710f838d206c25914a646a5f2270a6 Mon Sep 17 00:00:00 2001 From: Daniel Gamage Date: Tue, 10 May 2022 15:22:17 -0400 Subject: [PATCH 1/5] moved shadow dom content to slot to allow styles to pierce (or not have to pierce) the shadow dom --- src/web-component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/web-component.ts b/src/web-component.ts index 17c1471..57e68e9 100644 --- a/src/web-component.ts +++ b/src/web-component.ts @@ -45,7 +45,7 @@ export class MechanicalRaggerWC extends HTMLElement { this.exclusion = shadow.appendChild(document.createElement("div")); this.textRoot = shadow.appendChild(document.createElement("div")); - this.textRoot.innerHTML = this.innerHTML; + this.textRoot.innerHTML += ``; this.ragger = new MechanicalRaggerCore({ container: this.textRoot, From 9d8063f0358dbc1322722d74ba5ec3663ba19648 Mon Sep 17 00:00:00 2001 From: Daniel Gamage Date: Tue, 10 May 2022 17:50:28 -0400 Subject: [PATCH 2/5] making shadow root open for testing, but probably helpful for customization too --- src/web-component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/web-component.ts b/src/web-component.ts index 57e68e9..4748a27 100644 --- a/src/web-component.ts +++ b/src/web-component.ts @@ -40,7 +40,7 @@ export class MechanicalRaggerWC extends HTMLElement { constructor() { super(); - const shadow = this.attachShadow({ mode: "closed" }); + const shadow = this.attachShadow({ mode: "open" }); this.exclusion = shadow.appendChild(document.createElement("div")); From 69d9d52920f73a4c063b8f867a2fd96ccc6ecb82 Mon Sep 17 00:00:00 2001 From: Daniel Gamage Date: Tue, 10 May 2022 18:13:49 -0400 Subject: [PATCH 3/5] added some failing tests --- src/__tests__/components.spec.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/__tests__/components.spec.js b/src/__tests__/components.spec.js index a944811..cb6dd8c 100644 --- a/src/__tests__/components.spec.js +++ b/src/__tests__/components.spec.js @@ -28,8 +28,30 @@ test("the React component renders without errors.", () => { ); }); +customElements.define("mechanical-ragger", MechanicalRagger); test("the web component is created without errors.", async () => { - customElements.define("mechanical-ragger", MechanicalRagger); const el = document.createElement("mechanical-ragger"); expect(el).toHaveProperty("ragger"); }); + +test("the web component reflects updated content.", async () => { + const container = document.createElement("div"); + container.innerHTML = "one"; + const el = container.querySelector("mechanical-ragger"); + el.innerHTML = "two"; + // el.shadowRoot seems like it's not thoroughly implemented in JSDOM. + expect(el.shadowRoot).toHaveTextContent("two"); +}); +test("the web component's slot element inherit styles.", async () => { + const container = document.createElement("div"); + const style = (document.createElement( + "style" + ).innerHTML = `a { border: 1px solid blue; }`); + container.innerHTML = + "one"; + document.body.append(container, style); + const el = container.querySelector("mechanical-ragger a"); + // jsdom doessn't return anything from getComputedStyle beside visibility. + const borderStyle = window.getComputedStyle(el).border; + expect(borderStyle).toEqual("1px solid blue"); +}); From 5876f0509b22fc24314e9ccea1dc36b04177a1d1 Mon Sep 17 00:00:00 2001 From: Daniel Gamage Date: Wed, 11 May 2022 18:33:48 -0400 Subject: [PATCH 4/5] can't forget to bump package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 61a359e..d379bd9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@oakstudios/mechanical-ragger", - "version": "0.4.1", + "version": "0.5", "description": "A layout tool that automatically rags long text by line", "type": "module", "main": "./index.js", From 264fb56da4287ee47cd1a3a2ff57b2a8e1d99ebf Mon Sep 17 00:00:00 2001 From: Daniel Gamage Date: Tue, 17 May 2022 17:56:30 -0400 Subject: [PATCH 5/5] Revert "added some failing tests" This reverts commit 69d9d52920f73a4c063b8f867a2fd96ccc6ecb82. --- src/__tests__/components.spec.js | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/src/__tests__/components.spec.js b/src/__tests__/components.spec.js index 0f30e54..74845e4 100644 --- a/src/__tests__/components.spec.js +++ b/src/__tests__/components.spec.js @@ -35,29 +35,6 @@ test("the web component is created without errors.", async () => { expect(el).toHaveProperty("ragger"); }); -test("the web component reflects updated content.", async () => { - const container = document.createElement("div"); - container.innerHTML = "one"; - const el = container.querySelector("mechanical-ragger"); - el.innerHTML = "two"; - // el.shadowRoot seems like it's not thoroughly implemented in JSDOM. - expect(el.shadowRoot).toHaveTextContent("two"); -}); - -test("the web component's slot element inherit styles.", async () => { - const container = document.createElement("div"); - const style = (document.createElement( - "style" - ).innerHTML = `a { border: 1px solid blue; }`); - container.innerHTML = - "one"; - document.body.append(container, style); - const el = container.querySelector("mechanical-ragger a"); - // jsdom doessn't return anything from getComputedStyle beside visibility. - const borderStyle = window.getComputedStyle(el).border; - expect(borderStyle).toEqual("1px solid blue"); -}); - test("the web component calls unobserve when it's removed from the DOM.", async () => { const el = document.createElement("mechanical-ragger"); document.body.appendChild(el);