mframejs/test/binding/bindableElement02.spec.ts

simple framework

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

let dummyArrayNew: any[] = [];
let dummyArrayOld: any[] = [];

// our dummy app to simplify parts
export class App implements IElement {
    public arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    public loadTemplate() {
        return template`
            <div>
                <button class="button01" click.trigger="reverse()">reverse</button>
                <button class="button02" click.trigger="clear()">clear</button>
                <br/>
                <custom-element repeat.for="$value of arr" binded-value.bind="$value"></custom-element>

            </div>
        `;
    }
    public reverse() {
        this.arr.reverse();
    }

    public clear() {
        this.arr = [];
    }
}

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

    @bindable() public bindedValue: string;

    public bindedValueChanged(newValue: any, oldValue: any) {
        // console.log(newValue, oldValue);
        dummyArrayNew.push(newValue);
        dummyArrayOld.push(oldValue);
    }

    public loadTemplate() {
        return template`<div class="element">@{bindedValue}</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('bindable caluechanged 01', async () => {

        const input = DOM.document.getElementsByClassName('element');
        expect((input[0] as any).innerHTML).toBe('1');
        expect(dummyArrayNew.join('')).toBe('12345678910');
        expect(dummyArrayOld.join('')).toBe('');
    });

    it('bindable caluechanged 02', async () => {
        const button = DOM.document.getElementsByClassName('button01');
        const event = new (DOM.window as any).CustomEvent('click');
        dummyArrayNew = [];
        dummyArrayOld = [];
        (button[0]).dispatchEvent(event);
        await DOM.waitFor(50);
        const input = DOM.document.getElementsByClassName('element');
        expect((input[0] as any).innerHTML).toBe('10');
        expect(dummyArrayNew.join('')).toBe('10987654321');
        expect(dummyArrayOld.join('')).toBe('12345678910');
    });

    it('bindable caluechanged 03', async () => {
        const button = DOM.document.getElementsByClassName('button01');
        const event = new (DOM.window as any).CustomEvent('click');
        dummyArrayNew = [];
        dummyArrayOld = [];
        (button[0]).dispatchEvent(event);
        await DOM.waitFor(50);
        const input = DOM.document.getElementsByClassName('element');
        expect((input[0] as any).innerHTML).toBe('1');
        expect(dummyArrayOld.join('')).toBe('10987654321');
        expect(dummyArrayNew.join('')).toBe('12345678910');
    });


    it('bindable caluechanged 04 clear', async () => {
        const button = DOM.document.getElementsByClassName('button02');
        const event = new (DOM.window as any).CustomEvent('click');
        dummyArrayNew = [];
        dummyArrayOld = [];
        (button[0]).dispatchEvent(event);
        await DOM.waitFor(50);
        const input = DOM.document.getElementsByClassName('element');
        expect((input[0] as any)).toBe(undefined);
        expect(dummyArrayOld.join('')).toBe('');
        expect(dummyArrayNew.join('')).toBe('');

    });



});