-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature/issue 154 light DOM children aka HTML web components (#155)
* light DOM children aka HTML web components * fix lint * HTML web component sandbox example * HTML web component test cae * nested HTML web component test * fix linting * additional test cases and refactoring * HTML parity test cases and Light DOM edge cases * document self closing tags list * document example of HTML Web Components
- Loading branch information
1 parent
21b4850
commit cb4ae5c
Showing
19 changed files
with
559 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| export default class PictureFrame extends HTMLElement { | ||
| connectedCallback() { | ||
| const title = this.getAttribute('title'); | ||
|
|
||
| this.innerHTML = ` | ||
| <div class="picture-frame"> | ||
| <h6 class="heading">${title}</h6> | ||
| ${this.innerHTML} | ||
| </div> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| customElements.define('sb-picture-frame', PictureFrame); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <wcc-picture-frame title="Greenwood"> | ||
| <div class="picture-frame"> | ||
| <img src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png" alt="Greenwood logo"> | ||
| <br> | ||
| <span>Author: <span>WCC</span></span> | ||
| <wcc-caption> | ||
| <div class="caption"> | ||
| <h6 class="heading">Greenwood</h6> | ||
| <span>© 2024</span> | ||
| </div> | ||
| </wcc-caption> | ||
| </div> | ||
| </wcc-picture-frame> |
85 changes: 85 additions & 0 deletions
85
test/cases/html-web-components/html-web-components.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| /* | ||
| * Use Case | ||
| * Run wcc against an "HTML" Web Component. | ||
| * https://blog.jim-nielsen.com/2023/html-web-components/ | ||
| * | ||
| * User Result | ||
| * Should return the expected HTML with no template tags or Shadow Roots. | ||
| * | ||
| * User Workspace | ||
| * src/ | ||
| * components/ | ||
| * caption.js | ||
| * picture-frame.js | ||
| * pages/ | ||
| * index.js | ||
| */ | ||
| import chai from 'chai'; | ||
| import { JSDOM } from 'jsdom'; | ||
| import fs from 'fs/promises'; | ||
| import { renderToString } from '../../../src/wcc.js'; | ||
|
|
||
| const expect = chai.expect; | ||
|
|
||
| describe('Run WCC For ', function() { | ||
| const LABEL = 'HTML (Light DOM) Web Components'; | ||
| let dom; | ||
| let pictureFrame; | ||
| let expectedHtml; | ||
| let actualHtml; | ||
|
|
||
| before(async function() { | ||
| const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url)); | ||
|
|
||
| actualHtml = html; | ||
| dom = new JSDOM(actualHtml); | ||
| pictureFrame = dom.window.document.querySelectorAll('wcc-picture-frame'); | ||
| expectedHtml = await fs.readFile(new URL('./expected.html', import.meta.url), 'utf-8'); | ||
| }); | ||
|
|
||
| describe(LABEL, function() { | ||
| it('should not have any <template> tags within the document', function() { | ||
| expect(dom.window.document.querySelectorAll('template').length).to.equal(0); | ||
| }); | ||
|
|
||
| it('should only have one <wcc-picture-frame> tag', function() { | ||
| expect(pictureFrame.length).to.equal(1); | ||
| }); | ||
|
|
||
| it('should have the expected image from userland in the HTML', () => { | ||
| const img = pictureFrame[0].querySelectorAll('.picture-frame img'); | ||
|
|
||
| expect(img.length).to.equal(1); | ||
| expect(img[0].getAttribute('alt')).to.equal('Greenwood logo'); | ||
| expect(img[0].getAttribute('src')).to.equal('https://www.greenwoodjs.io/assets/greenwood-logo-og.png'); | ||
| }); | ||
|
|
||
| it('should have the expected Author name <span> from userland in the HTML', () => { | ||
| const img = pictureFrame[0].querySelectorAll('.picture-frame img + br + span'); | ||
|
|
||
| expect(img.length).to.equal(1); | ||
| expect(img[0].textContent).to.equal('Author: WCC'); | ||
| }); | ||
|
|
||
| it('should have the expected title attribute content in the nested <wcc-caption> tag', () => { | ||
| const caption = pictureFrame[0].querySelectorAll('.picture-frame wcc-caption .caption'); | ||
| const heading = caption[0].querySelectorAll('.heading'); | ||
|
|
||
| expect(caption.length).to.equal(1); | ||
| expect(heading.length).to.equal(1); | ||
| expect(heading[0].textContent).to.equal('Greenwood'); | ||
| }); | ||
|
|
||
| it('should have the expected copyright content in the nested <wcc-caption> tag', () => { | ||
| const caption = pictureFrame[0].querySelectorAll('.picture-frame wcc-caption .caption'); | ||
| const span = caption[0].querySelectorAll('span'); | ||
|
|
||
| expect(span.length).to.equal(1); | ||
| expect(span[0].textContent).to.equal('© 2024'); | ||
| }); | ||
|
|
||
| it('should have the expected recursively generated HTML', () => { | ||
| expect(expectedHtml.replace(/ /g, '').replace(/\n/g, '')).to.equal(actualHtml.replace(/ /g, '').replace(/\n/g, '')); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.