mframejs/test/binding/bindableElement01.spec.ts

simple framework

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

// our dummy app to simplify parts
export class App implements IElement {
    public something = 'test value';
    public loadTemplate() {
        return template`
            <div>
                <custom-element
                    static-value="wow"
                    static-interpolate-value01="@{something}"
                    static-interpolate-value02="@{something}"
                    static-interpolate-value03="@{something}"
                    binded-value.bind="something"
                    binded-value01.bind="something"
                    >
                </custom-element>
            </div>
        `;
    }
}

@customElement('custom-element')
export class CustomElement {

    @bindable() public staticValue: string;
    @bindable() public staticInterpolateValue01: string;
    @bindable({ attribute: 'static-interpolate-value02' }) public testvalue: string;
    @bindable() public staticInterpolateValue03 = 'cool';
    @bindable() public staticInterpolateValue04 = 'cool';
    @bindable({ attribute: 'static-interpolate-value99' }) public defaultTest = 'cool2';
    @bindable() public bindedValue: string;
    @bindable({ attribute: 'binded-value01' }) public bindedValueX: string;
    @bindable() public bindedValuex01 = 'default';
    @bindable({ attribute: 'binded-valuexx' }) public bindedValuex02 = 'default';


    public loadTemplate() {
        return template`
            <div class="no1">@{staticValue}</div>
            <div class="no2">@{staticInterpolateValue01}</div>
            <div class="no3">@{testvalue}</div>
            <div class="no4">@{staticInterpolateValue03}</div>
            <div class="no5">@{staticInterpolateValue04}</div>
            <div class="no6">@{defaultTest}</div>
            <div class="no7">@{bindedValue}</div>
            <div class="no8">@{bindedValueX}</div>
            <div class="no9">@{bindedValuex01}</div>
            <div class="no10">@{bindedValuex02}</div>
            `;
    }
}


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('wow');
    });

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

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

    it('check static interpolate value set with attribute', async () => {

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

    it('check static interpolate value with default value overwritten', async () => {

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

    it('check static interpolate value with default value used', async () => {

        const input = DOM.document.getElementsByClassName('no5');
        expect((input[0] as any).innerHTML).toBe('cool');
    });

    it('check static interpolate value with default value used', async () => {

        const input = DOM.document.getElementsByClassName('no6');
        expect((input[0] as any).innerHTML).toBe('cool2');
    });

    it('bindedvalue 01', async () => {

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

    it('bindedvalue 02', async () => {

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

    it('bindedvalue 03', async () => {

        const input = DOM.document.getElementsByClassName('no9');
        expect((input[0] as any).innerHTML).toBe('default');
    });

    it('bindedvalue 04', async () => {

        const input = DOM.document.getElementsByClassName('no10');
        expect((input[0] as any).innerHTML).toBe('default');
    });



});