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

let tempNode: any;
let repeatAttribute: RepeatAttribute;
let bindingContext: IBindingContext;


describe('repeatAttribute "x of number"', () => {


    beforeAll(() => {
        const window = new JSDOM('').window;
        DOM.setConfig(window, window.document);
        tempNode = DOM.document.createElement('div');
        tempNode.setAttribute('repeat.for', 'a of number');
        tempNode.innerHTML = 'A${a}A';
        repeatAttribute = new RepeatAttribute();
        bindingContext = createBindingContext({
            number: 10
        });
        repeatAttribute.$bindingContext = bindingContext;
        repeatAttribute.$element = tempNode;
        repeatAttribute.$attribute = tempNode.getAttributeNode('repeat.for');
        repeatAttribute.$controller = ({
            getView() {
                return new ViewController(null, null);
            }
        } as any);

    });



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



    it('call attached', () => {
        DOM.document.body.appendChild(tempNode);
        expect(repeatAttribute.attached()).toBe(undefined);
    });



    it('test elements', async () => {

        expect(DOM.document.body.children.length).toBe(10);
    });



    it('test elements content', () => {
        expect(DOM.document.body.children[0].innerHTML).toBe('A1A');
        expect(DOM.document.body.children[5].innerHTML).toBe('A6A');
        expect(DOM.document.body.children[9].innerHTML).toBe('A10A');
    });



    it('set to 20', async () => {
        bindingContext.$context.number = 20;

        expect(DOM.document.body.children.length).toBe(20);
    });



    it('set to 2', async () => {
        bindingContext.$context.number = 2;

        expect(DOM.document.body.children.length).toBe(2);
    });



    it('set to 0', async () => {
        bindingContext.$context.number = 0;

        expect(DOM.document.body.children.length).toBe(0);
    });



    it('set to 100', async () => {
        bindingContext.$context.number = 100;

        expect(DOM.document.body.children.length).toBe(100);
    });



    it('set to 0', async () => {
        bindingContext.$context.number = 0;

        expect(DOM.document.body.children.length).toBe(0);
    });


    it('set to 100', async () => {
        bindingContext.$context.number = 100;

        expect(DOM.document.body.children.length).toBe(100);
    });



    it('set to null', async () => {
        bindingContext.$context.number = null;

        expect(DOM.document.body.children.length).toBe(0);
    });


    it('set to 100', async () => {
        bindingContext.$context.number = 100;

        expect(DOM.document.body.children.length).toBe(100);
    });


    it('set to undefined', async () => {
        bindingContext.$context.number = undefined;

        expect(DOM.document.body.children.length).toBe(0);
    });


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


    it('check i removed all', async () => {

        expect(DOM.document.body.children.length).toBe(0);
    });


});