pon-shared-pon.universe.frontend.shared.componentlibrary/packages/pu-molecule-app-modal/lib/pu-molecule-app-modal.spec.js

shared components for Pon Universe

import { shallowMount } from "@vue/test-utils";
import Modal from "./pu-molecule-app-modal.vue";

let wrapper;
let mockBtn1;
let mockBtn2;
let mockBtn3;
let documentAddEventListerSpy;
let documentRemoveEventListerSpy;
let mockBtn1AddEventListerSpy;
let mockBtn1RemoveEventListerSpy;

beforeEach(() => {
  // Mock html body
  document.body.innerHTML = `
  <div>
      <button id="btn1">btn 1 </button>
      <button id="btn2">btn 2 </button>
      <button id="btn3">btn 3 </button>
  </div>
  `;

  // spies for tracing document methods
  documentAddEventListerSpy = jest.spyOn(document, "addEventListener");
  documentRemoveEventListerSpy = jest.spyOn(document, "removeEventListener");

  // elements for test context
  mockBtn1 = document.getElementById("btn1");
  mockBtn2 = document.getElementById("btn2");
  mockBtn3 = document.getElementById("btn3");

  // spies for tracing element methods
  mockBtn1AddEventListerSpy = jest.spyOn(mockBtn1, "addEventListener");
  mockBtn1RemoveEventListerSpy = jest.spyOn(mockBtn1, "removeEventListener");

  // adds a focused element in the context to add activeElement in test context
  mockBtn1.focus();

  wrapper = shallowMount(Modal, {
    propsData: {
      title: "titleMock",
      trackCategory: "trackCategoryMock",
      iconTitle: "iconTitleMock"
    },
    computed: {
      dictionary: () => () => ""
    }
  });
});

describe("Modal.vue", () => {
  describe("mounted", () => {
    // mounted() is called when the shallowMount is created
    // so the arrange and act is done in the beforeEach loop
    it("sets document.style.overflow to hidden", () => {
      expect(document.body.style.overflow).toBe("hidden");
    });

    it("stores the current active element", () => {
      expect(wrapper.vm.lastFocus).toBe(mockBtn1);
    });

    it("adds focus restriction to document nodes", () => {
      expect(wrapper.vm.nodes.includes(mockBtn1)).toBeTruthy();
      expect(wrapper.vm.nodes.includes(mockBtn2)).toBeTruthy();
      expect(wrapper.vm.nodes.includes(mockBtn3)).toBeTruthy();
      expect(mockBtn1AddEventListerSpy).toHaveBeenCalledWith(
        "focus",
        wrapper.vm.restrictFocusOfNodesToModal
      );
    });

    it("add escape button event on document", () => {
      expect(documentAddEventListerSpy).toHaveBeenCalledWith(
        "keydown",
        wrapper.vm.closeByEscapeKey
      );
    });
  });

  describe("beforeDestroy", () => {
    it("sets document.style.overflow to null", () => {
      wrapper.vm.$destroy();
      expect(document.body.style.overflow).toBe("");
    });

    it("removes focus restriction from document nodes", () => {
      wrapper.vm.$destroy();
      expect(mockBtn1RemoveEventListerSpy).toHaveBeenCalledWith(
        "focus",
        wrapper.vm.restrictFocusOfNodesToModal
      );
    });

    it("removes escape button event from document", () => {
      wrapper.vm.$destroy();
      expect(documentRemoveEventListerSpy).toHaveBeenCalledWith(
        "keydown",
        wrapper.vm.closeByEscapeKey
      );
    });

    it("sets focus on the last active element", () => {
      const mockBtn1FocusSpy = jest.spyOn(mockBtn1, "focus");
      wrapper.vm.$destroy();
      expect(mockBtn1FocusSpy).toHaveBeenCalled();
    });
  });

  describe("restrictFocusOfNodesToModal", () => {
    it("stops the event and focus on wrapper", () => {
      const wrapperFocusSpy = jest.spyOn(wrapper.vm.$refs.wrapper, "focus");
      const stopPropagationMock = jest.fn();
      const eventMock = {
        target: mockBtn1,
        stopPropagation: stopPropagationMock
      };
      wrapper.vm.restrictFocusOfNodesToModal(eventMock);
      expect(wrapperFocusSpy).toHaveBeenCalled();
      expect(stopPropagationMock).toHaveBeenCalled();
    });

    it("does not stop the event or focus on wrapper when event target is inside the wrapper", () => {
      const wrapperFocusSpy = jest.spyOn(wrapper.vm.$refs.wrapper, "focus");
      const stopPropagationMock = jest.fn();
      const eventMock = {
        target: wrapper.vm.$refs.wrapper,
        stopPropagation: stopPropagationMock
      };
      wrapper.vm.restrictFocusOfNodesToModal(eventMock);
      expect(wrapperFocusSpy).not.toHaveBeenCalled();
      expect(stopPropagationMock).not.toHaveBeenCalled();
    });
  });

  describe("closeByEscapeKey", () => {
    it("emits close event when escape button is pressed", () => {
      const eventMock = { keyCode: 27 };
      wrapper.vm.closeByEscapeKey(eventMock);
      expect(wrapper.emitted("close")).toBeTruthy();
    });

    it("does not emit close event when event does not contain escape keyCode", () => {
      const eventMock = { keyCode: 26 };
      wrapper.vm.closeByEscapeKey(eventMock);
      expect(wrapper.emitted("close")).toBeFalsy();
    });
  });

  describe("setFocusOnModal", () => {
    it("sets focus on wrapper", () => {
      const wrapperFocusSpy = jest.spyOn(wrapper.vm.$refs.wrapper, "focus");
      const eventMock = { propertyName: "opacity" };
      wrapper.vm.setFocusOnModal(eventMock);
      expect(wrapperFocusSpy).toHaveBeenCalled();
    });

    it("does not set focus on wrapper if event is not valid", () => {
      const wrapperFocusSpy = jest.spyOn(wrapper.vm.$refs.wrapper, "focus");
      const eventMock = { propertyName: "mock" };
      wrapper.vm.setFocusOnModal(eventMock);
      expect(wrapperFocusSpy).not.toHaveBeenCalled();
    });
  });

  describe("closeByBackgroundClick", () => {
    it("calls close method when event target is modal", () => {
      const closeSpy = jest.spyOn(wrapper.vm, "close");
      const eventMock = { target: wrapper.vm.$refs.modal };
      wrapper.vm.closeByBackgroundClick(eventMock);
      expect(closeSpy).toHaveBeenCalled();
    });

    it("does not call close method when event target is not modal", () => {
      const closeSpy = jest.spyOn(wrapper.vm, "close");
      const eventMock = { target: wrapper.vm.$refs.wrapper };
      wrapper.vm.closeByBackgroundClick(eventMock);
      expect(closeSpy).not.toHaveBeenCalled();
    });
  });

  describe("close", () => {
    it("emits close event", () => {
      wrapper.vm.close();
      expect(wrapper.emitted("close")).toBeTruthy();
    });
  });
});