mframejs/test/attributes/value/radioGroup2stringArray.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 productsString: string[] = ['cola', 'pepsi', 'fanta'];
    public selectedProductString: string = null;

    public loadTemplate() {
        return `
        <template>
            <label style="display:block">
                <input class="inputs" id="null" type="radio" name="groupRadio" model.bind="null" checked.bind="selectedProductString">
                <div class="labels">None</div>
            </label>
            <label style="display:block" repeat.for="product of productsString">
                <input class="inputs" type="radio" name="groupRadio" model.bind="product" checked.bind="selectedProductString">
                <div class="labels">@{product}</div>
            </label>
            <br>
            <div class="selected">Selected product: @{selectedProductString}</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(true);
        expect((input[1] as any).checked).toBe(false);
        expect((input[2] as any).checked).toBe(false);
        expect((input[3] as any).checked).toBe(false);
    });


    it('check "cola" values are set', async () => {
        const app: App = ContainerClasses.get(App);
        app.selectedProductString = '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(false);
        expect((input[1] as any).checked).toBe(true);
        expect((input[2] as any).checked).toBe(false);
        expect((input[3] as any).checked).toBe(false);
    });


    it('check "pepsi" values are set', async () => {
        const app: App = ContainerClasses.get(App);
        app.selectedProductString = '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(false);
        expect((input[2] as any).checked).toBe(true);
        expect((input[3] as any).checked).toBe(false);
    });


    it('check "fanta" values are set', async () => {
        const app: App = ContainerClasses.get(App);
        app.selectedProductString = '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(false);
        expect((input[3] as any).checked).toBe(true);
    });


    it('check "unknow" dont edit value', async () => {
        const app: App = ContainerClasses.get(App);
        app.selectedProductString = 'unknown';
        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: unknown');
        expect((input[0] as any).checked).toBe(false);
        expect((input[1] as any).checked).toBe(false);
        expect((input[2] as any).checked).toBe(false);
        expect((input[3] as any).checked).toBe(true);
    });


    it('sett back to null', async () => {
        const app: App = ContainerClasses.get(App);
        app.selectedProductString = null;
        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(true);
        expect((input[1] as any).checked).toBe(false);
        expect((input[2] as any).checked).toBe(false);
        expect((input[3] 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[1]).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(false);
        expect((input[1] as any).checked).toBe(true);
        expect((input[2] as any).checked).toBe(false);
        expect((input[3] 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[2]).dispatchEvent(event);
        await DOM.waitFor(0);
        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(false);
        expect((input[2] as any).checked).toBe(true);
        expect((input[3] as any).checked).toBe(false);
    });


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

        const input = DOM.document.getElementsByClassName('inputs');
        const event = new (DOM.window as any).CustomEvent('click');
        (input[3]).dispatchEvent(event);
        await DOM.waitFor(0);
        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(false);
        expect((input[3] as any).checked).toBe(true);
    });


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

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



});