feat(mon-pix): close user logged menu on link mouse click

Author: Jeyffrey

mon-pix/app/components/user-logged-menu.gjs

@@ -10,7 +10,46 @@ import t from 'ember-intl/helpers/t';
 import onKey from 'ember-keyboard/modifiers/on-key';
 
 export default class UserLoggedMenu extends Component {
+  @service currentUser;
+
+  @tracked canDisplayMenu = false;
+
+  get displayedIdentifier() {
+    return this.currentUser.user.email ? this.currentUser.user.email : this.currentUser.user.username;
+  }
+
+  get showMyTestsLink() {
+    return this.currentUser.user.hasAssessmentParticipations;
+  }
+
+  @action
+  toggleUserMenu() {
+    this.canDisplayMenu = !this.canDisplayMenu;
+  }
+
+  @action
+  closeMenu() {
+    this.canDisplayMenu = false;
+  }
+
+  @action
+  handleTab() {
+    /* `setTimeout(..., 0)` is used to wait the next browser rendering and get the new focused element */
+    setTimeout(() => {
+      if (!document.activeElement.classList.contains('logged-user-menu__link')) {
+        this.closeMenu();
+      }
+    }, 0);
+  }
+
+  @action
+  closeMenuOnPointerClick(event) {
+    if (!event.pointerType || !event.target.closest('.logged-user-menu__link')) return;
+    this.closeMenu();
+  }
+
   <template>
+    {{! template-lint-disable no-invalid-interactive }}
     <div class="logged-user-details">
       {{#if this.currentUser.user}}
         <button
@@ -31,6 +70,7 @@ export default class UserLoggedMenu extends Component {
             {{onClickOutside this.closeMenu}}
             {{onKey "Escape" this.closeMenu}}
             {{onKey "Tab" this.handleTab}}
+            {{on "click" this.closeMenuOnPointerClick}}
           >
             <div class="logged-user-menu__details">
               <div class="logged-user-menu-details__fullname">{{this.currentUser.user.fullName}}</div>
@@ -75,35 +115,4 @@ export default class UserLoggedMenu extends Component {
       {{/if}}
     </div>
   </template>
-  @service currentUser;
-
-  @tracked canDisplayMenu = false;
-
-  get displayedIdentifier() {
-    return this.currentUser.user.email ? this.currentUser.user.email : this.currentUser.user.username;
-  }
-
-  get showMyTestsLink() {
-    return this.currentUser.user.hasAssessmentParticipations;
-  }
-
-  @action
-  toggleUserMenu() {
-    this.canDisplayMenu = !this.canDisplayMenu;
-  }
-
-  @action
-  closeMenu() {
-    this.canDisplayMenu = false;
-  }
-
-  @action
-  handleTab() {
-    /* `setTimeout(..., 0)` is used to wait the next browser rendering and get the new focused element */
-    setTimeout(() => {
-      if (!document.activeElement.classList.contains('logged-user-menu__link')) {
-        this.closeMenu();
-      }
-    }, 0);
-  }
 }

mon-pix/app/styles/components/_user-logged-menu.scss

@@ -94,4 +94,8 @@
     text-decoration: none;
     background-color: var(--pix-neutral-20);
   }
+
+  &.active {
+    font-weight: bold;
+  }
 }

mon-pix/tests/integration/components/user-logged-menu-test.js

@@ -1,5 +1,5 @@
 import { render } from '@1024pix/ember-testing-library';
-import { click, triggerKeyEvent } from '@ember/test-helpers';
+import { click, settled, triggerEvent, triggerKeyEvent } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { t } from 'ember-intl/test-support';
 import { module, test } from 'qunit';
@@ -167,6 +167,52 @@ module('Integration | Component | user logged menu', function (hooks) {
       assert.dom(screen.queryByRole('link', { name: t('navigation.user.account') })).doesNotExist();
     });
 
+    test('should hide user menu when a link is clicked with a pointer device', async function (assert) {
+      // given
+      const screen = await render(hbs`<UserLoggedMenu />`);
+      const buttonMenu = screen.getByRole('button', {
+        name: `Hermione ${t('navigation.user-logged-menu.details')}`,
+      });
+      await click(buttonMenu);
+
+      // when
+      const link = screen.getByRole('link', { name: t('navigation.main.help') });
+      link.dispatchEvent(new PointerEvent('click', { bubbles: true, pointerType: 'mouse' }));
+      await settled();
+
+      // then
+      assert
+        .dom(
+          screen.getByRole('button', {
+            name: `Hermione ${t('navigation.user-logged-menu.details')}`,
+            expanded: false,
+          }),
+        )
+        .exists();
+    });
+
+    test('should keep user menu open when a link is activated with the keyboard', async function (assert) {
+      // given
+      const screen = await render(hbs`<UserLoggedMenu />`);
+      const buttonMenu = screen.getByRole('button', {
+        name: `Hermione ${t('navigation.user-logged-menu.details')}`,
+      });
+      await click(buttonMenu);
+
+      // when
+      await triggerEvent(screen.getByRole('link', { name: t('navigation.main.help') }), 'click', { detail: 0 });
+
+      // then
+      assert
+        .dom(
+          screen.getByRole('button', {
+            name: `Hermione ${t('navigation.user-logged-menu.details')}`,
+            expanded: true,
+          }),
+        )
+        .exists();
+    });
+
     module('Link to "My tests"', function () {
       module('when user has at least one participation', function (hooks) {
         hooks.beforeEach(function () {