From 7c5b50ca43056d3f49c84dcaa0479cad33468dbd Mon Sep 17 00:00:00 2001 From: Andrey Ignatovskiy <43685423+LazyLahtak@users.noreply.github.com> Date: Tue, 3 Mar 2020 08:17:21 +0300 Subject: [PATCH] Renovation: add onContentReady property to button and widget (#12174) --- js/renovation/button.tsx | 1 + js/renovation/dist/button.j.jsx | 4 +++ js/renovation/dist/widget.j.jsx | 7 ----- js/renovation/widget.tsx | 12 +++++++- testing/tests/Renovation/button.tests.js | 35 +++++++++++++++--------- 5 files changed, 38 insertions(+), 21 deletions(-) diff --git a/js/renovation/button.tsx b/js/renovation/button.tsx index e7440ef2dd31..d150adba50e7 100644 --- a/js/renovation/button.tsx +++ b/js/renovation/button.tsx @@ -94,6 +94,7 @@ export const viewFunction = (viewModel: ButtonViewModel) => { hint={viewModel.hint} hoverStateEnabled={viewModel.hoverStateEnabled} onActive={viewModel.onActive} + onContentReady={viewModel.onContentReady} onClick={viewModel.onWidgetClick} onInactive={viewModel.onInactive} onKeyPress={viewModel.onWidgetKeyPress} diff --git a/js/renovation/dist/button.j.jsx b/js/renovation/dist/button.j.jsx index 8bba939b1bfd..0f85b353b2d8 100644 --- a/js/renovation/dist/button.j.jsx +++ b/js/renovation/dist/button.j.jsx @@ -53,6 +53,10 @@ class Button extends Widget { } }); + props.onContentReady = this._createActionByOption('onContentReady', { + excludeValidators: ['disabled', 'readOnly'] + }); + return props; } diff --git a/js/renovation/dist/widget.j.jsx b/js/renovation/dist/widget.j.jsx index a26c4ad4d28c..f05d6d32eec4 100644 --- a/js/renovation/dist/widget.j.jsx +++ b/js/renovation/dist/widget.j.jsx @@ -10,14 +10,7 @@ class Widget extends WidgetBase { getProps(isFirstRender) { const props = super.getProps(isFirstRender); - props.onClick = this._createActionByOption('onClick', { - excludeValidators: ['readOnly'], - afterExecute: () => { - const { useSubmitBehavior } = this.option(); - useSubmitBehavior && setTimeout(() => this._submitInput().click()); - } - }); return props; } diff --git a/js/renovation/widget.tsx b/js/renovation/widget.tsx index 1dd78a5709d7..696195630973 100644 --- a/js/renovation/widget.tsx +++ b/js/renovation/widget.tsx @@ -93,6 +93,7 @@ export const viewModelFunction = ({ tabIndex, visible, width, + onContentReady, onVisibilityChange, }, @@ -117,6 +118,7 @@ export const viewModelFunction = ({ disabled, focusStateEnabled, hoverStateEnabled, + onContentReady, styles, tabIndex: focusStateEnabled && !disabled && tabIndex, title: hint, @@ -160,7 +162,8 @@ export class WidgetInput { @OneWay() hoverStateEnabled?: boolean = false; @OneWay() name?: string = ''; @OneWay() onActive?: (e: any) => any = (() => undefined); - @Event() onClick?: (e: any) => void = (() => { }); + @Event() onClick?: (e: any) => void = (() => {}); + @Event() onContentReady?: (e: any) => any = (() => {}); @OneWay() onDimensionChanged?: () => any = (() => undefined); @OneWay() onInactive?: (e: any) => any = (() => undefined); @OneWay() onKeyboardHandled?: (args: any) => any | undefined; @@ -254,6 +257,13 @@ export default class Widget extends JSXComponent { return () => dxClick.off(this.widgetRef, { namespace }); } + @Effect() + contentReadyEffect() { + const { onContentReady } = this.props; + + onContentReady?.({}); + } + @Effect() focusEffect() { const { disabled, focusStateEnabled, name } = this.props; diff --git a/testing/tests/Renovation/button.tests.js b/testing/tests/Renovation/button.tests.js index c2f795806165..cc32d6467477 100644 --- a/testing/tests/Renovation/button.tests.js +++ b/testing/tests/Renovation/button.tests.js @@ -300,8 +300,8 @@ QUnit.module('regressions', { }); QUnit.module('contentReady', {}, () => { - // TODO - QUnit.skip('T355000 - the \'onContentReady\' action should be fired after widget is rendered entirely', function(assert) { + QUnit.test('T355000 - the \'onContentReady\' action should be fired after widget is rendered entirely', function(assert) { + const done = assert.async(); const buttonConfig = { text: 'Test button', icon: 'trash' @@ -341,6 +341,7 @@ QUnit.module('contentReady', {}, () => { $('#button').Button($.extend({}, buttonConfig, { onContentReady(e) { assert.ok(areElementsEqual($firstButton, $(e.element)), 'rendered widget and widget with fired action are equals'); + done(); } })); }); @@ -735,8 +736,8 @@ QUnit.module('templates', () => { }); QUnit.module('events subscriptions', () => { - // TODO - QUnit.skip('click', function(assert) { + QUnit.test('click', function(assert) { + const done = assert.async(); const clickHandler = sinon.spy(); const $button = $('#button').Button({ text: 'test' @@ -745,28 +746,36 @@ QUnit.module('events subscriptions', () => { button.on('click', clickHandler); - $button.trigger('dxclick'); + setTimeout(() => { + $button.trigger('dxclick'); - assert.ok(clickHandler.calledOnce, 'Handler should be called'); - const params = clickHandler.getCall(0).args[0]; - assert.ok(params, 'Event params should be passed'); - assert.ok(params.event, 'Event should be passed'); - assert.ok(params.validationGroup, 'validationGroup should be passed'); + setTimeout(() => { + assert.ok(clickHandler.calledOnce, 'Handler should be called'); + const params = clickHandler.getCall(0).args[0]; + assert.ok(params, 'Event params should be passed'); + assert.ok(params.event, 'Event should be passed'); + // TODO + // assert.ok(params.validationGroup, 'validationGroup should be passed'); + + done(); + }, 100); + }, 100); }); - // TODO - QUnit.skip('contentReady', function(assert) { + QUnit.test('contentReady', function(assert) { + const done = assert.async(); assert.expect(3); const button = $('#button').Button({ text: 'test' }).Button('instance'); + // NOTE: now we shouldn't call repaint, because we call onContentReady async button.on('contentReady', (e) => { assert.ok(e.component, 'Component info should be passed'); assert.ok(e.element, 'Element info should be passed'); assert.strictEqual($(e.element).text(), 'test', 'Text is rendered to the element'); + done(); }); - button.repaint(); }); });