npm - @mgdis/mg-components - Versions diffs - 5.15.0 → 5.17.0 - Mend

@mgdis/mg-components 5.15.0 → 5.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (479) hide show

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

@@ -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\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 });\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 renderTooltip(): void {\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 }\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.renderTooltip();\n this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);\n\n //validate properties\n this.validateDisabled(this.disabled);\n this.validateMessage(this.message);\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 ADDED Viewed

@@ -0,0 +1,132 @@
+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 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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-tooltip.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-tooltip/test/mg-tooltip.e2e.ts"],"names":[],"mappings":"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","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 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 ADDED Viewed

@@ -0,0 +1,264 @@
+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();
+  });
+});
+//# sourceMappingURL=mg-tooltip.spec.js.map

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

@@ -0,0 +1 @@

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

package/dist/collection/components/molecules/inputs/MgInput.conf.js CHANGED Viewed

@@ -2,3 +2,4 @@
  * Possible input width
  */
 export const widths = [2, 4, 16, 'full'];
+//# sourceMappingURL=MgInput.conf.js.map

package/dist/collection/components/molecules/inputs/MgInput.conf.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MgInput.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/inputs/MgInput.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,CAAU,CAAC","sourcesContent":["/**\n * Possible input width\n */\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/**\n * Possible Input types\n */\n\nexport type HTMLMgInputsElement =\n | HTMLMgInputCheckboxElement\n | HTMLMgInputDateElement\n | HTMLMgInputNumericElement\n | HTMLMgInputPasswordElement\n | HTMLMgInputRadioElement\n | HTMLMgInputSelectElement\n | HTMLMgInputTextElement\n | HTMLMgInputTextareaElement\n | (HTMLMgInputToggleElement & { required: true; invalid: false; displayError: () => void });\n"]}

