@mgdis/mg-components 5.16.0 → 5.18.0

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

@@ -0,0 +1,268 @@
+var __asyncValues = (this && this.__asyncValues) || function (o) {
+  if (!Symbol.asyncIterator)
+    throw new TypeError("Symbol.asyncIterator is not defined.");
+  var m = o[Symbol.asyncIterator], i;
+  return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+  function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+  function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+};
+import { createPage } from "../../../../../utils/stencil.e2e.test.utils";
+import { renderAttributes } from "../../../../../utils/e2e.test.utils";
+import { Direction, sizes } from "../mg-menu.conf";
+var Position;
+(function (Position) {
+  Position["PRESS"] = "press";
+  Position["DOWN"] = "down";
+})(Position || (Position = {}));
+var Key;
+(function (Key) {
+  Key["TAB"] = "Tab";
+  Key["SHIFT"] = "Shift";
+  Key["ENTER"] = "Enter";
+})(Key || (Key = {}));
+const expectImageSnapshot = async (page) => {
+  await page.waitForChanges();
+  await page.waitForTimeout(200);
+  const screenshot = await page.screenshot();
+  expect(screenshot).toMatchImageSnapshot();
+};
+const getSubMenuSize = (size) => {
+  if (size === 'large')
+    return 'medium';
+  else if (size === 'medium')
+    return 'regular';
+  else
+    return 'regular';
+};
+const getFrameSize = (direction, size) => direction === Direction.VERTICAL
+  ? { width: 400, height: ['medium', 'large'].includes(size) ? 400 : 250 }
+  : { width: ['medium', 'large'].includes(size) ? 1100 : 800, height: 200 };
+const createHTML = (args, containerSize) => `
+  <header class="menu-container menu-container--${containerSize}">
+    <mg-menu ${renderAttributes(Object.assign({ label: 'menu' }, args))}>
+      <mg-menu-item status="active">
+        <span slot="label">1 - head-1</span>
+        <mg-menu ${renderAttributes({ label: 'sub-menu 1', direction: Direction.VERTICAL, size: getSubMenuSize(args === null || args === void 0 ? void 0 : args.size) })}>
+          <mg-menu-item><span slot="label">Batman begins</span></mg-menu-item>
+        </mg-menu>
+      </mg-menu-item>
+      <mg-menu-item status="disabled"><span slot="label">1 - head-2 long</span></mg-menu-item>
+      <mg-menu-item href="#link">
+        <span slot="label">1 - head-3 very long</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+      </mg-menu-item>
+      <mg-menu-item>
+        <span slot="label">1 - head-4</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+        ${(args === null || args === void 0 ? void 0 : args.badge) ? "<mg-badge value='2' label='hello' slot='information'></mg-badge>" : ''}  
+      </mg-menu-item>
+      <mg-menu-item>
+        <span slot="label">1 - head-5</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+        ${(args === null || args === void 0 ? void 0 : args.badge) ? "<mg-badge value='2' label='hello' slot='information'></mg-badge>" : ''} 
+        <mg-menu ${renderAttributes({ label: 'sub-menu 2', direction: Direction.VERTICAL, size: getSubMenuSize(args === null || args === void 0 ? void 0 : args.size) })}>
+          <mg-menu-item><span slot="label">Batman begins with a longer title to go outide screen</span></mg-menu-item>
+        </mg-menu>
+      </mg-menu-item>
+    </mg-menu>
+  </header>
+  <style>
+    .menu-container.menu-container--vertical-small {
+      width: 180px;
+    }
+  </style>
+  `;
+describe('mg-menu', () => {
+  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('direction %s', direction => {
+    test.each(sizes)(`should renders, case direction ${direction} size %s with large screen`, async (size) => {
+      const page = await createPage(createHTML({ direction, size, badge: true }), getFrameSize(direction, size));
+      const element = await page.find('mg-menu');
+      expect(element).toHaveClass('hydrated');
+      await expectImageSnapshot(page);
+    });
+  });
+  describe('navigation horizontal', () => {
+    test(`should success mouse navigation, case direction ${Direction.HORIZONTAL}`, async () => {
+      var _a, e_1, _b, _c;
+      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));
+      await expectImageSnapshot(page);
+      const actions = [
+        { position: 1, expanded: true },
+        { position: 5, expanded: true },
+        { position: 5, expanded: false },
+        { position: 1, expanded: true },
+      ];
+      try {
+        for (var _d = true, actions_1 = __asyncValues(actions), actions_1_1; actions_1_1 = await actions_1.next(), _a = actions_1_1.done, !_a; _d = true) {
+          _c = actions_1_1.value;
+          _d = false;
+          const action = _c;
+          let item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.position}) >>> button`);
+          await item.click();
+          await page.waitForChanges();
+          expect(item.getAttribute('aria-expanded')).toBe(`${action.expanded}`);
+          item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.position})) >>> button[aria-expanded="true"]`);
+          expect(item).toBe(null);
+        }
+      }
+      catch (e_1_1) {
+        e_1 = { error: e_1_1 };
+      }
+      finally {
+        try {
+          if (!_d && !_a && (_b = actions_1.return))
+            await _b.call(actions_1);
+        }
+        finally {
+          if (e_1)
+            throw e_1.error;
+        }
+      }
+      // menu-item close
+      await page.$eval('body', elm => {
+        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      });
+      await page.waitForChanges();
+      await expectImageSnapshot(page);
+    });
+    test(`should success keyboard navigation, case direction ${Direction.HORIZONTAL}`, async () => {
+      var _a, e_2, _b, _c;
+      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));
+      await expectImageSnapshot(page);
+      const actions = [
+        { position: Position.PRESS, key: Key.TAB, openeItem: null },
+        { position: Position.PRESS, key: Key.TAB, openeItem: null },
+        { position: Position.PRESS, key: Key.TAB, openeItem: null },
+        { position: Position.PRESS, key: Key.TAB, openeItem: null },
+        { position: Position.PRESS, key: Key.ENTER, openeItem: 5 },
+        { position: Position.PRESS, key: Key.TAB, openeItem: 5 },
+        { position: Position.PRESS, key: Key.SHIFT, openeItem: 5 },
+        { position: Position.PRESS, key: Key.ENTER, openeItem: null },
+        { position: Position.PRESS, key: Key.TAB, openeItem: null },
+      ];
+      try {
+        for (var _d = true, actions_2 = __asyncValues(actions), actions_2_1; actions_2_1 = await actions_2.next(), _a = actions_2_1.done, !_a; _d = true) {
+          _c = actions_2_1.value;
+          _d = false;
+          const action = _c;
+          if (action.key === Key.SHIFT) {
+            await page.keyboard.down(Key.SHIFT);
+            await page.keyboard.press(Key.TAB);
+            await page.keyboard.up(Key.SHIFT);
+          }
+          else {
+            await page.keyboard[action.position](action.key);
+          }
+          await page.waitForChanges();
+          let item;
+          if (action.openeItem > 0) {
+            item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.openeItem}) >>> button[aria-expanded="true"]`);
+            expect(item).not.toBe(null);
+            item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.openeItem})) >>> button[aria-expanded="true"]`);
+          }
+          else {
+            item = await page.find(`header > mg-menu > mg-menu-item >>> button[aria-expanded="true"]`);
+          }
+          expect(item).toBe(null);
+        }
+      }
+      catch (e_2_1) {
+        e_2 = { error: e_2_1 };
+      }
+      finally {
+        try {
+          if (!_d && !_a && (_b = actions_2.return))
+            await _b.call(actions_2);
+        }
+        finally {
+          if (e_2)
+            throw e_2.error;
+        }
+      }
+    });
+  });
+  describe('navigation vertical', () => {
+    test(`should success mouse navigation, case direction ${Direction.VERTICAL}`, async () => {
+      var _a, e_3, _b, _c;
+      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));
+      await expectImageSnapshot(page);
+      const positions = [1, 5, 5, 1];
+      try {
+        for (var _d = true, positions_1 = __asyncValues(positions), positions_1_1; positions_1_1 = await positions_1.next(), _a = positions_1_1.done, !_a; _d = true) {
+          _c = positions_1_1.value;
+          _d = false;
+          const position = _c;
+          const item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${position}) >>> button`);
+          await item.click();
+          await page.waitForChanges();
+          await expectImageSnapshot(page);
+        }
+      }
+      catch (e_3_1) {
+        e_3 = { error: e_3_1 };
+      }
+      finally {
+        try {
+          if (!_d && !_a && (_b = positions_1.return))
+            await _b.call(positions_1);
+        }
+        finally {
+          if (e_3)
+            throw e_3.error;
+        }
+      }
+      await page.$eval('body', elm => {
+        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      });
+      await page.waitForChanges();
+      await expectImageSnapshot(page);
+    });
+    test(`should success keyboard navigation, case direction ${Direction.VERTICAL}`, async () => {
+      var _a, e_4, _b, _c;
+      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));
+      await expectImageSnapshot(page);
+      const actions = [
+        { position: Position.PRESS, key: Key.TAB },
+        { position: Position.PRESS, key: Key.TAB },
+        { position: Position.PRESS, key: Key.TAB },
+        { position: Position.PRESS, key: Key.TAB },
+        { position: Position.PRESS, key: Key.ENTER },
+        { position: Position.PRESS, key: Key.TAB },
+        { position: Position.PRESS, key: Key.SHIFT },
+        { position: Position.PRESS, key: Key.ENTER },
+        { position: Position.PRESS, key: Key.TAB },
+      ];
+      try {
+        for (var _d = true, actions_3 = __asyncValues(actions), actions_3_1; actions_3_1 = await actions_3.next(), _a = actions_3_1.done, !_a; _d = true) {
+          _c = actions_3_1.value;
+          _d = false;
+          const action = _c;
+          if (action.key === Key.SHIFT) {
+            await page.keyboard.down(Key.SHIFT);
+            await page.keyboard.press(Key.TAB);
+            await page.keyboard.up(Key.SHIFT);
+          }
+          else {
+            await page.keyboard[action.position](action.key);
+          }
+          await page.waitForChanges();
+          await expectImageSnapshot(page);
+        }
+      }
+      catch (e_4_1) {
+        e_4 = { error: e_4_1 };
+      }
+      finally {
+        try {
+          if (!_d && !_a && (_b = actions_3.return))
+            await _b.call(actions_3);
+        }
+        finally {
+          if (e_4)
+            throw e_4.error;
+        }
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-menu.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-menu.e2e.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/menu/mg-menu/test/mg-menu.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { KeyInput } from 'puppeteer';\nimport { createPage, DesignSystemE2EPage } from '../../../../../utils/stencil.e2e.test.utils';\nimport { renderAttributes } from '../../../../../utils/e2e.test.utils';\nimport { Direction, MenuSizeType, sizes } from '../mg-menu.conf';\n\nenum Position {\n  PRESS = 'press',\n  DOWN = 'down',\n}\n\nenum Key {\n  TAB = 'Tab',\n  SHIFT = 'Shift',\n  ENTER = 'Enter',\n}\n\nconst expectImageSnapshot = async (page: DesignSystemE2EPage) => {\n  await page.waitForChanges();\n  await page.waitForTimeout(200);\n  const screenshot = await page.screenshot();\n  expect(screenshot).toMatchImageSnapshot();\n};\n\nconst getSubMenuSize = (size: MenuSizeType) => {\n  if (size === 'large') return 'medium';\n  else if (size === 'medium') return 'regular';\n  else return 'regular';\n};\n\nconst getFrameSize = (direction, size?) =>\n  direction === Direction.VERTICAL\n    ? { width: 400, height: ['medium', 'large'].includes(size) ? 400 : 250 }\n    : { width: ['medium', 'large'].includes(size) ? 1100 : 800, height: 200 };\n\nconst createHTML = (args, containerSize?) => `\n  <header class=\"menu-container menu-container--${containerSize}\">\n    <mg-menu ${renderAttributes({ label: 'menu', ...args })}>\n      <mg-menu-item status=\"active\">\n        <span slot=\"label\">1 - head-1</span>\n        <mg-menu ${renderAttributes({ label: 'sub-menu 1', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n          <mg-menu-item><span slot=\"label\">Batman begins</span></mg-menu-item>\n        </mg-menu>\n      </mg-menu-item>\n      <mg-menu-item status=\"disabled\"><span slot=\"label\">1 - head-2 long</span></mg-menu-item>\n      <mg-menu-item href=\"#link\">\n        <span slot=\"label\">1 - head-3 very long</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n      </mg-menu-item>\n      <mg-menu-item>\n        <span slot=\"label\">1 - head-4</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n        ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''}  \n      </mg-menu-item>\n      <mg-menu-item>\n        <span slot=\"label\">1 - head-5</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n        ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''} \n        <mg-menu ${renderAttributes({ label: 'sub-menu 2', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n          <mg-menu-item><span slot=\"label\">Batman begins with a longer title to go outide screen</span></mg-menu-item>\n        </mg-menu>\n      </mg-menu-item>\n    </mg-menu>\n  </header>\n  <style>\n    .menu-container.menu-container--vertical-small {\n      width: 180px;\n    }\n  </style>\n  `;\n\ndescribe('mg-menu', () => {\n  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('direction %s', direction => {\n    test.each(sizes)(`should renders, case direction ${direction} size %s with large screen`, async size => {\n      const page = await createPage(createHTML({ direction, size, badge: true }), getFrameSize(direction, size));\n\n      const element = await page.find('mg-menu');\n      expect(element).toHaveClass('hydrated');\n\n      await expectImageSnapshot(page);\n    });\n  });\n\n  describe('navigation horizontal', () => {\n    test(`should success mouse navigation, case direction ${Direction.HORIZONTAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));\n      await expectImageSnapshot(page);\n\n      const actions = [\n        { position: 1, expanded: true },\n        { position: 5, expanded: true },\n        { position: 5, expanded: false },\n        { position: 1, expanded: true },\n      ];\n      for await (const action of actions) {\n        let item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.position}) >>> button`);\n        await item.click();\n        await page.waitForChanges();\n\n        expect(item.getAttribute('aria-expanded')).toBe(`${action.expanded}`);\n        item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.position})) >>> button[aria-expanded=\"true\"]`);\n        expect(item).toBe(null);\n      }\n\n      // menu-item close\n      await page.$eval('body', elm => {\n        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      });\n      await page.waitForChanges();\n      await expectImageSnapshot(page);\n    });\n\n    test(`should success keyboard navigation, case direction ${Direction.HORIZONTAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));\n      await expectImageSnapshot(page);\n\n      const actions = [\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.ENTER, openeItem: 5 },\n        { position: Position.PRESS, key: Key.TAB, openeItem: 5 },\n        { position: Position.PRESS, key: Key.SHIFT, openeItem: 5 },\n        { position: Position.PRESS, key: Key.ENTER, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n      ];\n\n      for await (const action of actions) {\n        if (action.key === Key.SHIFT) {\n          await page.keyboard.down(Key.SHIFT);\n          await page.keyboard.press(Key.TAB);\n          await page.keyboard.up(Key.SHIFT);\n        } else {\n          await page.keyboard[action.position](action.key as unknown as KeyInput);\n        }\n        await page.waitForChanges();\n        let item;\n        if (action.openeItem > 0) {\n          item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.openeItem}) >>> button[aria-expanded=\"true\"]`);\n          expect(item).not.toBe(null);\n          item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.openeItem})) >>> button[aria-expanded=\"true\"]`);\n        } else {\n          item = await page.find(`header > mg-menu > mg-menu-item >>> button[aria-expanded=\"true\"]`);\n        }\n        expect(item).toBe(null);\n      }\n    });\n  });\n\n  describe('navigation vertical', () => {\n    test(`should success mouse navigation, case direction ${Direction.VERTICAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));\n      await expectImageSnapshot(page);\n\n      const positions = [1, 5, 5, 1];\n      for await (const position of positions) {\n        const item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${position}) >>> button`);\n        await item.click();\n        await page.waitForChanges();\n        await expectImageSnapshot(page);\n      }\n\n      await page.$eval('body', elm => {\n        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      });\n      await page.waitForChanges();\n      await expectImageSnapshot(page);\n    });\n    test(`should success keyboard navigation, case direction ${Direction.VERTICAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));\n      await expectImageSnapshot(page);\n\n      const actions = [\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.ENTER },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.SHIFT },\n        { position: Position.PRESS, key: Key.ENTER },\n        { position: Position.PRESS, key: Key.TAB },\n      ];\n\n      for await (const action of actions) {\n        if (action.key === Key.SHIFT) {\n          await page.keyboard.down(Key.SHIFT);\n          await page.keyboard.press(Key.TAB);\n          await page.keyboard.up(Key.SHIFT);\n        } else {\n          await page.keyboard[action.position](action.key as unknown as KeyInput);\n        }\n        await page.waitForChanges();\n        await expectImageSnapshot(page);\n      }\n    });\n  });\n});\n"]}

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

@@ -0,0 +1,175 @@
+var __asyncValues = (this && this.__asyncValues) || function (o) {
+  if (!Symbol.asyncIterator)
+    throw new TypeError("Symbol.asyncIterator is not defined.");
+  var m = o[Symbol.asyncIterator], i;
+  return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+  function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+  function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+};
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgMenu } from "../mg-menu";
+import { Direction } from "../mg-menu.conf";
+import { MgMenuItem } from "../../mg-menu-item/mg-menu-item";
+import { MgPopover } from "../../../mg-popover/mg-popover";
+import { forcePopoverId, mockConsoleError, mockWindowFrames, setupMutationObserverMock, setupResizeObserverMock } from "../../../../../utils/unit.test.utils";
+import { MgItemMore } from "../../../mg-item-more/mg-item-more";
+import { MgPopoverContent } from "../../../mg-popover/mg-popover-content/mg-popover-content";
+mockConsoleError();
+mockWindowFrames();
+let id;
+/**
+ * set id if param is true
+ * @param hasId - true if need a generated id
+ * @returns genereted id
+ */
+const setId = (hasId) => (hasId ? `test-${id++}` : undefined);
+const getPage = async (args, options = { submenu: true, itemMore: false }) => {
+  const components = [MgMenu, MgMenuItem, MgPopover, MgPopoverContent];
+  if (!options.submenu && options.itemMore)
+    components.push(MgItemMore);
+  const page = await newSpecPage({
+    components,
+    template: () => (h("mg-menu", Object.assign({}, args), h("mg-menu-item", { id: setId(args.hasId), identifier: "identifier-1" }, h("span", { slot: "label" }, "batman"), options.submenu && (h("mg-menu", { label: "batman - submenu", direction: Direction.VERTICAL }, h("mg-menu-item", null, h("span", { slot: "label" }, "batman begins"), h("mg-menu", { label: "batman begins - submenu", direction: Direction.VERTICAL }, h("mg-menu-item", null, h("span", { slot: "label" }, "movie")))), h("mg-menu-item", null, h("span", { slot: "label" }, "joker: the dark knight")), h("mg-menu-item", null, h("span", { slot: "label" }, "bane: the dark knight rise"))))), h("mg-menu-item", { id: setId(args.hasId), identifier: "identifier-2" }, h("span", { slot: "label" }, "joker"), args.badge && h("mg-badge", { value: 1, label: "bad guy" }), h("div", null, h("h2", null, "This is a joker card"), h("p", null, "If you don't know the joker, you can watch the movie."))), h("mg-menu-item", { href: "#bane", id: setId(args.hasId), identifier: "identifier-3" }, h("span", { slot: "label" }, "bane")))),
+  });
+  jest.runOnlyPendingTimers();
+  await page.waitForChanges();
+  [page.doc, ...Array.from(page.doc.querySelectorAll('mg-menu')).map(el => el.shadowRoot)].forEach(el => Array.from(el.querySelectorAll('mg-menu-item')).forEach((item, index) => {
+    forcePopoverId(item, `mg-popover-test_${index}`);
+  }));
+  return page;
+};
+describe('mg-menu', () => {
+  let fireMo;
+  beforeEach(() => {
+    id = 1;
+    jest.useFakeTimers();
+    setupResizeObserverMock({
+      observe: function () {
+        return null;
+      },
+      disconnect: function () {
+        return null;
+      },
+    });
+    setupMutationObserverMock({
+      observe: function () {
+        fireMo = this.cb;
+      },
+      disconnect: () => null,
+      takeRecords: () => [],
+    });
+  });
+  afterEach(() => jest.clearAllTimers());
+  describe('render', () => {
+    test.each([{ label: 'batman menu' }, { label: 'batman menu', direction: 'horizontal' }, { label: 'batman menu', direction: 'vertical' }])('with args %s', async (args) => {
+      const { root } = await getPage(args);
+      expect(root).toMatchSnapshot();
+    });
+  });
+  describe('errors', () => {
+    const baseProps = { label: 'batman menu' };
+    test.each([
+      { props: { direction: 'horizontal' }, error: '<mg-menu> prop "label" is required.' },
+      { props: Object.assign(Object.assign({}, baseProps), { direction: 'test' }), error: '<mg-menu> prop "direction" must be one of: horizontal, vertical.' },
+      { props: Object.assign(Object.assign({}, baseProps), { direction: Direction.VERTICAL, itemmore: { icon: 'user' } }), error: '<mg-menu> prop "itemmore" must be paired with direction horizontal.' },
+      { props: Object.assign(Object.assign({}, baseProps), { size: 'batman' }), error: '<mg-menu> prop "size" must be one of: regular, medium, large.' },
+    ])('Should throw error when props are invalid, case %s', async ({ props, error }) => {
+      expect.assertions(1);
+      try {
+        await getPage(props);
+      }
+      catch (err) {
+        expect(err.message).toMatch(error);
+      }
+    });
+  });
+  describe.each(['horizontal', 'vertical'])('events', direction => {
+    test(`should manage outside click, case direction ${direction}`, async () => {
+      const page = await getPage({ label: 'batman menu', direction });
+      const firstItem = page.root.querySelector('[title="batman"]').closest('mg-menu-item');
+      expect(firstItem.expanded).toBe(false);
+      firstItem.shadowRoot.querySelector('button').dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      jest.runOnlyPendingTimers();
+      expect(firstItem.expanded).toBe(true);
+      document.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(firstItem.expanded).toBe(direction === 'vertical');
+    });
+    test.each(['click', 'focus'])(`should manage sibling menu-item expanded props in ${direction} menu, case %s event`, async (event) => {
+      const page = await getPage({ label: 'batman menu', direction });
+      // open batman item
+      const batmanItem = page.doc.querySelector('[title="batman"]').closest('mg-menu-item');
+      expect(batmanItem.expanded).toBe(false);
+      if (direction === 'horizontal') {
+        expect(batmanItem.shadowRoot.querySelector('mg-popover')).not.toBe(null);
+      }
+      batmanItem.shadowRoot.querySelector('button').dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      jest.runOnlyPendingTimers();
+      expect(batmanItem.expanded).toBe(true);
+      // open batman first child item
+      const batmanChildItem = page.doc.querySelector('[title="batman begins"]').closest('mg-menu-item');
+      batmanChildItem.shadowRoot.querySelector('button').dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(batmanItem.expanded).toBe(true);
+      expect(batmanChildItem.expanded).toBe(true);
+      // open joker item must close batman first child item
+      const jokerItem = page.doc.querySelector('[title="joker"]').closest('mg-menu-item');
+      jokerItem.shadowRoot.querySelector('button').dispatchEvent(new CustomEvent(event, { bubbles: true }));
+      await page.waitForChanges();
+      expect(batmanItem.expanded).toBe(false);
+      expect(batmanChildItem.expanded).toBe(false);
+      expect(jokerItem.expanded).toBe(event === 'click');
+    });
+  });
+  describe.each([Direction.VERTICAL, Direction.HORIZONTAL])('MutationObserver %s', direction => {
+    test.each([{ label: 'batman menu', direction }])('with args %s', async (args) => {
+      var _a, e_1, _b, _c;
+      const page = await getPage(args);
+      const mutations = [[{ type: 'childList', removedNodes: [{ nodeName: 'MG-ITEM-MORE' }] }], [{ type: 'childList', removedNodes: [{ nodeName: 'MG-MENU-ITEM' }] }]];
+      try {
+        for (var _d = true, mutations_1 = __asyncValues(mutations), mutations_1_1; mutations_1_1 = await mutations_1.next(), _a = mutations_1_1.done, !_a; _d = true) {
+          _c = mutations_1_1.value;
+          _d = false;
+          const mutation = _c;
+          fireMo(mutation);
+          await page.waitForChanges();
+          expect(page.root).toMatchSnapshot();
+        }
+      }
+      catch (e_1_1) {
+        e_1 = { error: e_1_1 };
+      }
+      finally {
+        try {
+          if (!_d && !_a && (_b = mutations_1.return))
+            await _b.call(mutations_1);
+        }
+        finally {
+          if (e_1)
+            throw e_1.error;
+        }
+      }
+    });
+  });
+  describe('mg-item-more', () => {
+    test.each(['click', 'focus'])('should manage "mg-item-more" event %s', async (event) => {
+      const page = await getPage({ label: 'batman menu' }, { submenu: false, itemMore: true });
+      const mgItemMore = page.doc.querySelector('mg-item-more');
+      mgItemMore.dispatchEvent(new CustomEvent('item-loaded', { bubbles: true }));
+      await page.flushQueue();
+      await page.waitForChanges();
+      const moreMenuItem = mgItemMore.shadowRoot.querySelector('mg-menu-item');
+      forcePopoverId(moreMenuItem, `mg-popover-test_more-item`);
+      expect(page.root).toMatchSnapshot();
+      moreMenuItem.shadowRoot.querySelector('button').dispatchEvent(new CustomEvent(event, { bubbles: true }));
+      await page.flushQueue();
+      await page.waitForChanges();
+      expect(moreMenuItem.expanded).toBe(event === 'click');
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-menu.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-menu.spec.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/menu/mg-menu/test/mg-menu.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgMenu } from '../mg-menu';\nimport { Direction } from '../mg-menu.conf';\nimport { MgMenuItem } from '../../mg-menu-item/mg-menu-item';\nimport { MgPopover } from '../../../mg-popover/mg-popover';\nimport { forcePopoverId, mockConsoleError, mockWindowFrames, setupMutationObserverMock, setupResizeObserverMock } from '../../../../../utils/unit.test.utils';\nimport { MgItemMore } from '../../../mg-item-more/mg-item-more';\nimport { MgPopoverContent } from '../../../mg-popover/mg-popover-content/mg-popover-content';\n\nmockConsoleError();\nmockWindowFrames();\n\nlet id;\n/**\n * set id if param is true\n * @param hasId - true if need a generated id\n * @returns genereted id\n */\nconst setId = (hasId: boolean): string => (hasId ? `test-${id++}` : undefined);\n\nconst getPage = async (args, options = { submenu: true, itemMore: false }) => {\n  const components: unknown[] = [MgMenu, MgMenuItem, MgPopover, MgPopoverContent];\n  if (!options.submenu && options.itemMore) components.push(MgItemMore);\n  const page = await newSpecPage({\n    components,\n    template: () => (\n      <mg-menu {...args}>\n        <mg-menu-item id={setId(args.hasId)} identifier=\"identifier-1\">\n          <span slot=\"label\">batman</span>\n          {options.submenu && (\n            <mg-menu label=\"batman - submenu\" direction={Direction.VERTICAL}>\n              <mg-menu-item>\n                <span slot=\"label\">batman begins</span>\n                <mg-menu label=\"batman begins - submenu\" direction={Direction.VERTICAL}>\n                  <mg-menu-item>\n                    <span slot=\"label\">movie</span>\n                  </mg-menu-item>\n                </mg-menu>\n              </mg-menu-item>\n              <mg-menu-item>\n                <span slot=\"label\">joker: the dark knight</span>\n              </mg-menu-item>\n              <mg-menu-item>\n                <span slot=\"label\">bane: the dark knight rise</span>\n              </mg-menu-item>\n            </mg-menu>\n          )}\n        </mg-menu-item>\n        <mg-menu-item id={setId(args.hasId)} identifier=\"identifier-2\">\n          <span slot=\"label\">joker</span>\n          {args.badge && <mg-badge value={1} label=\"bad guy\"></mg-badge>}\n          <div>\n            <h2>This is a joker card</h2>\n            <p>If you don't know the joker, you can watch the movie.</p>\n          </div>\n        </mg-menu-item>\n        <mg-menu-item href=\"#bane\" id={setId(args.hasId)} identifier=\"identifier-3\">\n          <span slot=\"label\">bane</span>\n        </mg-menu-item>\n      </mg-menu>\n    ),\n  });\n\n  jest.runOnlyPendingTimers();\n  await page.waitForChanges();\n\n  [page.doc, ...Array.from(page.doc.querySelectorAll('mg-menu')).map(el => el.shadowRoot)].forEach(el =>\n    Array.from(el.querySelectorAll('mg-menu-item')).forEach((item, index) => {\n      forcePopoverId(item, `mg-popover-test_${index}`);\n    }),\n  );\n\n  return page;\n};\n\ndescribe('mg-menu', () => {\n  let fireMo;\n  beforeEach(() => {\n    id = 1;\n    jest.useFakeTimers();\n    setupResizeObserverMock({\n      observe: function () {\n        return null;\n      },\n      disconnect: function () {\n        return null;\n      },\n    });\n    setupMutationObserverMock({\n      observe: function () {\n        fireMo = this.cb;\n      },\n      disconnect: () => null,\n      takeRecords: () => [],\n    });\n  });\n\n  afterEach(() => jest.clearAllTimers());\n\n  describe('render', () => {\n    test.each([{ label: 'batman menu' }, { label: 'batman menu', direction: 'horizontal' }, { label: 'batman menu', direction: 'vertical' }])('with args %s', async args => {\n      const { root } = await getPage(args);\n\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  describe('errors', () => {\n    const baseProps = { label: 'batman menu' };\n    test.each([\n      { props: { direction: 'horizontal' }, error: '<mg-menu> prop \"label\" is required.' },\n      { props: { ...baseProps, direction: 'test' }, error: '<mg-menu> prop \"direction\" must be one of: horizontal, vertical.' },\n      { props: { ...baseProps, direction: Direction.VERTICAL, itemmore: { icon: 'user' } }, error: '<mg-menu> prop \"itemmore\" must be paired with direction horizontal.' },\n      { props: { ...baseProps, size: 'batman' }, error: '<mg-menu> prop \"size\" must be one of: regular, medium, large.' },\n    ])('Should throw error when props are invalid, case %s', async ({ props, error }) => {\n      expect.assertions(1);\n\n      try {\n        await getPage(props);\n      } catch (err) {\n        expect(err.message).toMatch(error);\n      }\n    });\n  });\n\n  describe.each(['horizontal', 'vertical'])('events', direction => {\n    test(`should manage outside click, case direction ${direction}`, async () => {\n      const page = await getPage({ label: 'batman menu', direction });\n\n      const firstItem: HTMLMgMenuItemElement = page.root.querySelector('[title=\"batman\"]').closest('mg-menu-item');\n      expect(firstItem.expanded).toBe(false);\n\n      firstItem.shadowRoot.querySelector('button').dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n      jest.runOnlyPendingTimers();\n\n      expect(firstItem.expanded).toBe(true);\n\n      document.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(firstItem.expanded).toBe(direction === 'vertical');\n    });\n\n    test.each(['click', 'focus'])(`should manage sibling menu-item expanded props in ${direction} menu, case %s event`, async event => {\n      const page = await getPage({ label: 'batman menu', direction });\n      // open batman item\n      const batmanItem: HTMLMgMenuItemElement = page.doc.querySelector('[title=\"batman\"]').closest('mg-menu-item');\n      expect(batmanItem.expanded).toBe(false);\n      if (direction === 'horizontal') {\n        expect(batmanItem.shadowRoot.querySelector('mg-popover')).not.toBe(null);\n      }\n\n      batmanItem.shadowRoot.querySelector('button').dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n      jest.runOnlyPendingTimers();\n\n      expect(batmanItem.expanded).toBe(true);\n\n      // open batman first child item\n      const batmanChildItem: HTMLMgMenuItemElement = page.doc.querySelector('[title=\"batman begins\"]').closest('mg-menu-item');\n\n      batmanChildItem.shadowRoot.querySelector('button').dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(batmanItem.expanded).toBe(true);\n      expect(batmanChildItem.expanded).toBe(true);\n\n      // open joker item must close batman first child item\n      const jokerItem: HTMLMgMenuItemElement = page.doc.querySelector('[title=\"joker\"]').closest('mg-menu-item');\n\n      jokerItem.shadowRoot.querySelector('button').dispatchEvent(new CustomEvent(event, { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(batmanItem.expanded).toBe(false);\n      expect(batmanChildItem.expanded).toBe(false);\n      expect(jokerItem.expanded).toBe(event === 'click');\n    });\n  });\n\n  describe.each([Direction.VERTICAL, Direction.HORIZONTAL])('MutationObserver %s', direction => {\n    test.each([{ label: 'batman menu', direction }])('with args %s', async args => {\n      const page = await getPage(args);\n\n      const mutations = [[{ type: 'childList', removedNodes: [{ nodeName: 'MG-ITEM-MORE' }] }], [{ type: 'childList', removedNodes: [{ nodeName: 'MG-MENU-ITEM' }] }]];\n\n      for await (const mutation of mutations) {\n        fireMo(mutation);\n\n        await page.waitForChanges();\n\n        expect(page.root).toMatchSnapshot();\n      }\n    });\n  });\n\n  describe('mg-item-more', () => {\n    test.each(['click', 'focus'])('should manage \"mg-item-more\" event %s', async event => {\n      const page = await getPage({ label: 'batman menu' }, { submenu: false, itemMore: true });\n\n      const mgItemMore = page.doc.querySelector('mg-item-more');\n      mgItemMore.dispatchEvent(new CustomEvent('item-loaded', { bubbles: true }));\n\n      await page.flushQueue();\n      await page.waitForChanges();\n\n      const moreMenuItem = mgItemMore.shadowRoot.querySelector('mg-menu-item');\n\n      forcePopoverId(moreMenuItem, `mg-popover-test_more-item`);\n      expect(page.root).toMatchSnapshot();\n\n      moreMenuItem.shadowRoot.querySelector('button').dispatchEvent(new CustomEvent(event, { bubbles: true }));\n\n      await page.flushQueue();\n      await page.waitForChanges();\n\n      expect(moreMenuItem.expanded).toBe(event === 'click');\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.conf.js

@@ -16,3 +16,4 @@ export var Status;
   Status["DISABLED"] = "disabled";
   Status["ACTIVE"] = "active";
 })(Status || (Status = {}));
+//# sourceMappingURL=mg-menu-item.conf.js.map

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.conf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-menu-item.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;EACzB,kCAAe,CAAA;EACf,gCAAa,CAAA;AACf,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,MAKX;AALD,WAAY,MAAM;EAChB,6BAAmB,CAAA;EACnB,2BAAiB,CAAA;EACjB,+BAAqB,CAAA;EACrB,2BAAiB,CAAA;AACnB,CAAC,EALW,MAAM,KAAN,MAAM,QAKjB","sourcesContent":["import { MgMenu } from '../mg-menu/mg-menu';\n\n/**\n * Available menu-item positions\n */\nexport enum ElementPosition {\n  FIRST = 'first',\n  LAST = 'last',\n}\n\n/**\n * Available menu item status\n */\nexport enum Status {\n  VISIBLE = 'visible',\n  HIDDEN = 'hidden',\n  DISABLED = 'disabled',\n  ACTIVE = 'active',\n}\n\n/**\n * Direction type\n */\nexport type DirectionType = MgMenu['direction'];\n"]}

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js

@@ -1,8 +1,8 @@
-import { h, Host } from '@stencil/core';
-import { ClassList, createID } from '../../../../utils/components.utils';
-import { initLocales } from '../../../../locales';
-import { Direction } from '../mg-menu/mg-menu.conf';
-import { Status } from './mg-menu-item.conf';
+import { h, Host } from "@stencil/core";
+import { ClassList, createID } from "../../../../utils/components.utils";
+import { initLocales } from "../../../../locales";
+import { Direction } from "../mg-menu/mg-menu.conf";
+import { Status } from "./mg-menu-item.conf";
 export class MgMenuItem {
   constructor() {
     /************
@@ -342,7 +342,8 @@ export class MgMenuItem {
           "references": {
             "Status": {
               "location": "import",
-              "path": "./mg-menu-item.conf"
+              "path": "./mg-menu-item.conf",
+              "id": "src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts::Status"
             }
           }
         },
@@ -403,7 +404,8 @@ export class MgMenuItem {
           "resolved": "Status.ACTIVE | Status.DISABLED | Status.HIDDEN | Status.VISIBLE",
           "references": {
             "MgMenuItem": {
-              "location": "global"
+              "location": "global",
+              "id": "global::MgMenuItem"
             }
           }
         }
@@ -444,3 +446,4 @@ export class MgMenuItem {
       }];
   }
 }
+//# sourceMappingURL=mg-menu-item.js.map