@mgdis/mg-components 5.16.0 → 5.17.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-menu-item.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { Direction } from '../mg-menu/mg-menu.conf';\nimport { Status } from './mg-menu-item.conf';\nimport type { MessageType } from '../../mg-item-more/mg-item-more.conf';\nimport type { MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport type { DirectionType } from './mg-menu-item.conf';\nimport type { MgPopover } from '../../mg-popover/mg-popover';\n\n@Component({\n  tag: 'mg-menu-item',\n  styleUrl: 'mg-menu-item.scss',\n  shadow: true,\n})\nexport class MgMenuItem {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu-item';\n  private readonly navigationButton = `${this.name}__navigation-button`;\n  private badgeLabel: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuItemElement;\n\n  /************\n   * Props *\n   ************/\n\n  /**\n   * Identifier is used to control mg-popover\n   */\n  @Prop() identifier = createID('mg-menu-item');\n\n  /**\n   * Define menu-item href\n   * when defined menu-item contain an anchor instead of button\n   */\n  @Prop() href: string;\n\n  /**\n   * Define menu-item status.\n   */\n  @Prop({ reflect: true, mutable: true }) status: Status = Status.VISIBLE;\n  @Watch('status')\n  validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n    if (oldValue !== undefined) {\n      this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n    }\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    this.statusChange.emit(newValue);\n  }\n\n  /**\n   * Define menu-item content expanded.\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  validateExpanded(newValue: MgMenuItem['expanded']): void {\n    if (typeof newValue !== 'boolean') throw new Error(`<${this.name}> prop \"expanded\" must be a boolean.`);\n\n    // if menu-item has sub-menu we have to apply some updates:\n    if (this.hasChildren) {\n      const subItems = Array.from(this.element.querySelectorAll(this.name));\n      if (!newValue) {\n        // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content\n        subItems.forEach(item => {\n          item.expanded = false;\n        });\n      } else if (this.element.querySelector(`${this.name}[status=\"${Status.ACTIVE}\"]`) !== null) {\n        // - when expanded and contain an active item parents are expended too\n        subItems.forEach(item => {\n          if (this.hasStatus(item, Status.ACTIVE)) {\n            item.expanded = true;\n          }\n        });\n      }\n    }\n  }\n\n  /**********\n   * Events *\n   *********/\n\n  /**\n   * Emited event when status change\n   */\n  @Event({ eventName: 'status-change' }) statusChange: EventEmitter<MgMenuItem['status']>;\n\n  /**\n   * Emited event when item is loaded\n   */\n  @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n  /**********\n   * States *\n   *********/\n\n  /**\n   * Define menu-item size.\n   */\n  @State() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n    this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n  }\n\n  /**\n   * Component button classes\n   */\n  @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n  /**\n   * Parent menu direction\n   */\n  @State() direction: DirectionType;\n  @Watch('direction')\n  validateDirection(newValue: MgMenuItem['direction']): void {\n    // manage menu items style depending to parent menu horientation\n    this.element.setAttribute(`data-style-direction-${newValue}`, '');\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    // manage all sub levels child menu-items level with data-level attribut\n    if (this.isDirection(Direction.VERTICAL, newValue)) {\n      Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n        item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n      });\n    }\n  }\n\n  /**\n   * Does component is in main menu\n   */\n  @State() isInMainMenu: boolean;\n\n  /**\n   * Does element is item-more\n   */\n  @State() isItemMore: boolean;\n\n  /**\n   * Does component have children.\n   */\n  @State() hasChildren = false;\n  @Watch('hasChildren')\n  validateHasChildren(newValue: boolean): void {\n    if (newValue && this.element.href !== undefined) {\n      throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n    }\n  }\n\n  /**\n   * Does component should display notification badge.\n   */\n  @State() displayNotificationBadge: boolean;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Toggle expanded prop value\n   */\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Does an Element have given Status\n   * @param mgMenuItemElement - to parse\n   * @param status - to check\n   * @returns true if element with status is found\n   */\n  private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n  /**\n   * Is component contextual direction match the given direction\n   * @param direction - in parent menu\n   * @param compareWith - direction to compare with. Default: `this.direction`\n   * @returns true is direction match the direction propertie\n   */\n  private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n  /**\n   * Update displayNotificationBadge\n   * current component notification badge have priority over the slot badge when submenu contain badge\n   */\n  private updateDisplayNotificationBadge = (): void => {\n    const childMenu = this.element.querySelector('mg-menu');\n    this.displayNotificationBadge =\n      childMenu !== null &&\n      Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);\n  };\n\n  /**\n   * Method to control if one of component children have active status\n   * @returns truthy if component has active child\n   */\n  private hasActiveChild = (): boolean =>\n    Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n      (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null,\n    );\n\n  /**\n   * Validate slots\n   * @param guard - prevent action whith guard. Default: false.\n   */\n  private validateSlot = (guard = false): void => {\n    // slot title AND metadata validation\n    // add title on label AND metada slots due to text-overflow on these element\n    if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) throw new Error(`<${this.name}> slot \"label\" is required.`);\n    ['label', 'metadata'].forEach(slot => {\n      Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n        if (element.textContent.trim().length < 1) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n        if ((guard && element.getAttribute('title') === null) || !guard) element.setAttribute('title', element.textContent);\n      });\n    });\n  };\n\n  /**\n   * Update status\n   * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n   */\n  private updateStatus = (guard = []): void => {\n    if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n      this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n    }\n  };\n\n  /**\n   * Init event-listeners\n   */\n  private initListeners = (): void => {\n    // manage first sub-level menu-items\n    Array.from(this.element.querySelector('mg-menu')?.children || []).forEach(item => {\n      if (item.nodeName === 'MG-MENU-ITEM') {\n        // manage child menu listener\n        item.addEventListener('status-change', () => {\n          this.updateStatus();\n        });\n      }\n    });\n  };\n\n  /**\n   * Get mg-popover identifier\n   * @returns generated mg-popover identifier\n   */\n  private getPopoverIdentifier = (): MgPopover['identifier'] => `${this.identifier}-popover`;\n\n  /**\n   * Render popover clickoutside guard for content slot\n   */\n  private updatePopoverGuard(): void {\n    if (this.displayPopover())\n      Array.from(this.element.children)\n        .filter((child: HTMLElement) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))\n        .forEach((slot: HTMLElement) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));\n  }\n\n  /**\n   * Condition to know if component should display a mg-popover\n   * @returns truthy if component display popover\n   */\n  private displayPopover = (): boolean => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Handle interacrtive element click\n   * @param event - click on element\n   */\n  private handleElementCLick = (event: MouseEvent): void => {\n    if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    // toggle expanded when mg-menu-item has child items\n    if (this.hasChildren) this.toggleExpanded();\n  };\n\n  /**\n   * Handle popover element display-change event\n   * @param event - popover display event\n   */\n  private handlePopoverDisplay = (event: CustomEvent): void => {\n    this.expanded = event.detail;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n    // we store only matching elements\n    this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n    this.badgeLabel = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu.badgeLabel;\n    this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n    // Validate props\n    this.validateStatus(this.status);\n    this.validateExpanded(this.expanded);\n\n    // Validate states\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // validation\n    this.validateSlot(true);\n\n    // update props and states after componentDidLoad hook\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      // define menu-item context states\n      const menu = this.element.closest('mg-menu');\n      this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;\n      this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;\n      if (menu?.size !== undefined) this.size = menu.size;\n\n      if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n      // when main menu item contain an active item it will get the active style\n      // AND if item is in vertical menu it will be expanded\n      if (this.hasActiveChild() && this.isInMainMenu) this.expanded = this.isDirection(Direction.VERTICAL);\n\n      this.updateStatus([Status.ACTIVE]);\n      this.updateDisplayNotificationBadge();\n      this.updatePopoverGuard();\n\n      // manage child dom changes with mutationObserver and listzners\n      this.initListeners();\n\n      // emit loaded event when component is fully loaded\n      this.itemLoaded.emit();\n\n      new MutationObserver(mutationsList => {\n        if (mutationsList.some(mutation => mutation.attributeName === 'hidden')) this.updateStatus();\n        if (mutationsList.some(mutation => mutation.type === 'characterData')) this.validateSlot();\n        this.updateDisplayNotificationBadge();\n      }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Render ineractive element\n   * @returns HTML Element\n   */\n  private renderInteractiveElement(): HTMLElement {\n    const TagName: string = this.href !== undefined ? 'a' : 'button';\n    return (\n      <TagName\n        href={this.href}\n        class={this.navigationButtonClassList.join()}\n        tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n        disabled={this.status === Status.DISABLED}\n        hidden={this.status === Status.HIDDEN}\n        aria-expanded={this.hasChildren && this.expanded.toString()}\n        aria-current={this.status === Status.ACTIVE && 'page'}\n        onClick={this.handleElementCLick}\n      >\n        <slot name=\"image\"></slot>\n        <div class={`${this.navigationButton}-center`}>\n          <div class={`${this.navigationButton}-text-content`}>\n            <slot name=\"label\"></slot>\n            {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n            {this.displayNotificationBadge && (\n              <span class=\"mg-menu-item__navigation-button-text-content-notification\">\n                <mg-badge label={this.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n              </span>\n            )}\n          </div>\n          {this.size !== 'regular' && <slot name=\"metadata\"></slot>}\n        </div>\n        {this.hasChildren && this.href === undefined && (\n          <span\n            class={{\n              [`${this.navigationButton}-chevron`]: true,\n              [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n              'mg-a11y-animation': true,\n            }}\n          >\n            <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n\n  /**\n   * Render slot\n   * @returns HTML Element\n   */\n  private renderSlot = (): HTMLElement => <slot></slot>;\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getContainerClasses = () => ({\n      [`${this.name}__collapse-container`]: true,\n      [`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),\n    });\n\n    return (\n      <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n        {this.displayPopover() ? (\n          <mg-popover display={this.expanded} placement=\"bottom-start\" arrowHide={true} onDisplay-change={this.handlePopoverDisplay} identifier={this.getPopoverIdentifier()}>\n            {this.renderInteractiveElement()}\n            <div class={getContainerClasses()} slot=\"content\">\n              {this.renderSlot()}\n            </div>\n          </mg-popover>\n        ) : (\n          [\n            this.renderInteractiveElement(),\n            <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n              {this.renderSlot()}\n            </div>,\n          ]\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,119 @@
+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/mg-menu.conf";
+import { Status } from "../mg-menu-item.conf";
+const slotContent = '<div><h3>Demo title</h3><p>some content</p></div>';
+const slotMenuItem = '<mg-menu label="submenu"><mg-menu-item><span slot="label">Batman begins</span></mg-menu-item></mg-menu>';
+const slotImage = '<mg-icon icon="user" slot="image"></mg-icon>';
+const slotInformation = '<mg-badge value="2" label="hello" slot="information"></mg-badge>';
+const slotMetadata = '<span slot="metadata">is a hero</span>';
+const createHTML = (args, slot = '', direction = Direction.HORIZONTAL) => `
+<mg-menu ${renderAttributes(Object.assign({ label: 'batmenu', direction }, args))}">
+  <mg-menu-item ${renderAttributes(args)}>
+    <span slot="label">${args.href ? 'batman link' : 'batman'}</span>
+    ${slot}
+  </mg-menu-item>
+</mg-menu>
+`;
+describe('mg-menu-item', () => {
+  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('render', direction => {
+    test('should render whith status', async () => {
+      const html = [Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]
+        .map(status => {
+        const template = [undefined, '#link']
+          .map(href => [true, false].map(submenu => (submenu && href !== undefined ? '' : createHTML({ status, href }, submenu && slotMenuItem, direction))).join(''))
+          .join('');
+        return `<h2>${status}<h2/><div>${template}<div>`;
+      })
+        .join('');
+      const page = await createPage(`<h1>${direction} mg-menu - Status</h1>${html}`);
+      const element = await page.find('mg-menu-item');
+      expect(element).toHaveClass('hydrated');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+    test('should render whith slots', async () => {
+      const html = [
+        { label: 'submenu', slot: slotMenuItem },
+        { label: 'image', slot: slotImage },
+        { label: 'information', slot: slotInformation },
+        { label: 'information AND image', slot: slotInformation + slotImage },
+      ]
+        .map(({ label, slot }) => {
+        const template = [true, false]
+          .map(submenu => [true, false]
+          .map(metadata => sizes
+          .map(size => (submenu && label === 'submenu' ? '' : createHTML({ size }, `${metadata ? slotMetadata : ''} ${submenu ? slot + slotMenuItem : slot}`, direction)))
+          .join(''))
+          .join(''))
+          .join('');
+        return `<h2>${label}<h2/><div>${template}<div>`;
+      })
+        .join('');
+      const page = await createPage(`<h1>${direction} mg-menu - Slots</h1>${html}`);
+      const element = await page.find('mg-menu-item');
+      expect(element).toHaveClass('hydrated');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+    test.each([true, false])(`should renders direction=${direction}, props expanded=%s`, async (expanded) => {
+      const page = await createPage(createHTML({ expanded }, slotMenuItem, direction));
+      const element = await page.find('mg-menu-item');
+      expect(element).toHaveClass('hydrated');
+      await page.setViewport({ width: 300, height: 200 });
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+    test('should render content slot', async () => {
+      const page = await createPage(createHTML({ expanded: true }, slotContent, direction));
+      const element = await page.find('mg-menu-item');
+      expect(element).toHaveClass('hydrated');
+      await page.setViewport({ width: 300, height: 200 });
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+    test.each([[Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]])('shoud manage keyboard navigation', async (status) => {
+      var _a, e_1, _b, _c;
+      const page = await createPage(createHTML({ status }, slotMenuItem, direction));
+      let screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+      const element = await page.find('mg-menu-item');
+      expect(element).toHaveClass('hydrated');
+      await page.setViewport({ width: 300, height: 200 });
+      try {
+        for (var _d = true, _e = __asyncValues(['Tab', 'Enter']), _f; _f = await _e.next(), _a = _f.done, !_a; _d = true) {
+          _c = _f.value;
+          _d = false;
+          const key = _c;
+          await page.keyboard.press(key);
+          await page.waitForChanges();
+          await page.waitForTimeout(200);
+          screenshot = await page.screenshot();
+          expect(screenshot).toMatchImageSnapshot();
+        }
+      }
+      catch (e_1_1) {
+        e_1 = { error: e_1_1 };
+      }
+      finally {
+        try {
+          if (!_d && !_a && (_b = _e.return))
+            await _b.call(_e);
+        }
+        finally {
+          if (e_1)
+            throw e_1.error;
+        }
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-menu-item.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-menu-item.e2e.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { KeyInput } from 'puppeteer';\nimport { createPage } from '../../../../../utils/stencil.e2e.test.utils';\nimport { renderAttributes } from '../../../../../utils/e2e.test.utils';\nimport { Direction, sizes } from '../../mg-menu/mg-menu.conf';\nimport { Status } from '../mg-menu-item.conf';\n\nconst slotContent = '<div><h3>Demo title</h3><p>some content</p></div>';\nconst slotMenuItem = '<mg-menu label=\"submenu\"><mg-menu-item><span slot=\"label\">Batman begins</span></mg-menu-item></mg-menu>';\nconst slotImage = '<mg-icon icon=\"user\" slot=\"image\"></mg-icon>';\nconst slotInformation = '<mg-badge value=\"2\" label=\"hello\" slot=\"information\"></mg-badge>';\nconst slotMetadata = '<span slot=\"metadata\">is a hero</span>';\n\nconst createHTML = (args, slot = '', direction = Direction.HORIZONTAL) => `\n<mg-menu ${renderAttributes({ label: 'batmenu', direction, ...args })}\">\n  <mg-menu-item ${renderAttributes(args)}>\n    <span slot=\"label\">${args.href ? 'batman link' : 'batman'}</span>\n    ${slot}\n  </mg-menu-item>\n</mg-menu>\n`;\n\ndescribe('mg-menu-item', () => {\n  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('render', direction => {\n    test('should render whith status', async () => {\n      const html = [Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]\n        .map(status => {\n          const template = [undefined, '#link']\n            .map(href => [true, false].map(submenu => (submenu && href !== undefined ? '' : createHTML({ status, href }, submenu && slotMenuItem, direction))).join(''))\n            .join('');\n          return `<h2>${status}<h2/><div>${template}<div>`;\n        })\n        .join('');\n\n      const page = await createPage(`<h1>${direction} mg-menu - Status</h1>${html}`);\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test('should render whith slots', async () => {\n      const html = [\n        { label: 'submenu', slot: slotMenuItem },\n        { label: 'image', slot: slotImage },\n        { label: 'information', slot: slotInformation },\n        { label: 'information AND image', slot: slotInformation + slotImage },\n      ]\n        .map(({ label, slot }) => {\n          const template = [true, false]\n            .map(submenu =>\n              [true, false]\n                .map(metadata =>\n                  sizes\n                    .map(size => (submenu && label === 'submenu' ? '' : createHTML({ size }, `${metadata ? slotMetadata : ''} ${submenu ? slot + slotMenuItem : slot}`, direction)))\n                    .join(''),\n                )\n                .join(''),\n            )\n            .join('');\n          return `<h2>${label}<h2/><div>${template}<div>`;\n        })\n        .join('');\n\n      const page = await createPage(`<h1>${direction} mg-menu - Slots</h1>${html}`);\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test.each([true, false])(`should renders direction=${direction}, props expanded=%s`, async expanded => {\n      const page = await createPage(createHTML({ expanded }, slotMenuItem, direction));\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 300, height: 200 });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test('should render content slot', async () => {\n      const page = await createPage(createHTML({ expanded: true }, slotContent, direction));\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 300, height: 200 });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test.each([[Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]])('shoud manage keyboard navigation', async status => {\n      const page = await createPage(createHTML({ status }, slotMenuItem, direction));\n      let screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 300, height: 200 });\n\n      for await (const key of ['Tab', 'Enter']) {\n        await page.keyboard.press(key as unknown as KeyInput);\n        await page.waitForChanges();\n        await page.waitForTimeout(200);\n        screenshot = await page.screenshot();\n        expect(screenshot).toMatchImageSnapshot();\n      }\n    });\n  });\n});\n"]}