@momentum-ui/web-components 2.14.11 → 2.14.13

package/src/components/menu-overlay/MenuOverlay.test.ts

@@ -0,0 +1,634 @@
+import "@/components/button/Button";
+import "@/components/input/Input";
+import { Key } from "@/constants";
+import {
+  defineCE,
+  elementUpdated,
+  fixture,
+  fixtureCleanup,
+  fixtureSync,
+  nextFrame,
+  oneEvent
+} from "@open-wc/testing-helpers";
+import { html, PropertyValues } from "lit-element";
+import "./MenuOverlay";
+import { MenuOverlay, OverlaySizes } from "./MenuOverlay";
+
+Object.defineProperties(Element.prototype, {
+  getBoundingClientRect: {
+    value: jest.fn().mockReturnValue({
+      width: 10,
+      height: 10,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    })
+  },
+  getClientRects: {
+    value: jest.fn().mockReturnValue(["1", "2"])
+  }
+});
+
+Object.defineProperties(HTMLElement.prototype, {
+  offsetWidth: {
+    value: jest.fn().mockReturnValue(10)
+  },
+  offsetHeight: {
+    value: jest.fn().mockReturnValue(10)
+  }
+});
+
+const fixtureFactory = async (
+  isOpen: boolean,
+  showArrow: boolean,
+  placement: MenuOverlay.Placement,
+  customWidth: string,
+  maxHeight: string,
+  size: MenuOverlay.Size,
+  allowHoverToggle = false
+): Promise<MenuOverlay.ELEMENT> => {
+  return await fixture<MenuOverlay.ELEMENT>(html`
+    <md-menu-overlay
+      ?is-open=${isOpen}
+      ?show-arrow=${showArrow}
+      placement=${placement}
+      custom-width=${customWidth}
+      max-height=${maxHeight}
+      size=${size}
+      ?allow-hover-toggle=${allowHoverToggle}
+    >
+      <md-button slot="menu-trigger" class="menu-trigger" variant="primary">Open Menu Overlay</md-button>
+      <div><h1>Menu Overlay Content</h1></div>
+    </md-menu-overlay>
+  `);
+};
+
+const fixtureFactoryWithCustomAttr = async (
+  isOpen: boolean,
+  showArrow: boolean,
+  placement: MenuOverlay.Placement,
+  customWidth: string,
+  maxHeight: string,
+  size: MenuOverlay.Size,
+  allowHoverToggle = false
+): Promise<MenuOverlay.ELEMENT> => {
+  return await fixture<MenuOverlay.ELEMENT>(html`
+    <md-menu-overlay
+      ?is-open=${isOpen}
+      ?show-arrow=${showArrow}
+      placement=${placement}
+      custom-width=${customWidth}
+      max-height=${maxHeight}
+      size=${size}
+      ?allow-hover-toggle=${allowHoverToggle}
+    >
+      <md-button slot="menu-trigger" ariaexpanded="false" class="menu-trigger" variant="primary"
+        >Open Menu Overlay</md-button
+      >
+      <div><h1>Menu Overlay Content</h1></div>
+    </md-menu-overlay>
+  `);
+};
+
+const fixtureFactoryForNestedOverlays = async (
+  isOpen: boolean,
+  showArrow: boolean,
+  placement: MenuOverlay.Placement,
+  customWidth: string,
+  maxHeight: string,
+  size: MenuOverlay.Size,
+  allowHoverToggle = false,
+  isNestedOpen = false
+): Promise<MenuOverlay.ELEMENT> => {
+  return await fixture<MenuOverlay.ELEMENT>(html`
+    <md-menu-overlay
+      ?is-open=${isOpen}
+      ?show-arrow=${showArrow}
+      placement=${placement}
+      custom-width=${customWidth}
+      max-height=${maxHeight}
+      size=${size}
+      id="parent-menu"
+      ?allow-hover-toggle=${allowHoverToggle}
+    >
+      <md-button slot="menu-trigger" class="menu-trigger" variant="primary">Open Menu Overlay</md-button>
+      <div>
+        <h1>Parent Menu Overlay Content</h1>
+        <md-menu-overlay
+          placement=${placement}
+          ?is-open=${isNestedOpen}
+          show-arrow
+          max-height=${maxHeight}
+          custom-width=${customWidth}
+          position="bottom"
+          id="outdial-overlay"
+        >
+          <md-button slot="menu-trigger" variant="primary">Open Nested Menu Overlay</md-button>
+          <div><h1>Nested Child Menu Overlay Content</h1></div>
+        </md-menu-overlay>
+      </div>
+    </md-menu-overlay>
+  `);
+};
+
+const fixtureInputFactory = async (
+  isOpen: boolean,
+  showArrow: boolean,
+  placement: MenuOverlay.Placement,
+  customWidth: string,
+  maxHeight: string,
+  size: MenuOverlay.Size
+): Promise<MenuOverlay.ELEMENT> => {
+  return await fixture<MenuOverlay.ELEMENT>(html`
+    <md-menu-overlay
+      ?is-open=${isOpen}
+      ?show-arrow=${showArrow}
+      placement=${placement}
+      custom-width=${customWidth}
+      max-height=${maxHeight}
+      size=${size}
+    >
+      <md-input
+        placeholder="Search field with tabs"
+        shape="pill"
+        slot="menu-trigger"
+        variant="primary"
+        clear
+        autoFocus
+      ></md-input>
+      <div><h1>Menu Overlay Content</h1></div>
+    </md-menu-overlay>
+  `);
+};
+
+describe("MenuOverlay", () => {
+  afterEach(fixtureCleanup);
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("menu-overlay component is not null", async () => {
+    const element = await fixtureFactory(true, false, "bottom", "", "", "large");
+    expect(element.isOpen).toBeTruthy();
+
+    expect(element).not.toBeNull();
+    element.isOpen = false;
+  });
+
+  test("should open overlay if trigger element is clicked", async () => {
+    const element = await fixtureFactory(false, false, "bottom", "", "", "large");
+    const triggerSlot = element.renderRoot.querySelector('slot[name="menu-trigger"]') as HTMLSlotElement;
+    const triggerElement = triggerSlot.assignedElements()[0] as HTMLElement;
+
+    await nextFrame();
+
+    expect(triggerElement.getAttribute("aria-expanded")).toBeUndefined;
+    triggerElement.dispatchEvent(new MouseEvent("click"));
+    await nextFrame();
+
+    expect(triggerElement.getAttribute("aria-expanded")).toBeTruthy;
+    expect(element.isOpen).toBeTruthy();
+    element.isOpen = false;
+  });
+
+  test("should prevent the keydown event if trigger element is md-input", async () => {
+    const element = await fixtureInputFactory(false, false, "bottom", "", "", "large");
+    const triggerSlot = element.renderRoot.querySelector('slot[name="menu-trigger"]') as HTMLSlotElement;
+    const triggerElement = triggerSlot.assignedElements()[0] as HTMLElement;
+
+    await nextFrame();
+
+    triggerElement.dispatchEvent(new KeyboardEvent("keydown", { code: "Space" }));
+    await nextFrame();
+
+    expect(element.isOpen).toBeFalsy();
+    element.isOpen = false;
+  });
+
+  test("should open overlay if trigger element is invoked by keyboard", async () => {
+    const element = await fixtureFactory(false, false, "bottom", "", "", "large");
+
+    const triggerSlot = element.renderRoot.querySelector('slot[name="menu-trigger"]') as HTMLSlotElement;
+    const triggerElement = triggerSlot.assignedElements()[0] as HTMLElement;
+
+    await nextFrame();
+
+    triggerElement.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        code: Key.Enter
+      })
+    );
+
+    await nextFrame();
+    expect(element.isOpen).toBeTruthy();
+
+    triggerElement.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        code: Key.Space
+      })
+    );
+
+    expect(element.isOpen).toBeFalsy();
+
+    triggerElement.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        code: "KeyA"
+      })
+    );
+
+    await nextFrame();
+    expect(element.isOpen).toBeFalsy();
+    element.isOpen = false;
+  });
+
+  test("should open overlay if trigger element is clicked and closed when clicked again", async () => {
+    const element = await fixtureFactory(false, false, "bottom", "", "", "large");
+    expect(element.isOpen).toBeFalsy();
+
+    const triggerSlot = element.renderRoot.querySelector('slot[name="menu-trigger"]') as HTMLSlotElement;
+    const triggerElement = triggerSlot.assignedElements()[0] as HTMLElement;
+
+    await nextFrame();
+
+    const event = new MouseEvent("click");
+    await nextFrame();
+
+    triggerElement.dispatchEvent(event);
+    await nextFrame();
+
+    expect(element.isOpen).toBeTruthy();
+
+    triggerElement.dispatchEvent(event);
+    await nextFrame();
+
+    expect(element.isOpen).toBeFalsy();
+
+    document.dispatchEvent(event);
+    await nextFrame();
+
+    expect(element.isOpen).toBeFalsy();
+    element.isOpen = false;
+  });
+
+  test("triggerElement should have the correct aria labels", async () => {
+    const element = await fixtureFactory(false, false, "bottom", "", "", "large");
+
+    const triggerSlot = element.renderRoot.querySelector('slot[name="menu-trigger"]') as HTMLSlotElement;
+    const triggerElement = triggerSlot.assignedElements()[0] as HTMLElement;
+    await nextFrame();
+
+    expect(triggerElement.getAttribute("aria-haspopup")).toBeTruthy();
+    expect(triggerElement.getAttribute("aria-expanded")).toBeFalsy();
+
+    triggerElement.dispatchEvent(new MouseEvent("click"));
+    await nextFrame();
+
+    expect(element.isOpen).toBeTruthy();
+    expect(triggerElement.getAttribute("aria-expanded")).toBeTruthy();
+    element.isOpen = false;
+  });
+
+  test("triggerElement should have the correct aria labels", async () => {
+    const element = await fixtureFactoryWithCustomAttr(false, false, "bottom", "", "", "large");
+
+    const triggerSlot = element.renderRoot.querySelector('slot[name="menu-trigger"]') as HTMLSlotElement;
+    const triggerElement = triggerSlot.assignedElements()[0] as HTMLElement;
+    await nextFrame();
+
+    expect(triggerElement.getAttribute("aria-haspopup")).toBeTruthy();
+    expect(triggerElement.getAttribute("aria-expanded")).toBeFalsy();
+
+    triggerElement.dispatchEvent(new MouseEvent("click"));
+    await nextFrame();
+
+    expect(element.isOpen).toBeTruthy();
+    expect(triggerElement.getAttribute("ariaexpanded")).toBeTruthy();
+    element.isOpen = false;
+  });
+
+  test("should toggle overlay if trigger element is hovered", async () => {
+    jest.useRealTimers();
+    const element = await fixtureFactory(false, false, "bottom", "", "", "large", true);
+
+    const triggerSlot = element.renderRoot.querySelector('slot[name="menu-trigger"]') as HTMLSlotElement;
+    const triggerElement = triggerSlot.assignedElements()[0] as HTMLElement;
+    await nextFrame();
+
+    triggerElement.dispatchEvent(new MouseEvent("mouseenter"));
+    const menuOpenEvt = await oneEvent(element, "menu-overlay-open");
+    expect(menuOpenEvt).toBeDefined();
+    expect(element.isOpen).toBeTruthy();
+
+    triggerElement.dispatchEvent(new MouseEvent("mouseleave"));
+    const MenuCloseEvt = await oneEvent(element, "menu-overlay-close");
+    expect(MenuCloseEvt).toBeDefined();
+    await nextFrame();
+    expect(element.isOpen).toBeFalsy();
+    jest.clearAllTimers();
+    element.isOpen = false;
+  });
+
+  test("should execute handleOutsideClick", async () => {
+    const element = await fixtureFactory(true, false, "bottom", "", "", "large");
+    const mockhandleOutsideClick = jest.spyOn(element, "handleOutsideOverlayClick");
+    const event = new MouseEvent("click");
+
+    element.handleOutsideOverlayClick(event);
+    await elementUpdated(element);
+
+    expect(mockhandleOutsideClick).toHaveBeenCalled();
+
+    mockhandleOutsideClick.mockRestore();
+    element.isOpen = false;
+  });
+
+  test("should test showArrow property", async () => {
+    const element = await fixtureFactory(true, true, "bottom", "", "", "large");
+    const event = new MouseEvent("click");
+    await nextFrame();
+
+    element.handleOutsideOverlayClick(event);
+    await elementUpdated(element);
+    expect(element.arrow).not.toBeNull();
+    element.isOpen = false;
+  });
+
+  test("should test showArrow property on first render", async () => {
+    const tag = defineCE(
+      class extends MenuOverlay.ELEMENT {
+        constructor() {
+          super();
+          this.isOpen = true;
+          this.showArrow = true;
+        }
+        protected async firstUpdated(changedProperties: PropertyValues) {
+          super.firstUpdated(changedProperties);
+          await new Promise((resolve) => setTimeout(resolve, 0));
+          this.dispatchEvent(new CustomEvent("first-updated"));
+        }
+      }
+    );
+
+    const button = document.createElement("button");
+    Object.defineProperty(MenuOverlay.ELEMENT.prototype, "trigger", {
+      get: jest.fn().mockReturnValue([button]),
+      set: jest.fn()
+    });
+
+    const element = fixtureSync<MenuOverlay.ELEMENT>(`<${tag}></${tag}>`);
+    const event = await oneEvent(element, "first-updated");
+    expect(event).toBeDefined();
+    expect(element.arrow.hasAttribute("data-show")).toBeTruthy();
+    element.isOpen = false;
+  });
+
+  test("should test customWidth property", async () => {
+    const customWidth = "800px";
+    const element = await fixtureFactory(true, true, "bottom", customWidth, "", "large");
+    const styles = element["getStyles"]();
+    const hasStyle = styles.values.includes(`width: ${customWidth};`);
+    expect(hasStyle).toBeTruthy();
+    element.isOpen = false;
+  });
+
+  test("should test default maxHeight", async () => {
+    const maxHeight = `max-height: calc(100vh - 48px);`;
+    const element = await fixtureFactory(true, true, "bottom", "", "", "large");
+    const styles = element["getStyles"]().values;
+    const hasStyle = styles.includes(maxHeight);
+    expect(hasStyle).toBeTruthy();
+    element.isOpen = false;
+  });
+
+  test("should test maxHeight property", async () => {
+    const maxHeight = "calc(100vh - 200px)";
+    const element = await fixtureFactory(true, true, "bottom", "", maxHeight, "large");
+    const styles = element["getStyles"]().values;
+    const hasStyle = styles.includes(`max-height: ${maxHeight};`);
+    expect(hasStyle).toBeTruthy();
+    element.isOpen = false;
+  });
+
+  test("should test default size property", async () => {
+    const defaultSize = `width: ${OverlaySizes.large};`;
+    const element = await fixtureFactory(true, true, "bottom", "", "", "large");
+    const styles = element["getStyles"]().values;
+    const hasStyle = styles.includes(defaultSize);
+    expect(hasStyle).toBeTruthy();
+    element.isOpen = false;
+  });
+
+  test("should test small size property", async () => {
+    const smallSize = `width: ${OverlaySizes.small};`;
+    const element = await fixtureFactory(true, true, "bottom", "", "", "small");
+    const styles = element["getStyles"]().values;
+    const hasStyle = styles.includes(smallSize);
+    expect(hasStyle).toBeTruthy();
+    element.isOpen = false;
+  });
+
+  test("should focus on trigger when press escape to close modal", async () => {
+    jest.useFakeTimers();
+    const element = await fixtureFactory(true, true, "bottom", "", "", "large");
+    jest.runAllTimers();
+    await elementUpdated(element);
+
+    const trigger = element["triggerElement"]!;
+    const button = element.querySelector("md-button");
+
+    trigger.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        code: Key.Space
+      })
+    );
+
+    await elementUpdated(element);
+
+    trigger.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        code: Key.Escape
+      })
+    );
+
+    await nextFrame();
+    expect(element.isOpen).toBeFalsy();
+    expect(document.activeElement).toEqual(button);
+    element.isOpen = false;
+  });
+
+  test("should focus on trigger when press escape outside close modal", async () => {
+    jest.useFakeTimers();
+    const element = await fixtureFactory(true, true, "bottom", "", "", "large");
+    jest.runAllTimers();
+    await elementUpdated(element);
+
+    const trigger = element["triggerElement"]!;
+    const button = element.querySelector("md-button");
+
+    trigger.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        code: Key.Space
+      })
+    );
+
+    await elementUpdated(element);
+
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        code: Key.Escape
+      })
+    );
+
+    await nextFrame();
+    expect(element.isOpen).toBeFalsy();
+    expect(document.activeElement).toEqual(button);
+    element.isOpen = false;
+  });
+
+  test("shouldn't focus on trigger when clicked outside to close modal", async () => {
+    jest.useFakeTimers();
+    const element = await fixtureFactory(true, true, "bottom", "", "", "large");
+    jest.runAllTimers();
+    await elementUpdated(element);
+
+    const trigger = element["triggerElement"]!;
+
+    trigger.dispatchEvent(new MouseEvent("click"));
+
+    await elementUpdated(element);
+
+    document.dispatchEvent(new MouseEvent("click"));
+
+    await nextFrame();
+    expect(element.isOpen).toBeFalsy();
+    expect(document.activeElement).toBe(null);
+  });
+
+  test("shouldn't focus on trigger when press any button except escape to close modal", async () => {
+    const element = await fixtureFactory(true, true, "bottom", "", "", "large");
+    element.isOpen = true;
+    await elementUpdated(element);
+
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        code: Key.Space
+      })
+    );
+
+    const button = element.querySelector("md-button");
+
+    await nextFrame();
+    expect(element.isOpen).toBeTruthy();
+    expect(document.activeElement).not.toEqual(button);
+    element.isOpen = false;
+  });
+
+  test("should have an aria-label attribute when ariaLabel is set", async () => {
+    const component: MenuOverlay.ELEMENT = await fixture(
+      `<md-menu-overlay ariaLabel="Menu Overlay"></md-menu-overlay>`
+    );
+    const overlayPart = component.shadowRoot?.querySelector('div[part="overlay"]');
+    expect(overlayPart?.getAttribute("aria-label")).toEqual("Menu Overlay");
+    component.isOpen = false;
+  });
+
+  test("should not have an aria-label attribute when ariaLabel is not set", async () => {
+    const component: MenuOverlay.ELEMENT = await fixture(`<md-menu-overlay ></md-menu-overlay>`);
+    const overlayPart = component.shadowRoot?.querySelector('div[part="overlay"]');
+    expect(overlayPart?.hasAttribute("aria-label")).toBe(false);
+    component.isOpen = false;
+  });
+
+  test("should have a role when we set ariaRole", async () => {
+    const component: MenuOverlay.ELEMENT = await fixture(`<md-menu-overlay ariaRole="dialog" ></md-menu-overlay>`);
+    const overlayPart = component.shadowRoot?.querySelector('div[part="overlay"]');
+    expect(overlayPart?.getAttribute("role")).toEqual("dialog");
+    // when the role is dialog, aria-modal should be true
+    expect(overlayPart?.getAttribute("aria-modal")).toEqual("true");
+    component.isOpen = false;
+  });
+
+  test("should have a role as menu when we are not passing", async () => {
+    const component: MenuOverlay.ELEMENT = await fixture(`<md-menu-overlay ></md-menu-overlay>`);
+    const overlayPart = component.shadowRoot?.querySelector('div[part="overlay"]');
+    expect(overlayPart?.getAttribute("role")).toEqual("menu");
+    // when the role is other than dialog, aria-modal should be false
+    expect(overlayPart?.hasAttribute("aria-modal")).toBe(false);
+    component.isOpen = false;
+  });
+
+  test("should focus on trigger when press escape outside close modal", async () => {
+    jest.useFakeTimers();
+
+    const element = await fixtureFactoryForNestedOverlays(true, true, "bottom", "200px", "100px", "large", false, true);
+    jest.runAllTimers();
+    await elementUpdated(element);
+    // Add this line to clear the activeOverlay array
+    const button = element.querySelector("md-button");
+    const nestedMenuOverlay = element.querySelector("#outdial-overlay") as MenuOverlay.ELEMENT;
+
+    const composedPathMockForNested = jest.fn(() => [nestedMenuOverlay]);
+    const originalComposedPath = Event.prototype.composedPath;
+    Event.prototype.composedPath = composedPathMockForNested;
+
+    // Dispatch escape key press event on nested menu overlay
+    document.dispatchEvent(new KeyboardEvent("keydown", { code: Key.Escape }));
+
+    await elementUpdated(nestedMenuOverlay);
+    await elementUpdated(element);
+    await nextFrame();
+    // Verify that the nested menu overlay is closed and the parent menu overlay is still open
+
+    expect(nestedMenuOverlay.isOpen).toBeFalsy();
+    expect(element.isOpen).toBeTruthy();
+    Event.prototype.composedPath = originalComposedPath;
+
+    // Dispatch escape key press event on parent menu overlay
+    const composedPathMockForParent = jest.fn(() => [element]);
+    const originalComposedPath1 = Event.prototype.composedPath;
+    Event.prototype.composedPath = composedPathMockForParent;
+
+    document.dispatchEvent(new KeyboardEvent("keydown", { code: Key.Escape }));
+    await nextFrame();
+
+    //Verify that both the nested menu overlay and the parent menu overlay are closed
+    expect(nestedMenuOverlay.isOpen).toBeFalsy();
+    expect(element.isOpen).toBeFalsy();
+    expect(document.activeElement).toEqual(button);
+    Event.prototype.composedPath = originalComposedPath1;
+  });
+
+  test('should close the menu when window loses focus, such as iframe click, and the menu is open', async () => {
+    const element = await fixtureFactory(true, false, "bottom", "", "", "large");
+    element.isOpen = true;
+    await nextFrame();
+    expect(element.isOpen).toBeTruthy();
+
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    iframe.focus();
+    element.handleWindowBlurEvent();
+    await nextFrame();
+
+    expect(element.isOpen).toBeFalsy();
+    document.body.removeChild(iframe);
+  });
+
+  test('should not try to close the menu when window loses focus, such as iframe click, and the menu is closed', async () => {
+    const element = await fixtureFactory(true, false, "bottom", "", "", "large");
+    element.isOpen = false;
+    await nextFrame();
+    expect(element.isOpen).toBeFalsy();
+
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    iframe.focus();
+    element.handleWindowBlurEvent();
+    await nextFrame();
+
+    expect(element.isOpen).toBeFalsy();
+    document.body.removeChild(iframe);
+  });
+});