275 lines
13 KiB
JavaScript
275 lines
13 KiB
JavaScript
|
|
describe('MarkupPage', function () {
|
|
|
|
async function importMarkupComponent(context)
|
|
{
|
|
return await context.importScripts(['lazily-evaluated-function.js', '../shared/common-component-base.js', '../../tools/js/markup-component.js'],
|
|
'MarkupComponentBase', 'MarkupPage');
|
|
}
|
|
|
|
describe('pageContent', function () {
|
|
it('should define the content of the generated page', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
|
|
class SomePage extends MarkupPage { };
|
|
SomePage.pageContent = ['div', 'hello world'];
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
|
|
const page = new SomePage;
|
|
expect(context.document.title).not.to.be('Some Page');
|
|
expect(page.generateMarkup()).to.contain('<div>hello world</div>');
|
|
});
|
|
});
|
|
|
|
describe('content', function () {
|
|
it('should return the page body', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
|
|
class SomePage extends MarkupPage {
|
|
render()
|
|
{
|
|
super.render();
|
|
this.renderReplace(this.content(), MarkupComponentBase.createElement('span'));
|
|
}
|
|
}
|
|
SomePage.pageContent = ['div', ['some-component']];
|
|
SomePage.styleTemplate = {'span': {'font-weight': 'bold'}};
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
|
|
const page = new SomePage;
|
|
context.document.open();
|
|
context.document.write(page.generateMarkup());
|
|
context.document.close();
|
|
expect(context.document.head.querySelector('style')).to.be.a(context.global.HTMLStyleElement);
|
|
expect(context.document.head.querySelector('title')).to.be.a(context.global.HTMLTitleElement);
|
|
});
|
|
});
|
|
|
|
describe('generateMarkup', function () {
|
|
it('must enqueue itself to render and run the render loop', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
let renderCall = 0;
|
|
class SomePage extends MarkupPage {
|
|
render() {
|
|
super.render();
|
|
renderCall++;
|
|
}
|
|
}
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
const page = new SomePage;
|
|
page.generateMarkup();
|
|
expect(renderCall).to.be.greaterThan(0);
|
|
});
|
|
|
|
it('must generate DOCTYPE, html, head, and body elements', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
|
|
let renderCall = 0;
|
|
class SomePage extends MarkupPage {
|
|
render() {
|
|
super.render();
|
|
renderCall++;
|
|
}
|
|
}
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
const page = new SomePage;
|
|
expect(page.generateMarkup()).to.contain('<!DOCTYPE html><html><head');
|
|
expect(page.generateMarkup()).to.contain('</head><body');
|
|
});
|
|
|
|
it('must generate the title element', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
|
|
let renderCall = 0;
|
|
class SomePage extends MarkupPage {
|
|
constructor() { super('Some Page'); }
|
|
render() {
|
|
super.render();
|
|
renderCall++;
|
|
}
|
|
}
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
const page = new SomePage;
|
|
expect(context.document.title).not.to.be('Some Page');
|
|
context.document.open();
|
|
context.document.write(page.generateMarkup());
|
|
context.document.close();
|
|
expect(context.document.title).to.be('Some Page');
|
|
});
|
|
|
|
it('must generate the content for components in the page', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
|
|
class SomePage extends MarkupPage { }
|
|
SomePage.pageContent = ['div', ['some-component']];
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
|
|
class SomeComponent extends MarkupComponentBase { };
|
|
SomeComponent.contentTemplate = ['div', 'hello world'];
|
|
MarkupComponentBase.defineElement('some-component', SomeComponent);
|
|
|
|
const page = new SomePage;
|
|
expect(page.generateMarkup()).to.contain('<div>hello world</div>');
|
|
});
|
|
|
|
it('must generate the style for components in the page', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
|
|
class SomePage extends MarkupPage { }
|
|
SomePage.pageContent = ['div', ['some-component']];
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
|
|
class SomeComponent extends MarkupComponentBase {};
|
|
SomeComponent.contentTemplate = [['span', 'hello world'], ['p']];
|
|
SomeComponent.styleTemplate = {'span': {'font-weight': 'bold'}};
|
|
MarkupComponentBase.defineElement('some-component', SomeComponent);
|
|
|
|
const page = new SomePage;
|
|
context.document.open();
|
|
context.document.write(page.generateMarkup());
|
|
context.document.close();
|
|
expect(context.global.getComputedStyle(context.document.querySelector('p')).fontWeight).to.be('normal');
|
|
expect(context.global.getComputedStyle(context.document.querySelector('span')).fontWeight).to.be('bold');
|
|
});
|
|
|
|
it('must not apply the styles from a sibling component', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
|
|
class SomePage extends MarkupPage { }
|
|
SomePage.pageContent = ['div', [['some-component'], ['other-component']]];
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
|
|
class SomeComponent extends MarkupComponentBase {};
|
|
SomeComponent.contentTemplate = [['section', 'hello'], ['p', 'world']];
|
|
SomeComponent.styleTemplate = {'section': {'font-weight': 'bold'}};
|
|
MarkupComponentBase.defineElement('some-component', SomeComponent);
|
|
|
|
class OtherComponent extends MarkupComponentBase {};
|
|
OtherComponent.contentTemplate = [['section', 'hello'], ['p', 'world']];
|
|
OtherComponent.styleTemplate = {'p': {'color': 'blue'}};
|
|
MarkupComponentBase.defineElement('other-component', OtherComponent);
|
|
|
|
const page = new SomePage;
|
|
context.document.open();
|
|
context.document.write(page.generateMarkup());
|
|
context.document.close();
|
|
const getComputedStyle = (element) => context.global.getComputedStyle(element);
|
|
const querySelector = (selector) => context.document.querySelector(selector);
|
|
expect(getComputedStyle(querySelector('some-component section')).fontWeight).to.be('bold');
|
|
expect(getComputedStyle(querySelector('other-component section')).fontWeight).to.be('normal');
|
|
expect(getComputedStyle(querySelector('some-component p')).color).to.be('rgb(0, 0, 0)');
|
|
expect(getComputedStyle(querySelector('other-component p')).color).to.be('rgb(0, 0, 255)');
|
|
});
|
|
|
|
it('must not apply the styles from a ancestor component', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
|
|
class SomePage extends MarkupPage { }
|
|
SomePage.pageContent = ['div', ['some-component']];
|
|
SomePage.styleTemplate = {'div': {'width': '300px'}};
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
|
|
class SomeComponent extends MarkupComponentBase {};
|
|
SomeComponent.contentTemplate = ['div', ['other-component']];
|
|
SomeComponent.styleTemplate = {'div': {'width': '200px'}};
|
|
MarkupComponentBase.defineElement('some-component', SomeComponent);
|
|
|
|
class OtherComponent extends MarkupComponentBase {};
|
|
OtherComponent.contentTemplate = ['div'];
|
|
OtherComponent.styleTemplate = {'div': {'width': '100px'}};
|
|
MarkupComponentBase.defineElement('other-component', OtherComponent);
|
|
|
|
const page = new SomePage;
|
|
context.document.open();
|
|
context.document.write(page.generateMarkup());
|
|
context.document.close();
|
|
const getComputedStyle = (element) => context.global.getComputedStyle(element);
|
|
const divs = Array.from(context.document.querySelectorAll('div'));
|
|
expect(getComputedStyle(divs[0]).width).to.be('300px');
|
|
expect(getComputedStyle(divs[1]).width).to.be('200px');
|
|
expect(getComputedStyle(divs[2]).width).to.be('100px');
|
|
});
|
|
|
|
it('must apply the styles to elements generated in renderReplace', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
|
|
class SomePage extends MarkupPage { }
|
|
SomePage.pageContent = ['div', ['some-component']];
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
|
|
class SomeComponent extends MarkupComponentBase {
|
|
render()
|
|
{
|
|
super.render();
|
|
this.renderReplace(this.content(), MarkupComponentBase.createElement('span'));
|
|
}
|
|
};
|
|
SomeComponent.contentTemplate = [];
|
|
SomeComponent.styleTemplate = {'span': {'font-weight': 'bold'}};
|
|
MarkupComponentBase.defineElement('some-component', SomeComponent);
|
|
|
|
const page = new SomePage;
|
|
context.document.open();
|
|
context.document.write(page.generateMarkup());
|
|
context.document.close();
|
|
expect(context.global.getComputedStyle(context.document.querySelector('span')).fontWeight).to.be('bold');
|
|
});
|
|
|
|
it('must apply the styles to elements based on class names', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
|
|
class SomePage extends MarkupPage { }
|
|
SomePage.pageContent = ['div', {class: 'target'}, ['some-component']];
|
|
SomePage.styleTemplate = {'.target': {'border': 'solid 1px black'}};
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
|
|
const page = new SomePage;
|
|
context.document.open();
|
|
context.document.write(page.generateMarkup());
|
|
context.document.close();
|
|
const target = context.document.querySelector('.target');
|
|
expect(context.global.getComputedStyle(target).borderWidth).to.be('1px');
|
|
expect(target.classList.length).to.be(2);
|
|
});
|
|
|
|
it('must not add the same class name multiple times to an element', async () => {
|
|
const context = new BrowsingContext();
|
|
const [MarkupComponentBase, MarkupPage] = await importMarkupComponent(context);
|
|
|
|
class SomePage extends MarkupPage {
|
|
render()
|
|
{
|
|
super.render();
|
|
const container = this.createElement('div');
|
|
this.renderReplace(container, this.createElement('div', {class: 'target'}));
|
|
this.renderReplace(this.content(), container);
|
|
}
|
|
}
|
|
SomePage.pageContent = [];
|
|
SomePage.styleTemplate = {'.target': {'border': 'solid 1px black'}};
|
|
MarkupComponentBase.defineElement('some-page', SomePage);
|
|
|
|
const page = new SomePage;
|
|
context.document.open();
|
|
context.document.write(page.generateMarkup());
|
|
context.document.close();
|
|
const target = context.document.querySelector('.target');
|
|
expect(context.global.getComputedStyle(target).borderWidth).to.be('1px');
|
|
expect(target.classList.length).to.be(2);
|
|
});
|
|
|
|
});
|
|
});
|
|
|