mframejs/test/binding/bindableAttribute02.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="cool01:test1;cool02:test2"></div>
                <div class="no2" custom-attribute.bind="cool01:test3;cool02:test4"></div>
                <div class="no3" custom-attribute="cool01:something;cool02:test4"></div>
                <div class="no4" custom-attribute="cool01:test3;cool02:something"></div>
                <div class="no5" custom-attribute="cool01.bind:something;cool02:test4"></div>
                <div class="no6" custom-attribute="cool01:test3;cool02.bind:something"></div>
                <div class="no7" custom-attribute.bind="cool01.bind:something;cool02:test4"></div>
                <div class="no8" custom-attribute.bind="cool01:test3;cool02.bind:something"></div>
                <div class="no9" custom-attribute="cool01.bind:something;cool02.bind:test4"></div>
                <div class="no10" custom-attribute="cool01.bind:test3;cool02.bind:something"></div>
                <div class="no11" custom-attribute.bind="cool01.bind:something;cool02.bind:test4"></div>
                <div class="no12" custom-attribute.bind="cool01.bind:test3;cool02.bind:something"></div>
                <div class="no13" custom-attribute.bind="cool01.bind:@{something};cool02.bind:test4"></div>
                ${'<div class="no14" custom-attribute.bind="cool01.bind:test3;cool02.bind:${something}"></div>'}
                <div class="no15" custom-attribute="cool01:@{something};cool02:test4"></div>
                ${'<div class="no16" custom-attribute="cool01:test3;cool02:${something}"></div>'}
        `;
    }
}

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

    @bindable() public cool01: string;
    @bindable() public cool02: string;

    public created() {
        this.$element.innerHTML = this.cool01 + this.cool02;
    }

}



describe('bindale02 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 01', async () => {

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


    it('check bind value 01', async () => {

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


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

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


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

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


    it('check bind value 02', async () => {

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


    it('check bind value 03', async () => {

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


    it('check bind value 04', async () => {

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


    it('check bind value 05', async () => {

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


    it('check bind value 06', async () => {

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


    it('check bind value 07', async () => {

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


    it('check bind value 08', async () => {

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


    it('check bind value 09', async () => {

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


    it('check bind value 09', async () => {

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


    it('check bind value 10', async () => {

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


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

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


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

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



});