From b906cfe02a5e9afb496606207e14cb207ea68c52 Mon Sep 17 00:00:00 2001 From: Juanfran Date: Tue, 3 Nov 2015 13:32:32 +0100 Subject: [PATCH] fix keyboard navigation in assinedTo and watchers lightbox --- app/coffee/modules/common/lightboxes.coffee | 22 +-- app/styles/components/user-list.scss | 7 +- app/styles/modules/common/lightbox.scss | 5 +- e2e/full/issues/issue-detail.e2e.js | 4 +- e2e/full/tasks/task-detail.e2e.js | 4 +- .../user-stories/user-story-detail.e2e.js | 4 +- e2e/helpers/common-helper.js | 9 + e2e/helpers/detail-helper.js | 20 +- e2e/utils/detail.js | 178 +++++++++++++++--- 9 files changed, 196 insertions(+), 57 deletions(-) diff --git a/app/coffee/modules/common/lightboxes.coffee b/app/coffee/modules/common/lightboxes.coffee index 2bde4891..4cb8b372 100644 --- a/app/coffee/modules/common/lightboxes.coffee +++ b/app/coffee/modules/common/lightboxes.coffee @@ -89,34 +89,34 @@ class LightboxKeyboardNavigationService extends taiga.Service docEl.off(".keyboard-navigation") dispatch: ($el, code) -> - activeElement = $el.find(".active") + activeElement = $el.find(".selected") # Key: enter if code == 13 - if $el.find(".watcher-single").length == 1 - $el.find('.watcher-single:first').trigger("click") + if $el.find(".user-list-single").length == 1 + $el.find('.user-list-single:first').trigger("click") else activeElement.trigger("click") # Key: down else if code == 40 if not activeElement.length - $el.find('.watcher-single:first').addClass('active') + $el.find('.user-list-single:not(".is-active"):first').addClass('selected') else - next = activeElement.next('.watcher-single') + next = activeElement.next('.user-list-single') if next.length - activeElement.removeClass('active') - next.addClass('active') + activeElement.removeClass('selected') + next.addClass('selected') # Key: up else if code == 38 if not activeElement.length - $el.find('.watcher-single:last').addClass('active') + $el.find('.user-list-single:last').addClass('selected') else - prev = activeElement.prev('.watcher-single') + prev = activeElement.prev('.user-list-single:not(".is-active")') if prev.length - activeElement.removeClass('active') - prev.addClass('active') + activeElement.removeClass('selected') + prev.addClass('selected') init: ($el) -> @stop() diff --git a/app/styles/components/user-list.scss b/app/styles/components/user-list.scss index 0000c4dc..6247ddff 100644 --- a/app/styles/components/user-list.scss +++ b/app/styles/components/user-list.scss @@ -31,9 +31,12 @@ @extend %user-list; margin-top: 1rem; .user-list-single { - &:hover { + &:hover, + &.selected { background: lighten($primary, 58%); cursor: pointer; + } + &:hover { transition: background .3s linear; transition-delay: .2s; } @@ -48,7 +51,7 @@ opacity: 1; position: absolute; right: 1rem; - top: 1.3rem; + top: 1.5rem; transition: opacity .2s ease-in; } } diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss index 47c34245..14c3c70a 100644 --- a/app/styles/modules/common/lightbox.scss +++ b/app/styles/modules/common/lightbox.scss @@ -471,9 +471,12 @@ width: 600px; } .user-list-single { - &:hover { + &:hover, + &.selected { background: lighten($primary, 58%); cursor: pointer; + } + &:hover { transition: background .3s linear; transition-delay: .2s; } diff --git a/e2e/full/issues/issue-detail.e2e.js b/e2e/full/issues/issue-detail.e2e.js index f5486f83..5419b19f 100644 --- a/e2e/full/issues/issue-detail.e2e.js +++ b/e2e/full/issues/issue-detail.e2e.js @@ -32,9 +32,9 @@ describe('Issue detail', async function(){ it('status edition', utils.detail.statusTesting); - it('assigned to edition', utils.detail.assignedToTesting); + describe('assigned to edition', utils.detail.assignedToTesting); - it('watchers edition', utils.detail.watchersTesting); + describe('watchers edition', utils.detail.watchersTesting); it('history', utils.detail.historyTesting); diff --git a/e2e/full/tasks/task-detail.e2e.js b/e2e/full/tasks/task-detail.e2e.js index 01766da0..8739b1bd 100644 --- a/e2e/full/tasks/task-detail.e2e.js +++ b/e2e/full/tasks/task-detail.e2e.js @@ -34,9 +34,9 @@ describe('Task detail', function(){ it('status edition', utils.detail.statusTesting); - it('assigned to edition', utils.detail.assignedToTesting); + describe('assigned to edition', utils.detail.assignedToTesting); - it('watchers edition', utils.detail.watchersTesting); + describe('watchers edition', utils.detail.watchersTesting); it('iocaine edition', async function() { // Toggle iocaine status diff --git a/e2e/full/user-stories/user-story-detail.e2e.js b/e2e/full/user-stories/user-story-detail.e2e.js index 1bdd46b6..88849eac 100644 --- a/e2e/full/user-stories/user-story-detail.e2e.js +++ b/e2e/full/user-stories/user-story-detail.e2e.js @@ -33,7 +33,7 @@ describe('User story detail', function(){ it('status edition', utils.detail.statusTesting); - it('assigned to edition', utils.detail.assignedToTesting); + describe('assigned to edition', utils.detail.assignedToTesting); it('team requirement edition', async function() { let requirementHelper = usDetailHelper.teamRequirement(); @@ -65,7 +65,7 @@ describe('User story detail', function(){ expect(isRequired).to.be.equal(newIsRequired); }); - it('watchers edition', utils.detail.watchersTesting); + describe('watchers edition', utils.detail.watchersTesting); it('history', utils.detail.historyTesting); diff --git a/e2e/helpers/common-helper.js b/e2e/helpers/common-helper.js index 3af5d7f9..fc1ee715 100644 --- a/e2e/helpers/common-helper.js +++ b/e2e/helpers/common-helper.js @@ -20,6 +20,15 @@ helper.assignToLightbox = function() { }, getName: function(item) { return el.$$('div[data-user-id] .user-list-name').get(item).getText(); + }, + getNames: function() { + return el.$$('.user-list-name').getText(); + }, + filter: function(text) { + return el.$('input').sendKeys(text); + }, + userList: function() { + return el.$$('.user-list-single'); } }; diff --git a/e2e/helpers/detail-helper.js b/e2e/helpers/detail-helper.js index 3f4d38b2..bc787d86 100644 --- a/e2e/helpers/detail-helper.js +++ b/e2e/helpers/detail-helper.js @@ -114,7 +114,6 @@ helper.assignedTo = function() { let obj = { el: el, - clear: async function() { await browser.actions().mouseMove(el).perform(); @@ -124,15 +123,12 @@ helper.assignedTo = function() { await browser.waitForAngular(); } }, - assign: function() { - el.$('.user-assigned').click(); + el.$('.user-assigned').click(); }, - getUserName: function() { - return el.$('.user-assigned').getText(); + return el.$('.user-assigned').getText(); } - }; return obj; @@ -422,8 +418,16 @@ helper.watchersLightbox = function() { }, getFirstName: function() { return el.$$('.lightbox .ticket-watchers div[data-user-id]').first().getText(); - } - + }, + getNames: function() { + return el.$$('.user-list-name').getText(); + }, + filter: function(text) { + return el.$('input').sendKeys(text); + }, + userList: function() { + return el.$$('.user-list-single'); + } }; return obj; diff --git a/e2e/utils/detail.js b/e2e/utils/detail.js index 952aa295..eb65b555 100644 --- a/e2e/utils/detail.js +++ b/e2e/utils/detail.js @@ -70,17 +70,84 @@ helper.statusTesting = async function() { expect(newGenericStatus).to.be.not.equal(genericStatus); } -helper.assignedToTesting = async function() { - let assignedTo = detailHelper.assignedTo(); - let assignToLightbox = commonHelper.assignToLightbox(); - let userName = detailHelper.assignedTo().getUserName(); - await assignedTo.clear(); - assignedTo.assign(); - await assignToLightbox.waitOpen(); - assignToLightbox.selectFirst(); - await assignToLightbox.waitClose(); - let newUserName = assignedTo.getUserName(); - expect(newUserName).to.be.not.equal(userName); +helper.assignedToTesting = function() { + before(function () { + let assignedTo = detailHelper.assignedTo(); + return assignedTo.clear(); + }) + + it('assign', async function() { + let assignedTo = detailHelper.assignedTo(); + let assignToLightbox = commonHelper.assignToLightbox(); + let userName = detailHelper.assignedTo().getUserName(); + + assignedTo.assign(); + + await assignToLightbox.waitOpen(); + + assignToLightbox.selectFirst(); + + await assignToLightbox.waitClose(); + + let newUserName = assignedTo.getUserName(); + + expect(newUserName).to.be.not.equal(userName); + }); + + it('unassign', async function() { + let assignedTo = detailHelper.assignedTo(); + let assignToLightbox = commonHelper.assignToLightbox(); + + await assignedTo.clear(); + + let newUserName = await assignedTo.getUserName(); + + expect(newUserName).to.be.equal('Not assigned'); + }); + + it('filter', async function () { + let assignedTo = detailHelper.assignedTo(); + let assignToLightbox = commonHelper.assignToLightbox(); + + assignedTo.assign(); + + await assignToLightbox.waitOpen(); + + let names = await assignToLightbox.getNames(); + + await assignToLightbox.filter(names[0]); + + let newNames = await assignToLightbox.getNames(); + + expect(newNames).to.have.length(1); + + assignToLightbox.selectFirst(); + + await assignToLightbox.waitClose(); + }); + + it('keyboard navigatin', async function() { + let assignedTo = detailHelper.assignedTo(); + let assignToLightbox = commonHelper.assignToLightbox(); + + assignedTo.assign(); + + await assignToLightbox.waitOpen(); + + browser + .actions() + .sendKeys(protractor.Key.ARROW_DOWN) + .sendKeys(protractor.Key.ARROW_DOWN) + .sendKeys(protractor.Key.ARROW_DOWN) + .sendKeys(protractor.Key.ARROW_UP) + .perform(); + + let selected = assignToLightbox.userList().get(2); + + let isSelected = await commonUtil.hasClass(selected, 'selected'); + + expect(isSelected).to.be.true; + }); } helper.historyTesting = async function() { @@ -188,30 +255,83 @@ helper.deleteTesting = async function() { await deleteHelper.delete(); } -helper.watchersTesting = async function() { - let watchersHelper = detailHelper.watchers(); - await watchersHelper.removeAllWatchers(); +helper.watchersTesting = function() { + before(function () { + let watchersHelper = detailHelper.watchers(); + return watchersHelper.removeAllWatchers(); + }) - let watchersLightboxHelper = detailHelper.watchersLightbox(); - let userNames = await watchersHelper.getWatchersUserNames(); + it('add watcher', async function() { + let watchersHelper = detailHelper.watchers(); + let watchersLightboxHelper = detailHelper.watchersLightbox(); + let userNames = await watchersHelper.getWatchersUserNames(); - //Add watcher - await watchersHelper.addWatcher(); - await watchersLightboxHelper.waitOpen(); - let newWatcherName = await watchersLightboxHelper.getFirstName(); - await watchersLightboxHelper.selectFirst(); - await watchersLightboxHelper.waitClose(); + await watchersHelper.addWatcher(); + await watchersLightboxHelper.waitOpen(); - let newUserNames = await watchersHelper.getWatchersUserNames(); + let newWatcherName = await watchersLightboxHelper.getFirstName(); - await userNames.push(newWatcherName); + await watchersLightboxHelper.selectFirst(); + await watchersLightboxHelper.waitClose(); - expect(newUserNames.join(',')).to.be.equal(userNames.join(',')); + let newUserNames = await watchersHelper.getWatchersUserNames(); - //Clear watchers - await watchersHelper.removeAllWatchers(); - newUserNames = await watchersHelper.getWatchersUserNames(); - expect(newUserNames.join()).to.be.equal(''); + await userNames.push(newWatcherName); + + expect(newUserNames.join(',')).to.be.equal(userNames.join(',')); + }); + + it('clear watcher', async function() { + let watchersHelper = detailHelper.watchers(); + + await watchersHelper.removeAllWatchers(); + + let newUserNames = await watchersHelper.getWatchersUserNames(); + + expect(newUserNames.join()).to.be.equal(''); + }); + + it('filter watcher', async function () { + let watchersHelper = detailHelper.watchers(); + let watchersLightboxHelper = detailHelper.watchersLightbox(); + let userNames = await watchersHelper.getWatchersUserNames(); + + await watchersHelper.addWatcher(); + await watchersLightboxHelper.waitOpen(); + + let names = await watchersLightboxHelper.getNames(); + + await watchersLightboxHelper.filter(names[0]); + + let newNames = await watchersLightboxHelper.getNames(); + + expect(newNames).to.have.length(1); + + await watchersLightboxHelper.selectFirst(); + await watchersLightboxHelper.waitClose(); + }); + + it('keyboard navigatin', async function() { + let watchersHelper = detailHelper.watchers(); + let watchersLightboxHelper = detailHelper.watchersLightbox(); + + await watchersHelper.addWatcher(); + await watchersLightboxHelper.waitOpen(); + + browser + .actions() + .sendKeys(protractor.Key.ARROW_DOWN) + .sendKeys(protractor.Key.ARROW_DOWN) + .sendKeys(protractor.Key.ARROW_DOWN) + .sendKeys(protractor.Key.ARROW_UP) + .perform(); + + let selected = watchersLightboxHelper.userList().get(1); + + let isSelected = await commonUtil.hasClass(selected, 'selected'); + + expect(isSelected).to.be.true; + }); } helper.customFields = function(typeIndex) {