Merge pull request #703 from taigaio/issue-3422-fix-keyboard-navigation-in-assignedTo-watchers

fix keyboard navigation in assinedTo and watchers lightbox

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
+            if $el.find(".user-list-single").length == 1
-                $el.find('.watcher-single:first').trigger("click")
+                $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')
+                    activeElement.removeClass('selected')
-                    next.addClass('active')
+                    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')
+                    activeElement.removeClass('selected')
-                    prev.addClass('active')
+                    prev.addClass('selected')
 
     init: ($el) ->
         @stop()

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;
             }
         }

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;
         }

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);
 

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

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);
 

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');
         }
     };
 

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();
         },
-
         getUserName: function() {
             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;

e2e/utils/detail.js

@@ -70,17 +70,84 @@ helper.statusTesting = async function() {
     expect(newGenericStatus).to.be.not.equal(genericStatus);
 }
 
-helper.assignedToTesting = async function() {
+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();
-    await assignedTo.clear();
+
         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,17 +255,22 @@ helper.deleteTesting = async function() {
     await deleteHelper.delete();
 }
 
-helper.watchersTesting = async function() {
+helper.watchersTesting = function() {
+    before(function () {
         let watchersHelper = detailHelper.watchers();
-    await watchersHelper.removeAllWatchers();
+        return watchersHelper.removeAllWatchers();
+    })
 
+    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();
 
@@ -207,11 +279,59 @@ helper.watchersTesting = async function() {
         await userNames.push(newWatcherName);
 
         expect(newUserNames.join(',')).to.be.equal(userNames.join(','));
+    });
+
+    it('clear watcher', async function() {
+        let watchersHelper = detailHelper.watchers();
 
-    //Clear watchers
         await watchersHelper.removeAllWatchers();
-    newUserNames = await watchersHelper.getWatchersUserNames();
+
+        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) {