@mgdis/mg-components 5.16.0 → 5.18.0

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -1,7 +1,7 @@
-import { h, Host } from '@stencil/core';
-import { createID, focusableElements, getWindows } from '../../../utils/components.utils';
-import { createPopper } from '@popperjs/core';
-import { Guard } from './mg-tooltip.conf';
+import { h, Host } from "@stencil/core";
+import { createID, focusableElements, getWindows } from "../../../utils/components.utils";
+import { createPopper } from "@popperjs/core";
+import { Guard } from "./mg-tooltip.conf";
 /**
  * HTMLMgButtonElement type guard
  * @param element - element to check
@@ -145,6 +145,12 @@ export class MgTooltip {
               offset: [0, 8],
             },
           },
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: ['auto'],
+            },
+          },
         ],
       });
       // Manage tooltipedElement focus/blur events
@@ -182,6 +188,10 @@ export class MgTooltip {
     this.display = false;
     this.disabled = false;
   }
+  validateIdentifier() {
+    // use renderTooltipContent to update tooltip-content id
+    this.renderTooltipContent();
+  }
   validateMessage(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-tooltip> prop "message" is required.');
@@ -207,16 +217,22 @@ export class MgTooltip {
   /**
    * Render tooltip content element
    */
-  renderTooltip() {
-    const mgTooltipContent = document.createElement('mg-tooltip-content');
-    mgTooltipContent.setAttribute('slot', 'content');
-    mgTooltipContent.setAttribute('id', this.identifier);
-    const arrow = document.createElement('div');
-    arrow.setAttribute('slot', 'arrow');
-    arrow.dataset.popperArrow = '';
-    mgTooltipContent.appendChild(arrow);
-    // append tooltip element to component
-    this.element.appendChild(mgTooltipContent);
+  renderTooltipContent() {
+    const mgTooltipContent = this.element.querySelector('mg-tooltip-content');
+    if (mgTooltipContent === null) {
+      const mgTooltipContent = document.createElement('mg-tooltip-content');
+      mgTooltipContent.setAttribute('slot', 'content');
+      mgTooltipContent.setAttribute('id', this.identifier);
+      const arrow = document.createElement('div');
+      arrow.setAttribute('slot', 'arrow');
+      arrow.dataset.popperArrow = '';
+      mgTooltipContent.appendChild(arrow);
+      // append tooltip element to component
+      this.element.appendChild(mgTooltipContent);
+    }
+    else {
+      mgTooltipContent.setAttribute('id', this.identifier);
+    }
   }
   /*************
    * Lifecycle *
@@ -228,11 +244,12 @@ export class MgTooltip {
     // Get windows to attach events
     this.windows = getWindows(window);
     // Get tooltip element
-    this.renderTooltip();
+    this.renderTooltipContent();
     this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
     //validate properties
     this.validateDisabled(this.disabled);
     this.validateMessage(this.message);
+    this.validateIdentifier();
   }
   /**
    * Get slotted element
@@ -336,7 +353,8 @@ export class MgTooltip {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "@popperjs/core",
+              "id": "../../node_modules/.pnpm/@popperjs+core@2.11.7/node_modules/@popperjs/core/index.d.ts::Placement"
             }
           }
         },
@@ -391,6 +409,9 @@ export class MgTooltip {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "identifier",
+        "methodName": "validateIdentifier"
+      }, {
         "propName": "message",
         "methodName": "validateMessage"
       }, {
@@ -402,3 +423,4 @@ export class MgTooltip {
       }];
   }
 }
+//# sourceMappingURL=mg-tooltip.js.map

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tooltip.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createID, focusableElements, getWindows } from '../../../utils/components.utils';\nimport { Instance as PopperInstance, createPopper, Placement } from '@popperjs/core';\nimport { Guard } from './mg-tooltip.conf';\n\n/**\n * HTMLMgButtonElement type guard\n * @param element - element to check\n * @returns return true if type is HTMLMgButtonElement\n */\nconst isButton = (element: unknown): element is HTMLMgButtonElement => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes((element as Element).tagName);\n\n@Component({\n  tag: 'mg-tooltip',\n  styleUrl: 'mg-tooltip.scss',\n  shadow: true,\n})\nexport class MgTooltip {\n  /************\n   * Internal *\n   ************/\n\n  private popper: PopperInstance;\n  private mgTooltipContent: HTMLMgTooltipContentElement;\n  private tooltipedElement: HTMLElement;\n  private windows: Window[];\n  private hasCustomTabIndex: boolean;\n\n  // tooltip actions guards\n  private guard: Guard;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTooltipElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string = createID('mg-tooltip');\n  @Watch('identifier')\n  validateIdentifier(): void {\n    // use renderTooltipContent to update tooltip-content id\n    this.renderTooltipContent();\n  }\n\n  /**\n   * Displayed message in the tooltip\n   */\n  @Prop() message!: string;\n  @Watch('message')\n  validateMessage(newValue: string): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') {\n      throw new Error('<mg-tooltip> prop \"message\" is required.');\n    }\n    this.mgTooltipContent.message = newValue;\n  }\n\n  /**\n   * Tooltip placement\n   */\n  @Prop() placement: Placement = 'bottom';\n\n  /**\n   * Display tooltip\n   */\n  @Prop({ mutable: true }) display = false;\n  @Watch('display')\n  handleDisplay(newValue: boolean): void {\n    if (newValue) {\n      this.show();\n    } else {\n      this.hide();\n    }\n  }\n\n  /**\n   * Disable tooltip\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  validateDisabled(newValue: MgTooltip['disabled']): void {\n    if (this.hasCustomTabIndex) {\n      if (newValue) this.tooltipedElement.removeAttribute('tabindex');\n      else if (this.tooltipedElement.getAttribute('tabindex') === null) this.tooltipedElement.setAttribute('tabindex', '0');\n    }\n  }\n\n  /**\n   * Show tooltip\n   */\n  private show = (): void => {\n    // Make the tooltip visible\n    this.mgTooltipContent.dataset.show = '';\n    // Enable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],\n    }));\n    // hide when click outside\n    // setTimeout is used to prevent event to trigger after creation\n    setTimeout(() => {\n      this.windows.forEach((localWindow: Window) => {\n        localWindow.addEventListener('click', this.clickOutside, false);\n        localWindow.addEventListener('keydown', this.pressEscape, false);\n      });\n    }, 0);\n  };\n\n  /**\n   * Hide tooltip\n   */\n  private hide = (): void => {\n    // Hide the tooltip\n    this.mgTooltipContent.removeAttribute('data-show');\n    // Disable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],\n    }));\n    // Remove event listener\n    this.windows.forEach((localWindow: Window) => {\n      localWindow.removeEventListener('click', this.clickOutside, false);\n      localWindow.removeEventListener('keyboard', this.pressEscape, false);\n    });\n  };\n\n  /**\n   * Check if clicked outside of component and hidde tooltip\n   * @param event - mouse event\n   */\n  private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n    if (event.target.closest('mg-tooltip') !== this.element) this.setDisplay(false);\n  };\n\n  /**\n   * Check if 'Escape' key is pressed of component and hidde tooltip\n   * @param event - keyboard event\n   */\n  private pressEscape = (event: KeyboardEvent): void => {\n    if (event.code === 'Escape') {\n      this.setDisplay(false);\n      this.resetGuard();\n    }\n  };\n\n  /**\n   * Method to set display prop\n   * @param newValue - display prop new value\n   * @param condition - additionnal condition to apply display prop newValue\n   */\n  private setDisplay = (newValue: boolean, condition = true): void => {\n    if (!this.disabled && condition) this.display = newValue;\n  };\n\n  /**\n   * Action for tooltip element and tooltiped element mouse listener\n   * @param elementGuard -  tooltip element guard\n   * @param isMouseenter - mouseenter validation\n   * @param conditionalGuard - guard condition\n   */\n  private tooltipMouseListenerAction = (elementGuard: Guard, isMouseenter: boolean, conditionalGuard: Guard): void => {\n    // we mutate elementGuard\n    if (this.guard !== Guard.FOCUS) {\n      this.guard = elementGuard;\n      if (!isMouseenter) {\n        setTimeout(() => {\n          this.setDisplay(isMouseenter, this.guard !== conditionalGuard);\n          this.resetGuard();\n        }, 100);\n      } else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {\n        this.setDisplay(isMouseenter);\n      }\n    }\n  };\n\n  /**\n   * Method to reset guard value\n   */\n  private resetGuard = (): void => {\n    this.guard = undefined;\n  };\n\n  /**\n   * Update slot content when it is a mg-button\n   * @param mgButton - slotted mg-button\n   */\n  private setMgButtonWrapper = (mgButton: HTMLMgButtonElement): void => {\n    if (mgButton.disabled) {\n      const div = document.createElement('div');\n      div.classList.add('mg-tooltip__mg-button-wrapper');\n      mgButton.parentNode.insertBefore(div, mgButton);\n      div.appendChild(mgButton);\n      this.tooltipedElement = div;\n    } else if (mgButton.parentElement.classList.contains('mg-tooltip__mg-button-wrapper')) {\n      this.element.firstElementChild.replaceWith(mgButton);\n      this.tooltipedElement = mgButton;\n    }\n  };\n\n  /**\n   * Init tooltip\n   * @param slotElement - slotted element\n   * @param interactiveElement - interactive element\n   */\n  private initTooltip = (slotElement: HTMLElement, interactiveElement: HTMLElement): void => {\n    // Add tabindex to slotted element if we can't find any interactive element\n    if (!this.disabled && !Boolean(interactiveElement)) {\n      this.hasCustomTabIndex = true;\n      slotElement.tabIndex = 0;\n      // Add role on non-interactive element to work with \"aria-describedby\" for screen readers\n      slotElement.setAttribute('role', 'button');\n    }\n    // Set aria-describedby\n    const ariaDescribedby = slotElement.getAttribute('aria-describedby');\n\n    if (ariaDescribedby === null) {\n      this.tooltipedElement.setAttribute('aria-describedby', this.identifier);\n    } else {\n      // We ensure to have uniq ids\n      slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);\n    }\n\n    // Create popperjs tooltip\n    this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {\n      placement: this.placement,\n      strategy: 'fixed',\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, 8],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['auto'],\n          },\n        },\n      ],\n    });\n\n    // Manage tooltipedElement focus/blur events\n    this.tooltipedElement.addEventListener('focus', () => {\n      this.guard = Guard.FOCUS;\n      this.setDisplay(true);\n    });\n\n    // as `click` event is the composition of `mousedown` and `mouseup` event,\n    // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`\n    // we reset the guard on `mouseup` event to unlock tooltip\n    this.tooltipedElement.addEventListener('mouseup', () => {\n      this.resetGuard();\n    });\n\n    this.tooltipedElement.addEventListener('blur', () => {\n      this.resetGuard();\n      this.setDisplay(false);\n    });\n\n    document.addEventListener('keydown', this.pressEscape);\n\n    // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n    ['mouseenter', 'mouseleave'].forEach(eventType => {\n      const isMouseenter = eventType === 'mouseenter';\n      [\n        { element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },\n        { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },\n      ].forEach(({ element, action }) => {\n        element.addEventListener(eventType, () => {\n          action();\n        });\n      });\n    });\n  };\n\n  /**\n   * Render tooltip content element\n   */\n  private renderTooltipContent(): void {\n    const mgTooltipContent = this.element.querySelector('mg-tooltip-content');\n    if (mgTooltipContent === null) {\n      const mgTooltipContent = document.createElement('mg-tooltip-content');\n      mgTooltipContent.setAttribute('slot', 'content');\n      mgTooltipContent.setAttribute('id', this.identifier);\n\n      const arrow = document.createElement('div');\n      arrow.setAttribute('slot', 'arrow');\n      arrow.dataset.popperArrow = '';\n      mgTooltipContent.appendChild(arrow);\n\n      // append tooltip element to component\n      this.element.appendChild(mgTooltipContent);\n    } else {\n      mgTooltipContent.setAttribute('id', this.identifier);\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * set variables\n   */\n  componentWillLoad(): void {\n    // Get windows to attach events\n    this.windows = getWindows(window);\n\n    // Get tooltip element\n    this.renderTooltipContent();\n    this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);\n\n    //validate properties\n    this.validateDisabled(this.disabled);\n    this.validateMessage(this.message);\n    this.validateIdentifier();\n  }\n\n  /**\n   * Get slotted element\n   * Check if it already contain an interactive element, if not we need to add a tabIndex attribute\n   * We need to attach the focused element to the tooltip (aria-describedby)\n   */\n  componentDidLoad(): void {\n    // get slotted element wich is not the tooltip\n    const slotElement: HTMLElement = this.element.querySelector(`*:not(#${this.identifier})`);\n\n    // Get interactive element\n    const interactiveElement: HTMLElement = slotElement.matches(focusableElements) ? slotElement : slotElement.shadowRoot?.querySelector(focusableElements);\n\n    // define selected element to become tooltip selector\n    this.tooltipedElement = interactiveElement || slotElement;\n\n    // Check if slotted element is a disabled mg-button\n    // In this case we wrap the mg-button into a div to enable the tooltip\n    if (isButton(slotElement)) {\n      new MutationObserver(mutationList => {\n        if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {\n          this.setMgButtonWrapper(slotElement);\n          // Since Firefox doesn't trigger a \"blur\" event when the \"disabled\" attribute is added or removed from a button\n          // we have to manually unlock the guard because the \"blur\" handler of the tooltipedElement won't do it.\n          this.resetGuard();\n          this.initTooltip(slotElement, interactiveElement);\n        }\n      }).observe(slotElement, { attributes: true });\n      this.setMgButtonWrapper(slotElement);\n    }\n\n    // Init Tooltip\n    this.initTooltip(slotElement, interactiveElement);\n\n    this.handleDisplay(this.display);\n  }\n\n  /**\n   * update popper position after props change on component did update hook to benefit from render ended\n   */\n  componentDidUpdate(): void {\n    this.popper.update();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <slot></slot>\n        <slot name=\"content\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/atoms/mg-tooltip/test/mg-tooltip.e2e.js

@@ -0,0 +1,138 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+const style = '<style>mg-icon{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}</style>';
+describe('mg-tooltip', () => {
+  describe.each([
+    'auto',
+    'auto-start',
+    'auto-end',
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'right',
+    'right-start',
+    'right-end',
+    'left',
+    'left-start',
+    'left-end',
+  ])('placement %s', placement => {
+    test('Should render', async () => {
+      const page = await createPage(`${style}<mg-tooltip message="this is a tooltip message" placement="${placement}"><mg-icon icon="info-circle"></mg-icon></mg-tooltip>`);
+      const mgTooltip = await page.find('mg-tooltip');
+      const mgIcon = await page.find('mg-icon');
+      const tooltip = await page.find('mg-tooltip-content');
+      expect(mgTooltip).toHaveClass('hydrated');
+      mgIcon.triggerEvent('focus');
+      await page.waitForChanges();
+      expect(tooltip).toHaveAttribute('data-show');
+      await page.setViewport({ width: 400, height: 400 });
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+      mgIcon.triggerEvent('blur');
+      await page.waitForChanges();
+      expect(tooltip).not.toHaveAttribute('data-show');
+      mgIcon.triggerEvent('mouseenter');
+      await page.waitForChanges();
+      expect(tooltip).toHaveAttribute('data-show');
+      mgIcon.triggerEvent('mouseleave');
+      await page.waitForChanges();
+      expect(tooltip).not.toHaveAttribute('data-show');
+    });
+  });
+  describe.each([
+    '<mg-tooltip message="my tooltip coucou"><span>coucou</span></mg-tooltip>',
+    `<mg-tooltip message="this is a tooltip message"><mg-icon icon="info-circle"></mg-icon></mg-tooltip>`,
+    '<mg-tooltip message="my tooltip mg-button"><mg-button>mg-button</mg-button></mg-tooltip>',
+    '<mg-tooltip message="my tooltip native button"><button class="mg-button mg-button--primary" aria-describedby="blu">native button</button></mg-tooltip>',
+  ])('Keyboard navigation with template', template => {
+    test.each(['Space', 'Enter'])('Should NOT navigate with keyboard, case key %s', async (key) => {
+      const page = await createPage(template);
+      const mgTooltip = await page.find('mg-tooltip');
+      const tooltip = await page.find('mg-tooltip-content');
+      expect(mgTooltip).toHaveClass('hydrated');
+      await page.keyboard.down('Tab');
+      await page.waitForChanges();
+      expect(tooltip).toHaveAttribute('data-show');
+      await page.keyboard.down(key);
+      await page.waitForChanges();
+      expect(tooltip).toHaveAttribute('data-show');
+    });
+    test('Should navigate with keyboard, case key "Escape"', async () => {
+      const page = await createPage(template);
+      const mgTooltip = await page.find('mg-tooltip');
+      const tooltip = await page.find('mg-tooltip-content');
+      expect(mgTooltip).toHaveClass('hydrated');
+      await page.keyboard.down('Tab');
+      await page.waitForChanges();
+      expect(tooltip).toHaveAttribute('data-show');
+      await page.keyboard.down('Escape');
+      await page.waitForChanges();
+      expect(tooltip).not.toHaveAttribute('data-show');
+    });
+  });
+  test('Should keep tooltip displaied when hover with mouse after focus event', async () => {
+    const page = await createPage('<mg-tooltip identifier="identifier" message="Batman tooltip"><mg-icon icon="user"></mg-icon></mg-tooltip>');
+    const tooltipedElement = await page.find('mg-icon');
+    const tooltipElement = await page.find('mg-tooltip-content');
+    // 1. take focus on tooltipedElement and display tooltip
+    tooltipedElement.triggerEvent('focus');
+    await page.waitForChanges();
+    expect(tooltipElement).toHaveAttribute('data-show');
+    // 2. mouseenter on tooltipedElement and tooltip stay displaied
+    tooltipedElement.triggerEvent('mouseenter');
+    await page.waitForChanges();
+    expect(tooltipElement).toHaveAttribute('data-show');
+    // 3. mouseleave on tooltipedElement and tooltip stay displaied
+    tooltipedElement.triggerEvent('mouseleave');
+    await page.waitForChanges();
+    expect(tooltipElement).toHaveAttribute('data-show');
+    // 4. presse tab key and tooltip is hidden
+    tooltipedElement.triggerEvent('blur');
+    await page.waitForChanges();
+    expect(tooltipElement).not.toHaveAttribute('data-show');
+  });
+  test('Should keep tooltip arrow when update message', async () => {
+    const page = await createPage('<mg-tooltip message="Batman tooltip"><mg-icon icon="user"></mg-icon></mg-tooltip>');
+    await page.keyboard.down('Tab');
+    await page.waitForChanges();
+    await page.setViewport({ width: 400, height: 100 });
+    let screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+    await page.$eval('mg-tooltip', elm => {
+      elm.message = 'Joker is here';
+    });
+    await page.waitForChanges();
+    screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test(`should position tooltip where it have enough place`, async () => {
+    const page = await createPage(`<style>mg-icon{position:fixed;left:0;bottom:0}</style>
+      <mg-tooltip message="Batman tooltip" display><mg-icon icon="user"></mg-icon></mg-tooltip>`, { width: 400, height: 100 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should display long tooltip with max width', async () => {
+    const page = await createPage('<mg-tooltip identifier="identifier" message="my very long content should return to line because of the max-width set to 400px in the design specification"><mg-icon icon="user"></mg-icon></mg-tooltip>');
+    const tooltipedElement = await page.find('mg-icon');
+    await page.setViewport({ width: 500, height: 100 });
+    tooltipedElement.triggerEvent('focus');
+    await page.waitForChanges();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should keep tooltip center when update "message" prop', async () => {
+    const page = await createPage(`${style}<mg-tooltip identifier="identifier" message="short tooltip" display><mg-icon icon="user"></mg-icon></mg-tooltip>`);
+    await page.setViewport({ width: 400, height: 400 });
+    let screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+    await page.$eval('mg-tooltip', (mgTooltip) => {
+      mgTooltip.message = 'my very long content should return to line because of the max-width set to 400px in the design specification';
+    });
+    await page.waitForChanges();
+    screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-tooltip.e2e.js.map

package/dist/collection/components/atoms/mg-tooltip/test/mg-tooltip.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tooltip.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-tooltip/test/mg-tooltip.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,MAAM,KAAK,GAAG,wFAAwF,CAAC;AAEvG,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,QAAQ,CAAC,IAAI,CAAC;IACZ,MAAM;IACN,YAAY;IACZ,UAAU;IACV,KAAK;IACL,WAAW;IACX,SAAS;IACT,QAAQ;IACR,cAAc;IACd,YAAY;IACZ,OAAO;IACP,aAAa;IACb,WAAW;IACX,MAAM;IACN,YAAY;IACZ,UAAU;GACX,CAAC,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE;IAC7B,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;MAC/B,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,GAAG,KAAK,8DAA8D,SAAS,uDAAuD,CAAC,CAAC;MAEtK,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MAChD,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;MAC1C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;MAEtD,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;MAE1C,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;MAC7B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;MAE7C,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;MAEpD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;MAE1C,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;MAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;MAEjD,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;MAClC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;MAE7C,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;MAClC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,IAAI,CAAC;IACZ,0EAA0E;IAC1E,qGAAqG;IACrG,0FAA0F;IAC1F,wJAAwJ;GACzJ,CAAC,CAAC,mCAAmC,EAAE,QAAQ,CAAC,EAAE;IACjD,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,gDAAgD,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE;MAC1F,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,QAAQ,CAAC,CAAC;MAExC,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MAChD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;MAEtD,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;MAE1C,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;MAE7C,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAY,CAAC,CAAC;MACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;MAClE,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,QAAQ,CAAC,CAAC;MAExC,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MAChD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;MAEtD,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;MAE1C,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;MAE7C,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MACnC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;IACvF,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,2GAA2G,CAAC,CAAC;IAE3I,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACpD,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAE7D,wDAAwD;IACxD,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAEpD,+DAA+D;IAC/D,gBAAgB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAEpD,+DAA+D;IAC/D,gBAAgB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAEpD,0CAA0C;IAC1C,gBAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACtC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;EAC1D,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;IAC/D,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,mFAAmF,CAAC,CAAC;IAEnH,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpD,IAAI,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IACzC,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAE1C,MAAM,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,GAAG,CAAC,EAAE;MAClC,GAA4B,CAAC,OAAO,GAAG,eAAe,CAAC;IAC1D,CAAC,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IACrC,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;IACpE,MAAM,IAAI,GAAG,MAAM,UAAU,CAC3B;gGAC0F,EAC1F,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAC5B,CAAC;IAEF,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;IAC5D,MAAM,IAAI,GAAG,MAAM,UAAU,CAC3B,yMAAyM,CAC1M,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEpD,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpD,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;IACvE,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,GAAG,KAAK,kHAAkH,CAAC,CAAC;IAE1J,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpD,IAAI,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IACzC,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAE1C,MAAM,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,SAA+B,EAAE,EAAE;MACjE,SAAS,CAAC,OAAO,GAAG,8GAA8G,CAAC;IACrI,CAAC,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IACrC,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\nconst style = '<style>mg-icon{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}</style>';\n\ndescribe('mg-tooltip', () => {\n  describe.each([\n    'auto',\n    'auto-start',\n    'auto-end',\n    'top',\n    'top-start',\n    'top-end',\n    'bottom',\n    'bottom-start',\n    'bottom-end',\n    'right',\n    'right-start',\n    'right-end',\n    'left',\n    'left-start',\n    'left-end',\n  ])('placement %s', placement => {\n    test('Should render', async () => {\n      const page = await createPage(`${style}<mg-tooltip message=\"this is a tooltip message\" placement=\"${placement}\"><mg-icon icon=\"info-circle\"></mg-icon></mg-tooltip>`);\n\n      const mgTooltip = await page.find('mg-tooltip');\n      const mgIcon = await page.find('mg-icon');\n      const tooltip = await page.find('mg-tooltip-content');\n\n      expect(mgTooltip).toHaveClass('hydrated');\n\n      mgIcon.triggerEvent('focus');\n      await page.waitForChanges();\n\n      expect(tooltip).toHaveAttribute('data-show');\n\n      await page.setViewport({ width: 400, height: 400 });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      mgIcon.triggerEvent('blur');\n      await page.waitForChanges();\n\n      expect(tooltip).not.toHaveAttribute('data-show');\n\n      mgIcon.triggerEvent('mouseenter');\n      await page.waitForChanges();\n\n      expect(tooltip).toHaveAttribute('data-show');\n\n      mgIcon.triggerEvent('mouseleave');\n      await page.waitForChanges();\n\n      expect(tooltip).not.toHaveAttribute('data-show');\n    });\n  });\n\n  describe.each([\n    '<mg-tooltip message=\"my tooltip coucou\"><span>coucou</span></mg-tooltip>',\n    `<mg-tooltip message=\"this is a tooltip message\"><mg-icon icon=\"info-circle\"></mg-icon></mg-tooltip>`,\n    '<mg-tooltip message=\"my tooltip mg-button\"><mg-button>mg-button</mg-button></mg-tooltip>',\n    '<mg-tooltip message=\"my tooltip native button\"><button class=\"mg-button mg-button--primary\" aria-describedby=\"blu\">native button</button></mg-tooltip>',\n  ])('Keyboard navigation with template', template => {\n    test.each(['Space', 'Enter'])('Should NOT navigate with keyboard, case key %s', async key => {\n      const page = await createPage(template);\n\n      const mgTooltip = await page.find('mg-tooltip');\n      const tooltip = await page.find('mg-tooltip-content');\n\n      expect(mgTooltip).toHaveClass('hydrated');\n\n      await page.keyboard.down('Tab');\n      await page.waitForChanges();\n\n      expect(tooltip).toHaveAttribute('data-show');\n\n      await page.keyboard.down(key as never);\n      await page.waitForChanges();\n\n      expect(tooltip).toHaveAttribute('data-show');\n    });\n\n    test('Should navigate with keyboard, case key \"Escape\"', async () => {\n      const page = await createPage(template);\n\n      const mgTooltip = await page.find('mg-tooltip');\n      const tooltip = await page.find('mg-tooltip-content');\n\n      expect(mgTooltip).toHaveClass('hydrated');\n\n      await page.keyboard.down('Tab');\n      await page.waitForChanges();\n\n      expect(tooltip).toHaveAttribute('data-show');\n\n      await page.keyboard.down('Escape');\n      await page.waitForChanges();\n\n      expect(tooltip).not.toHaveAttribute('data-show');\n    });\n  });\n\n  test('Should keep tooltip displaied when hover with mouse after focus event', async () => {\n    const page = await createPage('<mg-tooltip identifier=\"identifier\" message=\"Batman tooltip\"><mg-icon icon=\"user\"></mg-icon></mg-tooltip>');\n\n    const tooltipedElement = await page.find('mg-icon');\n    const tooltipElement = await page.find('mg-tooltip-content');\n\n    // 1. take focus on tooltipedElement and display tooltip\n    tooltipedElement.triggerEvent('focus');\n    await page.waitForChanges();\n\n    expect(tooltipElement).toHaveAttribute('data-show');\n\n    // 2. mouseenter on tooltipedElement and tooltip stay displaied\n    tooltipedElement.triggerEvent('mouseenter');\n    await page.waitForChanges();\n\n    expect(tooltipElement).toHaveAttribute('data-show');\n\n    // 3. mouseleave on tooltipedElement and tooltip stay displaied\n    tooltipedElement.triggerEvent('mouseleave');\n    await page.waitForChanges();\n\n    expect(tooltipElement).toHaveAttribute('data-show');\n\n    // 4. presse tab key and tooltip is hidden\n    tooltipedElement.triggerEvent('blur');\n    await page.waitForChanges();\n\n    expect(tooltipElement).not.toHaveAttribute('data-show');\n  });\n\n  test('Should keep tooltip arrow when update message', async () => {\n    const page = await createPage('<mg-tooltip message=\"Batman tooltip\"><mg-icon icon=\"user\"></mg-icon></mg-tooltip>');\n\n    await page.keyboard.down('Tab');\n    await page.waitForChanges();\n\n    await page.setViewport({ width: 400, height: 100 });\n\n    let screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    await page.$eval('mg-tooltip', elm => {\n      (elm as HTMLMgTooltipElement).message = 'Joker is here';\n    });\n    await page.waitForChanges();\n\n    screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test(`should position tooltip where it have enough place`, async () => {\n    const page = await createPage(\n      `<style>mg-icon{position:fixed;left:0;bottom:0}</style>\n      <mg-tooltip message=\"Batman tooltip\" display><mg-icon icon=\"user\"></mg-icon></mg-tooltip>`,\n      { width: 400, height: 100 },\n    );\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should display long tooltip with max width', async () => {\n    const page = await createPage(\n      '<mg-tooltip identifier=\"identifier\" message=\"my very long content should return to line because of the max-width set to 400px in the design specification\"><mg-icon icon=\"user\"></mg-icon></mg-tooltip>',\n    );\n\n    const tooltipedElement = await page.find('mg-icon');\n\n    await page.setViewport({ width: 500, height: 100 });\n\n    tooltipedElement.triggerEvent('focus');\n    await page.waitForChanges();\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should keep tooltip center when update \"message\" prop', async () => {\n    const page = await createPage(`${style}<mg-tooltip identifier=\"identifier\" message=\"short tooltip\" display><mg-icon icon=\"user\"></mg-icon></mg-tooltip>`);\n\n    await page.setViewport({ width: 400, height: 400 });\n\n    let screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    await page.$eval('mg-tooltip', (mgTooltip: HTMLMgTooltipElement) => {\n      mgTooltip.message = 'my very long content should return to line because of the max-width set to 400px in the design specification';\n    });\n\n    await page.waitForChanges();\n\n    screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

package/dist/collection/components/atoms/mg-tooltip/test/mg-tooltip.spec.js

@@ -0,0 +1,272 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgTooltip } from "../mg-tooltip";
+import { MgButton } from "../../mg-button/mg-button";
+import { MgIcon } from "../../mg-icon/mg-icon";
+import { setupMutationObserverMock, mockWindowFrames, mockConsoleError } from "../../../../utils/unit.test.utils";
+import { MgTooltipContent } from "../mg-tooltip-content/mg-tooltip-content";
+mockWindowFrames();
+mockConsoleError();
+const getPage = (args, element) => newSpecPage({
+  components: [MgTooltip, MgTooltipContent, MgButton, MgIcon],
+  template: () => h("mg-tooltip", Object.assign({}, args), element),
+});
+describe('mg-tooltip', () => {
+  let fireMo;
+  beforeEach(() => {
+    jest.useFakeTimers();
+    setupMutationObserverMock({
+      observe: function () {
+        fireMo = this.cb;
+      },
+      disconnect: function () {
+        return null;
+      },
+      takeRecords: () => [],
+    });
+  });
+  afterEach(() => jest.runOnlyPendingTimers());
+  describe.each([
+    () => h("span", null, "span"),
+    () => h("button", { "aria-describedby": "blu" }, "button"),
+    () => h("mg-icon", { icon: "check-circle" }),
+    () => h("mg-button", { identifier: "identifier" }, "mg-button"),
+    () => (h("mg-button", { identifier: "identifier", disabled: true }, "mg-button.disabled")),
+  ])('render', element => {
+    test.each([true, false])('Should render with tooltip', async (disabled) => {
+      const page = await getPage({ identifier: 'identifier', message: 'My tooltip message', disabled }, element());
+      expect(page.root).toMatchSnapshot();
+      const mgTooltip = page.doc.querySelector('mg-tooltip');
+      mgTooltip.disabled = !disabled;
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      mgTooltip.disabled = disabled;
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  test('Should render with element with given placement', async () => {
+    const args = { identifier: 'identifier', message: 'My tooltip message', placement: 'auto' };
+    const { root } = await getPage(args, h("span", null, "span"));
+    expect(root).toMatchSnapshot();
+  });
+  test.each(['', ' ', undefined])('Should throw error, case invalid message prop', async (message) => {
+    expect.assertions(1);
+    try {
+      await getPage({ message }, h("span", null, "span"));
+    }
+    catch (err) {
+      expect(err.message).toContain('<mg-tooltip> prop "message" is required.');
+    }
+  });
+  describe.each([
+    { eventIn: 'mouseenter', eventOut: 'mouseleave' },
+    { eventIn: 'focus', eventOut: 'blur' },
+    { eventIn: 'mouseenter', eventOut: 'clickDocument' },
+  ])('Should manage display on events enter with %s, leave with %s', ({ eventIn, eventOut }) => {
+    test.each([
+      h("span", null, "span"),
+      h("button", { "aria-describedby": "blu" }, "button"),
+      h("mg-icon", { icon: "check-circle" }),
+      h("mg-button", { identifier: "identifier-mg-button" }, "mg-button"),
+    ])('element', async (element) => {
+      const args = { identifier: 'identifier', message: 'blu' };
+      const page = await getPage(args, element);
+      const mgTooltip = page.doc.querySelector('mg-tooltip');
+      const linkedTooltipElement = mgTooltip.querySelector(`[aria-describedby*='${args.identifier}']`);
+      const tooltip = mgTooltip.querySelector(`#${args.identifier}`);
+      linkedTooltipElement.dispatchEvent(new CustomEvent(eventIn, { bubbles: true }));
+      // flush windows addEventListener timeout
+      jest.runOnlyPendingTimers();
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(tooltip).toHaveAttribute('data-show');
+      if (eventOut !== 'clickDocument')
+        linkedTooltipElement.dispatchEvent(new CustomEvent(eventOut, { bubbles: true }));
+      else
+        page.doc.dispatchEvent(new Event('click', { bubbles: true }));
+      if (eventOut !== 'blur')
+        jest.runOnlyPendingTimers();
+      await page.waitForChanges();
+      expect(tooltip).not.toHaveAttribute('data-show');
+    });
+    test.each([false, true])('should not call event methods when disabled and display:%s', async (display) => {
+      const args = { identifier: 'identifier', message: 'blu', disabled: true, display };
+      const page = await getPage(args, h("span", null, "span"));
+      const mgTooltip = page.doc.querySelector('mg-tooltip');
+      const linkedTooltipElement = mgTooltip.querySelector(`[aria-describedby*='${args.identifier}']`);
+      const tooltip = mgTooltip.querySelector(`#${args.identifier}`);
+      [eventIn, eventOut].forEach(async (event) => {
+        linkedTooltipElement.dispatchEvent(new CustomEvent(event, { bubbles: true }));
+        await page.waitForChanges();
+        if (display) {
+          expect(tooltip).toHaveAttribute('data-show');
+        }
+        else {
+          expect(tooltip).not.toHaveAttribute('data-show');
+        }
+      });
+    });
+  });
+  test.each([
+    h("span", null, "span"),
+    h("button", { "aria-describedby": "blu" }, "button"),
+    h("mg-icon", { icon: "check-circle" }),
+    h("mg-button", { identifier: "identifier-mg-button" }, "mg-button"),
+  ])('should manage cross mouse and keyboard navigation', async (element) => {
+    const args = { identifier: 'identifier', message: 'blu' };
+    const page = await getPage(args, element);
+    const mgTooltip = page.doc.querySelector('mg-tooltip');
+    const linkedTooltipElement = mgTooltip.querySelector(`[aria-describedby*='${args.identifier}']`);
+    const tooltip = mgTooltip.querySelector(`#${args.identifier}`);
+    linkedTooltipElement.dispatchEvent(new CustomEvent('focus', { bubbles: true }));
+    await page.waitForChanges();
+    expect(tooltip).toHaveAttribute('data-show');
+    page.doc.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape' }));
+    await page.waitForChanges();
+    expect(tooltip).not.toHaveAttribute('data-show');
+    linkedTooltipElement.dispatchEvent(new CustomEvent('mouseenter', { bubbles: true }));
+    await page.waitForChanges();
+    expect(tooltip).toHaveAttribute('data-show');
+    linkedTooltipElement.dispatchEvent(new CustomEvent('mouseleave', { bubbles: true }));
+    // flush windows addEventListener timeout
+    jest.runOnlyPendingTimers();
+    await page.waitForChanges();
+    expect(tooltip).not.toHaveAttribute('data-show');
+  });
+  test.each([true, false])('Should toogle tooltip from prop display, case display %s', async (display) => {
+    const args = { identifier: 'identifier', message: 'batman', display };
+    const page = await getPage(args, h("span", null, "batman"));
+    const mgTooltip = page.doc.querySelector('mg-tooltip');
+    const tooltip = mgTooltip.querySelector(`#${args.identifier}`);
+    expect(page.root).toMatchSnapshot();
+    if (display) {
+      expect(tooltip).toHaveAttribute('data-show');
+    }
+    else {
+      expect(tooltip).not.toHaveAttribute('data-show');
+    }
+    page.rootInstance.display = !display;
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+    if (display) {
+      expect(tooltip).not.toHaveAttribute('data-show');
+    }
+    else {
+      expect(tooltip).toHaveAttribute('data-show');
+    }
+  });
+  describe('hide method', () => {
+    test.each(['Tab', 'Space', 'Enter', 'i'])('should prevent keyboardEvent, case not "Escape" code', async (code) => {
+      const args = { identifier: 'identifier', message: 'batman' };
+      const page = await getPage(args, h("span", { id: "batman" }, "batman"));
+      const mgTooltip = page.doc.querySelector('mg-tooltip');
+      const tooltip = mgTooltip.querySelector(`#${args.identifier}`);
+      const element = page.doc.getElementById('batman');
+      element.dispatchEvent(new CustomEvent('focus', { bubbles: true }));
+      await page.waitForChanges();
+      expect(tooltip).toHaveAttribute('data-show');
+      page.doc.dispatchEvent(new KeyboardEvent('keydown', { code }));
+      await page.waitForChanges();
+      expect(tooltip).toHaveAttribute('data-show');
+    });
+    test('should hide tooltip with keyboardEvent, case "Escape" code', async () => {
+      const args = { identifier: 'identifier', message: 'batman' };
+      const page = await getPage(args, h("span", { id: "batman" }, "batman"));
+      const mgTooltip = page.doc.querySelector('mg-tooltip');
+      const tooltip = mgTooltip.querySelector(`#${args.identifier}`);
+      const element = page.doc.getElementById('batman');
+      element.dispatchEvent(new CustomEvent('focus', { bubbles: true }));
+      await page.waitForChanges();
+      expect(tooltip).toHaveAttribute('data-show');
+      page.doc.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape' }));
+      await page.waitForChanges();
+      expect(tooltip).not.toHaveAttribute('data-show');
+    });
+  });
+  test('Should keep displayed tooltip when hover it', async () => {
+    const element = h("span", null, "span");
+    const eventIn = 'mouseenter';
+    const eventOut = 'mouseleave';
+    const args = { identifier: 'identifier', message: 'blu' };
+    const page = await getPage(args, element);
+    const mgTooltip = page.doc.querySelector('mg-tooltip');
+    const linkedTooltipElement = mgTooltip.querySelector(`[aria-describedby*='${args.identifier}']`);
+    const tooltip = mgTooltip.querySelector(`#${args.identifier}`);
+    // 1. hover tooltipedElement and display tooltip
+    linkedTooltipElement.dispatchEvent(new CustomEvent(eventIn, { bubbles: true }));
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+    expect(tooltip).toHaveAttribute('data-show');
+    // 2.1 leave tooltipedElement and tooltip stay displayed
+    linkedTooltipElement.dispatchEvent(new CustomEvent(eventOut, { bubbles: true }));
+    await page.waitForChanges();
+    expect(tooltip).toHaveAttribute('data-show');
+    // 2.2 hover on tooltipedElement and tooltip stay displayed
+    tooltip.dispatchEvent(new CustomEvent(eventIn, { bubbles: true }));
+    await page.waitForChanges();
+    // 2.3 flush promise to keep tooltip display thanks to guard
+    jest.advanceTimersByTime(200);
+    await page.waitForChanges();
+    expect(tooltip).toHaveAttribute('data-show');
+    // 3 leave tooltipElement
+    tooltip.dispatchEvent(new CustomEvent(eventOut, { bubbles: true }));
+    await page.waitForChanges();
+    // 3.2 flush promise to pass tooltip guard and hide it
+    jest.advanceTimersByTime(200);
+    await page.waitForChanges();
+    expect(tooltip).not.toHaveAttribute('data-show');
+  });
+  test('Should prevent focus guard whith click event', async () => {
+    const args = { identifier: 'identifier', message: 'batman' };
+    const page = await getPage(args, h("mg-button", null, "batman"));
+    const mgTooltip = page.doc.querySelector('mg-tooltip');
+    const tooltip = mgTooltip.querySelector(`#${args.identifier}`);
+    const element = page.doc.querySelector('mg-button');
+    element.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+    await page.waitForChanges();
+    expect(tooltip).toHaveAttribute('data-show');
+    // recompose a click event as click event is not properly mock by jest `mousedown` + `focus` + `mouseup`
+    for (const event of ['mousedown', 'focus', 'mouseup']) {
+      const Constructor = event === 'focus' ? FocusEvent : MouseEvent;
+      element.dispatchEvent(new Constructor(event, { bubbles: true }));
+      await page.waitForChanges();
+    }
+    expect(tooltip).toHaveAttribute('data-show');
+    element.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
+    await page.waitForChanges();
+    jest.runOnlyPendingTimers();
+    expect(tooltip).not.toHaveAttribute('data-show');
+  });
+  test.each(['button', 'mg-button'])('Should update %s wrapper dynamically', async (TagName) => {
+    const page = await getPage({ identifier: 'identifier', message: 'My tooltip message' }, h(TagName, { identifier: "identifier", disabled: true }, TagName, ".disabled"));
+    expect(page.root).toMatchSnapshot();
+    // Mock replaceWith
+    const mgTooltip = page.doc.querySelector('mg-tooltip');
+    mgTooltip.firstElementChild.replaceWith = jest.fn(element => {
+      mgTooltip.innerHTML = element.parentElement.innerHTML;
+    });
+    const mgButton = page.doc.querySelector(TagName);
+    mgButton.disabled = false;
+    fireMo([{ attributeName: TagName === 'MG-BUTTON' ? 'aria-disabled' : 'disabled' }]);
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+  test('Should update popper instance when "message" prop change', async () => {
+    const page = await getPage({ identifier: 'identifier', message: 'My tooltip message' }, h("mg-button", { identifier: "identifier", disabled: true }, "mg-button.disabled"));
+    const spy = jest.spyOn(page.rootInstance.popper, 'update');
+    const mgTooltip = page.doc.querySelector('mg-tooltip');
+    mgTooltip.message = 'my new message';
+    await page.waitForChanges();
+    expect(spy).toHaveBeenCalled();
+  });
+  test('should update mg-popover-content id when "identifier" is updated', async () => {
+    const page = await getPage({ identifier: 'identifier', message: 'My tooltip message' }, h("mg-button", { identifier: "identifier", disabled: true }, "mg-button.disabled"));
+    expect(page.root).toMatchSnapshot();
+    const mgTooltip = page.doc.querySelector('mg-tooltip');
+    mgTooltip.identifier = 'new-identifier';
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=mg-tooltip.spec.js.map