import { DOM, IBindingContext, createBindingContext, ViewController } from 'mframejs';
import { JSDOM } from 'jsdom';
import { IfAttribute } from '../../../src/mframejs/attribute/ifAttribute';


let attribute: IfAttribute, bindingContext: IBindingContext, el: HTMLElement;

describe('triggerEventsAttribute', () => {


    beforeAll(() => {
        const window = new JSDOM('').window;
        DOM.setConfig(window, window.document);
        el = DOM.document.createElement('DIV');
        el.setAttribute('if.bind', 'test');
        el.innerHTML = '${test}';
        attribute = new IfAttribute();
        bindingContext = createBindingContext({
            setFalse: function () {
                this.test = false;
            },
            setTrue: function () {
                this.test = true;
            }
        });

        attribute.$bindingContext = bindingContext;
        attribute.$element = el;
        attribute.$attribute = el.getAttributeNode('if.bind');
        attribute.$controller = ({
            getView() {
                return new ViewController(null, null);
            }
        } as any);

    });


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


    it('attached created', () => {
        DOM.document.body.appendChild(el);
        expect(attribute.attached()).toBe(undefined);
        expect(DOM.document.body.innerHTML).toBe('<!--mf-if-bind-->');
    });


    it('test if set to true', async () => {
        bindingContext.$context.setTrue();

        expect(DOM.document.body.innerHTML).toBe('<div>true</div><!--mf-if-bind-->');
    });



    it('test if set to false', async () => {
        bindingContext.$context.setFalse();

        expect(DOM.document.body.innerHTML).toBe('<!--mf-if-bind-->');
    });


    it('test if set to true', async () => {
        bindingContext.$context.setTrue();

        expect(DOM.document.body.innerHTML).toBe('<div>true</div><!--mf-if-bind-->');
    });



    it('test if set to false', async () => {
        bindingContext.$context.setFalse();

        expect(DOM.document.body.innerHTML).toBe('<!--mf-if-bind-->');
    });


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



});