Skip to content

Commit

Permalink
Add old tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaximKudriavtsev
MaximKudriavtsev committed Feb 6, 2020
1 parent c5d3509 commit fa859fc
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 192 deletions.
59 changes: 14 additions & 45 deletions js/renovation/widget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down
238 changes: 91 additions & 147 deletions testing/jest/widget.tests.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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((
<div>
<Widget _visibilityChanged={_visibilityChanged} />
</div>
));

$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 = $('<div>').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');
});
*/
});
});

Expand Down

0 comments on commit fa859fc

Please sign in to comment.