import ShamUI, { DI, Widget } from '../src/shamUI';
import { onEvent } from './helpers';

beforeEach( () => {
    document.querySelector( 'body' ).innerHTML = [
        '<span id="label-1"></span>',
        '<span id="label-2"></span>'
    ].join( '\n' );
} );

afterEach( () => {
    document.querySelector( 'body' ).innerHTML = '';
} );

function onWidgetRenderComplete( widgetId, callback ) {
    return new Promise( resolve => {
        DI.resolve( 'sham-ui' ).render.one( `RenderComplete[${widgetId}]`, () => {
            callback();
            resolve();
        } );
    } );
}

function expectLabelText( selector, expected ) {
    expect( document.querySelector( selector ).textContent ).toBe( expected );
}

class Label extends Widget {
    html() {
        return this.ID;
    }
}

it( 'dynamic widget rendered', async() => {
    expect.assertions( 2 );
    DI.bind( 'widget-binder', () => {
        new Label( '#label-1', 'label-1' );
        setTimeout( () => {
            new Label( '#label-2', 'label-2', {
                afterRegister() {
                    this.UI.render.ONLY_IDS( this.ID );
                }
            } );
        }, 20 );
    } );
    await onEvent( 'RenderComplete[label-2]' );
    expectLabelText( '#label-1', 'label-1' );
    expectLabelText( '#label-2', 'label-2' );
} );

it( 'registration on rendering', async() => {
    expect.assertions( 4 );
    DI.bind( 'widget-binder', () => {
        class Container extends Widget {
            html() {
                new Label( '#label-2', 'label-2', {
                    afterRegister() {
                        this.UI.render.ONLY_IDS( this.ID );
                    }
                } );
                return this.ID;
            }
        }
        new Container( '#label-1', 'label-1' );
    } );
    const UI = new ShamUI();
    const label1Rendered = onWidgetRenderComplete( 'label-1', () => {
        expectLabelText( '#label-2', 'label-2' );
        expectLabelText( '#label-1', 'label-1' );
    } );
    const label2Rendered = onWidgetRenderComplete( 'label-2', () => {
        expectLabelText( '#label-2', 'label-2' );
        expectLabelText( '#label-1', '' );
    } );
    UI.render.ALL();
    await Promise.all( [ label1Rendered, label2Rendered ] );
} );

@@ -20,16 +20,25 @@
 , Widget
+, options
  %7D from 
@@ -2262,16 +2262,1418 @@
 dered %5D );%0A%7D );%0A
+%0Ait( 'registration on rendering (render text from options)', async() =%3E %7B%0A    expect.assertions( 4 );%0A    DI.bind( 'widget-binder', () =%3E %7B%0A        class InnerLabel extends Widget %7B%0A            @options parentWidgetId = null;%0A            html() %7B%0A                return %60$%7Bthis.options.parentWidgetId%7D =%3E $%7Bthis.ID%7D%60;%0A            %7D%0A        %7D%0A        class Container extends Widget %7B%0A            @options get widgetID() %7B%0A                return this.options.uniqID;%0A            %7D%0A            html() %7B%0A                new InnerLabel( '#label-2', 'label-2', %7B%0A                    parentWidgetId: this.options.widgetID,%0A                    afterRegister() %7B%0A                        this.UI.render.ONLY_IDS( this.ID );%0A                    %7D%0A                %7D );%0A                return this.ID;%0A            %7D%0A        %7D%0A        new Container( '#label-1', 'label-1', %7B%0A            uniqID: 'label-1'%0A        %7D );%0A    %7D );%0A    const UI = new ShamUI();%0A    const label1Rendered = onWidgetRenderComplete( 'label-1', () =%3E %7B%0A        expectLabelText( '#label-2', 'label-1 =%3E label-2' );%0A        expectLabelText( '#label-1', 'label-1' );%0A    %7D );%0A    const label2Rendered = onWidgetRenderComplete( 'label-2', () =%3E %7B%0A        expectLabelText( '#label-2', 'label-1 =%3E label-2' );%0A        expectLabelText( '#label-1', '' );%0A    %7D );%0A    UI.render.ALL();%0A    await Promise.all( %5B label1Rendered, label2Rendered %5D );%0A%7D );%0A

Add test for dynamic registration (render text from options)