mframejs
Version:
simple framework
117 lines (83 loc) • 2.98 kB
text/typescript
import { DOM, configure, MF, customElement, IElement, bindable, template, IBindingContext } from 'mframejs';
import { JSDOM } from 'jsdom';
/**
* Main app class, everything needs to have a root
*/
export class App {
public breadArray: IBreadcrumbItem[] = [
{
title: 'url1'
},
{
title: 'url2'
},
{
title: 'url3'
}
];
/**
* Mandatory function
* here you can just return text/or promise<text> if you want
*/
public loadTemplate() {
return template`<abt-breadcrumb items.bind="breadArray"></abt-breadcrumb>`;
}
}
export interface IBreadcrumbItem {
title: string;
url?: string;
}
/**
* Simple custom element
* Return only template with "hello world"
*/
export class AbtBreadcrumb implements IElement {
// default variables every element gets
public $element: HTMLElement;
public $bindingContext: IBindingContext;
public $attributes: NamedNodeMap;
public items: AbtBreadcrumb[] = [];
// mandatory function/ this can also return promise<string>
public loadTemplate() {
return template`
<nav aria-label="breadcrumb">
<ol class="breadcrumb breakcrumb-ol">
<li repeat.for="item of items"
class="breadcrumb-item @{$last ? 'active':''} abt-breadcrumb" aria-current="@{$last? 'page':''}">
<span if.bind="$last">@{item.title}</span>
<a if.bind="!$last" href="@{item.url || '#'}">@{item.title}</a>
</li>
</ol>
</nav>`;
}
}
describe('viewparser repeat cache"', () => {
beforeAll(() => {
const window = new JSDOM('').window;
DOM.setConfig(window, window.document);
configure(App).then((mf: MF) => {
mf.start(DOM.document.body);
});
});
it('check ol list', async () => {
const ol = DOM.document.getElementsByClassName('breakcrumb-ol');
expect(ol[0].children.length).toBe(3);
});
it('check li list', async () => {
const item = DOM.document.getElementsByClassName('breadcrumb-item');
expect(item.length).toBe(3);
});
it('check li list item 1', async () => {
const item = DOM.document.getElementsByClassName('breadcrumb-item');
expect(item[0].children[0].innerHTML).toBe('url1');
});
it('check li list item 2', async () => {
const item = DOM.document.getElementsByClassName('breadcrumb-item');
expect(item[1].children[0].innerHTML).toBe('url2');
});
it('check li list item 3', async () => {
const item = DOM.document.getElementsByClassName('breadcrumb-item');
expect(item[2].children[0].innerHTML).toBe('url3');
});
});