mframejs/test/binding/bindableAttribute01.spec.ts

simple framework

import { DOM, configure, IElement, template, customAttribute, bindable } from 'mframejs';
import { JSDOM } from 'jsdom';

// our dummy app to simplify parts
export class App implements IElement {
    public $element: any;
    public something = 'test value';

    public created() {
        this.$element.$ref = this;
    }
    public loadTemplate() {
        return template`
                <div class="no1" custom-attribute="static-value"></div>
                <div class="no2" custom-attribute="@{something}"></div>
                ${'<div class="no3" custom-attribute="${something}"></div>'}
                <div class="no4" custom-attribute.bind="something"></div>
                <div class="no5" custom-attribute.bind="@{something}"></div>
                ${'<div class="no6" custom-attribute.bind="${something}"></div>'}
        `;
    }
}

@customAttribute('custom-attribute')
export class CustomElement {
    public $element: HTMLElement;

    @bindable() public value: string;

    public created() {
        this.$element.innerHTML = this.value;
    }

}


describe('bindale01 test', () => {


    beforeAll(() => {
        const window = new JSDOM('').window;
        DOM.setConfig(window, window.document);
        configure(App).then((mf: any) => {
            mf.start(DOM.document.body);
        });

    });


    it('check static value', async () => {

        const input = DOM.document.getElementsByClassName('no1');
        expect((input[0] as any).innerHTML).toBe('static-value');
    });


    it('check static value interpolate with @{}', async () => {
        const input = DOM.document.getElementsByClassName('no2');
        expect((input[0] as any).innerHTML).toBe('test value');
    });

    it('check static value interpolate with ${}', async () => {
        const input = DOM.document.getElementsByClassName('no3');
        expect((input[0] as any).innerHTML).toBe('test value');
    });

    it('check static value interpolate with ${}', async () => {
        const input = DOM.document.getElementsByClassName('no4');
        expect((input[0] as any).innerHTML).toBe('test value');
    });

    it('check static value interpolate with ${}', async () => {
        const input = DOM.document.getElementsByClassName('no5');
        expect((input[0] as any).innerHTML).toBe('test value');
    });

    it('check static value interpolate with ${}', async () => {
        const input = DOM.document.getElementsByClassName('no6');
        expect((input[0] as any).innerHTML).toBe('test value');
    });



});