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

let attribute: TriggerEventsAttribute, bindingContext: IBindingContext;

describe('triggerEventsAttribute', () => {


    beforeAll(() => {
        const window = new JSDOM('').window;
        DOM.setConfig(window, window.document);
        DOM.document.body.innerHTML = '<button click.trigger="testFn(1)"></button>';
        attribute = new TriggerEventsAttribute();
        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.trigger');

    });


    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();
    });



});