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

@mgdis/mg-components 5.16.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 (462) hide show

package/dist/collection/components/molecules/mg-modal/test/mg-modal.e2e.playwright.js ADDED Viewed

@@ -0,0 +1,62 @@
+import { setPageContent, expect, describe, describeEach, testEach, test } from "../../../../utils/playwright.e2e.test.utils";
+import { actions, contents, createHTML } from "./mg-modal.e2e.template";
+describe('mg-modal', () => {
+  const slotsToTests = actions.flatMap(action => contents.map(content => ({ action, content })));
+  describeEach(slotsToTests)('render whith slots %s', slots => {
+    testEach([
+      { closeButton: false, hide: false },
+      { closeButton: true, hide: false },
+      {
+        closeButton: true,
+        modalTitle: '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',
+      },
+    ])('Should render %s', async (page, args) => {
+      await setPageContent(page, createHTML(args, slots));
+      await expect(page.locator(args.hide ? 'body' : '.mg-modal')).toHaveScreenshot();
+    });
+  });
+  test('Should render hidden modal', async ({ page }) => {
+    await setPageContent(page, createHTML({ hide: true }));
+    await expect(page.locator('body')).toHaveScreenshot();
+  });
+  describe('style', () => {
+    test('Should render with child mg-card', async ({ page }) => {
+      await setPageContent(page, `<mg-modal modal-title="child mg-card" class="custom-modal-card">
+          <mg-card slot="content">child card</mg-card>
+          </mg-modal>
+          <style>.custom-modal-card {--mg-card-background: hsl(var(--color-danger));}</style>
+        `);
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+    });
+  });
+  describe('navigation', () => {
+    test('Should trigger modal and close modal.', async ({ page }) => {
+      await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));
+      await expect(page.locator('body')).toHaveScreenshot();
+      // open modal
+      await page.locator('#modal-button').click();
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      // close modal
+      await page.locator('.mg-modal mg-button').click();
+      await expect(page.locator('body')).toHaveScreenshot();
+    });
+    test('should navigate with keyboard', async ({ page }) => {
+      await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));
+      await expect(page.locator('body')).toHaveScreenshot();
+      // open modal
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Enter');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      // loop in modal
+      await page.keyboard.press('Tab');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      // close modal
+      await page.keyboard.press('Enter');
+      await expect(page.locator('body')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-modal.e2e.playwright.js.map

package/dist/collection/components/molecules/mg-modal/test/mg-modal.e2e.playwright.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-modal.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-modal/test/mg-modal.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, describeEach, testEach, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { MgModalType, actions, contents, createHTML } from './mg-modal.e2e.template';\n\ndescribe('mg-modal', () => {\n const slotsToTests = actions.flatMap(action => contents.map(content => ({ action, content })));\n describeEach(slotsToTests)('render whith slots %s', slots => {\n testEach([\n { closeButton: false, hide: false },\n { closeButton: true, hide: false },\n {\n closeButton: true,\n modalTitle:\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',\n },\n ])('Should render %s', async (page: PageType, args: MgModalType) => {\n await setPageContent(page, createHTML(args, slots));\n\n await expect(page.locator(args.hide ? 'body' : '.mg-modal')).toHaveScreenshot();\n });\n });\n\n test('Should render hidden modal', async ({ page }) => {\n await setPageContent(page, createHTML({ hide: true }));\n\n await expect(page.locator('body')).toHaveScreenshot();\n });\n\n describe('style', () => {\n test('Should render with child mg-card', async ({ page }) => {\n await setPageContent(\n page,\n `<mg-modal modal-title=\"child mg-card\" class=\"custom-modal-card\">\n <mg-card slot=\"content\">child card</mg-card>\n </mg-modal>\n <style>.custom-modal-card {--mg-card-background: hsl(var(--color-danger));}</style>\n `,\n );\n\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n });\n });\n\n describe('navigation', () => {\n test('Should trigger modal and close modal.', async ({ page }) => {\n await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));\n\n await expect(page.locator('body')).toHaveScreenshot();\n\n // open modal\n await page.locator('#modal-button').click();\n\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n\n // close modal\n await page.locator('.mg-modal mg-button').click();\n\n await expect(page.locator('body')).toHaveScreenshot();\n });\n\n test('should navigate with keyboard', async ({ page }) => {\n await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));\n await expect(page.locator('body')).toHaveScreenshot();\n\n // open modal\n await page.keyboard.press('Tab');\n await page.keyboard.press('Enter');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n\n // loop in modal\n await page.keyboard.press('Tab');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n await page.keyboard.press('Tab');\n await page.keyboard.press('Tab');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n\n // close modal\n await page.keyboard.press('Enter');\n await expect(page.locator('body')).toHaveScreenshot();\n });\n });\n});\n"]}

package/dist/collection/components/molecules/mg-modal/test/mg-modal.e2e.template.js ADDED Viewed

@@ -0,0 +1,40 @@
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+export const contents = [null, 'short', 'long'];
+export const actions = [true, false];
+export const createSlots = ({ content, action }) => {
+  let slots = '';
+  if (content === 'short') {
+    slots += `
+    <p slot="content">
+      <strong>Strong</strong> content!
+    </p>`;
+  }
+  if (content === 'long') {
+    slots += `
+      <p slot="content">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 dLorem 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 dLorem 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 dLorem 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 dLorem 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 dLorem 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 dLorem 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 d</p>
+    `;
+  }
+  if (action) {
+    slots += `
+   <div slot="actions" class="mg-group-elements mg-group-elements--align-right">
+     <mg-button identifier="identifier">Primary</mg-button>
+     <mg-button variant="secondary" identifier="identifier">
+       Secondary
+     </mg-button>
+   </div>`;
+  }
+  return slots;
+};
+export const createHTML = (args, slots = {}) => {
+  const triggerModalId = 'modal-button';
+  return `<mg-button id="${triggerModalId}">Open modal</mg-button>
+  <mg-modal ${renderAttributes(Object.assign({ modalTitle: 'Modal title' }, args))}>${createSlots(slots)}</mg-modal>
+  <script>
+    document.getElementById('${triggerModalId}').addEventListener('click', () => {
+      const mgModal = document.querySelector('mg-modal');
+      mgModal.hide = !mgModal.hide;
+    });
+  </script>
+  `;
+};
+//# sourceMappingURL=mg-modal.e2e.template.js.map

package/dist/collection/components/molecules/mg-modal/test/mg-modal.e2e.template.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-modal.e2e.template.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-modal/test/mg-modal.e2e.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAGpE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAU,CAAC;AACzD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,KAAK,CAAU,CAAC;AAM9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAY,EAAU,EAAE;EACnE,IAAI,KAAK,GAAG,EAAE,CAAC;EACf,IAAI,OAAO,KAAK,OAAO,EAAE;IACvB,KAAK,IAAI;;;SAGJ,CAAC;GACP;EACD,IAAI,OAAO,KAAK,MAAM,EAAE;IACtB,KAAK,IAAI;;KAER,CAAC;GACH;EACD,IAAI,MAAM,EAAE;IACV,KAAK,IAAI;;;;;;UAMH,CAAC;GACR;EAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAiB,EAAE,QAAkB,EAAE,EAAU,EAAE;EAC5E,MAAM,cAAc,GAAG,cAAc,CAAC;EACtC,OAAO,kBAAkB,cAAc;cAC3B,gBAAgB,iBAAG,UAAU,EAAE,aAAa,IAAK,IAAI,EAAG,IAAI,WAAW,CAAC,KAAK,CAAC;;+BAE7D,cAAc;;;;;GAK1C,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { renderAttributes } from '../../../../utils/e2e.test.utils';\nimport { MgModal } from '../mg-modal';\n\nexport const contents = [null, 'short', 'long'] as const;\nexport const actions = [true, false] as const;\nexport type ContentsType = (typeof contents)[number];\nexport type ActionsType = (typeof actions)[number];\nexport type SlotType = { content?: ContentsType; action?: ActionsType };\nexport type MgModalType = Partial<MgModal>;\n\nexport const createSlots = ({ content, action }: SlotType): string => {\n let slots = '';\n if (content === 'short') {\n slots += `\n <p slot=\"content\">\n <strong>Strong</strong> content!\n </p>`;\n }\n if (content === 'long') {\n slots += `\n <p slot=\"content\">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 dLorem 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 dLorem 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 dLorem 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 dLorem 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 dLorem 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 dLorem 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 d</p>\n `;\n }\n if (action) {\n slots += `\n <div slot=\"actions\" class=\"mg-group-elements mg-group-elements--align-right\">\n <mg-button identifier=\"identifier\">Primary</mg-button>\n <mg-button variant=\"secondary\" identifier=\"identifier\">\n Secondary\n </mg-button>\n </div>`;\n }\n\n return slots;\n};\n\nexport const createHTML = (args: MgModalType, slots: SlotType = {}): string => {\n const triggerModalId = 'modal-button';\n return `<mg-button id=\"${triggerModalId}\">Open modal</mg-button>\n <mg-modal ${renderAttributes({ modalTitle: 'Modal title', ...args })}>${createSlots(slots)}</mg-modal>\n <script>\n document.getElementById('${triggerModalId}').addEventListener('click', () => {\n const mgModal = document.querySelector('mg-modal');\n mgModal.hide = !mgModal.hide;\n });\n </script>\n `;\n};\n"]}

package/dist/collection/components/molecules/mg-modal/test/mg-modal.firefox.e2e.playwright.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { setPageContent, expect, describe, test, devices } from "../../../../utils/playwright.e2e.test.utils";
+import { createHTML } from "./mg-modal.e2e.template";
+test.use(Object.assign({}, devices['Desktop Firefox']));
+describe('mg-modal, firefox', () => {
+  describe('navigation', () => {
+    test('should navigate with keyboard', async ({ page }) => {
+      await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));
+      await expect(page.locator('body')).toHaveScreenshot();
+      // open modal
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Enter');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      // loop in modal
+      await page.keyboard.press('Tab');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      // close modal
+      await page.keyboard.press('Enter');
+      await page.waitForTimeout(100);
+      await expect(page.locator('body')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-modal.firefox.e2e.playwright.js.map

package/dist/collection/components/molecules/mg-modal/test/mg-modal.firefox.e2e.playwright.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-modal.firefox.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-modal/test/mg-modal.firefox.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,6CAA6C,CAAC;AAC9G,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,IAAI,CAAC,GAAG,mBAAM,OAAO,CAAC,iBAAiB,CAAC,EAAG,CAAC;AAE5C,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,+BAA+B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACvD,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;MAC9G,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEtD,aAAa;MACb,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;MACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;MACnC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAE3D,gBAAgB;MAChB,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;MACjC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAC3D,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;MACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;MACjC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAE3D,cAAc;MACd,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;MACnC,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;MAC/B,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACxD,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { setPageContent, expect, describe, test, devices } from '../../../../utils/playwright.e2e.test.utils';\nimport { createHTML } from './mg-modal.e2e.template';\n\ntest.use({ ...devices['Desktop Firefox'] });\n\ndescribe('mg-modal, firefox', () => {\n describe('navigation', () => {\n test('should navigate with keyboard', async ({ page }) => {\n await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));\n await expect(page.locator('body')).toHaveScreenshot();\n\n // open modal\n await page.keyboard.press('Tab');\n await page.keyboard.press('Enter');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n\n // loop in modal\n await page.keyboard.press('Tab');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n await page.keyboard.press('Tab');\n await page.keyboard.press('Tab');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n\n // close modal\n await page.keyboard.press('Enter');\n await page.waitForTimeout(100);\n await expect(page.locator('body')).toHaveScreenshot();\n });\n });\n});\n"]}

package/dist/collection/components/molecules/mg-modal/test/mg-modal.spec.js ADDED Viewed

@@ -0,0 +1,122 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgButton } from "../../../atoms/mg-button/mg-button";
+import { MgModal } from "../mg-modal";
+import { focusableElements } from "../../../../utils/components.utils";
+import { setupMutationObserverMock } from "../../../../utils/unit.test.utils";
+import { dialogRoles } from "../mg-modal.conf";
+const getPage = (args, slots) => newSpecPage({
+  components: [MgModal, MgButton],
+  template: () => (h("mg-modal", Object.assign({}, args), (slots === null || slots === void 0 ? void 0 : slots.content) && (h("p", { slot: "content" }, h("strong", null, "Strong"), " content with ", h("a", { href: "./" }, "a link"), "!")), (slots === null || slots === void 0 ? void 0 : slots.actions) && (h("div", { slot: "actions", class: "mg-group-elements mg-group-elements--align-right" }, h("mg-button", null, "Primary"), h("mg-button", { variant: "secondary" }, "Secondary"))))),
+});
+describe('mg-modal', () => {
+  let fireMo;
+  beforeEach(() => {
+    setupMutationObserverMock({
+      observe: function () {
+        fireMo = this.cb;
+      },
+      disconnect: function () {
+        return null;
+      },
+      takeRecords: () => [],
+    });
+  });
+  describe.each([undefined, { content: true }, { actions: true }, { content: true, actions: true }])('Should render a modal', slots => {
+    test.each([
+      { modalTitle: 'Modal Title', identifier: 'identifier' },
+      { modalTitle: 'Modal Title', identifier: 'identifier', dialogRole: 'alertdialog' },
+      { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true },
+      { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, hide: true },
+      { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, lang: 'fr' },
+      { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, lang: 'xx' },
+    ])('with args %s', async (args) => {
+      const { root } = await getPage(Object.assign({}, args), slots);
+      expect(root).toMatchSnapshot();
+    });
+  });
+  test.each(['', ' ', undefined])('Should not render with invalid modalTitle property: %s', async (modalTitle) => {
+    expect.assertions(1);
+    try {
+      await getPage({ modalTitle });
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-modal> prop "modalTitle" is required.');
+    }
+  });
+  test.each([' ', 'batman'])('Should throw error with invalid dialogRole property: %s', async (dialogRole) => {
+    expect.assertions(1);
+    try {
+      await getPage({ modalTitle: 'Modal title', dialogRole });
+    }
+    catch (err) {
+      expect(err.message).toMatch(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
+    }
+  });
+  describe('navigation', () => {
+    test('should hide panel with button', async () => {
+      const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true });
+      const closeButton = page.root.shadowRoot.querySelector('mg-button');
+      expect(page.root).toMatchSnapshot();
+      const spy = jest.spyOn(page.rootInstance.componentHide, 'emit');
+      closeButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(spy).toHaveBeenCalled();
+    });
+    test.each([true, false])('should hide panel with escape keyboard', async (closeButton) => {
+      const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton });
+      expect(page.root).toMatchSnapshot();
+      const spy = jest.spyOn(page.rootInstance.componentHide, 'emit');
+      page.win.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      if (closeButton) {
+        expect(spy).toHaveBeenCalled();
+      }
+      else {
+        expect(spy).not.toHaveBeenCalled();
+      }
+    });
+    describe.each([
+      { attributeName: 'aria-hidden', target: { ariaHidden: null } },
+      { attributeName: 'aria-hidden', target: { ariaHidden: '' } },
+      { attributeName: 'aria-hidden', target: { ariaHidden: undefined } },
+    ])('mutationObserver', mutation => {
+      test.each([true, false])('should keep focus inside modal, closeButton %s', async (closeButton) => {
+        const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton, hide: true }, { content: true, actions: true });
+        const element = page.doc.querySelector('mg-modal');
+        // Get all focusable elements
+        const modalFocusableElements = Array.from(element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {
+          acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
+          return acc;
+        }, []);
+        // When close button is enabled it's the first focusable element.
+        if (closeButton) {
+          modalFocusableElements.unshift(element.shadowRoot.querySelector(`.mg-modal__close-button mg-button`));
+        }
+        const lastFocusableElement = modalFocusableElements[modalFocusableElements.length - 1];
+        const spyFirst = jest.spyOn(modalFocusableElements[0], 'focus');
+        const spyLast = jest.spyOn(lastFocusableElement, 'focus');
+        // Display modal
+        element.hide = false;
+        await page.waitForChanges();
+        expect(spyFirst).toHaveBeenCalledTimes(0);
+        fireMo([mutation]);
+        await page.waitForChanges();
+        expect(spyFirst).toHaveBeenCalledTimes(1);
+        // Tab from last focusable element
+        lastFocusableElement.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: false }));
+        await page.waitForChanges();
+        expect(spyFirst).toHaveBeenCalledTimes(2);
+        // Tab first focusable element with shift key
+        modalFocusableElements[0].dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: true }));
+        await page.waitForChanges();
+        expect(spyLast).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});
+//# sourceMappingURL=mg-modal.spec.js.map

package/dist/collection/components/molecules/mg-modal/test/mg-modal.spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-modal.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-modal/test/mg-modal.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable @typescript-eslint/no-empty-function */\nimport { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgModal } from '../mg-modal';\nimport { focusableElements } from '../../../../utils/components.utils';\nimport { setupMutationObserverMock } from '../../../../utils/unit.test.utils';\nimport { dialogRoles } from '../mg-modal.conf';\n\nconst getPage = (args, slots?) =>\n newSpecPage({\n components: [MgModal, MgButton],\n template: () => (\n <mg-modal {...args}>\n {slots?.content && (\n <p slot=\"content\">\n <strong>Strong</strong> content with <a href=\"./\">a link</a>!\n </p>\n )}\n {slots?.actions && (\n <div slot=\"actions\" class=\"mg-group-elements mg-group-elements--align-right\">\n <mg-button>Primary</mg-button>\n <mg-button variant=\"secondary\">Secondary</mg-button>\n </div>\n )}\n </mg-modal>\n ),\n });\n\ndescribe('mg-modal', () => {\n let fireMo;\n\n beforeEach(() => {\n setupMutationObserverMock({\n observe: function () {\n fireMo = this.cb;\n },\n disconnect: function () {\n return null;\n },\n takeRecords: () => [],\n });\n });\n\n describe.each([undefined, { content: true }, { actions: true }, { content: true, actions: true }])('Should render a modal', slots => {\n test.each([\n { modalTitle: 'Modal Title', identifier: 'identifier' },\n { modalTitle: 'Modal Title', identifier: 'identifier', dialogRole: 'alertdialog' },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, hide: true },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, lang: 'fr' },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, lang: 'xx' },\n ])('with args %s', async args => {\n const { root } = await getPage({ ...args }, slots);\n expect(root).toMatchSnapshot();\n });\n });\n\n test.each(['', ' ', undefined])('Should not render with invalid modalTitle property: %s', async modalTitle => {\n expect.assertions(1);\n try {\n await getPage({ modalTitle });\n } catch (err) {\n expect(err.message).toMatch('<mg-modal> prop \"modalTitle\" is required.');\n }\n });\n\n test.each([' ', 'batman'])('Should throw error with invalid dialogRole property: %s', async dialogRole => {\n expect.assertions(1);\n try {\n await getPage({ modalTitle: 'Modal title', dialogRole });\n } catch (err) {\n expect(err.message).toMatch(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n }\n });\n\n describe('navigation', () => {\n test('should hide panel with button', async () => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true });\n const closeButton = page.root.shadowRoot.querySelector('mg-button');\n\n expect(page.root).toMatchSnapshot();\n\n const spy = jest.spyOn(page.rootInstance.componentHide, 'emit');\n\n closeButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n expect(spy).toHaveBeenCalled();\n });\n\n test.each([true, false])('should hide panel with escape keyboard', async closeButton => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton });\n expect(page.root).toMatchSnapshot();\n\n const spy = jest.spyOn(page.rootInstance.componentHide, 'emit');\n\n page.win.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n if (closeButton) {\n expect(spy).toHaveBeenCalled();\n } else {\n expect(spy).not.toHaveBeenCalled();\n }\n });\n\n describe.each([\n { attributeName: 'aria-hidden', target: { ariaHidden: null } },\n { attributeName: 'aria-hidden', target: { ariaHidden: '' } },\n { attributeName: 'aria-hidden', target: { ariaHidden: undefined } },\n ])('mutationObserver', mutation => {\n test.each([true, false])('should keep focus inside modal, closeButton %s', async closeButton => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton, hide: true }, { content: true, actions: true });\n const element = page.doc.querySelector('mg-modal');\n // Get all focusable elements\n const modalFocusableElements = Array.from(element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {\n acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);\n return acc;\n }, []);\n // When close button is enabled it's the first focusable element.\n if (closeButton) {\n modalFocusableElements.unshift(element.shadowRoot.querySelector(`.mg-modal__close-button mg-button`));\n }\n const lastFocusableElement = modalFocusableElements[modalFocusableElements.length - 1];\n const spyFirst = jest.spyOn(modalFocusableElements[0], 'focus');\n const spyLast = jest.spyOn(lastFocusableElement, 'focus');\n\n // Display modal\n element.hide = false;\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(0);\n fireMo([mutation]);\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(1);\n // Tab from last focusable element\n lastFocusableElement.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: false }));\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(2);\n // Tab first focusable element with shift key\n modalFocusableElements[0].dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: true }));\n await page.waitForChanges();\n expect(spyLast).toHaveBeenCalledTimes(1);\n });\n });\n });\n});\n"]}

package/dist/collection/components/molecules/mg-pagination/mg-pagination.conf.js CHANGED Viewed

@@ -3,3 +3,4 @@ export var NavigationAction;
   NavigationAction["NEXT"] = "next";
   NavigationAction["PREVIOUS"] = "previous";
 })(NavigationAction || (NavigationAction = {}));
+//# sourceMappingURL=mg-pagination.conf.js.map

package/dist/collection/components/molecules/mg-pagination/mg-pagination.conf.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"mg-pagination.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.conf.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;EAC1B,iCAAa,CAAA;EACb,yCAAqB,CAAA;AACvB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B","sourcesContent":["export enum NavigationAction {\n NEXT = 'next',\n PREVIOUS = 'previous',\n}\n"]}

package/dist/collection/components/molecules/mg-pagination/mg-pagination.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { h, Host } from '@stencil/core';
-import { createID } from '../../../utils/components.utils';
-import { NavigationAction } from './mg-pagination.conf';
-import { initLocales } from './../../../locales';
+import { h, Host } from "@stencil/core";
+import { createID } from "../../../utils/components.utils";
+import { NavigationAction } from "./mg-pagination.conf";
+import { initLocales } from "./../../../locales";
 /**
  * Range generator
  *
@@ -250,3 +250,4 @@ export class MgPagination {
       }];
   }
 }
+//# sourceMappingURL=mg-pagination.js.map

package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-pagination.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '../../../utils/components.utils';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n tag: 'mg-pagination',\n styleUrl: 'mg-pagination.scss',\n shadow: true,\n})\nexport class MgPagination {\n /************\n * Internal *\n ************/\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPaginationElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-pagination');\n\n /**\n * Panignation label. Is a short description.\n * Customize default value can be usefull to improve accessibility\n */\n @Prop({ mutable: true }) label: string;\n\n /**\n * Hide navigation label\n */\n @Prop() hideNavigationLabels: boolean;\n\n /**\n * Hide select input\n */\n @Prop() hidePageCount: boolean;\n\n /**\n * Component total pages\n */\n @Prop() totalPages = 1;\n @Watch('totalPages')\n validateTotalPages(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n }\n }\n\n /**\n * Component current page\n */\n @Prop({ reflect: true, mutable: true }) currentPage = 1;\n @Watch('currentPage')\n validateCurrentPage(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n } else if (newValue > this.totalPages) {\n throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n }\n\n this.currentPageChange.emit(newValue);\n }\n\n /**\n * Emmited event when current page change\n */\n @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n /**\n * Change current page from target\n * @param target - target page\n */\n private goToPage = (target: number): void => {\n this.currentPage = target;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * select handler\n * @param event - value change event\n */\n private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n const to = Number(event.target.value);\n this.goToPage(to > 0 ? to : 1);\n };\n\n /**\n * Go to 'previous/next' page button handler\n * @param action - navigation action\n * @param disabled - button disable state\n */\n private handleGoToPage = (action: string, disabled: boolean): void => {\n !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTotalPages(this.totalPages);\n this.validateCurrentPage(this.currentPage);\n // Set default label\n if (this.label === undefined || this.label === '') {\n this.label = this.messages.pagination.label;\n }\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const navigationActionButton = (disabled: boolean, action: string) => (\n <mg-button\n identifier={`${this.identifier}-button-${action}`}\n label={this.messages.pagination[`${action}Page`]}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.handleGoToPage(action, disabled)}\n disabled={disabled}\n variant=\"flat\"\n isIcon={this.hideNavigationLabels}\n >\n {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n {!this.hideNavigationLabels && this.messages.general[action]}\n {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n </mg-button>\n );\n\n return (\n <Host hidden={this.totalPages < 2}>\n <nav aria-label={this.label} id={this.identifier} class={{ 'mg-pagination': true, 'mg-pagination--hide-page-count': this.hidePageCount }}>\n {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n {!this.hidePageCount && (\n <mg-input-select\n identifier={`${this.identifier}-select`}\n items={range(1, this.totalPages).map(page => page.toString())}\n label={this.messages.pagination.selectPage}\n label-hide={true}\n on-value-change={this.handleSelect}\n value={this.currentPage.toString()}\n placeholder-hide\n ></mg-input-select>\n )}\n <span class=\"sr-only\">\n {this.messages.pagination.page} {this.currentPage}\n </span>\n <span class={{ 'sr-only': this.hidePageCount }}>\n / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n </span>\n {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n </nav>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/molecules/mg-pagination/test/mg-pagination.e2e.playwright.js ADDED Viewed

@@ -0,0 +1,57 @@
+import { setPageContent, expect, describe, testEach, test } from "../../../../utils/playwright.e2e.test.utils";
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+const createHTML = args => `<mg-pagination ${renderAttributes(args)}></mg-pagination>`;
+describe('mg-pagination', () => {
+  describe('template', () => {
+    testEach([1, 2, 3].flatMap(totalPages => [true, false].flatMap(hidePageCount => [true, false].map(hideNavigationLabels => ({ totalPages, hideNavigationLabels, hidePageCount })))))('render %s', async (page, args) => {
+      await setPageContent(page, createHTML(args));
+      if (args.totalPages > 1)
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      else
+        expect(await page.locator('mg-pagination').isVisible()).toBe(false);
+    });
+  });
+  describe('navigation', () => {
+    testEach([2, 3, 10])('should success mouse navigation %s', async (page, totalPages) => {
+      await setPageContent(page, createHTML({ totalPages }));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      const actions = [...Array(totalPages - 1).keys()];
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      for (const _ of actions) {
+        const nextButton = await page.locator('mg-pagination mg-button:last-of-type');
+        await nextButton.click();
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      }
+    });
+    test('should success keyboard navigation', async ({ page }) => {
+      await setPageContent(page, createHTML({ totalPages: 5 }));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // take focus on mg-input-select
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // change mg-input-select to value 3
+      await page.keyboard.down('ArrowDown');
+      await page.keyboard.down('ArrowDown');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // take focus on previous button
+      await page.keyboard.down('Shift');
+      await page.keyboard.press('Tab');
+      await page.keyboard.up('Shift');
+      await page.keyboard.down('Enter');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // take focus on next
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Enter');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+  describe('locales', () => {
+    test('render with locale: %s', async ({ page }) => {
+      await setPageContent(page, createHTML({ totalPages: 5, lang: 'fr' }));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-pagination.e2e.playwright.js.map

package/dist/collection/components/molecules/mg-pagination/test/mg-pagination.e2e.playwright.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-pagination.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-pagination/test/mg-pagination.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, testEach, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { renderAttributes } from '../../../../utils/e2e.test.utils';\nimport { MgPagination } from '../mg-pagination';\n\nconst createHTML = args => `<mg-pagination ${renderAttributes(args)}></mg-pagination>`;\n\ndescribe('mg-pagination', () => {\n describe('template', () => {\n testEach(\n [1, 2, 3].flatMap(totalPages => [true, false].flatMap(hidePageCount => [true, false].map(hideNavigationLabels => ({ totalPages, hideNavigationLabels, hidePageCount })))),\n )('render %s', async (page: PageType, args: Partial<MgPagination>) => {\n await setPageContent(page, createHTML(args));\n\n if (args.totalPages > 1) await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n else expect(await page.locator('mg-pagination').isVisible()).toBe(false);\n });\n });\n\n describe('navigation', () => {\n testEach([2, 3, 10])('should success mouse navigation %s', async (page: PageType, totalPages: number) => {\n await setPageContent(page, createHTML({ totalPages }));\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n const actions = [...Array(totalPages - 1).keys()];\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n for (const _ of actions) {\n const nextButton = await page.locator('mg-pagination mg-button:last-of-type');\n await nextButton.click();\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n }\n });\n\n test('should success keyboard navigation', async ({ page }) => {\n await setPageContent(page, createHTML({ totalPages: 5 }));\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n // take focus on mg-input-select\n await page.keyboard.down('Tab');\n await page.keyboard.down('Tab');\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n // change mg-input-select to value 3\n await page.keyboard.down('ArrowDown');\n await page.keyboard.down('ArrowDown');\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n // take focus on previous button\n await page.keyboard.down('Shift');\n await page.keyboard.press('Tab');\n await page.keyboard.up('Shift');\n await page.keyboard.down('Enter');\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n // take focus on next\n await page.keyboard.down('Tab');\n await page.keyboard.down('Tab');\n await page.keyboard.down('Enter');\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n });\n });\n\n describe('locales', () => {\n test('render with locale: %s', async ({ page }) => {\n await setPageContent(page, createHTML({ totalPages: 5, lang: 'fr' }));\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n });\n });\n});\n"]}

package/dist/collection/components/molecules/mg-pagination/test/mg-pagination.spec.js ADDED Viewed

@@ -0,0 +1,121 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { MgPagination } from "../mg-pagination";
+import { MgButton } from "../../../atoms/mg-button/mg-button";
+import { MgIcon } from "../../../atoms/mg-icon/mg-icon";
+import { MgInputSelect } from "../../inputs/mg-input-select/mg-input-select";
+const getPage = args => newSpecPage({
+  components: [MgPagination, MgButton, MgIcon, MgInputSelect],
+  template: () => h("mg-pagination", Object.assign({}, args)),
+});
+describe('mg-pagination', () => {
+  describe('Should render', () => {
+    test.each([1, 2, 3, 10])('with totalPages %s', async (totalPages) => {
+      const page = await getPage({ totalPages, identifier: 'id' });
+      expect(page.root).toMatchSnapshot();
+      const actions = [...Array(totalPages - 1).keys()];
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      for (const _ of actions) {
+        const nextButton = page.root.shadowRoot.querySelector('mg-button:last-of-type');
+        nextButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+      }
+    });
+    test('Should set custom label', async () => {
+      const page = await getPage({ totalPages: 2, identifier: 'id', label: 'custom label' });
+      expect(page.root).toMatchSnapshot();
+    });
+    test.each([true, false])('Should hidde navigation labels', async (hideNavigationLabels) => {
+      const page = await getPage({ totalPages: 2, identifier: 'id', hideNavigationLabels });
+      expect(page.root).toMatchSnapshot();
+    });
+    test.each([true, false])('Should hidde page select', async (hidePageCount) => {
+      const page = await getPage({ totalPages: 2, identifier: 'id', hidePageCount });
+      expect(page.root).toMatchSnapshot();
+    });
+    test.each(['fr', 'xx'])('with locale: %s', async (lang) => {
+      const totalPages = 2;
+      const page = await getPage({ totalPages, identifier: 'id', lang });
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('errors', () => {
+    test('should throw an error, case totalPages props invalid', async () => {
+      expect.assertions(1);
+      try {
+        await getPage({ totalPages: 0 });
+      }
+      catch ({ message }) {
+        expect(message).toBe('<mg-pagination> prop "totalPages" must be greater than 0');
+      }
+    });
+    test('should throw an error, case currentPage props invalid: 0', async () => {
+      expect.assertions(1);
+      try {
+        await getPage({ currentPage: 0 });
+      }
+      catch ({ message }) {
+        expect(message).toBe('<mg-pagination> prop "currentPage" must be greater than 0');
+      }
+    });
+    test('should throw an error, case currentPage props invalid: currentPage > totalPages', async () => {
+      expect.assertions(1);
+      try {
+        await getPage({ currentPage: 2, totalPages: 1 });
+      }
+      catch ({ message }) {
+        expect(message).toBe('<mg-pagination> prop "currentPage" can not be greater than total page');
+      }
+    });
+  });
+  describe('navigation', () => {
+    test('navigate with select from 1 to 5 to 1, case totalPages=5', async () => {
+      const page = await getPage({ totalPages: 5, identifier: 'id' });
+      expect(page.root).toMatchSnapshot();
+      jest.spyOn(page.rootInstance.currentPageChange, 'emit');
+      const mgInputSelect = page.root.shadowRoot.querySelector('mg-input-select');
+      mgInputSelect.value = '5';
+      mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(5);
+      mgInputSelect.value = '2';
+      mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(2);
+      mgInputSelect.value = 'placeholder';
+      mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(1);
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledTimes(3);
+    });
+    test('navigate with next and previous, case totalPages=5', async () => {
+      const page = await getPage({ totalPages: 5, identifier: 'id' });
+      expect(page.root).toMatchSnapshot();
+      jest.spyOn(page.rootInstance.currentPageChange, 'emit');
+      // no action with a disabled button clic
+      const pageOneFirstClick = page.root.shadowRoot.querySelector('mg-button:first-of-type');
+      await pageOneFirstClick.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).not.toHaveBeenCalled();
+      // action to go to page 2 with a next button clic
+      const pageFive = page.root.shadowRoot.querySelector('mg-button:last-of-type');
+      await pageFive.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(2);
+      // action to go to page 1 with a previous button clic
+      const pageOne = page.root.shadowRoot.querySelector('mg-button:first-of-type');
+      await pageOne.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(1);
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledTimes(2);
+    });
+  });
+});
+//# sourceMappingURL=mg-pagination.spec.js.map

package/dist/collection/components/molecules/mg-pagination/test/mg-pagination.spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-pagination.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-pagination/test/mg-pagination.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { h } from '@stencil/core';\nimport { MgPagination } from '../mg-pagination';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgIcon } from '../../../atoms/mg-icon/mg-icon';\nimport { MgInputSelect } from '../../inputs/mg-input-select/mg-input-select';\n\nconst getPage = args =>\n newSpecPage({\n components: [MgPagination, MgButton, MgIcon, MgInputSelect],\n template: () => <mg-pagination {...args}></mg-pagination>,\n });\n\ndescribe('mg-pagination', () => {\n describe('Should render', () => {\n test.each([1, 2, 3, 10])('with totalPages %s', async totalPages => {\n const page = await getPage({ totalPages, identifier: 'id' });\n expect(page.root).toMatchSnapshot();\n\n const actions = [...Array(totalPages - 1).keys()];\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n for (const _ of actions) {\n const nextButton = page.root.shadowRoot.querySelector('mg-button:last-of-type');\n nextButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n }\n });\n\n test('Should set custom label', async () => {\n const page = await getPage({ totalPages: 2, identifier: 'id', label: 'custom label' });\n expect(page.root).toMatchSnapshot();\n });\n\n test.each([true, false])('Should hidde navigation labels', async hideNavigationLabels => {\n const page = await getPage({ totalPages: 2, identifier: 'id', hideNavigationLabels });\n expect(page.root).toMatchSnapshot();\n });\n\n test.each([true, false])('Should hidde page select', async hidePageCount => {\n const page = await getPage({ totalPages: 2, identifier: 'id', hidePageCount });\n expect(page.root).toMatchSnapshot();\n });\n\n test.each(['fr', 'xx'])('with locale: %s', async lang => {\n const totalPages = 2;\n const page = await getPage({ totalPages, identifier: 'id', lang });\n expect(page.root).toMatchSnapshot();\n });\n });\n\n describe('errors', () => {\n test('should throw an error, case totalPages props invalid', async () => {\n expect.assertions(1);\n try {\n await getPage({ totalPages: 0 });\n } catch ({ message }) {\n expect(message).toBe('<mg-pagination> prop \"totalPages\" must be greater than 0');\n }\n });\n test('should throw an error, case currentPage props invalid: 0', async () => {\n expect.assertions(1);\n try {\n await getPage({ currentPage: 0 });\n } catch ({ message }) {\n expect(message).toBe('<mg-pagination> prop \"currentPage\" must be greater than 0');\n }\n });\n test('should throw an error, case currentPage props invalid: currentPage > totalPages', async () => {\n expect.assertions(1);\n try {\n await getPage({ currentPage: 2, totalPages: 1 });\n } catch ({ message }) {\n expect(message).toBe('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n }\n });\n });\n\n describe('navigation', () => {\n test('navigate with select from 1 to 5 to 1, case totalPages=5', async () => {\n const page = await getPage({ totalPages: 5, identifier: 'id' });\n expect(page.root).toMatchSnapshot();\n\n jest.spyOn(page.rootInstance.currentPageChange, 'emit');\n\n const mgInputSelect = page.root.shadowRoot.querySelector('mg-input-select');\n mgInputSelect.value = '5';\n mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(5);\n\n mgInputSelect.value = '2';\n mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(2);\n\n mgInputSelect.value = 'placeholder';\n mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(1);\n expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledTimes(3);\n });\n test('navigate with next and previous, case totalPages=5', async () => {\n const page = await getPage({ totalPages: 5, identifier: 'id' });\n expect(page.root).toMatchSnapshot();\n\n jest.spyOn(page.rootInstance.currentPageChange, 'emit');\n\n // no action with a disabled button clic\n const pageOneFirstClick = page.root.shadowRoot.querySelector('mg-button:first-of-type');\n await pageOneFirstClick.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n expect(page.rootInstance.currentPageChange.emit).not.toHaveBeenCalled();\n\n // action to go to page 2 with a next button clic\n const pageFive = page.root.shadowRoot.querySelector('mg-button:last-of-type');\n await pageFive.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(2);\n\n // action to go to page 1 with a previous button clic\n const pageOne = page.root.shadowRoot.querySelector('mg-button:first-of-type');\n await pageOne.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(1);\n expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledTimes(2);\n });\n });\n});\n"]}

package/dist/collection/components/molecules/mg-panel/mg-panel.conf.js CHANGED Viewed

@@ -6,3 +6,4 @@ export const expandToggleDisplays = ['text', 'icon'];
  * Available title positions
  */
 export const titlePositions = ['left', 'right'];
+//# sourceMappingURL=mg-panel.conf.js.map