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:
parent
fe04106e0f
commit
cc6c152984
|
@ -997,41 +997,48 @@ function initCore() {
|
||||||
*/
|
*/
|
||||||
function setupMainMenu() {
|
function setupMainMenu() {
|
||||||
// toggle the navigation on mobile
|
// toggle the navigation on mobile
|
||||||
if (window.matchMedia) {
|
if (!OC._matchMedia) {
|
||||||
var mq = window.matchMedia('(max-width: 600px)');
|
return;
|
||||||
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();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
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);
|
$(document).ready(initCore);
|
||||||
|
|
|
@ -285,8 +285,11 @@ describe('Core base tests', function() {
|
||||||
var $navigation;
|
var $navigation;
|
||||||
|
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
oldMatchMedia = window.matchMedia;
|
oldMatchMedia = OC._matchMedia;
|
||||||
window.matchMedia = sinon.stub();
|
// 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">' +
|
$('#testArea').append('<div id="header">' +
|
||||||
'<a id="owncloud" href="#"></a>' +
|
'<a id="owncloud" href="#"></a>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
|
@ -296,23 +299,23 @@ describe('Core base tests', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(function() {
|
afterEach(function() {
|
||||||
window.matchMedia = oldMatchMedia;
|
OC._matchMedia = oldMatchMedia;
|
||||||
});
|
});
|
||||||
it('Sets up menu toggle in mobile mode', function() {
|
it('Sets up menu toggle in mobile mode', function() {
|
||||||
window.matchMedia.returns({matches: true});
|
OC._matchMedia.returns({matches: true});
|
||||||
window.initCore();
|
window.initCore();
|
||||||
expect($toggle.hasClass('menutoggle')).toEqual(true);
|
expect($toggle.hasClass('menutoggle')).toEqual(true);
|
||||||
expect($navigation.hasClass('menu')).toEqual(true);
|
expect($navigation.hasClass('menu')).toEqual(true);
|
||||||
});
|
});
|
||||||
it('Does not set up menu toggle in desktop mode', function() {
|
it('Does not set up menu toggle in desktop mode', function() {
|
||||||
window.matchMedia.returns({matches: false});
|
OC._matchMedia.returns({matches: false});
|
||||||
window.initCore();
|
window.initCore();
|
||||||
expect($toggle.hasClass('menutoggle')).toEqual(false);
|
expect($toggle.hasClass('menutoggle')).toEqual(false);
|
||||||
expect($navigation.hasClass('menu')).toEqual(false);
|
expect($navigation.hasClass('menu')).toEqual(false);
|
||||||
});
|
});
|
||||||
it('Switches on menu toggle when mobile mode changes', function() {
|
it('Switches on menu toggle when mobile mode changes', function() {
|
||||||
var mq = {matches: false};
|
var mq = {matches: false};
|
||||||
window.matchMedia.returns(mq);
|
OC._matchMedia.returns(mq);
|
||||||
window.initCore();
|
window.initCore();
|
||||||
expect($toggle.hasClass('menutoggle')).toEqual(false);
|
expect($toggle.hasClass('menutoggle')).toEqual(false);
|
||||||
mq.matches = true;
|
mq.matches = true;
|
||||||
|
@ -321,7 +324,7 @@ describe('Core base tests', function() {
|
||||||
});
|
});
|
||||||
it('Switches off menu toggle when mobile mode changes', function() {
|
it('Switches off menu toggle when mobile mode changes', function() {
|
||||||
var mq = {matches: true};
|
var mq = {matches: true};
|
||||||
window.matchMedia.returns(mq);
|
OC._matchMedia.returns(mq);
|
||||||
window.initCore();
|
window.initCore();
|
||||||
expect($toggle.hasClass('menutoggle')).toEqual(true);
|
expect($toggle.hasClass('menutoggle')).toEqual(true);
|
||||||
mq.matches = false;
|
mq.matches = false;
|
||||||
|
@ -329,7 +332,7 @@ describe('Core base tests', function() {
|
||||||
expect($toggle.hasClass('menutoggle')).toEqual(false);
|
expect($toggle.hasClass('menutoggle')).toEqual(false);
|
||||||
});
|
});
|
||||||
it('Clicking menu toggle toggles navigation in mobile mode', function() {
|
it('Clicking menu toggle toggles navigation in mobile mode', function() {
|
||||||
window.matchMedia.returns({matches: true});
|
OC._matchMedia.returns({matches: true});
|
||||||
window.initCore();
|
window.initCore();
|
||||||
$navigation.hide(); // normally done through media query triggered CSS
|
$navigation.hide(); // normally done through media query triggered CSS
|
||||||
expect($navigation.is(':visible')).toEqual(false);
|
expect($navigation.is(':visible')).toEqual(false);
|
||||||
|
@ -339,7 +342,7 @@ describe('Core base tests', function() {
|
||||||
expect($navigation.is(':visible')).toEqual(false);
|
expect($navigation.is(':visible')).toEqual(false);
|
||||||
});
|
});
|
||||||
it('Clicking menu toggle does not toggle navigation in desktop mode', function() {
|
it('Clicking menu toggle does not toggle navigation in desktop mode', function() {
|
||||||
window.matchMedia.returns({matches: false});
|
OC._matchMedia.returns({matches: false});
|
||||||
window.initCore();
|
window.initCore();
|
||||||
expect($navigation.is(':visible')).toEqual(true);
|
expect($navigation.is(':visible')).toEqual(true);
|
||||||
$toggle.click();
|
$toggle.click();
|
||||||
|
@ -347,7 +350,7 @@ describe('Core base tests', function() {
|
||||||
});
|
});
|
||||||
it('Switching to mobile mode hides navigation', function() {
|
it('Switching to mobile mode hides navigation', function() {
|
||||||
var mq = {matches: false};
|
var mq = {matches: false};
|
||||||
window.matchMedia.returns(mq);
|
OC._matchMedia.returns(mq);
|
||||||
window.initCore();
|
window.initCore();
|
||||||
expect($navigation.is(':visible')).toEqual(true);
|
expect($navigation.is(':visible')).toEqual(true);
|
||||||
mq.matches = true;
|
mq.matches = true;
|
||||||
|
@ -356,7 +359,7 @@ describe('Core base tests', function() {
|
||||||
});
|
});
|
||||||
it('Switching to desktop mode shows navigation', function() {
|
it('Switching to desktop mode shows navigation', function() {
|
||||||
var mq = {matches: true};
|
var mq = {matches: true};
|
||||||
window.matchMedia.returns(mq);
|
OC._matchMedia.returns(mq);
|
||||||
window.initCore();
|
window.initCore();
|
||||||
expect($navigation.is(':visible')).toEqual(false);
|
expect($navigation.is(':visible')).toEqual(false);
|
||||||
mq.matches = 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() {
|
it('Switch to desktop with opened menu then back to mobile resets toggle', function() {
|
||||||
var mq = {matches: true};
|
var mq = {matches: true};
|
||||||
window.matchMedia.returns(mq);
|
OC._matchMedia.returns(mq);
|
||||||
window.initCore();
|
window.initCore();
|
||||||
expect($navigation.is(':visible')).toEqual(false);
|
expect($navigation.is(':visible')).toEqual(false);
|
||||||
$toggle.click();
|
$toggle.click();
|
||||||
|
|
Loading…
Reference in New Issue