mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed matchMedia usage to make unit tests work in PhantomJS 

PhantomJS has a bug that makes it impossible to properly stub
window.matchMedia. This fix adds a wrapper as OC._matchMedia
that is used for unit tests
This commit is contained in:
Vincent Petry 2014-03-18 15:52:06 +01:00
parent fe04106e0f
commit cc6c152984
2 changed files with 54 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
core/js/js.js
View File

@ -997,41 +997,48 @@ function initCore() {
*/
function setupMainMenu() {
// toggle the navigation on mobile
if (window.matchMedia) {
var mq = window.matchMedia('(max-width: 600px)');
var lastMatch = mq.matches;
var $toggle = $('#header #owncloud');
var $navigation = $('#navigation');
function updateMainMenu() {
// mobile mode ?
if (lastMatch && !$toggle.hasClass('menutoggle')) {
// init the menu
OC.registerMenu($toggle, $navigation);
$toggle.data('oldhref', $toggle.attr('href'));
$toggle.attr('href', '#');
$navigation.hide();
}
else {
OC.unregisterMenu($toggle, $navigation);
$toggle.attr('href', $toggle.data('oldhref'));
$navigation.show();
}
}
updateMainMenu();
// TODO: debounce this
$(window).resize(function() {
if (lastMatch !== mq.matches) {
lastMatch = mq.matches;
updateMainMenu();
}
});
if (!OC._matchMedia) {
return;
}
var mq = OC._matchMedia('(max-width: 600px)');
var lastMatch = mq.matches;
var $toggle = $('#header #owncloud');
var $navigation = $('#navigation');
function updateMainMenu() {
// mobile mode ?
if (lastMatch && !$toggle.hasClass('menutoggle')) {
// init the menu
OC.registerMenu($toggle, $navigation);
$toggle.data('oldhref', $toggle.attr('href'));
$toggle.attr('href', '#');
$navigation.hide();
}
else {
OC.unregisterMenu($toggle, $navigation);
$toggle.attr('href', $toggle.data('oldhref'));
$navigation.show();
}
}
updateMainMenu();
// TODO: debounce this
$(window).resize(function() {
if (lastMatch !== mq.matches) {
lastMatch = mq.matches;
updateMainMenu();
}
});
}
setupMainMenu();
if (window.matchMedia) {
// wrapper needed for unit tests due to PhantomJS bugs
OC._matchMedia = function(media) {
return window.matchMedia(media);
}
setupMainMenu();
}
}
$(document).ready(initCore);

27
core/js/tests/specs/coreSpec.js
View File

@ -285,8 +285,11 @@ describe('Core base tests', function() {
var $navigation;
beforeEach(function() {
oldMatchMedia = window.matchMedia;
window.matchMedia = sinon.stub();
oldMatchMedia = OC._matchMedia;
// a separate method was needed because window.matchMedia
// cannot be stubbed due to a bug in PhantomJS:
// https://github.com/ariya/phantomjs/issues/12069
OC._matchMedia = sinon.stub();
$('#testArea').append('<div id="header">' +
'<a id="owncloud" href="#"></a>' +
'</div>' +
@ -296,23 +299,23 @@ describe('Core base tests', function() {
});
afterEach(function() {
window.matchMedia = oldMatchMedia;
OC._matchMedia = oldMatchMedia;
});
it('Sets up menu toggle in mobile mode', function() {
window.matchMedia.returns({matches: true});
OC._matchMedia.returns({matches: true});
window.initCore();
expect($toggle.hasClass('menutoggle')).toEqual(true);
expect($navigation.hasClass('menu')).toEqual(true);
});
it('Does not set up menu toggle in desktop mode', function() {
window.matchMedia.returns({matches: false});
OC._matchMedia.returns({matches: false});
window.initCore();
expect($toggle.hasClass('menutoggle')).toEqual(false);
expect($navigation.hasClass('menu')).toEqual(false);
});
it('Switches on menu toggle when mobile mode changes', function() {
var mq = {matches: false};
window.matchMedia.returns(mq);
OC._matchMedia.returns(mq);
window.initCore();
expect($toggle.hasClass('menutoggle')).toEqual(false);
mq.matches = true;
@ -321,7 +324,7 @@ describe('Core base tests', function() {
});
it('Switches off menu toggle when mobile mode changes', function() {
var mq = {matches: true};
window.matchMedia.returns(mq);
OC._matchMedia.returns(mq);
window.initCore();
expect($toggle.hasClass('menutoggle')).toEqual(true);
mq.matches = false;
@ -329,7 +332,7 @@ describe('Core base tests', function() {
expect($toggle.hasClass('menutoggle')).toEqual(false);
});
it('Clicking menu toggle toggles navigation in mobile mode', function() {
window.matchMedia.returns({matches: true});
OC._matchMedia.returns({matches: true});
window.initCore();
$navigation.hide(); // normally done through media query triggered CSS
expect($navigation.is(':visible')).toEqual(false);
@ -339,7 +342,7 @@ describe('Core base tests', function() {
expect($navigation.is(':visible')).toEqual(false);
});
it('Clicking menu toggle does not toggle navigation in desktop mode', function() {
window.matchMedia.returns({matches: false});
OC._matchMedia.returns({matches: false});
window.initCore();
expect($navigation.is(':visible')).toEqual(true);
$toggle.click();
@ -347,7 +350,7 @@ describe('Core base tests', function() {
});
it('Switching to mobile mode hides navigation', function() {
var mq = {matches: false};
window.matchMedia.returns(mq);
OC._matchMedia.returns(mq);
window.initCore();
expect($navigation.is(':visible')).toEqual(true);
mq.matches = true;
@ -356,7 +359,7 @@ describe('Core base tests', function() {
});
it('Switching to desktop mode shows navigation', function() {
var mq = {matches: true};
window.matchMedia.returns(mq);
OC._matchMedia.returns(mq);
window.initCore();
expect($navigation.is(':visible')).toEqual(false);
mq.matches = false;
@ -365,7 +368,7 @@ describe('Core base tests', function() {
});
it('Switch to desktop with opened menu then back to mobile resets toggle', function() {
var mq = {matches: true};
window.matchMedia.returns(mq);
OC._matchMedia.returns(mq);
window.initCore();
expect($navigation.is(':visible')).toEqual(false);
$toggle.click();