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


let attribute: DelgateEventsAttribute, bindingContext: IBindingContext;

describe('delgateEventsAttribute', () => {


    beforeAll(() => {
        const window = new JSDOM('').window;
        DOM.setConfig(window, window.document);
        DOM.document.body.innerHTML = '<button click.delegate="testFn(1)"></button>';
        attribute = new DelgateEventsAttribute();
        bindingContext = createBindingContext({
            testFn: function (x: any) {
                this.var = x;
            }
        });

        attribute.$bindingContext = bindingContext;
        attribute.$element = (DOM.document as any).body.firstChild;
        attribute.$attribute = (DOM.document as any).body.firstChild.getAttributeNode('click.delegate');

    });


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


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


    it('test if value changes when click event happen', async () => {
        const event = new (DOM.window as any).CustomEvent('click');
        ((DOM.document as any).body.firstChild).dispatchEvent(event);

        expect(bindingContext.$context.var).toBe(1);
    });



    it('test change value and rerun', async () => {
        (<any>attribute).value = 'testFn(2)';
        const event = new (DOM.window as any).CustomEvent('click');
        ((DOM.document as any).body.firstChild).dispatchEvent(event);

        expect(bindingContext.$context.var).toBe(2);
    });


    it('test change value and rerun', async () => {
        (<any>attribute).value = 'testFn("2")';
        const event = new (DOM.window as any).CustomEvent('click');
        ((DOM.document as any).body.firstChild).dispatchEvent(event);

        expect(bindingContext.$context.var).toBe('2');
    });



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



});