Skip to content

Commit

Permalink
HTML web component test cae
Browse files Browse the repository at this point in the history
  • Loading branch information
thescientist13 committed Sep 28, 2024
1 parent dec7658 commit 027034c
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 1 deletion.
58 changes: 58 additions & 0 deletions test/cases/html-web-component/html-web-component.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/*
* 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/
* picture-frame.js
* pages/
* index.js
*/
import chai from 'chai';
import { JSDOM } from 'jsdom';
import { renderToString } from '../../../src/wcc.js';

const expect = chai.expect;

describe('Run WCC For ', function() {
const LABEL = 'HTML Web Component';
let dom;
let pictureFrame;

before(async function() {
const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url));

dom = new JSDOM(html);
pictureFrame = dom.window.document.querySelectorAll('wcc-picture-frame');
});

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 title attribute content in the heading of HTML', () => {
const heading = pictureFrame[0].querySelectorAll('.picture-frame .heading');

expect(heading.length).to.equal(1);
expect(heading[0].textContent).to.equal('Greenwood');
});

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');
});
});
});
14 changes: 14 additions & 0 deletions test/cases/html-web-component/src/components/picture-frame.js
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('wcc-picture-frame', PictureFrame);
23 changes: 23 additions & 0 deletions test/cases/html-web-component/src/pages/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import '../components/picture-frame.js';

export default class HomePage extends HTMLElement {

connectedCallback() {
this.innerHTML = `
<wcc-picture-frame title="Greenwood">
<img
src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png"
alt="Greenwood logo"
/>
</wcc-picture-frame>
`;
}

getTemplate() {
return `
<wcc-header></wcc-header>
<h1>Home Page</h1>
`;
}
}
1 change: 0 additions & 1 deletion test/cases/light-dom/light-dom.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ describe('Run WCC For ', function() {
before(async function() {
const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url));

console.log('?????', { html });
dom = new JSDOM(html);
});

Expand Down

0 comments on commit 027034c

Please sign in to comment.