From fa859fcaad3c555373e29b23db670441a77ed226 Mon Sep 17 00:00:00 2001 From: maximkudriavtsev Date: Thu, 6 Feb 2020 13:53:17 +0300 Subject: [PATCH] Add old tests --- js/renovation/widget.tsx | 59 ++------- testing/jest/widget.tests.tsx | 238 +++++++++++++--------------------- 2 files changed, 105 insertions(+), 192 deletions(-) diff --git a/js/renovation/widget.tsx b/js/renovation/widget.tsx index 3ed81906cec1..74e8864fb3d3 100644 --- a/js/renovation/widget.tsx +++ b/js/renovation/widget.tsx @@ -16,6 +16,13 @@ import { isFakeClickEvent } from '../events/utils'; import { hasWindow } from '../core/utils/window'; import Action from '../core/action'; +const isVisible = (element) => { + if (!element.nodeType) return true; + return !!(element.offsetWidth + || element.offsetHeight + || element.getClientRects().length); +}; + const getStyles = ({ width, height, ...other }) => { const computedWidth = typeof width === 'function' ? width() : width; const computedHeight = typeof height === 'function' ? height() : height; @@ -186,62 +193,24 @@ export default class Widget { @Ref() widgetRef!: HTMLDivElement; - // @Effect() - // visibilityChangedEffect() { - // const isVisible = () => { - // return this.widgetRef?.offsetParent !== null; - // // return Number(width) > 0 && Number(height) > 0; - // }; - // const checkVisibilityChanged = (action) => { - // if (isVisible()) { - // if (action === 'hiding' && !this._isHidden) { - // this._visibilityChanged!(false); - // this._isHidden = true; - // } else if (action === 'shown' && this._isHidden) { - // this._isHidden = false; - // this._visibilityChanged!(true); - // } - // } - // }; - - // checkVisibilityChanged(this.visible ? 'shown' : 'hiding'); - // } - @Effect() visibilityEffect() { const namespace = `${this.name}VisibilityChange`; - if (this._visibilityChanged || true /*&& hasWindow() */) { - // const isVisible = () => { - // console.log(this.widgetRef?.offsetParent); - // return this.widgetRef?.offsetParent !== null; - // // const { width, height } = this.widgetRef?.style; - // // return Number(width) > 0 && Number(height) > 0; - // }; - // const checkVisibilityChanged = (action) => { - - // if (true) { // ????? - // if (action === 'hiding' && !this._isHidden) { - // this._visibilityChanged!(false); - // this._isHidden = true; - // } else if (action === 'shown' && this._isHidden) { - // this._isHidden = false; - // this._visibilityChanged!(true); - // } - // } - // }; - + if (this._visibilityChanged && hasWindow()) { + console.log(`_isHidden - ${this._isHidden}`); + const isHidden = this._isHidden; visibility.on(this.widgetRef, () => { - console.log(`isHidden - ${this._isHidden}, action - hidden`); - if (this._isHidden) { + console.log(`shown _isHidden - ${this._isHidden}`); + if (isHidden && isVisible(this.widgetRef)) { this._visibilityChanged!(true); this._isHidden = false; } }, () => { - console.log(`isHidden - ${this._isHidden}, action - shown`); - if (!this._isHidden) { + console.log(`HIDDEN _isHidden - ${this._isHidden}`); + if (!isHidden && isVisible(this.widgetRef)) { this._isHidden = true; this._visibilityChanged!(false); } diff --git a/testing/jest/widget.tests.tsx b/testing/jest/widget.tests.tsx index e36c94beb2ab..c6bcd36f7d80 100644 --- a/testing/jest/widget.tests.tsx +++ b/testing/jest/widget.tests.tsx @@ -1,5 +1,6 @@ import Widget from '../../js/renovation/widget.p.js'; import { h } from 'preact'; +import { act } from 'preact/test-utils'; import { clear as clearEventHandlers, emit, fakeClickEvent, EVENT } from './utils/events-mock'; import { shallow, mount } from 'enzyme'; @@ -344,185 +345,128 @@ describe('Widget', () => { }); describe.only('Events', () => { + Element.prototype.getBoundingClientRect = () => {}; + jest.spyOn(Element.prototype, 'getClientRects').mockImplementation(() => ({ + length: 1, + })); + + let hidingFired = 0; + let shownFired = 0; + + const _visibilityChanged = (visible) => { + visible ? shownFired += 1 : hidingFired += 1; + }; + + beforeEach(() => { + hidingFired = 0; + shownFired = 0; + }); + describe('visibilityChanged', () => { it('is called on dxhiding and dxshown events and special css class is attached', () => { - let hidingFired = 0; - let shownFired = 0; - const _visibilityChanged = (visible) => { - if (visible) { - shownFired += 1; - } else { - hidingFired += 1; - } - }; - - const widget = mountRender({ _visibilityChanged }); + const widget = render({ _visibilityChanged }); - // expect(widget.hasClass('dx-visibility-change-handler')).toBe(true); + expect(widget.find('.dx-visibility-change-handler').exists()).toBe(true); - emit(EVENT.hiding); // hide! - // widget.setProps({ width: 0 }); + emit(EVENT.hiding); + widget.setProps({}); expect(hidingFired).toBe(1); expect(shownFired).toBe(0); - // $element.trigger('dxhiding').hide(); - // assert.equal(hidingFired, 1, 'hiding was fired'); - // assert.equal(shownFired, 0, 'shown was not fired'); - emit(EVENT.shown); // show! + emit(EVENT.shown); + widget.setProps({}); expect(hidingFired).toBe(1); expect(shownFired).toBe(1); - // $element.show().trigger('dxshown'); - // assert.equal(hidingFired, 1, 'hiding was fired only once'); - // assert.equal(shownFired, 1, 'shown was fired'); - }); - - /** - QUnit.test('_visibilityChanged is called on dxhiding and dxshown events and special css class is attached', function(assert) { - let hidingFired = 0; - let shownFired = 0; - - const TestComponent = this.TestComponent.inherit({ - NAME: 'TestComponent', - - _visibilityChanged(visible) { - if(visible) { - shownFired++; - } else { - hidingFired++; - } - } }); - const $element = $('#component'); - new TestComponent($element); + it('should have many subscriptions without crashing', () => { + const widget1 = render({ _visibilityChanged, name: 'TestComponent1' }); + const widget2 = render({ _visibilityChanged, name: 'TestComponent2' }); - assert.ok($element.hasClass('dx-visibility-change-handler'), 'special css class attached'); + emit(EVENT.hiding); + widget1.setProps({}); + widget2.setProps({}); - $element.trigger('dxhiding').hide(); - assert.equal(hidingFired, 1, 'hiding was fired'); - assert.equal(shownFired, 0, 'shown was not fired'); + emit(EVENT.shown); + widget1.setProps({}); + widget2.setProps({}); - $element.show().trigger('dxshown'); - assert.equal(hidingFired, 1, 'hiding was fired only once'); - assert.equal(shownFired, 1, 'shown was fired'); - }); - - QUnit.test('visibility change subscriptions should not clash', function(assert) { - let hidingFired = 0; - let shownFired = 0; - - const visibilityChanged = visible => { - visible ? shownFired++ : hidingFired++; - }; - - const TestComponent1 = this.TestComponent.inherit({ - NAME: 'TestComponent1', - _visibilityChanged: visibilityChanged + expect(hidingFired).toBe(2); + expect(shownFired).toBe(2); }); - const TestComponent2 = this.TestComponent.inherit({ - NAME: 'TestComponent2', - _visibilityChanged: visibilityChanged - }); - - const $element = $('#component'); - new TestComponent1($element); - new TestComponent2($element); - - $element.trigger('dxhiding').hide(); - $element.show().trigger('dxshown'); + fit('works optimally if component is visible on initializing', () => { + const widget = render({ _visibilityChanged }); - assert.equal(hidingFired, 2, 'hidden fired for both components'); - assert.equal(shownFired, 2, 'shown fired for both components'); - }); + // hidden/shown is not fired initially + expect(hidingFired).toBe(0); + expect(shownFired).toBe(0); - QUnit.test('visibility change handling works optimally (initially visible)', function(assert) { - let hidingFired = 0; - let shownFired = 0; + // shown is not fired if element is visible + act(() => { + emit(EVENT.shown); + }); + widget.update(); + // widget.setProps({}); + expect(shownFired).toBe(0); - const visibilityChanged = visible => { - visible ? shownFired++ : hidingFired++; - }; + act(() => { + emit(EVENT.hiding); + }); + widget.update(); + // widget.setProps({}); + expect(hidingFired).toBe(1); - const TestComponent = this.TestComponent.inherit({ - NAME: 'TestComponent1', - _visibilityChanged: visibilityChanged + act(() => { + emit(EVENT.hiding); + }); + widget.update(); + // widget.setProps({}); + expect(hidingFired).toBe(1); }); - const $element = $('#component'); - new TestComponent($element); - - assert.equal(hidingFired, 0, 'hidden is not fired initially'); - assert.equal(shownFired, 0, 'shown is not fired initially'); - - $element.show().trigger('dxshown'); - assert.equal(shownFired, 0, 'shown is not fired if element is visible'); - - $element.trigger('dxhiding').hide(); - assert.equal(hidingFired, 1, 'hiding is fired for the first time'); + it('works optimally if component is hidden on initializing', () => { + const widget = mountRender({ _visibilityChanged }); + widget.setState({ _isHidden: true }); - $element.trigger('dxhiding').hide(); - assert.equal(hidingFired, 1, 'hiding is not fired for the second time'); - }); + // hidden/shown is not fired initially + expect(hidingFired).toBe(0); + expect(shownFired).toBe(0); - QUnit.test('visibility change handling works optimally (initially hidden)', function(assert) { - let hidingFired = 0; - let shownFired = 0; + // hiding is not fired if element is hidden + emit(EVENT.hiding); + widget.setProps({}); + expect(shownFired).toBe(0); - const visibilityChanged = visible => { - visible ? shownFired++ : hidingFired++; - }; + emit(EVENT.shown); + widget.setProps({}); + expect(shownFired).toBe(1); - const TestComponent = this.TestComponent.inherit({ - NAME: 'TestComponent1', - _visibilityChanged: visibilityChanged + emit(EVENT.shown); + widget.setProps({}); + expect(shownFired).toBe(1); }); - const $element = $('#component').hide(); - new TestComponent($element); - - assert.equal(hidingFired, 0, 'hidden is not fired initially'); - assert.equal(shownFired, 0, 'shown is not fired initially'); - - $element.trigger('dxhiding').hide(); - assert.equal(shownFired, 0, 'hiding is not fired if element is hidden'); - - $element.show().trigger('dxshown'); - assert.equal(shownFired, 1, 'shown is fired for the first time'); + it('should not calls with hidden parent', () => { + const widget = mount(( +
+ +
+ )); - $element.show().trigger('dxshown'); - assert.equal(shownFired, 1, 'shown is not fired for the second time'); - }); - - QUnit.test('visibility change handling works with hidden parent', function(assert) { - let hidingFired = 0; - let shownFired = 0; + // hidden/shown is not fired initially + expect(hidingFired).toBe(0); + expect(shownFired).toBe(0); - const visibilityChanged = visible => { - visible ? shownFired++ : hidingFired++; - }; + emit(EVENT.shown); + widget.setProps({}); + expect(shownFired).toBe(1); - const TestComponent = this.TestComponent.inherit({ - NAME: 'TestComponent1', - _visibilityChanged: visibilityChanged + // $parent.show(); + emit(EVENT.shown); + widget.setProps({}); + expect(shownFired).toBe(1); }); - - const $parent = $('#component').hide(); - const $component = $('
').hide().appendTo($parent); - - new TestComponent($component); - - assert.equal(hidingFired, 0, 'hidden is not fired initially'); - assert.equal(shownFired, 0, 'shown is not fired initially'); - - $component.show().triggerHandler('dxshown'); - assert.equal(shownFired, 0, 'shown is not fired since parent is hidden'); - - $parent.show(); - $component.triggerHandler('dxshown'); - assert.equal(shownFired, 1, 'shown is fired since parent is shown'); - }); - */ }); });