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

simple framework

import { DOM, IBindingContext, createBindingContext } from 'mframejs';
import { JSDOM } from 'jsdom';
import { ValueAttribute } from '../../../src/mframejs/attribute/valueAttribute';



let attribute: ValueAttribute, bindingContext: IBindingContext;

describe('valueAttribute', () => {


    beforeAll(() => {
        const window = new JSDOM('').window;
        DOM.setConfig(window, window.document);
        DOM.document.body.innerHTML = '<input value.bind="background">';
        attribute = new ValueAttribute();
        bindingContext = createBindingContext({
            background: 'blue'
        });
        attribute.$bindingContext = bindingContext;
        attribute.$element = (DOM.document as any).body.firstChild;
        attribute.$attribute = (DOM.document as any).body.firstChild.getAttributeNode('value.bind');

    });


    it('call created', () => {
        expect(attribute.created()).toBe(undefined);
    });


    it('call created', () => {
        expect(attribute.attached()).toBe(undefined);
    });


    it('check if init value is set', () => {
        const backgroundColor = (DOM.document as any).body.firstChild.value;
        expect(backgroundColor).toBe('blue');
    });


    it('bindingContext.$context.xxx to "green"', async () => {
        bindingContext.$context.background = 'green';
        await DOM.waitFor(0);
        const backgroundColor = (DOM.document as any).body.firstChild.value;
        expect(backgroundColor).toBe('green');

    });


    it('bindingContext.$context.xxx to null', async () => {
        bindingContext.$context.background = null;
        await DOM.waitFor(0);
        const backgroundColor = (DOM.document as any).body.firstChild.value;
        expect(backgroundColor).toBe('');

    });


    it('bindingContext.$context.xxx to undefined', async () => {
        bindingContext.$context.background = null;
        await DOM.waitFor(0);
        const backgroundColor = (DOM.document as any).body.firstChild.value;
        expect(backgroundColor).toBe('');

    });


    it('bindingContext.$context.xxx to "green"', async () => {
        bindingContext.$context.background = 'green';
        await DOM.waitFor(0);
        const backgroundColor = (DOM.document as any).body.firstChild.value;
        expect(backgroundColor).toBe('green');
    });


    it('value to blue, trigger input(check bindingContext)', async () => {
        (DOM.document as any).body.firstChild.value = 'blue';
        const event = new (DOM.window as any).CustomEvent('input');
        (DOM.document as any).body.firstChild.dispatchEvent(event);
        await DOM.waitFor(0);

        expect(bindingContext.$context.background).toBe('blue');
    });


    it('value to test1, check if change trigger updates (error if it does)', async () => {
        (DOM.document as any).body.firstChild.value = 'test1';
        const event = new (DOM.window as any).CustomEvent('change');
        (DOM.document as any).body.firstChild.dispatchEvent(event);

        await DOM.waitFor(0);
        expect(bindingContext.$context.background).toBe('blue');
    });


    it('value to test2, check if change trigger updates (error if it does)', async () => {
        (DOM.document as any).body.firstChild.value = 'test2';
        const event = new (DOM.window as any).CustomEvent('change');
        (DOM.document as any).body.firstChild.dispatchEvent(event);
        await DOM.waitFor(0);

        expect(bindingContext.$context.background).toBe('blue');
    });


    it('trigger input(check bindingContext)', async () => {

        const event = new (DOM.window as any).CustomEvent('input');
        (DOM.document as any).body.firstChild.dispatchEvent(event);
        await DOM.waitFor(0);
        expect(bindingContext.$context.background).toBe('test2');
    });


    it('detach', async () => {
        attribute.detached();
    });


    it('check everything is detached', async () => {
        (DOM.document as any).body.firstChild.value = 'wow';
        const event = new (DOM.window as any).CustomEvent('input');
        (DOM.document as any).body.firstChild.dispatchEvent(event);
        await DOM.waitFor(0);

        expect(bindingContext.$context.background).toBe('test2');
    });



});