package/dist/collection/components/molecules/inputs/MgInput.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { widths } from './MgInput.conf';
+import { h } from "@stencil/core";
+import { widths } from "./MgInput.conf";
 /**
  * Apply in all input child node the aria-describedby attribute
  * @param children - Represent scoped elements
@@ -114,3 +114,4 @@ export const MgInput = (props, children, utils) => {
   const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));
   return (h(TagName, { class: props.classCollection.join() }, props.labelOnTop ? (h("div", { class: "mg-input__title" }, getInputTitle(), !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()), props.readonly ? (h("div", { class: "mg-input__input-container" }, h("strong", null, props.readonlyValue), children.filter(child => child.$name$ === 'append-input'))) : (h("div", { class: "mg-input__input-container" }, h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } }, applyAriadescribedBy(children, ariaDescribedbyIDs, utils), !props.labelOnTop && props.tooltip && getTooltip()), props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }), props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
 };
+//# sourceMappingURL=MgInput.js.map

package/dist/collection/components/molecules/inputs/MgInput.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MgInput.js","sourceRoot":"","sources":["../../../../src/components/molecules/inputs/MgInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode, FunctionalUtilities } from '@stencil/core';\nimport { widths, Width } from './MgInput.conf';\nimport { ClassList } from '../../../utils/components.utils';\n\n/**\n * Apply in all input child node the aria-describedby attribute\n * @param children - Represent scoped elements\n * @param ariaDescribedbyIDs - List of IDs\n * @param utils - Stencil.js utils\n * @returns Children with aria-describedby attribute\n */\nconst applyAriadescribedBy = (children: VNode[], ariaDescribedbyIDs: Set<string>, utils: FunctionalUtilities): VNode[] =>\n utils.map(children, child => {\n if (['input', 'select', 'textarea'].includes(child.vtag as string)) {\n return {\n ...child,\n vattrs: {\n ...child.vattrs,\n 'aria-describedby': [...ariaDescribedbyIDs].join(' '),\n },\n };\n }\n\n // we recursively apply ariadescribedBy attributes to child input nodes if exists\n if (child.vchildren === null) return { ...child };\n return {\n ...child,\n vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils),\n };\n });\n\n/**\n * Add classes based on props\n * @param props - MgInput Interface Props\n */\nconst manageClasses = (props: MgInputProps): void => {\n props.classCollection.add('mg-input');\n\n if (props.labelOnTop) props.classCollection.add('mg-input--label-on-top');\n else props.classCollection.delete('mg-input--label-on-top');\n\n if (props.readonly) props.classCollection.add('mg-input--readonly');\n else props.classCollection.delete('mg-input--readonly');\n\n widths.forEach(width => {\n props.classCollection.delete(`mg-input--width-${width}`);\n });\n if (props.mgWidth !== undefined) props.classCollection.add(`mg-input--width-${props.mgWidth}`);\n};\n\n/**\n * Get tagname\n * @param isFieldset - is fieldset\n * @returns tag name\n */\nconst getTagName = (isFieldset: boolean): string => (isFieldset ? 'fieldset' : 'div');\n\n/**\n * MgInput Interface\n */\ninterface MgInputProps {\n // Global\n identifier: string;\n classCollection: ClassList;\n // Label\n label: string;\n labelOnTop: boolean;\n labelHide: boolean;\n isFieldset: boolean;\n // Input\n value: string;\n readonlyValue: string;\n required: boolean;\n readonly: boolean;\n mgWidth: Width;\n disabled: boolean;\n // Tooltip\n tooltip: string;\n // Help Text\n helpText: string;\n // Error Message\n errorMessage: string;\n // ariaDescribedbyIDs\n ariaDescribedbyIDs: string[];\n}\n\n/**\n * Get input template\n * @param props - MgInput Interface Props\n * @param children - Represent scoped elements\n * @param utils - Stencil.js utils\n * @returns input template\n */\nexport const MgInput: FunctionalComponent<MgInputProps> = (props: MgInputProps, children: VNode[], utils: FunctionalUtilities): VNode[] => {\n /**\n * Check required properties\n */\n if (typeof props.identifier !== 'string' || props.identifier.trim() === '') {\n throw new Error('<mg-input> prop \"identifier\" is required.');\n }\n if (typeof props.label !== 'string' || props.label.trim() === '') {\n throw new Error('<mg-input> prop \"label\" is required.');\n }\n if (props.labelOnTop && props.labelHide) {\n throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n }\n\n /**\n * Set readonly value\n */\n if (props.readonlyValue === undefined) props.readonlyValue = props.value;\n\n /**\n * Component classes\n */\n manageClasses(props);\n\n /**\n * a11y IDs\n */\n const ariaDescribedbyIDs: Set<string> = new Set(props.ariaDescribedbyIDs);\n\n // Help text\n const helpTextId = `${props.identifier}-help-text`;\n if (typeof props.helpText === 'string' && props.helpText !== '') {\n ariaDescribedbyIDs.add(helpTextId);\n }\n\n // Error Message\n const helpTextErrorId = `${props.identifier}-error`;\n if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {\n ariaDescribedbyIDs.add(helpTextErrorId);\n }\n\n /**\n * Return template\n *\n * +--------+--------------+---------+\n * | label | input | tooltip |\n * | +--------------+---------+\n * | | nb Char Left |\n * | +------------------------+\n * | | Help Text |\n * | +------------------------+\n * | | Error |\n * +--------+------------------------+\n *\n * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change\n */\n\n const TagName: string = getTagName(props.isFieldset);\n\n /**\n * Get tooltip node\n * @returns mg-tooltip\n */\n const getTooltip = (): VNode[] => (\n <mg-tooltip identifier={`${props.identifier}-tooltip`} message={props.tooltip}>\n <mg-icon icon=\"info-circle\"></mg-icon>\n </mg-tooltip>\n );\n\n /**\n * Get input title (label) node\n * Display asterisk only if not disabled and not readonly\n * @returns mg-input-title\n */\n const getInputTitle = (): VNode[] => (\n <mg-input-title\n identifier={props.identifier}\n class={props.labelHide ? 'sr-only' : undefined}\n required={props.required && !props.disabled && !props.readonly}\n is-legend={props.isFieldset}\n >\n {props.label}\n </mg-input-title>\n );\n\n return (\n <TagName class={props.classCollection.join()}>\n {props.labelOnTop ? (\n <div class=\"mg-input__title\">\n {getInputTitle()}\n {!props.readonly && props.tooltip && getTooltip()}\n </div>\n ) : (\n getInputTitle()\n )}\n {props.readonly ? (\n <div class=\"mg-input__input-container\">\n <strong>{props.readonlyValue}</strong>\n {children.filter(child => child.$name$ === 'append-input')}\n </div>\n ) : (\n <div class=\"mg-input__input-container\">\n <div class={{ 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined }}>\n {applyAriadescribedBy(children, ariaDescribedbyIDs, utils)}\n {!props.labelOnTop && props.tooltip && getTooltip()}\n </div>\n {props.helpText && <div id={helpTextId} class=\"mg-input__help-text\" innerHTML={props.helpText}></div>}\n {props.errorMessage && !props.readonly && !props.disabled && (\n <div id={helpTextErrorId} class=\"mg-input__error\" innerHTML={props.errorMessage} aria-live=\"assertive\"></div>\n )}\n </div>\n )}\n </TagName>\n );\n};\n"]}

package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * Get checkboxes list template
  * @param props - MgInputCheckboxList Interface Props
@@ -13,3 +13,4 @@ h("ul", { class: {
   }, role: "list", "aria-describedby": props.displaySearchInput ? 'search-results' : undefined, "aria-label": props.displaySearchInput ? props.messages.searchResults : undefined, "aria-live": props.displaySearchInput ? 'polite' : undefined, id: props.id }, props.checkboxes
   .filter(item => !props.readonly || item.value)
   .map(input => (h("li", { key: input.id, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': props.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: props.name, value: input.value && input.value.toString(), checked: Boolean(input.value), required: input.required, disabled: props.readonly || props.disabled || input.disabled, indeterminate: input.value === null, onInput: input.handleInput, onBlur: input.handleBlur, onKeyDown: input.handleKeydown }), h("label", { htmlFor: input.id }, input.title))))));
+//# sourceMappingURL=MgInputCheckboxList.js.map

package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MgInputCheckboxList.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAS,MAAM,eAAe,CAAC;AAG9D;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAkD,CAAC,KAA+B,EAAW,EAAE,CAAC;AAC9H,uDAAuD;AACvD,UACE,KAAK,EAAE;IACL,iCAAiC,EAAE,IAAI;IACvC,2CAA2C,EAAE,KAAK,CAAC,iBAAiB,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IACnH,uCAAuC,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;GACnF,EACD,IAAI,EAAC,MAAM,sBACO,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,gBAC7D,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,eACpE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC1D,EAAE,EAAE,KAAK,CAAC,EAAE,IAEX,KAAK,CAAC,UAAU;GACd,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC;GAC7C,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACZ,UAAI,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,iCAAiC,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE;EAC9H,aACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,EAC5C,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,EAC7B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC5D,aAAa,EAAE,KAAK,CAAC,KAAK,KAAK,IAAI,EACnC,OAAO,EAAE,KAAK,CAAC,WAAW,EAC1B,MAAM,EAAE,KAAK,CAAC,UAAU,EACxB,SAAS,EAAE,KAAK,CAAC,aAAa,GAC9B;EACF,aAAO,OAAO,EAAE,KAAK,CAAC,EAAE,IAAG,KAAK,CAAC,KAAK,CAAS,CAC5C,CACN,CAAC,CACD,CACN,CAAC","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { MgInputCheckboxListProps } from './mg-input-checkbox.conf';\n\n/**\n * Get checkboxes list template\n * @param props - MgInputCheckboxList Interface Props\n * @returns input template\n */\nexport const MgInputCheckboxList: FunctionalComponent<MgInputCheckboxListProps> = (props: MgInputCheckboxListProps): VNode[] => (\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <ul\n class={{\n 'mg-input__input-group-container': true,\n 'mg-input__input-group-container--vertical': props.inputVerticalList || (props.type === 'multi' && !props.readonly),\n 'mg-input__input-checkbox-multi-inputs': props.type === 'multi' && !props.readonly,\n }}\n role=\"list\"\n aria-describedby={props.displaySearchInput ? 'search-results' : undefined}\n aria-label={props.displaySearchInput ? props.messages.searchResults : undefined}\n aria-live={props.displaySearchInput ? 'polite' : undefined}\n id={props.id}\n >\n {props.checkboxes\n .filter(item => !props.readonly || item.value)\n .map(input => (\n <li key={input.id} class={{ 'mg-input__input-group': true, 'mg-input__input-group--disabled': props.disabled || input.disabled }}>\n <input\n type=\"checkbox\"\n id={input.id}\n name={props.name}\n value={input.value && input.value.toString()}\n checked={Boolean(input.value)}\n required={input.required}\n disabled={props.readonly || props.disabled || input.disabled}\n indeterminate={input.value === null}\n onInput={input.handleInput}\n onBlur={input.handleBlur}\n onKeyDown={input.handleKeydown}\n />\n <label htmlFor={input.id}>{input.title}</label>\n </li>\n ))}\n </ul>\n);\n"]}