Hi, This patch fixes Dialog tabset keyboard navigation. This regression was caused due to bootstrap 4 changes. Also I have added jasmine test cases for the same
-- *Harshal Dhumal* *Sr. Software Engineer* EnterpriseDB India: http://www.enterprisedb.com The Enterprise PostgreSQL Company
diff --git a/web/pgadmin/static/js/dialog_tab_navigator.js b/web/pgadmin/static/js/dialog_tab_navigator.js index 19b2045..ea5fec3 100644 --- a/web/pgadmin/static/js/dialog_tab_navigator.js +++ b/web/pgadmin/static/js/dialog_tab_navigator.js @@ -86,7 +86,7 @@ class dialogTabNavigator { var self = this, nextTabPane, innerTabContainer, - prevtab = $(tabs).find('li.active').prev('li'); + prevtab = $(tabs).find('li').has('a.active').prev('li'); if (prevtab.length > 0) { prevtab.find('a').tab('show'); @@ -116,7 +116,7 @@ class dialogTabNavigator { var self = this, nextTabPane, innerTabContainer, - nexttab = $(tabs).find('li.active').next('li'); + nexttab = $(tabs).find('li').has('a.active').next('li'); if(nexttab.length > 0) { nexttab.find('a').tab('show'); @@ -149,4 +149,4 @@ class dialogTabNavigator { module.exports = { dialogTabNavigator: dialogTabNavigator, -}; \ No newline at end of file +}; diff --git a/web/regression/javascript/dialog_tab_navigator_spec.js b/web/regression/javascript/dialog_tab_navigator_spec.js index f355e88..5c46996 100644 --- a/web/regression/javascript/dialog_tab_navigator_spec.js +++ b/web/regression/javascript/dialog_tab_navigator_spec.js @@ -14,10 +14,10 @@ describe('dialogTabNavigator', function () { let dialog, tabNavigator, backward_shortcut, forward_shortcut; beforeEach(() => { - let dialogHtml =$('<div tabindex="1" class="backform-tab" role="tabpanel">'+ + let dialogHtml = $('<div tabindex="1" class="backform-tab" role="tabpanel">'+ ' <ul class="nav nav-tabs" role="tablist">'+ - ' <li role="presentation" class="active">'+ - ' <a data-toggle="tab" tabindex="-1" data-tab-index="1" href="#1" aria-controls="1"> General</a>'+ + ' <li role="presentation">'+ + ' <a class="active" data-toggle="tab" tabindex="-1" data-tab-index="1" href="#1" aria-controls="1"> General</a>'+ ' </li>'+ ' <li role="presentation">'+ ' <a data-toggle="tab" tabindex="-1" data-tab-index="5" href="#2" aria-controls="2"> Default Privileges</a>'+ @@ -112,4 +112,93 @@ describe('dialogTabNavigator', function () { }); -}); \ No newline at end of file + + describe('navigateForward from fist tab to second tab', function () { + var navigateForwardResult; + beforeEach(() => { + spyOn(tabNavigator, 'navigateForward').and.callThrough(); + + navigateForwardResult = tabNavigator.navigateForward( + dialog.$el.find('ul.nav-tabs:first'), + dialog.$el.find('div#1') + ); + }); + + it('should return true', function () { + + expect(navigateForwardResult).toEqual(true); + + }); + + }); + + + describe('navigateForward from last tab', function () { + var navigateForwardResult; + beforeEach(() => { + + // set second tab active + dialog.$el.find('ul.nav-tabs li a.active').removeClass('active'); + + dialog.$el.find('ul.nav-tabs li a[href="#3"]').addClass('active'); + + spyOn(tabNavigator, 'navigateForward').and.callThrough(); + + navigateForwardResult = tabNavigator.navigateForward( + dialog.$el.find('ul.nav-tabs:first'), + dialog.$el.find('div#1') + ); + }); + + it('should return false', function () { + + expect(navigateForwardResult).toEqual(false); + + }); + + }); + + describe('navigateBackward from second tab to first tab', function () { + var navigateBackwardResult; + beforeEach(() => { + // set second tab active + dialog.$el.find('ul.nav-tabs li a.active').removeClass('active'); + + dialog.$el.find('ul.nav-tabs li a[href="#2"]').addClass('active'); + + spyOn(tabNavigator, 'navigateBackward').and.callThrough(); + + navigateBackwardResult = tabNavigator.navigateBackward( + dialog.$el.find('ul.nav-tabs:first'), + dialog.$el.find('div#1') + ); + }); + + it('should return true', function () { + + expect(navigateBackwardResult).toEqual(true); + + }); + + }); + + describe('navigateBackward from first tab', function () { + var navigateBackwardResult; + beforeEach(() => { + spyOn(tabNavigator, 'navigateBackward').and.callThrough(); + + navigateBackwardResult = tabNavigator.navigateBackward( + dialog.$el.find('ul.nav-tabs:first'), + dialog.$el.find('div#1') + ); + }); + + it('should return false', function () { + + expect(navigateBackwardResult).toEqual(false); + + }); + + }); + +});