@mgdis/mg-components 5.19.3 → 5.21.0

package/dist/collection/components/molecules/mg-action-more/test/mg-action-more.spec.js

@@ -1,195 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { forcePopoverId, mockConsoleError, setupResizeObserverMock } from "../../../../utils/unit.test.utils";
-import { Status } from "../../menu/mg-menu-item/mg-menu-item.conf";
-import { MgButton } from "../../../atoms/mg-button/mg-button";
-import { MgPopover } from "../../mg-popover/mg-popover";
-import { MgActionMore } from "../mg-action-more";
-import { MgMenu } from "../../menu/mg-menu/mg-menu";
-import { MgMenuItem } from "../../menu/mg-menu-item/mg-menu-item";
-import { MgPopoverContent } from "../../mg-popover/mg-popover-content/mg-popover-content";
-mockConsoleError();
-const getPage = async (args) => {
-  const page = await newSpecPage({
-    components: [MgActionMore, MgPopover, MgPopoverContent, MgButton, MgMenu, MgMenuItem],
-    template: () => h("mg-action-more", Object.assign({}, args)),
-  });
-  Array.from(page.doc.querySelectorAll('mg-action-more')).forEach((item, index) => {
-    const mgPopoverIdentifier = `mg-popover-test_${index}`;
-    item.dataset.mgPopoverGuard = mgPopoverIdentifier;
-    forcePopoverId(item, mgPopoverIdentifier, 'mg-button');
-  });
-  return page;
-};
-const mouseEventHandler = jest.fn();
-const items = [
-  {
-    label: 'batman',
-    mouseEventHandler,
-  },
-  {
-    label: 'robin',
-    mouseEventHandler,
-    status: Status.HIDDEN,
-  },
-  {
-    label: 'joker',
-    mouseEventHandler,
-    badge: {
-      value: 2,
-      label: 'badge',
-    },
-  },
-  {
-    label: 'bane',
-    mouseEventHandler,
-    icon: 'user',
-    href: '#',
-  },
-];
-Object.defineProperty(window, 'frames', {
-  value: { length: 0 },
-});
-describe('mg-action-more', () => {
-  beforeEach(() => {
-    setupResizeObserverMock({
-      observe: () => null,
-      disconnect: () => null,
-    });
-  });
-  describe.each([
-    {
-      items,
-    },
-    {
-      items,
-      button: {
-        label: 'dc-comics',
-        variant: 'primary',
-        isIcon: false,
-      },
-    },
-    {
-      items,
-      displayChevron: true,
-      button: {
-        variant: 'flat',
-        isIcon: false,
-      },
-    },
-    {
-      items,
-      displayChevron: true,
-      icon: {
-        icon: 'ellipsis',
-      },
-      button: {
-        variant: 'flat',
-        isIcon: false,
-      },
-    },
-    {
-      items,
-      displayChevron: false,
-      icon: {
-        icon: 'ellipsis',
-      },
-      button: {
-        variant: 'flat',
-        isIcon: false,
-      },
-    },
-    {
-      items,
-      displayChevron: false,
-      button: {
-        variant: 'flat',
-        isIcon: false,
-      },
-    },
-    {
-      items,
-      button: {
-        variant: 'flat',
-        isIcon: false,
-        disabled: true,
-      },
-    },
-  ])('render', args => {
-    test(`Should render with args ${args}`, async () => {
-      const { root } = await getPage(args);
-      expect(root).toMatchSnapshot();
-    });
-    test('Should toggle menu on click', async () => {
-      const page = await getPage(args);
-      expect(page.root).toMatchSnapshot();
-      const mgMoreAction = page.doc.querySelector('mg-action-more');
-      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');
-      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      await page.waitForChanges();
-      expect(page.root).toMatchSnapshot();
-    });
-  });
-  describe('errors', () => {
-    test.each([
-      { args: {}, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
-      { args: { items: ['batman'] }, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
-      { args: { items: [{ label: 'batman' }] }, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
-      {
-        args: { items: [{ label: 'batman', mouseEventHandler: 'batman' }] },
-        error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.`,
-      },
-      { args: { items: [{ mouseEventHandler: 'batman' }] }, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
-      { args: { items: [{ label: 'batman', mouseEventHandler }], button: {} }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },
-      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { variant: 'primary' } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },
-      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },
-      { args: { items: [{ label: 'batman', mouseEventHandler }], icon: 'user' }, error: `<mg-action-more> prop icon must match MgActionMoreIconType.` },
-      {
-        args: { items: [{ label: 'batman', mouseEventHandler }], displayChevron: true },
-        error: `<mg-action-more> prop "displayChevron" can't be used with a 'button" prop "isIcon" attribute.`,
-      },
-      {
-        args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true, variant: 'flat' }, displayChevron: true },
-        error: `<mg-action-more> prop "displayChevron" can't be used with a 'button" prop "isIcon" attribute.`,
-      },
-    ])('with args %s', async ({ args, error }) => {
-      expect.assertions(1);
-      try {
-        await getPage(args);
-      }
-      catch (err) {
-        expect(err.message).toMatch(error);
-      }
-    });
-  });
-  describe('navigation', () => {
-    test(`Should run item mouseEventHandler by clicking on menu-item`, async () => {
-      const page = await getPage({ items });
-      expect(page.root).toMatchSnapshot();
-      const mgMoreAction = page.doc.querySelector('mg-action-more');
-      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');
-      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      await page.waitForChanges();
-      expect(page.root).toMatchSnapshot();
-      const mgMenuItem = mgMoreAction.shadowRoot.querySelector('mg-menu-item');
-      mgMenuItem.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      await page.waitForChanges();
-      expect(mouseEventHandler).toHaveBeenCalled();
-      expect(page.root).toMatchSnapshot();
-    });
-    test(`Should update expanded when popover display change`, async () => {
-      const page = await getPage({ items, displayChevron: true, button: { variant: 'flat', isIcon: false } });
-      expect(page.root).toMatchSnapshot();
-      const mgMoreAction = page.doc.querySelector('mg-action-more');
-      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');
-      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      await page.waitForChanges();
-      expect(page.root).toMatchSnapshot();
-      const mgPopover = mgMoreAction.shadowRoot.querySelector('mg-popover');
-      mgPopover.dispatchEvent(new CustomEvent('display-change', { detail: false }));
-      await page.waitForChanges();
-      expect(page.root).toMatchSnapshot();
-    });
-  });
-});
-//# sourceMappingURL=mg-action-more.spec.js.map

package/dist/collection/components/molecules/mg-action-more/test/mg-action-more.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mg-action-more.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-action-more/test/mg-action-more.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { forcePopoverId, mockConsoleError, setupResizeObserverMock } from '../../../../utils/unit.test.utils';\nimport { Status } from '../../menu/mg-menu-item/mg-menu-item.conf';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgPopover } from '../../mg-popover/mg-popover';\nimport { MgActionMore } from '../mg-action-more';\nimport { MgMenu } from '../../menu/mg-menu/mg-menu';\nimport { MgMenuItem } from '../../menu/mg-menu-item/mg-menu-item';\nimport { MgPopoverContent } from '../../mg-popover/mg-popover-content/mg-popover-content';\n\nmockConsoleError();\n\nconst getPage = async args => {\n  const page = await newSpecPage({\n    components: [MgActionMore, MgPopover, MgPopoverContent, MgButton, MgMenu, MgMenuItem],\n    template: () => <mg-action-more {...args}></mg-action-more>,\n  });\n\n  Array.from(page.doc.querySelectorAll('mg-action-more')).forEach((item, index) => {\n    const mgPopoverIdentifier = `mg-popover-test_${index}`;\n    item.dataset.mgPopoverGuard = mgPopoverIdentifier;\n    forcePopoverId(item, mgPopoverIdentifier, 'mg-button');\n  });\n\n  return page;\n};\n\nconst mouseEventHandler = jest.fn();\n\nconst items = [\n  {\n    label: 'batman',\n    mouseEventHandler,\n  },\n  {\n    label: 'robin',\n    mouseEventHandler,\n    status: Status.HIDDEN,\n  },\n  {\n    label: 'joker',\n    mouseEventHandler,\n    badge: {\n      value: 2,\n      label: 'badge',\n    },\n  },\n  {\n    label: 'bane',\n    mouseEventHandler,\n    icon: 'user',\n    href: '#',\n  },\n];\n\nObject.defineProperty(window, 'frames', {\n  value: { length: 0 },\n});\n\ndescribe('mg-action-more', () => {\n  beforeEach(() => {\n    setupResizeObserverMock({\n      observe: () => null,\n      disconnect: () => null,\n    });\n  });\n  describe.each([\n    {\n      items,\n    },\n    {\n      items,\n      button: {\n        label: 'dc-comics',\n        variant: 'primary',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: true,\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: true,\n      icon: {\n        icon: 'ellipsis',\n      },\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: false,\n      icon: {\n        icon: 'ellipsis',\n      },\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: false,\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      button: {\n        variant: 'flat',\n        isIcon: false,\n        disabled: true,\n      },\n    },\n  ])('render', args => {\n    test(`Should render with args ${args}`, async () => {\n      const { root } = await getPage(args);\n      expect(root).toMatchSnapshot();\n    });\n\n    test('Should toggle menu on click', async () => {\n      const page = await getPage(args);\n      expect(page.root).toMatchSnapshot();\n\n      const mgMoreAction = page.doc.querySelector('mg-action-more');\n      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');\n      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n\n  describe('errors', () => {\n    test.each([\n      { args: {}, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      { args: { items: ['batman'] }, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      { args: { items: [{ label: 'batman' }] }, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      {\n        args: { items: [{ label: 'batman', mouseEventHandler: 'batman' }] },\n        error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.`,\n      },\n      { args: { items: [{ mouseEventHandler: 'batman' }] }, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], button: {} }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { variant: 'primary' } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], icon: 'user' }, error: `<mg-action-more> prop icon must match MgActionMoreIconType.` },\n      {\n        args: { items: [{ label: 'batman', mouseEventHandler }], displayChevron: true },\n        error: `<mg-action-more> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`,\n      },\n      {\n        args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true, variant: 'flat' }, displayChevron: true },\n        error: `<mg-action-more> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`,\n      },\n    ])('with args %s', async ({ args, error }) => {\n      expect.assertions(1);\n      try {\n        await getPage(args);\n      } catch (err) {\n        expect(err.message).toMatch(error);\n      }\n    });\n  });\n\n  describe('navigation', () => {\n    test(`Should run item mouseEventHandler by clicking on menu-item`, async () => {\n      const page = await getPage({ items });\n      expect(page.root).toMatchSnapshot();\n\n      const mgMoreAction = page.doc.querySelector('mg-action-more');\n      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');\n      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgMenuItem = mgMoreAction.shadowRoot.querySelector('mg-menu-item');\n      mgMenuItem.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(mouseEventHandler).toHaveBeenCalled();\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test(`Should update expanded when popover display change`, async () => {\n      const page = await getPage({ items, displayChevron: true, button: { variant: 'flat', isIcon: false } });\n      expect(page.root).toMatchSnapshot();\n\n      const mgMoreAction = page.doc.querySelector('mg-action-more');\n      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');\n      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgPopover = mgMoreAction.shadowRoot.querySelector('mg-popover');\n\n      mgPopover.dispatchEvent(new CustomEvent('display-change', { detail: false }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-details/test/mg-details.e2e.playwright.js

@@ -1,30 +0,0 @@
-import { setPageContent, describe, testEach, expect, test } from "../../../../utils/playwright.e2e.test.utils";
-import { renderAttributes } from "../../../../utils/e2e.test.utils";
-const content = '<span slot="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span><p slot="details">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
-const baseArgs = { toggleClosed: 'Show details', toggleOpened: 'Hide details' };
-const htmlContent = (args, style) => `<style>*, *:before, *:after { box-sizing: border-box; } .e2e-screenshot { width: 100%; } ${style}</style><mg-details ${renderAttributes(args)}>${content}</mg-details>`;
-describe('mg-details', () => {
-  testEach([{}, { 'hide-summary': '' }])('Should toggle details %s', async (page, args) => {
-    await setPageContent(page, htmlContent(Object.assign(Object.assign({}, baseArgs), args)));
-    await page.setViewportSize({ width: 700, height: 100 });
-    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Space');
-    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
-  });
-  test('Should not render toggle text when window size is under 700px', async ({ page }) => {
-    await setPageContent(page, htmlContent(Object.assign({}, baseArgs)));
-    await page.setViewportSize({ width: 650, height: 100 });
-    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
-  });
-  testEach([0, 5])('Should update space (%s) between summary and details', async (page, args) => {
-    await setPageContent(page, htmlContent(Object.assign({}, baseArgs), `mg-details {
-        --mg-details-spacing: ${args}rem;
-      })`));
-    await page.setViewportSize({ width: 700, height: 100 });
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Space');
-    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
-  });
-});
-//# sourceMappingURL=mg-details.e2e.playwright.js.map

package/dist/collection/components/molecules/mg-details/test/mg-details.e2e.playwright.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mg-details.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-details/test/mg-details.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAY,IAAI,EAAE,MAAM,6CAA6C,CAAC;AACzH,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,MAAM,OAAO,GACX,ifAAif,CAAC;AAEpf,MAAM,QAAQ,GAAG,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC;AAEhF,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,KAAM,EAAE,EAAE,CACnC,4FAA4F,KAAK,uBAAuB,gBAAgB,CAAC,IAAI,CAAC,IAAI,OAAO,eAAe,CAAC;AAE3K,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,EAAE,KAAK,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE;IACxG,MAAM,cAAc,CAAC,IAAI,EAAE,WAAW,iCAAM,QAAQ,GAAK,IAAI,EAAG,CAAC,CAAC;IAElE,MAAM,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAExD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAEjE,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,+DAA+D,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IACvF,MAAM,cAAc,CAAC,IAAI,EAAE,WAAW,mBAAM,QAAQ,EAAG,CAAC,CAAC;IAEzD,MAAM,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAExD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,sDAAsD,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAC5F,MAAM,cAAc,CAClB,IAAI,EACJ,WAAW,mBACJ,QAAQ,GACb;gCACwB,IAAI;SAC3B,CACF,CACF,CAAC;IAEF,MAAM,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAExD,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { setPageContent, describe, testEach, expect, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { renderAttributes } from '../../../../utils/e2e.test.utils';\n\nconst content =\n  '<span slot=\"summary\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span><p slot=\"details\">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';\n\nconst baseArgs = { toggleClosed: 'Show details', toggleOpened: 'Hide details' };\n\nconst htmlContent = (args, style?) =>\n  `<style>*, *:before, *:after { box-sizing: border-box; } .e2e-screenshot { width: 100%; } ${style}</style><mg-details ${renderAttributes(args)}>${content}</mg-details>`;\n\ndescribe('mg-details', () => {\n  testEach([{}, { 'hide-summary': '' }])('Should toggle details %s', async (page: PageType, args: object) => {\n    await setPageContent(page, htmlContent({ ...baseArgs, ...args }));\n\n    await page.setViewportSize({ width: 700, height: 100 });\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n    await page.keyboard.press('Tab');\n    await page.keyboard.press('Space');\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n\n  test('Should not render toggle text when window size is under 700px', async ({ page }) => {\n    await setPageContent(page, htmlContent({ ...baseArgs }));\n\n    await page.setViewportSize({ width: 650, height: 100 });\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n\n  testEach([0, 5])('Should update space (%s) between summary and details', async (page, args) => {\n    await setPageContent(\n      page,\n      htmlContent(\n        { ...baseArgs },\n        `mg-details {\n        --mg-details-spacing: ${args}rem;\n      })`,\n      ),\n    );\n\n    await page.setViewportSize({ width: 700, height: 100 });\n\n    await page.keyboard.press('Tab');\n    await page.keyboard.press('Space');\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-details/test/mg-details.spec.js

@@ -1,42 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { MgDetails } from "../mg-details";
-const getPage = args => newSpecPage({
-  components: [MgDetails],
-  template: () => (h("mg-details", Object.assign({}, args), h("span", { slot: "summary" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), h("p", { slot: "details" }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))),
-});
-describe('mg-details', () => {
-  test.each([
-    { toggleClosed: 'Show details', toggleOpened: 'Hide details' },
-    { toggleClosed: 'Show details', toggleOpened: 'Hide details', expanded: true },
-    { toggleClosed: 'Show details', toggleOpened: 'Hide details', hideSummary: true },
-  ])('with args %s', async (args) => {
-    const { root } = await getPage(args);
-    expect(root).toMatchSnapshot();
-  });
-  test.each([
-    {},
-    { toggleClosed: 'Show details' },
-    { toggleOpened: 'Hide details' },
-    { toggleClosed: ' ', toggleOpened: 'Hide details' },
-    { toggleClosed: 'Show details', toggleOpened: ' ' },
-  ])('Should throw error when missing toggle messages: %s', async (args) => {
-    expect.assertions(1);
-    try {
-      await getPage(args);
-    }
-    catch (err) {
-      expect(err.message).toMatch('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
-    }
-  });
-  test('Should toggle details on click', async () => {
-    const page = await getPage({ toggleClosed: 'Show details', toggleOpened: 'Hide details' });
-    const element = page.doc.querySelector('mg-details');
-    const summary = element.shadowRoot.querySelector('summary');
-    jest.spyOn(page.rootInstance.expandedChange, 'emit');
-    summary.dispatchEvent(new CustomEvent('toggle', { bubbles: true }));
-    await page.waitForChanges();
-    expect(page.rootInstance.expandedChange.emit).toHaveBeenCalledTimes(1);
-  });
-});
-//# sourceMappingURL=mg-details.spec.js.map

package/dist/collection/components/molecules/mg-details/test/mg-details.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mg-details.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-details/test/mg-details.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CACrB,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,SAAS,CAAC;EACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,kCAAgB,IAAI;IAClB,YAAM,IAAI,EAAC,SAAS,kIAAmI;IACvJ,SAAG,IAAI,EAAC,SAAS,wUAGb,CACO,CACd;CACF,CAAC,CAAC;AAEL,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,IAAI,CAAC,IAAI,CAAC;IACR,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE;IAC9D,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,EAAE;IAC9E,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,IAAI,EAAE;GAClF,CAAC,CAAC,cAAc,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC;IACR,EAAE;IACF,EAAE,YAAY,EAAE,cAAc,EAAE;IAChC,EAAE,YAAY,EAAE,cAAc,EAAE;IAChC,EAAE,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,cAAc,EAAE;IACnD,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,EAAE;GACpD,CAAC,CAAC,qDAAqD,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IACrE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;KACrB;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,sEAAsE,CAAC,CAAC;KACrG;EACH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC,CAAC;IAE3F,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IAErD,OAAO,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACpE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;EACzE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgDetails } from '../mg-details';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgDetails],\n    template: () => (\n      <mg-details {...args}>\n        <span slot=\"summary\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>\n        <p slot=\"details\">\n          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </p>\n      </mg-details>\n    ),\n  });\n\ndescribe('mg-details', () => {\n  test.each([\n    { toggleClosed: 'Show details', toggleOpened: 'Hide details' },\n    { toggleClosed: 'Show details', toggleOpened: 'Hide details', expanded: true },\n    { toggleClosed: 'Show details', toggleOpened: 'Hide details', hideSummary: true },\n  ])('with args %s', async args => {\n    const { root } = await getPage(args);\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([\n    {},\n    { toggleClosed: 'Show details' },\n    { toggleOpened: 'Hide details' },\n    { toggleClosed: ' ', toggleOpened: 'Hide details' },\n    { toggleClosed: 'Show details', toggleOpened: ' ' },\n  ])('Should throw error when missing toggle messages: %s', async args => {\n    expect.assertions(1);\n    try {\n      await getPage(args);\n    } catch (err) {\n      expect(err.message).toMatch('<mg-details> prop \"toggleClosed\" and \"toggleOpened\" must be defined.');\n    }\n  });\n\n  test('Should toggle details on click', async () => {\n    const page = await getPage({ toggleClosed: 'Show details', toggleOpened: 'Hide details' });\n\n    const element = page.doc.querySelector('mg-details');\n    const summary = element.shadowRoot.querySelector('summary');\n\n    jest.spyOn(page.rootInstance.expandedChange, 'emit');\n\n    summary.dispatchEvent(new CustomEvent('toggle', { bubbles: true }));\n    await page.waitForChanges();\n\n    expect(page.rootInstance.expandedChange.emit).toHaveBeenCalledTimes(1);\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-form/test/mg-form.e2e.js

@@ -1,169 +0,0 @@
-import { createPage } from "../../../../utils/stencil.e2e.test.utils";
-const inputs = `<mg-input-checkbox identifier="mg-input-checkbox" label="mg-input-checkbox label"></mg-input-checkbox>
-<mg-input-date identifier="mg-input-date" label="mg-input-date label"></mg-input-date>
-<mg-input-numeric identifier="mg-input-numeric" label="mg-input-numeric label"></mg-input-numeric>
-<mg-input-password identifier="mg-input-password" label="mg-input-password label"></mg-input-password>
-<mg-input-radio identifier="mg-input-radio" label="mg-input-radio label"></mg-input-radio>
-<mg-input-select identifier="mg-input-select" label="mg-input-select label"></mg-input-select>
-<mg-input-text identifier="mg-input-text" label="mg-input-text label"></mg-input-text>
-<mg-input-textarea identifier="mg-input-textarea" label="mg-input-textarea label"></mg-input-textarea>
-<mg-input-toggle identifier="mg-input-toggle" label="mg-input-toggle label">
-  <span slot="item-1">non</span>
-  <span slot="item-2">oui</span>
-</mg-input-toggle>`;
-const inputsScript = `<script>
-  const mgInputCheckbox = document.querySelector('mg-input-checkbox');
-  const mgInputDate = document.querySelector('mg-input-date');
-  const mgInputNumeric = document.querySelector('mg-input-numeric');
-  const mgInputPassword = document.querySelector('mg-input-password');
-  const mgInputRadio = document.querySelector('mg-input-radio');
-  const mgInputSelect = document.querySelector('mg-input-select');
-  const mgInputText = document.querySelector('mg-input-text');
-  const mgInputTextarea = document.querySelector('mg-input-textarea');
-  const mgInputToggle = document.querySelector('mg-input-toggle');
-
-  mgInputCheckbox.value = [
-    { title: 'oui', value: false },
-    { title: 'non', value: false },
-  ];
-  mgInputRadio.items = ['blu', 'bli', 'bla', 'blo'];
-  mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];
-  mgInputToggle.items = [
-    { title: 'non', value: false },
-    { title: 'oui', value: true },
-  ];
-</script>`;
-const inputsScriptSetValues = `<script>
-  mgInputCheckbox.value = [
-    { title: 'oui', value: true },
-    { title: 'non', value: false },
-  ];
-  mgInputDate.value = '2022-04-15';
-  mgInputNumeric.value = 1234567890;
-  mgInputPassword.value = 'p455w0rD';
-  mgInputRadio.value = mgInputRadio.items[0];
-  mgInputSelect.value = mgInputSelect.items[0];
-  mgInputText.value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
-  mgInputTextarea.value =
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
-  mgInputToggle.value = mgInputToggle.items[1].value;
-</script>`;
-const inputsScriptRequiredAll = `<script>
-  mgInputCheckbox.required = true;
-  mgInputDate.required = true;
-  mgInputNumeric.required = true;
-  mgInputPassword.required = true;
-  mgInputRadio.required = true;
-  mgInputSelect.required = true;
-  mgInputText.required = true;
-  mgInputTextarea.required = true;
-</script>`;
-const inputsScriptRequiredSome = `<script>
-  mgInputCheckbox.required = true;
-  mgInputNumeric.required = true;
-  mgInputRadio.required = true;
-  mgInputText.required = true;
-</script>`;
-const inputsScriptRequiredSingle = `<script>
-  mgInputCheckbox.required = true;
-</script>`;
-const inputsScriptReadonlyAll = `<script>
-  mgInputCheckbox.readonly = true;
-  mgInputDate.readonly = true;
-  mgInputNumeric.readonly = true;
-  mgInputPassword.readonly = true;
-  mgInputRadio.readonly = true;
-  mgInputSelect.readonly = true;
-  mgInputText.readonly = true;
-  mgInputTextarea.readonly = true;
-  mgInputToggle.readonly = true;
-</script>`;
-const inputsScriptDisabledAll = `<script>
-  mgInputCheckbox.disabled = true;
-  mgInputDate.disabled = true;
-  mgInputNumeric.disabled = true;
-  mgInputPassword.disabled = true;
-  mgInputRadio.disabled = true;
-  mgInputSelect.disabled = true;
-  mgInputText.disabled = true;
-  mgInputTextarea.disabled = true;
-  mgInputToggle.disabled = true;
-</script>`;
-describe('mg-form', () => {
-  describe.each([`<mg-form>`, `<mg-form disabled>`, `<mg-form readonly>`])('params %s', startTag => {
-    test('Should render', async () => {
-      const page = await createPage(`${startTag}
-        ${inputs}
-        </mg-form>
-        ${inputsScript}
-        ${inputsScriptSetValues}`);
-      const element = await page.find('mg-form');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-    test('Should render with custom style', async () => {
-      const page = await createPage(`${startTag}
-        ${inputs}
-        </mg-form>
-        ${inputsScript}
-        ${inputsScriptSetValues}
-        ${inputsScriptRequiredSome}`);
-      await page.$eval('mg-form', el => {
-        el.setAttribute('style', '--mg-form-inputs-title-width: 25rem;');
-      });
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-  });
-  describe.each(['<mg-form>', '<mg-form lang="fr">'])('With different locale', startTag => {
-    describe.each([inputsScriptRequiredAll, inputsScriptRequiredSome, inputsScriptRequiredSingle])('Should render required and errors', inputsScriptRequired => {
-      test('Should render errors', async () => {
-        const page = await createPage(`${startTag}
-        ${inputs}
-        </mg-form>
-        ${inputsScript}
-        ${inputsScriptRequired}`);
-        const element = await page.find('mg-form');
-        expect(element).toHaveClass('hydrated');
-        const screenshot = await page.screenshot();
-        expect(screenshot).toMatchImageSnapshot();
-        await element.callMethod('displayError');
-        await page.waitForChanges();
-        const screenshotErrors = await page.screenshot();
-        expect(screenshotErrors).toMatchImageSnapshot();
-      });
-    });
-    test('Should render single required input in form', async () => {
-      const page = await createPage(`${startTag}
-        <mg-input-date identifier="mg-input-date" label="mg-input-date label"></mg-input-date>
-      </mg-form>
-      <script>
-        const mgInputDate = document.querySelector('mg-input-date');
-        mgInputDate.required = true;
-      </script>`);
-      const element = await page.find('mg-form');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-      await element.callMethod('displayError');
-      await page.waitForChanges();
-      const screenshotErrors = await page.screenshot();
-      expect(screenshotErrors).toMatchImageSnapshot();
-    });
-  });
-  test.each(['readonly', 'disabled'])('Should not have required message when all inputs are required and %s', async (attribute) => {
-    const page = await createPage(`<mg-form>
-    ${inputs}
-    </mg-form>
-    ${inputsScript}
-    ${inputsScriptSetValues}
-    ${inputsScriptRequiredAll}
-    ${attribute === 'readonly' ? inputsScriptReadonlyAll : inputsScriptDisabledAll}`);
-    const element = await page.find('mg-form');
-    expect(element).toHaveClass('hydrated');
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchImageSnapshot();
-  });
-});
-//# sourceMappingURL=mg-form.e2e.js.map

package/dist/collection/components/molecules/mg-form/test/mg-form.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mg-form.e2e.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-form/test/mg-form.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\nconst inputs = `<mg-input-checkbox identifier=\"mg-input-checkbox\" label=\"mg-input-checkbox label\"></mg-input-checkbox>\n<mg-input-date identifier=\"mg-input-date\" label=\"mg-input-date label\"></mg-input-date>\n<mg-input-numeric identifier=\"mg-input-numeric\" label=\"mg-input-numeric label\"></mg-input-numeric>\n<mg-input-password identifier=\"mg-input-password\" label=\"mg-input-password label\"></mg-input-password>\n<mg-input-radio identifier=\"mg-input-radio\" label=\"mg-input-radio label\"></mg-input-radio>\n<mg-input-select identifier=\"mg-input-select\" label=\"mg-input-select label\"></mg-input-select>\n<mg-input-text identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>\n<mg-input-textarea identifier=\"mg-input-textarea\" label=\"mg-input-textarea label\"></mg-input-textarea>\n<mg-input-toggle identifier=\"mg-input-toggle\" label=\"mg-input-toggle label\">\n  <span slot=\"item-1\">non</span>\n  <span slot=\"item-2\">oui</span>\n</mg-input-toggle>`;\n\nconst inputsScript = `<script>\n  const mgInputCheckbox = document.querySelector('mg-input-checkbox');\n  const mgInputDate = document.querySelector('mg-input-date');\n  const mgInputNumeric = document.querySelector('mg-input-numeric');\n  const mgInputPassword = document.querySelector('mg-input-password');\n  const mgInputRadio = document.querySelector('mg-input-radio');\n  const mgInputSelect = document.querySelector('mg-input-select');\n  const mgInputText = document.querySelector('mg-input-text');\n  const mgInputTextarea = document.querySelector('mg-input-textarea');\n  const mgInputToggle = document.querySelector('mg-input-toggle');\n\n  mgInputCheckbox.value = [\n    { title: 'oui', value: false },\n    { title: 'non', value: false },\n  ];\n  mgInputRadio.items = ['blu', 'bli', 'bla', 'blo'];\n  mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];\n  mgInputToggle.items = [\n    { title: 'non', value: false },\n    { title: 'oui', value: true },\n  ];\n</script>`;\n\nconst inputsScriptSetValues = `<script>\n  mgInputCheckbox.value = [\n    { title: 'oui', value: true },\n    { title: 'non', value: false },\n  ];\n  mgInputDate.value = '2022-04-15';\n  mgInputNumeric.value = 1234567890;\n  mgInputPassword.value = 'p455w0rD';\n  mgInputRadio.value = mgInputRadio.items[0];\n  mgInputSelect.value = mgInputSelect.items[0];\n  mgInputText.value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\n  mgInputTextarea.value =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n  mgInputToggle.value = mgInputToggle.items[1].value;\n</script>`;\n\nconst inputsScriptRequiredAll = `<script>\n  mgInputCheckbox.required = true;\n  mgInputDate.required = true;\n  mgInputNumeric.required = true;\n  mgInputPassword.required = true;\n  mgInputRadio.required = true;\n  mgInputSelect.required = true;\n  mgInputText.required = true;\n  mgInputTextarea.required = true;\n</script>`;\n\nconst inputsScriptRequiredSome = `<script>\n  mgInputCheckbox.required = true;\n  mgInputNumeric.required = true;\n  mgInputRadio.required = true;\n  mgInputText.required = true;\n</script>`;\n\nconst inputsScriptRequiredSingle = `<script>\n  mgInputCheckbox.required = true;\n</script>`;\n\nconst inputsScriptReadonlyAll = `<script>\n  mgInputCheckbox.readonly = true;\n  mgInputDate.readonly = true;\n  mgInputNumeric.readonly = true;\n  mgInputPassword.readonly = true;\n  mgInputRadio.readonly = true;\n  mgInputSelect.readonly = true;\n  mgInputText.readonly = true;\n  mgInputTextarea.readonly = true;\n  mgInputToggle.readonly = true;\n</script>`;\n\nconst inputsScriptDisabledAll = `<script>\n  mgInputCheckbox.disabled = true;\n  mgInputDate.disabled = true;\n  mgInputNumeric.disabled = true;\n  mgInputPassword.disabled = true;\n  mgInputRadio.disabled = true;\n  mgInputSelect.disabled = true;\n  mgInputText.disabled = true;\n  mgInputTextarea.disabled = true;\n  mgInputToggle.disabled = true;\n</script>`;\n\ndescribe('mg-form', () => {\n  describe.each([`<mg-form>`, `<mg-form disabled>`, `<mg-form readonly>`])('params %s', startTag => {\n    test('Should render', async () => {\n      const page = await createPage(`${startTag}\n        ${inputs}\n        </mg-form>\n        ${inputsScript}\n        ${inputsScriptSetValues}`);\n\n      const element = await page.find('mg-form');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test('Should render with custom style', async () => {\n      const page = await createPage(`${startTag}\n        ${inputs}\n        </mg-form>\n        ${inputsScript}\n        ${inputsScriptSetValues}\n        ${inputsScriptRequiredSome}`);\n\n      await page.$eval('mg-form', el => {\n        el.setAttribute('style', '--mg-form-inputs-title-width: 25rem;');\n      });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  describe.each(['<mg-form>', '<mg-form lang=\"fr\">'])('With different locale', startTag => {\n    describe.each([inputsScriptRequiredAll, inputsScriptRequiredSome, inputsScriptRequiredSingle])('Should render required and errors', inputsScriptRequired => {\n      test('Should render errors', async () => {\n        const page = await createPage(`${startTag}\n        ${inputs}\n        </mg-form>\n        ${inputsScript}\n        ${inputsScriptRequired}`);\n\n        const element = await page.find('mg-form');\n        expect(element).toHaveClass('hydrated');\n\n        const screenshot = await page.screenshot();\n        expect(screenshot).toMatchImageSnapshot();\n\n        await element.callMethod('displayError');\n        await page.waitForChanges();\n\n        const screenshotErrors = await page.screenshot();\n        expect(screenshotErrors).toMatchImageSnapshot();\n      });\n    });\n    test('Should render single required input in form', async () => {\n      const page = await createPage(`${startTag}\n        <mg-input-date identifier=\"mg-input-date\" label=\"mg-input-date label\"></mg-input-date>\n      </mg-form>\n      <script>\n        const mgInputDate = document.querySelector('mg-input-date');\n        mgInputDate.required = true;\n      </script>`);\n      const element = await page.find('mg-form');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      await element.callMethod('displayError');\n      await page.waitForChanges();\n\n      const screenshotErrors = await page.screenshot();\n      expect(screenshotErrors).toMatchImageSnapshot();\n    });\n  });\n\n  test.each(['readonly', 'disabled'])('Should not have required message when all inputs are required and %s', async attribute => {\n    const page = await createPage(`<mg-form>\n    ${inputs}\n    </mg-form>\n    ${inputsScript}\n    ${inputsScriptSetValues}\n    ${inputsScriptRequiredAll}\n    ${attribute === 'readonly' ? inputsScriptReadonlyAll : inputsScriptDisabledAll}`);\n\n    const element = await page.find('mg-form');\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}