mframejs/test/attributes/value/checkbox1stringArray.spec.ts

simple framework

import { DOM, configure, IElement, ContainerClasses } from 'mframejs';
import { JSDOM } from 'jsdom';

// our dummy app to simplify parts
export class App implements IElement {

    public array: string[] = ['cola', 'pepsi', 'fanta'];
    public selected: string[] = [];

    public loadTemplate() {
        return `
        <template>
            <label style="display:block" repeat.for="product of array">
            <input  class="inputs"
                    type="checkbox"
                    model.bind="product"
                    checked.bind="selected">
                @{product}
            </label>
            <br>
            <div class="selected">Selected product: @{selected}</div>
        </template>`;
    }
}


describe('radio group mix single null and repeat with values', () => {


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

    });


    it('check default values are set (null/none)', async () => {
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('inputs');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: ');
        expect((input[0] as any).checked).toBe(false);
        expect((input[1] as any).checked).toBe(false);
        expect((input[2] as any).checked).toBe(false);
    });


    it('check "cola" values are set', async () => {
        const app: App = ContainerClasses.get(App);
        app.selected = ['cola'];
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('inputs');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: cola');
        expect((input[0] as any).checked).toBe(true);
        expect((input[1] as any).checked).toBe(false);
        expect((input[2] as any).checked).toBe(false);
    });

    it('check "pepsi" values are set', async () => {
        const app: App = ContainerClasses.get(App);
        app.selected = ['pepsi'];
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('inputs');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: pepsi');
        expect((input[0] as any).checked).toBe(false);
        expect((input[1] as any).checked).toBe(true);
        expect((input[2] as any).checked).toBe(false);
    });



    it('check "fanta" values are set', async () => {
        const app: App = ContainerClasses.get(App);
        app.selected = ['fanta'];
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('inputs');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: fanta');
        expect((input[0] as any).checked).toBe(false);
        expect((input[1] as any).checked).toBe(false);
        expect((input[2] as any).checked).toBe(true);
    });


    it('check "fanta & cola" values are set', async () => {
        const app: App = ContainerClasses.get(App);
        app.selected = ['fanta', 'cola'];
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('inputs');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: fanta,cola');
        expect((input[0] as any).checked).toBe(true);
        expect((input[1] as any).checked).toBe(false);
        expect((input[2] as any).checked).toBe(true);
    });

    it('check "fanta & cola & pepsi" values are set', async () => {
        const app: App = ContainerClasses.get(App);
        app.selected = ['fanta', 'cola', 'pepsi'];
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('inputs');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: fanta,cola,pepsi');
        expect((input[0] as any).checked).toBe(true);
        expect((input[1] as any).checked).toBe(true);
        expect((input[2] as any).checked).toBe(true);
    });


    it('check clear', async () => {
        const app: App = ContainerClasses.get(App);
        app.selected = [];
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('inputs');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: ');
        expect((input[0] as any).checked).toBe(false);
        expect((input[1] as any).checked).toBe(false);
        expect((input[2] as any).checked).toBe(false);
    });



    it('check click on cola', async () => {

        const input = DOM.document.getElementsByClassName('inputs');
        const event = new (DOM.window as any).CustomEvent('click');
        (input[0] as any).checked = true;
        (input[0]).dispatchEvent(event);
        await DOM.waitFor(0);
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: cola');
        expect((input[0] as any).checked).toBe(true);
        expect((input[1] as any).checked).toBe(false);
        expect((input[2] as any).checked).toBe(false);
    });


    it('check click on pepsi', async () => {

        const input = DOM.document.getElementsByClassName('inputs');
        const event = new (DOM.window as any).CustomEvent('click');
        (input[1] as any).checked = true;
        (input[1]).dispatchEvent(event);
        await DOM.waitFor(0);
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: cola,pepsi');
        expect((input[0] as any).checked).toBe(true);
        expect((input[1] as any).checked).toBe(true);
        expect((input[2] as any).checked).toBe(false);
    });


});