b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
1102 lines
33 KiB
JavaScript
Executable file
1102 lines
33 KiB
JavaScript
Executable file
/* global MocksHelper */
|
|
|
|
'use strict';
|
|
|
|
requireApp('system/shared/js/shrinking_ui.js');
|
|
requireApp('system/test/unit/mock_orientation_manager.js');
|
|
requireApp('system/test/unit/mock_app_window.js');
|
|
|
|
var mocksForshrinkingUI = new MocksHelper([
|
|
'AppWindow',
|
|
'OrientationManager'
|
|
]).init();
|
|
|
|
suite('system/shrinkingUI', function() {
|
|
var shrinkingUI;
|
|
mocksForshrinkingUI.attachTestHelpers();
|
|
|
|
var fakeApp;
|
|
var fakeAppConfig = {
|
|
url: 'app://www.fake/index.html',
|
|
manifest: {},
|
|
manifestURL: 'app://wwww.fake/ManifestURL',
|
|
origin: 'app://www.fake',
|
|
instanceID: 'instanceID'
|
|
};
|
|
|
|
setup(function() {
|
|
fakeApp = new window.AppWindow(fakeAppConfig);
|
|
|
|
fakeApp.element = document.createElement('div');
|
|
var fakeParent = document.createElement('div');
|
|
fakeParent.appendChild(fakeApp.element);
|
|
shrinkingUI = new window.ShrinkingUI(fakeApp.element,
|
|
fakeApp.element.parentNode);
|
|
});
|
|
|
|
function createTouchEvent(type, target, x, y) {
|
|
var touch = document.createTouch(window, target, 1, x, y, x, y);
|
|
var touchList = document.createTouchList(touch);
|
|
|
|
var evt = document.createEvent('TouchEvent');
|
|
evt.initTouchEvent(type, true, true, window,
|
|
0, false, false, false, false,
|
|
touchList, touchList, touchList);
|
|
return evt;
|
|
}
|
|
|
|
test('Test Debug function', function() {
|
|
var oldDebug = shrinkingUI.DEBUG;
|
|
|
|
var stubDump = this.sinon.stub(window, 'dump');
|
|
|
|
shrinkingUI.DEBUG = true;
|
|
var msg = 'somemsg';
|
|
var opt = {'opt': 'optopt'};
|
|
shrinkingUI.debug(msg, opt);
|
|
|
|
assert.isTrue(stubDump.calledWith('[DEBUG] ShrinkingUI: somemsg' +
|
|
JSON.stringify(opt)));
|
|
|
|
stubDump.reset();
|
|
|
|
shrinkingUI.DEBUG = false;
|
|
shrinkingUI.debug(msg, opt);
|
|
assert.isFalse(stubDump.called);
|
|
|
|
shrinkingUI.DEBUG = oldDebug;
|
|
});
|
|
|
|
test('Start', function() {
|
|
var stubStartTilt = this.sinon.stub(shrinkingUI, 'startTilt');
|
|
shrinkingUI.start();
|
|
assert.isTrue(stubStartTilt.calledOnce);
|
|
});
|
|
|
|
test('Response to hierachy event', function() {
|
|
shrinkingUI.state.shrinking = true;
|
|
assert.isTrue(shrinkingUI.respondToHierarchyEvent({ type: 'home' }),
|
|
'should return true if receive home event from hierachy and ' +
|
|
'it is active');
|
|
assert.isTrue(shrinkingUI.respondToHierarchyEvent({ type: 'holdhome' }),
|
|
'should return true if receive holdhome event from hierachy and ' +
|
|
'it is active');
|
|
shrinkingUI.state.shrinking = false;
|
|
assert.isFalse(shrinkingUI.respondToHierarchyEvent({ type: 'home' }),
|
|
'should return false if receive home event from hierachy and it is not' +
|
|
' active');
|
|
assert.isFalse(shrinkingUI.respondToHierarchyEvent({ type: 'holdhome' }),
|
|
'should return false if receive holdhome event from hierachy and it is' +
|
|
' not active');
|
|
});
|
|
|
|
test('Handle "shrinking-receiving" event', function() {
|
|
shrinkingUI.start();
|
|
var evt = {
|
|
type: 'shrinking-receiving'
|
|
};
|
|
var stubReceivingEffects =
|
|
this.sinon.stub(shrinkingUI, '_receivingEffects');
|
|
shrinkingUI.handleEvent(evt);
|
|
assert.isTrue(stubReceivingEffects.called);
|
|
});
|
|
|
|
test('Shrinking UI Start', function(done) {
|
|
var fakeParent = document.createElement('div');
|
|
fakeParent.appendChild(fakeApp.element);
|
|
// test for state = true (not going to start actually)
|
|
var stubActive = this.sinon.stub(shrinkingUI, 'isActive').returns(true);
|
|
var stubSetTip = this.sinon.stub(shrinkingUI, '_setTip');
|
|
var stubSetState = this.sinon.stub(shrinkingUI, '_setState');
|
|
|
|
shrinkingUI.startTilt();
|
|
assert.isTrue(stubActive.called);
|
|
assert.isFalse(stubSetTip.called);
|
|
assert.isFalse(stubSetState.called);
|
|
|
|
stubActive.reset();
|
|
stubSetTip.reset();
|
|
stubSetState.reset();
|
|
|
|
// actual "start"
|
|
stubActive.returns(false);
|
|
fakeApp.broadcast = this.sinon.spy();
|
|
var stubShrinkingTilt =
|
|
this.sinon.stub(shrinkingUI, '_shrinkingTilt', function(cb){
|
|
cb();
|
|
|
|
assert.isTrue(stubActive.called);
|
|
assert.isTrue(stubSetState.calledWith(true));
|
|
assert.isTrue(stubShrinkingTilt.called);
|
|
assert.isTrue(shrinkingUI.elements.foregroundElement.classList.contains(
|
|
'hidden'));
|
|
done();
|
|
});
|
|
|
|
shrinkingUI.startTilt();
|
|
});
|
|
|
|
test('Shrinking UI SetTip', function() {
|
|
var tempTip = document.createElement('div');
|
|
tempTip.classList.remove = this.sinon.stub();
|
|
var stubSlidingTip =
|
|
this.sinon.stub(shrinkingUI, '_slidingTip').returns(tempTip);
|
|
|
|
// first test: with shrinkingUI.current.tip being unavailable
|
|
|
|
shrinkingUI.tip = null;
|
|
shrinkingUI._setTip();
|
|
|
|
assert.isTrue(stubSlidingTip.called);
|
|
assert.equal(shrinkingUI.tip, tempTip);
|
|
assert.equal(tempTip.parentNode, fakeApp.element.parentNode);
|
|
assert.isTrue(tempTip.classList.remove.calledWith('hide'));
|
|
|
|
// second test: with shrinkingUIcurrent.tip being available
|
|
|
|
shrinkingUI.tip = document.createElement('div');
|
|
|
|
stubSlidingTip.reset();
|
|
shrinkingUI.tip.classList.remove = this.sinon.stub();
|
|
|
|
shrinkingUI._setTip();
|
|
|
|
assert.isFalse(stubSlidingTip.called);
|
|
assert.equal(shrinkingUI.tip.parent, null);
|
|
assert.isTrue(shrinkingUI.tip.classList.remove.calledWith('hide'));
|
|
});
|
|
|
|
test('Shrinking UI Stop', function(done) {
|
|
// test for state = false (not going to start actually)
|
|
var originalShrinking = shrinkingUI.state.shrinking;
|
|
shrinkingUI.state.shrinking = false;
|
|
var stubShrinkingTiltBack =
|
|
this.sinon.stub(shrinkingUI, '_shrinkingTiltBack');
|
|
shrinkingUI.stopTilt();
|
|
assert.isFalse(stubShrinkingTiltBack.called);
|
|
stubShrinkingTiltBack.restore();
|
|
shrinkingUI.state.shrinking = originalShrinking;
|
|
|
|
// actual "stop"
|
|
|
|
var oldTip = shrinkingUI.tip;
|
|
shrinkingUI.elements.foregroundElement.classList.add('hidden');
|
|
fakeApp.broadcast = this.sinon.stub();
|
|
var fakeTip = {
|
|
remove: this.sinon.spy()
|
|
};
|
|
|
|
shrinkingUI.tip = fakeTip;
|
|
|
|
// Stub a promised function.
|
|
var stubCleanEffects = this.sinon.stub(shrinkingUI, '_cleanEffects',
|
|
function() {
|
|
return {
|
|
then: function(cb) {
|
|
cb();
|
|
}
|
|
};
|
|
});
|
|
|
|
stubShrinkingTiltBack =
|
|
this.sinon.stub(shrinkingUI, '_shrinkingTiltBack', function(instant, cb){
|
|
assert.isTrue(instant);
|
|
cb();
|
|
assert.isTrue(fakeTip.remove.called);
|
|
assert.isNull(this.tip);
|
|
assert.isFalse(shrinkingUI.elements.foregroundElement.classList
|
|
.contains('hidden'));
|
|
stubCleanEffects.restore(); // this one is for gjslinter happy
|
|
|
|
shrinkingUI.tip = oldTip;
|
|
|
|
done();
|
|
});
|
|
|
|
shrinkingUI.stopTilt();
|
|
});
|
|
|
|
test('Shrinking UI State', function() {
|
|
assert.isFalse(shrinkingUI.isActive());
|
|
|
|
shrinkingUI.state.shrinking = true;
|
|
assert.isTrue(shrinkingUI.isActive());
|
|
});
|
|
|
|
test('Shrinking UI SetState', function() {
|
|
var stubSetAttribute = this.sinon.stub();
|
|
shrinkingUI.elements.foregroundElement = {
|
|
setAttribute: stubSetAttribute
|
|
};
|
|
|
|
shrinkingUI._setState(123);
|
|
|
|
assert.isTrue(stubSetAttribute.calledWith('data-shrinking-state', '123'));
|
|
});
|
|
|
|
test('Shrinking UI Update Slide Transition', function() {
|
|
// test valid slideTransitionCb
|
|
|
|
var tip = {
|
|
removeEventListener: this.sinon.spy()
|
|
};
|
|
shrinkingUI.tip = tip;
|
|
|
|
|
|
shrinkingUI.state.slideTransitionCb = 'STCB';
|
|
|
|
shrinkingUI._updateSlideTransition('STCB2');
|
|
assert.isTrue(tip.removeEventListener.calledWith('transitionend', 'STCB'));
|
|
assert.equal(shrinkingUI.state.slideTransitionCb, 'STCB2');
|
|
|
|
tip.removeEventListener.reset();
|
|
|
|
// test null slideTransitionCb
|
|
|
|
shrinkingUI.state.slideTransitionCb = null;
|
|
|
|
shrinkingUI._updateSlideTransition('STCB3');
|
|
assert.isFalse(tip.removeEventListener.called);
|
|
assert.equal(shrinkingUI.state.slideTransitionCb, 'STCB3');
|
|
|
|
// test null tip
|
|
|
|
shrinkingUI.tip = null;
|
|
|
|
shrinkingUI._updateSlideTransition('STCB4');
|
|
assert.equal(shrinkingUI.state.slideTransitionCb, 'STCB4');
|
|
});
|
|
|
|
test('Shrinking UI Update Tilt Transition', function() {
|
|
var oldTiltTransitionCb = shrinkingUI.state.tiltTransitionCb;
|
|
|
|
// test valid slideTransitionCb
|
|
|
|
fakeApp.element.removeEventListener = this.sinon.stub();
|
|
|
|
shrinkingUI.state.tiltTransitionCb = 'TTCB';
|
|
|
|
shrinkingUI._updateTiltTransition('TTCB2');
|
|
assert.isTrue(
|
|
fakeApp.element.removeEventListener.calledWith('transitionend', 'TTCB')
|
|
);
|
|
assert.equal(shrinkingUI.state.tiltTransitionCb, 'TTCB2');
|
|
|
|
fakeApp.element.removeEventListener.reset();
|
|
|
|
// test null slideTransitionCb
|
|
|
|
shrinkingUI.state.tiltTransitionCb = null;
|
|
|
|
shrinkingUI._updateTiltTransition('TTCB3');
|
|
assert.isFalse(fakeApp.element.removeEventListener.called);
|
|
assert.equal(shrinkingUI.state.tiltTransitionCb, 'TTCB3');
|
|
|
|
// test null frame
|
|
|
|
this.sinon.stub(fakeApp, 'getBottomMostWindow', function() {
|
|
return {
|
|
element: null
|
|
};
|
|
});
|
|
|
|
shrinkingUI._updateTiltTransition('TTCB4');
|
|
assert.equal(shrinkingUI.state.tiltTransitionCb, 'TTCB4');
|
|
|
|
// restore
|
|
|
|
shrinkingUI.state.tiltTransitionCb = oldTiltTransitionCb;
|
|
});
|
|
|
|
test('Shrinking UI ReceivingEffects', function() {
|
|
shrinkingUI.elements.foregroundElement = document.createElement('div');
|
|
|
|
var stubShrinkingTilt = this.sinon.stub(shrinkingUI, '_shrinkingTilt');
|
|
var stubSendingSlideTo = this.sinon.stub(shrinkingUI, '_sendingSlideTo');
|
|
|
|
shrinkingUI._receivingEffects();
|
|
|
|
assert.equal(shrinkingUI.elements.foregroundElement.style.opacity, '0');
|
|
assert.isTrue(stubShrinkingTilt.called);
|
|
|
|
// call afterTilt
|
|
stubShrinkingTilt.getCall(0).args[0]();
|
|
|
|
assert.equal(shrinkingUI.elements.foregroundElement.style.transition,
|
|
'transform 0.05s ease 0s');
|
|
|
|
assert.isTrue(stubSendingSlideTo.called);
|
|
assert.isTrue(stubSendingSlideTo.getCall(0).calledWith('TOP'));
|
|
|
|
// call afterTop
|
|
stubSendingSlideTo.getCall(0).args[1]();
|
|
assert.equal(shrinkingUI.elements.foregroundElement.style.opacity, '');
|
|
assert.equal(shrinkingUI.elements.foregroundElement.style.transition,
|
|
'transform 0.5s ease 0s');
|
|
|
|
assert.isTrue(stubSendingSlideTo.calledTwice);
|
|
assert.isTrue(stubSendingSlideTo.getCall(1).calledWith('BOTTOM'));
|
|
|
|
var stubShrinkingTiltBack =
|
|
this.sinon.stub(shrinkingUI, '_shrinkingTiltBack');
|
|
var oldCleanEffects = shrinkingUI._cleanEffects;
|
|
shrinkingUI._cleanEffects = 'dummyCE';
|
|
|
|
// call doTiltBack
|
|
stubSendingSlideTo.getCall(1).args[1]();
|
|
assert.isTrue(stubShrinkingTiltBack.calledWith(false, 'dummyCE'));
|
|
|
|
shrinkingUI._cleanEffects = oldCleanEffects;
|
|
});
|
|
|
|
test('Shrinking UI SendingSlideTo, full, with specified Y', function() {
|
|
var oldAppFrame = shrinkingUI.elements.foregroundElement;
|
|
|
|
var spyAddEventListener = this.sinon.spy();
|
|
var spyRemoveEventListener = this.sinon.spy();
|
|
|
|
var stubGetTiltingDegree =
|
|
this.sinon.stub(shrinkingUI, '_getTiltingDegree').returns('5deg');
|
|
|
|
var stubUpdateTiltTransition =
|
|
this.sinon.stub(shrinkingUI, '_updateTiltTransition');
|
|
|
|
shrinkingUI.elements.foregroundElement = {
|
|
addEventListener: spyAddEventListener,
|
|
removeEventListener: spyRemoveEventListener,
|
|
style: {
|
|
transform: ''
|
|
}
|
|
};
|
|
|
|
shrinkingUI._sendingSlideTo(10, function(){
|
|
});
|
|
|
|
assert.equal(shrinkingUI.elements.foregroundElement.style.transform,
|
|
'rotateX(5deg) translateY(-10px)');
|
|
|
|
assert.isTrue(spyAddEventListener.calledWith('transitionend'));
|
|
assert.isTrue(
|
|
stubUpdateTiltTransition
|
|
.calledWith(spyAddEventListener.getCall(0).args[1])
|
|
);
|
|
|
|
// simulate transitionend event
|
|
spyAddEventListener.callArg(1);
|
|
|
|
assert.isTrue(
|
|
spyRemoveEventListener
|
|
.calledWith('transitionend', spyAddEventListener.getCall(0).args[1])
|
|
);
|
|
|
|
stubGetTiltingDegree.restore(); // for gjslint happy
|
|
shrinkingUI.elements.foregroundElement = oldAppFrame;
|
|
});
|
|
|
|
test('Shrinking UI SendingSlideTo, with Y = TOP', function() {
|
|
var oldAppFrame = shrinkingUI.elements.foregroundElement;
|
|
|
|
var stubGetTiltingDegree =
|
|
this.sinon.stub(shrinkingUI, '_getTiltingDegree').returns('6deg');
|
|
|
|
var stubUpdateTiltTransition =
|
|
this.sinon.stub(shrinkingUI, '_updateTiltTransition');
|
|
|
|
shrinkingUI.elements.foregroundElement = {
|
|
addEventListener: function(){},
|
|
style: {
|
|
transform: ''
|
|
},
|
|
parentElement: {
|
|
clientHeight: '40'
|
|
}
|
|
};
|
|
|
|
shrinkingUI._sendingSlideTo('TOP', function(){
|
|
});
|
|
|
|
assert.equal(
|
|
shrinkingUI.elements.foregroundElement.style.transform,
|
|
'rotateX(6deg) translateY(-40px)'
|
|
);
|
|
|
|
// for gjslint happy
|
|
stubGetTiltingDegree.restore();
|
|
stubUpdateTiltTransition.restore();
|
|
|
|
shrinkingUI.elements.foregroundElement = oldAppFrame;
|
|
});
|
|
|
|
test('Shrinking UI SendingSlideTo, with Y = BOTTOM', function() {
|
|
var oldAppFrame = shrinkingUI.elements.foregroundElement;
|
|
|
|
var stubGetTiltingDegree =
|
|
this.sinon.stub(shrinkingUI, '_getTiltingDegree').returns('7deg');
|
|
|
|
var stubUpdateTiltTransition =
|
|
this.sinon.stub(shrinkingUI, '_updateTiltTransition');
|
|
|
|
shrinkingUI.elements.foregroundElement = {
|
|
addEventListener: function(){},
|
|
style: {
|
|
transform: ''
|
|
},
|
|
removeEventListener: function() {}
|
|
};
|
|
|
|
shrinkingUI._sendingSlideTo('BOTTOM', function(){
|
|
});
|
|
|
|
assert.equal(
|
|
shrinkingUI.elements.foregroundElement.style.transform,
|
|
'rotateX(7deg) translateY(-0px)'
|
|
);
|
|
|
|
// for gjslint's happy
|
|
stubGetTiltingDegree.restore();
|
|
stubUpdateTiltTransition.restore();
|
|
shrinkingUI.elements.foregroundElement = oldAppFrame;
|
|
});
|
|
|
|
test('Shrinking UI SendingSlideTo, with Y < 0', function() {
|
|
var oldAppFrame = shrinkingUI.elements.foregroundElement;
|
|
|
|
var stubGetTiltingDegree =
|
|
this.sinon.stub(shrinkingUI, '_getTiltingDegree').returns('8deg');
|
|
|
|
var stubUpdateTiltTransition =
|
|
this.sinon.stub(shrinkingUI, '_updateTiltTransition');
|
|
|
|
shrinkingUI.elements.foregroundElement = {
|
|
addEventListener: function(){},
|
|
style: {
|
|
transform: ''
|
|
},
|
|
};
|
|
|
|
shrinkingUI._sendingSlideTo(-20, function(){
|
|
});
|
|
|
|
assert.equal(
|
|
shrinkingUI.elements.foregroundElement.style.transform,
|
|
'rotateX(8deg) translateY(-0px)'
|
|
);
|
|
|
|
// for gjslint's happy
|
|
stubGetTiltingDegree.restore();
|
|
stubUpdateTiltTransition.restore();
|
|
|
|
shrinkingUI.elements.foregroundElement = oldAppFrame;
|
|
});
|
|
|
|
test('Shrinking UI SlidingCover', function() {
|
|
var stubHandleSendingStart =
|
|
this.sinon.stub(shrinkingUI, '_handleSendingStart');
|
|
var stubHandleSendingSlide =
|
|
this.sinon.stub(shrinkingUI, '_handleSendingSlide');
|
|
var stubHandleSendingOut =
|
|
this.sinon.stub(shrinkingUI, '_handleSendingOut');
|
|
|
|
var cover = shrinkingUI._slidingCover();
|
|
|
|
assert.equal(cover.tagName.toLowerCase(), 'div');
|
|
|
|
assert.equal(cover.id, 'shrinking-cover');
|
|
assert.equal(cover.style.width, '100%');
|
|
assert.equal(cover.style.height, '100%');
|
|
assert.equal(cover.style.position, 'relative');
|
|
assert.equal(cover.style.zIndex, '2');
|
|
|
|
cover.dispatchEvent(createTouchEvent('touchstart'));
|
|
cover.dispatchEvent(createTouchEvent('touchmove'));
|
|
cover.dispatchEvent(createTouchEvent('touchend'));
|
|
|
|
assert.isTrue(stubHandleSendingStart.called);
|
|
assert.isTrue(stubHandleSendingSlide.called);
|
|
assert.isTrue(stubHandleSendingOut.called);
|
|
});
|
|
|
|
test('Shrinking UI SlidingTip', function() {
|
|
var fakeMozL10n = false;
|
|
if(!('mozL10n' in navigator)){
|
|
navigator.mozL10n = {
|
|
get: function(){
|
|
return 'dummy';
|
|
}
|
|
};
|
|
fakeMozL10n = true;
|
|
}
|
|
|
|
var tip = shrinkingUI._slidingTip();
|
|
var tipText = tip.children[0];
|
|
var tipArrow = tip.children[1];
|
|
|
|
assert.equal(tip.tagName.toLowerCase(), 'div');
|
|
assert.equal(tip.id, 'shrinking-tip');
|
|
assert.equal(tipText.getAttribute('data-l10n-id'), 'shrinking-tip');
|
|
assert.equal(tipArrow.tagName.toLowerCase(), 'div');
|
|
assert.equal(tipArrow.id, 'shrinking-tip-arrow');
|
|
assert.equal(tipArrow.textContent, '\u00A0');
|
|
|
|
if(fakeMozL10n){
|
|
delete navigator.mozL10n;
|
|
}
|
|
});
|
|
|
|
test('Shrinking UI DisableSlidingCover', function() {
|
|
var oldCover = shrinkingUI.cover;
|
|
|
|
var stubHandleSendingStart =
|
|
this.sinon.stub(shrinkingUI, '_handleSendingStart');
|
|
var stubHandleSendingSlide =
|
|
this.sinon.stub(shrinkingUI, '_handleSendingSlide');
|
|
var stubHandleSendingOut =
|
|
this.sinon.stub(shrinkingUI, '_handleSendingOut');
|
|
|
|
shrinkingUI.cover = document.createElement('div');
|
|
|
|
shrinkingUI.cover.addEventListener(
|
|
'touchstart',
|
|
shrinkingUI
|
|
);
|
|
shrinkingUI.cover.addEventListener(
|
|
'touchmove',
|
|
shrinkingUI
|
|
);
|
|
shrinkingUI.cover.addEventListener(
|
|
'touchend',
|
|
shrinkingUI
|
|
);
|
|
|
|
shrinkingUI._disableSlidingCover();
|
|
|
|
shrinkingUI.cover.dispatchEvent(createTouchEvent('touchstart'));
|
|
shrinkingUI.cover.dispatchEvent(createTouchEvent('touchmove'));
|
|
shrinkingUI.cover.dispatchEvent(createTouchEvent('touchend'));
|
|
|
|
assert.isFalse(stubHandleSendingStart.called);
|
|
assert.isFalse(stubHandleSendingSlide.called);
|
|
assert.isFalse(stubHandleSendingOut.called);
|
|
|
|
shrinkingUI.cover = oldCover;
|
|
});
|
|
|
|
test('Shrinking UI ShrinkingTilt, full, with null cover', function() {
|
|
shrinkingUI.elements.foregroundElement.addEventListener = this.sinon.spy();
|
|
shrinkingUI.elements.foregroundElement.removeEventListener =
|
|
this.sinon.spy();
|
|
var fakeChild = document.createElement('div');
|
|
shrinkingUI.elements.backgroundElement.classList.add = this.sinon.spy();
|
|
shrinkingUI.elements.foregroundElement.appendChild(fakeChild);
|
|
shrinkingUI.elements.foregroundElement.insertBefore = this.sinon.spy();
|
|
shrinkingUI.elements.foregroundElement.classList.add = this.sinon.spy();
|
|
|
|
|
|
var stubSlidingCover =
|
|
this.sinon.stub(shrinkingUI, '_slidingCover').returns('cover');
|
|
var stubGetOverTiltingDegree =
|
|
this.sinon.stub(shrinkingUI, '_getOverTiltingDegree').returns('9deg');
|
|
var stubUpdateTiltTransition =
|
|
this.sinon.stub(shrinkingUI, '_updateTiltTransition');
|
|
|
|
var spyCb = this.sinon.spy();
|
|
|
|
shrinkingUI._shrinkingTilt(spyCb);
|
|
assert.isTrue(stubSlidingCover.called);
|
|
assert.isTrue(
|
|
fakeApp.element.insertBefore.calledWith('cover',
|
|
fakeChild)
|
|
);
|
|
assert.isTrue(shrinkingUI.elements.backgroundElement.classList.add
|
|
.calledWith('shrinking-wrapper'));
|
|
assert.equal(fakeApp.element.style.transition,
|
|
'transform 0.5s ease 0s');
|
|
assert.isTrue(fakeApp.element.addEventListener
|
|
.calledWith('transitionend')
|
|
);
|
|
assert.isTrue(stubUpdateTiltTransition.
|
|
calledWith(fakeApp.element
|
|
.addEventListener.getCall(0).args[1]
|
|
)
|
|
);
|
|
assert.equal(fakeApp.element.style.transformOrigin,
|
|
'50% 100% 0px');
|
|
assert.equal(fakeApp.element.style.transform, 'rotateX(9deg)');
|
|
|
|
// restoration for "outer" scope
|
|
stubGetOverTiltingDegree.restore(); // for gjslint's happy
|
|
stubUpdateTiltTransition.reset();
|
|
|
|
// call the bounceBack
|
|
var stubGetTiltingDegree =
|
|
this.sinon.stub(shrinkingUI, '_getTiltingDegree').returns('10deg');
|
|
|
|
fakeApp.element.addEventListener.getCall(0).args[1]({
|
|
target: fakeApp.element
|
|
});
|
|
assert.isTrue(
|
|
fakeApp.element.removeEventListener.calledWith(
|
|
'transitionend',
|
|
fakeApp.element.addEventListener.getCall(0).args[1]
|
|
)
|
|
);
|
|
assert.isTrue(fakeApp.element.addEventListener.calledTwice);
|
|
assert.isTrue(
|
|
fakeApp.element.addEventListener.alwaysCalledWith('transitionend')
|
|
);
|
|
assert.isTrue(
|
|
stubUpdateTiltTransition.calledWith(
|
|
fakeApp.element.addEventListener.getCall(1).args[1]
|
|
)
|
|
);
|
|
assert.equal(
|
|
fakeApp.element.style.transition,
|
|
'transform 0s ease 0s'
|
|
);
|
|
assert.equal(
|
|
fakeApp.element.style.transform,
|
|
'rotateX(10deg)'
|
|
);
|
|
|
|
// restoration for bounceBack scope
|
|
stubGetTiltingDegree.restore(); // for gjslint's happy
|
|
|
|
// call the bounceBackEnd
|
|
fakeApp.element.addEventListener.getCall(1).args[1]({
|
|
target: fakeApp.element
|
|
});
|
|
assert.isTrue(
|
|
fakeApp.element.removeEventListener.calledWith(
|
|
'transitionend',
|
|
fakeApp.element.addEventListener.getCall(1).args[1]
|
|
)
|
|
);
|
|
assert.equal(
|
|
fakeApp.element.style.transition,
|
|
'transform 0.5s ease 0s'
|
|
);
|
|
|
|
assert.isTrue(spyCb.called);
|
|
|
|
});
|
|
|
|
test('Shrinking UI ShrinkingTilt, with non-null cover', function() {
|
|
|
|
shrinkingUI.elements.foregroundElement.addEventListener = this.sinon.spy();
|
|
shrinkingUI.elements.foregroundElement.removeEventListener =
|
|
this.sinon.spy();
|
|
var fakeChild = document.createElement('div');
|
|
shrinkingUI.elements.backgroundElement.classList.add = this.sinon.spy();
|
|
shrinkingUI.elements.foregroundElement.appendChild(fakeChild);
|
|
shrinkingUI.elements.foregroundElement.insertBefore = this.sinon.spy();
|
|
shrinkingUI.elements.foregroundElement.classList.add = this.sinon.spy();
|
|
|
|
shrinkingUI.cover = 'cover';
|
|
|
|
var stubSlidingCover =
|
|
this.sinon.stub(shrinkingUI, '_slidingCover');
|
|
var stubGetOverTiltingDegree =
|
|
this.sinon.stub(shrinkingUI, '_getOverTiltingDegree').returns('11deg');
|
|
var stubUpdateTiltTransition =
|
|
this.sinon.stub(shrinkingUI, '_updateTiltTransition');
|
|
|
|
shrinkingUI._shrinkingTilt();
|
|
|
|
assert.isFalse(stubSlidingCover.called);
|
|
assert.isFalse(fakeApp.element.insertBefore.called);
|
|
|
|
assert.isTrue(
|
|
shrinkingUI.elements.backgroundElement.classList.add
|
|
.calledWith('shrinking-wrapper')
|
|
);
|
|
assert.equal(shrinkingUI.elements.foregroundElement.style.transition,
|
|
'transform 0.5s ease 0s');
|
|
assert.isTrue(
|
|
shrinkingUI.elements.foregroundElement.addEventListener
|
|
.calledWith('transitionend')
|
|
);
|
|
assert.isTrue(
|
|
stubUpdateTiltTransition.calledWith(
|
|
shrinkingUI.elements.foregroundElement.addEventListener
|
|
.getCall(0).args[1]
|
|
)
|
|
);
|
|
assert.equal(
|
|
shrinkingUI.elements.foregroundElement.style.transformOrigin,
|
|
'50% 100% 0px'
|
|
);
|
|
assert.equal(
|
|
shrinkingUI.elements.foregroundElement.style.transform,
|
|
'rotateX(11deg)'
|
|
);
|
|
|
|
// restoration for "outer" scope
|
|
stubGetOverTiltingDegree.restore(); // for gjslint's happy
|
|
});
|
|
|
|
test('Shrinking UI ShrinkingTiltBack, instant = true', function(done) {
|
|
var style = {
|
|
transition: 'x',
|
|
transform: 'xx'
|
|
};
|
|
shrinkingUI.elements.foregroundElement.style = style;
|
|
shrinkingUI._shrinkingTiltBack(true, () => {
|
|
assert.equal(shrinkingUI.elements.foregroundElement.style.transition, '');
|
|
assert.equal(shrinkingUI.elements.foregroundElement.style.transform,
|
|
'rotateX(0deg)');
|
|
done();
|
|
});
|
|
});
|
|
|
|
test('Shrinking UI ShrinkingTiltBack, instant = false', function() {
|
|
var oldAppFrame = shrinkingUI.elements.foregroundElement;
|
|
var frame = {
|
|
addEventListener: this.sinon.spy(),
|
|
removeEventListener: this.sinon.spy(),
|
|
style: {
|
|
transition: 'x',
|
|
transform: 'xx'
|
|
}
|
|
};
|
|
shrinkingUI.elements.foregroundElement = frame;
|
|
|
|
var spyCb = this.sinon.spy();
|
|
var stubUpdateTiltTransition =
|
|
this.sinon.stub(shrinkingUI, '_updateTiltTransition');
|
|
|
|
shrinkingUI._shrinkingTiltBack(false, spyCb);
|
|
|
|
assert.equal(frame.style.transition, 'transform 0.3s ease');
|
|
assert.equal(frame.style.transform, 'rotateX(0.0deg)');
|
|
|
|
assert.isTrue(frame.addEventListener.calledWith('transitionend'));
|
|
assert.isTrue(
|
|
stubUpdateTiltTransition.calledWith(
|
|
frame.addEventListener.getCall(0).args[1]
|
|
)
|
|
);
|
|
|
|
// call the event listener
|
|
frame.addEventListener.getCall(0).args[1]();
|
|
|
|
assert.isTrue(
|
|
frame.removeEventListener.calledWith(
|
|
'transitionend',
|
|
frame.addEventListener.getCall(0).args[1]
|
|
)
|
|
);
|
|
|
|
assert.isTrue(spyCb.called);
|
|
|
|
shrinkingUI.elements.foregroundElement = oldAppFrame;
|
|
});
|
|
|
|
test('Shrinking UI HandleSendingStart', function() {
|
|
var evt = {
|
|
stopImmediatePropagation: this.sinon.spy(),
|
|
touches: [
|
|
{pageY: 123}
|
|
]
|
|
};
|
|
|
|
var stubDebug = this.sinon.stub(shrinkingUI, 'debug');
|
|
var stubState = this.sinon.stub(shrinkingUI, 'isActive').returns(true);
|
|
var stubUpdateSlideTransition =
|
|
this.sinon.stub(shrinkingUI, '_updateSlideTransition');
|
|
|
|
var oldTip = shrinkingUI.tip;
|
|
var tip = {
|
|
classList: {
|
|
add: this.sinon.spy()
|
|
},
|
|
addEventListener: this.sinon.spy(),
|
|
removeEventListener: this.sinon.spy()
|
|
};
|
|
shrinkingUI.tip = tip;
|
|
|
|
var ret = shrinkingUI._handleSendingStart(evt);
|
|
assert.isFalse(ret);
|
|
|
|
assert.isTrue(evt.stopImmediatePropagation.called);
|
|
assert.equal(shrinkingUI.state.touch.initY, 123);
|
|
assert.isTrue(tip.classList.add.calledWith('hide'));
|
|
assert.isTrue(tip.addEventListener.calledWith('transitionend'));
|
|
assert.isTrue(
|
|
stubUpdateSlideTransition.calledWith(
|
|
tip.addEventListener.getCall(0).args[1]
|
|
)
|
|
);
|
|
|
|
// call tsEnd
|
|
tip.addEventListener.getCall(0).args[1]();
|
|
assert.isTrue(
|
|
tip.removeEventListener.calledWith(
|
|
'transitionend',
|
|
tip.addEventListener.getCall(0).args[1]
|
|
)
|
|
);
|
|
|
|
shrinkingUI.tip = oldTip;
|
|
|
|
// for gjslint's happy
|
|
stubDebug.restore();
|
|
stubState.restore();
|
|
});
|
|
|
|
test('Shrinking UI HandleSendingSlide: full; initY/prevY = undefined, ' +
|
|
'slideY < threshold', function() {
|
|
var evt = {
|
|
touches: [
|
|
{
|
|
pageY: 10
|
|
}
|
|
]
|
|
};
|
|
|
|
var oldAppFrame = shrinkingUI.elements.foregroundElement;
|
|
|
|
var oldState = shrinkingUI.state;
|
|
shrinkingUI.state = {
|
|
touch: {
|
|
initY: 14,
|
|
prevY: undefined
|
|
},
|
|
toward: 'Somewhere'
|
|
};
|
|
|
|
var oldThreshold = shrinkingUI.THRESHOLD;
|
|
shrinkingUI.THRESHOLD = 5;
|
|
|
|
var stubSendingSlideTo = this.sinon.stub(shrinkingUI, '_sendingSlideTo');
|
|
|
|
// state.initY <- 4
|
|
// state.prevY <- 4
|
|
// slideY <- 4
|
|
shrinkingUI._handleSendingSlide(evt);
|
|
assert.equal(shrinkingUI.state.touch.prevY, 4);
|
|
assert.equal(shrinkingUI.state.toward, 'BOTTOM');
|
|
|
|
assert.isTrue(stubSendingSlideTo.calledWith(4));
|
|
|
|
assert.isFalse(shrinkingUI.state.overThreshold);
|
|
|
|
// restore
|
|
shrinkingUI.elements.foregroundElement = oldAppFrame;
|
|
shrinkingUI.state = oldState;
|
|
shrinkingUI.THRESHOLD = oldThreshold;
|
|
});
|
|
|
|
test('Shrinking UI HandleSendingSlide: defined initY/prevY, ' +
|
|
'prevY < slideY, slideY > threshold', function() {
|
|
var evt = {
|
|
touches: [
|
|
{
|
|
pageY: 10
|
|
}
|
|
]
|
|
};
|
|
|
|
var oldAppFrame = shrinkingUI.elements.foregroundElement;
|
|
var oldState = shrinkingUI.state;
|
|
shrinkingUI.state = {
|
|
touch: {
|
|
initY: 16,
|
|
prevY: 5
|
|
},
|
|
toward: 'Somewhere'
|
|
};
|
|
|
|
var oldThreshold = shrinkingUI.THRESHOLD;
|
|
shrinkingUI.THRESHOLD = 3;
|
|
|
|
var stubSendingSlideTo = this.sinon.stub(shrinkingUI, '_sendingSlideTo');
|
|
|
|
// slideY <- 6
|
|
shrinkingUI._handleSendingSlide(evt);
|
|
assert.equal(shrinkingUI.state.touch.initY, 16);
|
|
assert.equal(shrinkingUI.state.toward, 'TOP');
|
|
|
|
assert.isTrue(shrinkingUI.state.overThreshold);
|
|
|
|
// restore
|
|
shrinkingUI.elements.foregroundElement = oldAppFrame;
|
|
shrinkingUI.state = oldState;
|
|
shrinkingUI.THRESHOLD = oldThreshold;
|
|
|
|
// for gjslint's happy
|
|
stubSendingSlideTo.restore();
|
|
});
|
|
|
|
test('Shrinking UI HandleSendingOut, full, ' +
|
|
'overThreshold = true and toward = "TOP"', function() {
|
|
var stubDebug = this.sinon.stub(shrinkingUI, 'debug');
|
|
var stubState = this.sinon.stub(shrinkingUI, 'isActive').returns(true);
|
|
|
|
var oldState = shrinkingUI.state;
|
|
shrinkingUI.state = {
|
|
overThreshold: true,
|
|
toward: 'TOP',
|
|
};
|
|
|
|
var stubSendingSlideTo = this.sinon.stub(shrinkingUI, '_sendingSlideTo');
|
|
var stubDispatchEvent =
|
|
this.sinon.stub(window, 'dispatchEvent', function(evt, evt2){
|
|
assert.equal(evt.type, 'shrinking-sent');
|
|
});
|
|
var stubDisableSlidingCover =
|
|
this.sinon.stub(shrinkingUI, '_disableSlidingCover');
|
|
|
|
shrinkingUI._handleSendingOut(null);
|
|
assert.isTrue(stubDebug.called);
|
|
assert.isTrue(stubState.called);
|
|
|
|
assert.isTrue(stubSendingSlideTo.calledWith('TOP'));
|
|
|
|
stubSendingSlideTo.getCall(0).args[1]();
|
|
|
|
assert.isTrue(stubDisableSlidingCover.called);
|
|
assert.isTrue(stubDispatchEvent.called);
|
|
|
|
// restore
|
|
shrinkingUI.state = oldState;
|
|
});
|
|
|
|
var handleSendingOutTestFactory = function(state_) {
|
|
return function() {
|
|
var stubDebug = this.sinon.stub(shrinkingUI, 'debug');
|
|
var stubState = this.sinon.stub(shrinkingUI, 'isActive').returns(true);
|
|
|
|
var oldState = shrinkingUI.state;
|
|
shrinkingUI.state = state_;
|
|
|
|
var stubClearTimeout = this.sinon.stub(window, 'clearTimeout');
|
|
var stubSendingSlideTo = this.sinon.stub(shrinkingUI, '_sendingSlideTo');
|
|
var stubSetTip = this.sinon.stub(shrinkingUI, '_setTip');
|
|
|
|
shrinkingUI._handleSendingOut(null);
|
|
assert.isTrue(stubSendingSlideTo.calledWith('BOTTOM'));
|
|
|
|
stubSendingSlideTo.getCall(0).args[1]();
|
|
|
|
assert.isTrue(stubSetTip.called);
|
|
|
|
// restore
|
|
shrinkingUI.state = oldState;
|
|
|
|
// for gjslint's happy
|
|
stubDebug.restore();
|
|
stubState.restore();
|
|
stubClearTimeout.restore();
|
|
};
|
|
};
|
|
|
|
test('Shrinking UI HandleSendingOut, overThreshold = false',
|
|
handleSendingOutTestFactory({
|
|
overThreshold: false,
|
|
toward: 'TOP'
|
|
})
|
|
);
|
|
|
|
test('Shrinking UI HandleSendingOut, ' +
|
|
'overThreshold = true and toward != "TOP"',
|
|
handleSendingOutTestFactory({
|
|
overThreshold: true,
|
|
toward: 'NOT_TOP'
|
|
})
|
|
);
|
|
|
|
test('Shrinking UI CleanEffects', function() {
|
|
var stubDebug = this.sinon.stub(shrinkingUI, 'debug');
|
|
var stubState = this.sinon.stub(shrinkingUI, 'isActive').returns(true);
|
|
var stubSetState = this.sinon.stub(shrinkingUI, '_setState');
|
|
var stubUpdateTiltTransition =
|
|
this.sinon.stub(shrinkingUI, '_updateTiltTransition');
|
|
var stubUpdateSlideTransition =
|
|
this.sinon.stub(shrinkingUI, '_updateSlideTransition');
|
|
var stubDisableSlidingCover =
|
|
this.sinon.stub(shrinkingUI, '_disableSlidingCover');
|
|
shrinkingUI.cover = {
|
|
remove: function() {}
|
|
};
|
|
var spySlidingCoverRemove = this.sinon.stub(shrinkingUI.cover, 'remove');
|
|
|
|
//fakeApp._element = document.createElement('div');
|
|
//var fakeParent = document.createElement('div');
|
|
//fakeParent.appendChild(fakeApp._element);
|
|
shrinkingUI.elements.backgroundElement.classList.remove = this.sinon.spy();
|
|
shrinkingUI.elements.foregroundElement.style.transition =
|
|
'transform 0.3s ease';
|
|
shrinkingUI.elements.foregroundElement.style.transform = 'rotateX(0.0deg)';
|
|
|
|
shrinkingUI._cleanEffects();
|
|
assert.isTrue(stubDebug.called);
|
|
assert.isTrue(stubState.called);
|
|
assert.isTrue(spySlidingCoverRemove.called);
|
|
assert.equal(shrinkingUI.elements.foregroundElement.style.transition, '');
|
|
assert.equal(shrinkingUI.elements.foregroundElement.style.transform, '');
|
|
assert.equal(shrinkingUI.elements.foregroundElement.style.transformOrigin,
|
|
'50% 50% 0px');
|
|
assert.isTrue(stubSetState.calledWith(false));
|
|
assert.isTrue(stubUpdateTiltTransition.calledWith(null));
|
|
assert.isTrue(stubUpdateSlideTransition.calledWith(null));
|
|
assert.isTrue(shrinkingUI.elements.backgroundElement.classList.remove
|
|
.calledWith('shrinking-wrapper'));
|
|
assert.isNull(shrinkingUI.cover);
|
|
|
|
stubDebug.restore();
|
|
stubState.restore();
|
|
stubSetState.restore();
|
|
stubUpdateTiltTransition.restore();
|
|
stubUpdateSlideTransition.restore();
|
|
stubDisableSlidingCover.restore();
|
|
});
|
|
|
|
test('Shrinking UI GetTiltingDegree', function() {
|
|
var stubFetchCurrentOrientation =
|
|
this.sinon.stub(window.OrientationManager, 'fetchCurrentOrientation')
|
|
.returns('landscape-primary');
|
|
|
|
var oldConfigs = shrinkingUI.configs;
|
|
shrinkingUI.configs = {
|
|
degreeLandscape: 13,
|
|
degreePortrait: 14
|
|
};
|
|
|
|
assert.equal(shrinkingUI._getTiltingDegree(), 13);
|
|
stubFetchCurrentOrientation.restore();
|
|
|
|
stubFetchCurrentOrientation =
|
|
this.sinon.stub(window.OrientationManager, 'fetchCurrentOrientation')
|
|
.returns('portrait-primary');
|
|
|
|
assert.equal(shrinkingUI._getTiltingDegree(), 14);
|
|
stubFetchCurrentOrientation.restore();
|
|
|
|
shrinkingUI.configs = oldConfigs;
|
|
});
|
|
|
|
test('Shrinking UI GetOverTiltingDegree', function() {
|
|
var stubFetchCurrentOrientation =
|
|
this.sinon.stub(window.OrientationManager, 'fetchCurrentOrientation')
|
|
.returns('landscape-primary');
|
|
|
|
var oldConfigs = shrinkingUI.configs;
|
|
shrinkingUI.configs = {
|
|
overDegreeLandscape: 15,
|
|
overDegreePortrait: 16
|
|
};
|
|
|
|
assert.equal(shrinkingUI._getOverTiltingDegree(), 15);
|
|
stubFetchCurrentOrientation.restore();
|
|
|
|
stubFetchCurrentOrientation =
|
|
this.sinon.stub(window.OrientationManager, 'fetchCurrentOrientation')
|
|
.returns('portrait-primary');
|
|
|
|
assert.equal(shrinkingUI._getOverTiltingDegree(), 16);
|
|
stubFetchCurrentOrientation.restore();
|
|
|
|
shrinkingUI.configs = oldConfigs;
|
|
});
|
|
|
|
});
|