mframejs/test/view/parseNodes.spec.ts

simple framework

import { DOM, View, customElement, register, customAttribute, ViewController, createBindingContext } from 'mframejs';
import { JSDOM } from 'jsdom';



// helper element
@customElement('hello')
export class Hello {
    public title = 'HELLO WORLD';
    public loadTemplate() {
        return '<template>@{title}</template>';
    }
}


@customAttribute('add-it')
export class AddIt {
    public $element: any;
    public attached() {
        this.$element.innerHTML = this.$element.innerHTML + '!!!';
    }
}



describe('viewParser', () => {


    beforeEach(() => {
        const window = new JSDOM('').window;
        DOM.setConfig(window, window.document);
    });


    describe('parseNodes add element', () => {
        it('add element', async () => {
            register(Hello);
            const element = View.createTemplate(`<template><hello></hello></template>`);
            const bindingContext = createBindingContext({});
            const viewController = new ViewController(element);
            View.parseTemplate(element, bindingContext, viewController);
            await DOM.waitFor(0);
            expect(element.innerHTML).toBe('<hello>HELLO WORLD</hello>');
            expect((viewController as any).count).toBe(0);
        });
    });


    describe('parseNodes add element and interpolate', () => {
        it('add element', async () => {
            register(Hello);
            const element = View.createTemplate(`<template>@{x}<hello></hello>@{x}</template>`);
            const bindingContext = createBindingContext({ x: 'el' });
            const viewController = new ViewController(element);
            View.parseTemplate(element, bindingContext, viewController);
            await DOM.waitFor(0);
            expect(element.innerHTML).toBe('el<hello>HELLO WORLD</hello>el');
            expect((viewController as any).count).toBe(2);
        });
    });


    describe('parseNodes add element', () => {
        it('add element', async () => {
            register(Hello, AddIt);
            const element = View.createTemplate(`<template><hello add-it></hello></template>`);
            const bindingContext = createBindingContext({});
            const viewController = new ViewController(element);
            const controllers = View.parseTemplate(element, bindingContext, viewController);

            // add to queue so we are sure element is done

            controllers.forEach(x => {
                if (x.attached) {
                    x.attached();
                }
            });
            await DOM.waitFor(50);


            expect((element.firstChild as any).innerHTML).toBe('HELLO WORLD!!!');
            expect((viewController as any).count).toBe(1);

        });
    });

    // TODO

});