Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
import React from "devtools/client/shared/vendor/react";
import { mount } from "enzyme";
import Popover from "../Popover";
describe("Popover", () => {
const onMouseLeave = jest.fn();
const onKeyDown = jest.fn();
const editorRef = {
getBoundingClientRect() {
return {
x: 0,
y: 0,
width: 100,
height: 100,
top: 250,
right: 0,
bottom: 0,
left: 20,
};
},
};
const targetRef = {
getBoundingClientRect() {
return {
x: 0,
y: 0,
width: 100,
height: 100,
top: 250,
right: 0,
bottom: 0,
left: 20,
};
},
};
const targetPosition = {
x: 100,
y: 200,
width: 300,
height: 300,
top: 50,
right: 0,
bottom: 0,
left: 200,
};
const popover = mount(
React.createElement(
Popover,
{
onMouseLeave,
onKeyDown,
editorRef,
targetPosition,
mouseout: () => {},
target: targetRef,
},
React.createElement("h1", null, "Poppy!")
)
);
const tooltip = mount(
React.createElement(
Popover,
{
type: "tooltip",
onMouseLeave,
onKeyDown,
editorRef,
targetPosition,
mouseout: () => {},
target: targetRef,
},
React.createElement("h1", null, "Toolie!")
)
);
beforeEach(() => {
onMouseLeave.mockClear();
onKeyDown.mockClear();
});
it("render", () => expect(popover).toMatchSnapshot());
it("render (tooltip)", () => expect(tooltip).toMatchSnapshot());
it("mount popover", () => {
const mountedPopover = mount(
React.createElement(
Popover,
{
onMouseLeave,
onKeyDown,
editorRef,
targetPosition,
mouseout: () => {},
target: targetRef,
},
React.createElement("h1", null, "Poppy!")
)
);
expect(mountedPopover).toMatchSnapshot();
});
it("mount tooltip", () => {
const mountedTooltip = mount(
React.createElement(
Popover,
{
type: "tooltip",
onMouseLeave,
onKeyDown,
editorRef,
targetPosition,
mouseout: () => {},
target: targetRef,
},
React.createElement("h1", null, "Toolie!")
)
);
expect(mountedTooltip).toMatchSnapshot();
});
it("tooltip normally displays above the target", () => {
const editor = {
getBoundingClientRect() {
return {
width: 500,
height: 500,
top: 0,
bottom: 500,
left: 0,
right: 500,
};
},
};
const target = {
width: 30,
height: 10,
top: 100,
bottom: 110,
left: 20,
right: 50,
};
const mountedTooltip = mount(
React.createElement(
Popover,
{
type: "tooltip",
onMouseLeave,
onKeyDown,
editorRef: editor,
targetPosition: target,
mouseout: () => {},
target: targetRef,
},
React.createElement("h1", null, "Toolie!")
)
);
const toolTipTop = parseInt(mountedTooltip.getDOMNode().style.top, 10);
expect(toolTipTop).toBeLessThanOrEqual(target.top);
});
it("tooltop won't display above the target when insufficient space", () => {
const editor = {
getBoundingClientRect() {
return {
width: 100,
height: 100,
top: 0,
bottom: 100,
left: 0,
right: 100,
};
},
};
const target = {
width: 30,
height: 10,
top: 0,
bottom: 10,
left: 20,
right: 50,
};
const mountedTooltip = mount(
React.createElement(
Popover,
{
type: "tooltip",
onMouseLeave,
onKeyDown,
editorRef: editor,
targetPosition: target,
mouseout: () => {},
target: targetRef,
},
React.createElement("h1", null, "Toolie!")
)
);
const toolTipTop = parseInt(mountedTooltip.getDOMNode().style.top, 10);
expect(toolTipTop).toBeGreaterThanOrEqual(target.bottom);
});
});