show toltip for all mat menu template explore buttons

e2e/src/navigating/navigateFromRegion.prod.e2e-spec.js

@@ -161,14 +161,12 @@ describe('> explore same region in different templates', () => {
     it('> Tooltip visible if overflowed', async () => {
       const data2 = TEST_DATA[1]
       await getBeforeEachFn(iavPage)(data2)()
-
-      const {expectedRegion, expectedTemplateLabels, position, url, templateName} = data2
-
+      const {expectedTemplateLabels} = data2
       const desiredTemplateButton = await expectedTemplateLabels.find(el => el.name.length > 30)
-
       if (desiredTemplateButton) {
-        const test = await iavPage.getAttribute(`[aria-label="${SHOW_IN_OTHER_REF_SPACE}: ${desiredTemplateButton.name}${desiredTemplateButton.hemisphere ? (' - ' + desiredTemplateButton.hemisphere) : ''}"]`, 'matTooltip')
-        console.log(test)
+        await iavPage.cursorMoveToElement(`[aria-label="${SHOW_IN_OTHER_REF_SPACE}: ${desiredTemplateButton.name}${desiredTemplateButton.hemisphere ? (' - ' + desiredTemplateButton.hemisphere) : ''}"]`)
+        const tooltipText = await iavPage.getText('mat-tooltip-component')
+        expect(tooltipText.trim()).toContain(desiredTemplateButton.name)
       }
     })
   })

e2e/src/util.js

@@ -184,6 +184,18 @@ class WdBase{
       .perform()
   }
 
+  async cursorMoveToElement(cssSelector) {
+    if (!cssSelector) throw new Error(`cursorMoveToElement needs to define css selector`)
+    const el = await this._browser.findElement( By.css(cssSelector) )
+    await this._driver.actions()
+      .move()
+      .move({
+        origin: el,
+        duration: 1000
+      })
+      .perform()
+  }
+
   async scrollElementBy(cssSelector, options) {
     const { delta } = options
     await this._browser.executeScript(() => {

src/ui/parcellationRegion/regionMenu/regionMenu.template.html

@@ -192,7 +192,7 @@
             <mat-icon fontSet="fas" fontIcon="fa-none" mat-list-icon></mat-icon>
             <div class="cursorPointer" #exploreTemplateButton mat-line>
               <span #exploreTemplateName class="overflow-x-hidden text-truncate"
-                    [matTooltip]="exploreTemplateButton.offsetWidth < exploreTemplateName.offsetWidth? sameRegion.template.name + ' ' + sameRegion.hemisphere : null">
+                    [matTooltip]="sameRegion.template.name + ' ' + sameRegion.hemisphere">
                 {{ sameRegion.template.name + ' ' + sameRegion.hemisphere }}
               </span>
             </div>