121 lines
3.9 KiB
JavaScript
121 lines
3.9 KiB
JavaScript
import { shallowMount, mount } from "@vue/test-utils";
|
|
import toolTip from "@/ux-components/tool-tip/tool-tip.vue";
|
|
|
|
const mockMixin = {
|
|
methods: {
|
|
getCmsContent: jest.fn(() => "Mock CMS Content"),
|
|
},
|
|
};
|
|
|
|
function setupMocks(mountOptionsMockData = {}) {
|
|
const defaultMountOptions = {
|
|
propsData: {
|
|
cmsWidgetName: "testWidget",
|
|
},
|
|
mixins: [mockMixin],
|
|
};
|
|
return { ...defaultMountOptions, ...mountOptionsMockData };
|
|
}
|
|
|
|
describe("toolTip.vue", () => {
|
|
afterEach(() => {
|
|
jest.clearAllMocks();
|
|
});
|
|
|
|
it("should not show tooltip initially", () => {
|
|
// Arrange
|
|
const wrapper = shallowMount(toolTip, setupMocks());
|
|
|
|
// Assert
|
|
expect(wrapper.vm.isVisible).toBe(false);
|
|
expect(wrapper.find(".tooltip").exists()).toBe(false);
|
|
});
|
|
|
|
it("should show tooltip when icon is clicked", async () => {
|
|
// Arrange
|
|
const wrapper = shallowMount(toolTip, setupMocks());
|
|
const icon = wrapper.find(".tooltip-icon");
|
|
|
|
// Act
|
|
await icon.trigger("click");
|
|
|
|
// Assert
|
|
expect(wrapper.vm.isVisible).toBe(true);
|
|
expect(wrapper.find(".tooltip").exists()).toBe(true);
|
|
});
|
|
|
|
it("should hide tooltip when clicked outside", async () => {
|
|
// Arrange
|
|
const wrapper = shallowMount(toolTip, setupMocks());
|
|
const icon = wrapper.find(".tooltip-icon");
|
|
|
|
// Show tooltip first
|
|
await icon.trigger("click");
|
|
expect(wrapper.vm.isVisible).toBe(true);
|
|
|
|
// Act - simulate click outside
|
|
const clickEvent = new Event("click");
|
|
Object.defineProperty(clickEvent, "target", { value: document.body });
|
|
document.dispatchEvent(clickEvent);
|
|
|
|
// Wait for next tick to allow event handling
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.isVisible).toBe(false);
|
|
expect(wrapper.find(".tooltip").exists()).toBe(false);
|
|
});
|
|
|
|
it("should toggle tooltip visibility when icon is clicked multiple times", async () => {
|
|
// Arrange
|
|
const wrapper = shallowMount(toolTip, setupMocks());
|
|
const icon = wrapper.find(".tooltip-icon");
|
|
|
|
// Act & Assert - First click shows
|
|
await icon.trigger("click");
|
|
expect(wrapper.vm.isVisible).toBe(true);
|
|
|
|
// Second click hides
|
|
await icon.trigger("click");
|
|
expect(wrapper.vm.isVisible).toBe(false);
|
|
|
|
// Third click shows again
|
|
await icon.trigger("click");
|
|
expect(wrapper.vm.isVisible).toBe(true);
|
|
});
|
|
|
|
it("should not hide tooltip when clicking inside the tooltip container", async () => {
|
|
// Arrange
|
|
const wrapper = shallowMount(toolTip, setupMocks());
|
|
const icon = wrapper.find(".tooltip-icon");
|
|
|
|
// Show tooltip first
|
|
await icon.trigger("click");
|
|
expect(wrapper.vm.isVisible).toBe(true);
|
|
|
|
// Act - simulate click inside container
|
|
const container = wrapper.find(".tooltip-container").element;
|
|
const clickEvent = new Event("click");
|
|
Object.defineProperty(clickEvent, "target", { value: container });
|
|
document.dispatchEvent(clickEvent);
|
|
|
|
// Wait for next tick
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Assert - tooltip should still be visible
|
|
expect(wrapper.vm.isVisible).toBe(true);
|
|
});
|
|
|
|
it("should calculate tooltipHorizontalOffset based on parent element width", () => {
|
|
// Arrange
|
|
const wrapper = mount(toolTip, setupMocks());
|
|
const parentDiv = document.createElement("div");
|
|
Object.defineProperty(parentDiv, "offsetWidth", { value: 300, writable: true });
|
|
|
|
const container = wrapper.vm.$refs.container;
|
|
Object.defineProperty(container, "parentElement", { value: parentDiv, writable: true });
|
|
|
|
// Act & Assert
|
|
expect(wrapper.vm.tooltipHorizontalOffset).toBe(-290);
|
|
});
|
|
});
|