From cc6c1529848022765b9be6be808cf4dfb5b2d029 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Tue, 18 Mar 2014 15:52:06 +0100 Subject: [PATCH] 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 --- core/js/js.js | 71 ++++++++++++++++++--------------- core/js/tests/specs/coreSpec.js | 27 +++++++------ 2 files changed, 54 insertions(+), 44 deletions(-) diff --git a/core/js/js.js b/core/js/js.js index aefca23509..87b2d59f16 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -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); diff --git a/core/js/tests/specs/coreSpec.js b/core/js/tests/specs/coreSpec.js index 7fa0b8e9e6..57ea5be8be 100644 --- a/core/js/tests/specs/coreSpec.js +++ b/core/js/tests/specs/coreSpec.js @@ -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('' + @@ -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();