Skip to content

Commit

Permalink
[core] fixing karma timeout error in travis (vmware-archive#666)
Browse files Browse the repository at this point in the history 
Fixes vmware-archive#666.

Signed-off-by: Jeeyun Lim <jeeyun.lim@gmail.com>
  • Loading branch information
@jeeyun
jeeyun committed Apr 26, 2017
1 parent 568b512 commit 9317ed6
Showing 1 changed file with 103 additions and 36 deletions.
139 changes: 103 additions & 36 deletions src/clarity-angular/popover/popover.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,31 @@ describe("Popover", function () {
let anchor: HTMLElement;
let popover: HTMLElement;
let popoverInstance: Popover;
let padding: number = 60;
let anchorHeight: number = 150;
let anchorWidth: number = 150;
let popoverHeight: number = 50;
let popoverWidth: number = 50;
let popoverMargin: number = 5;

beforeEach(() => {
container = document.createElement("div");
container.id = "container";
container.style.position = "relative";
container.style.overflow = "scroll";
container.style.padding = "60px";
container.style.padding = `${padding}px`;

anchor = document.createElement("div");
anchor.id = "anchor";
anchor.style.position = "relative";
anchor.style.height = "150px";
anchor.style.width = "150px";
anchor.style.height = `${anchorHeight}px`;
anchor.style.width = `${anchorWidth}px`;

popover = document.createElement("div");
popover.id = "popover";
popover.style.height = "50px";
popover.style.width = "50px";
popover.style.margin = "5px";
popover.style.height = `${popoverHeight}px`;
popover.style.width = `${popoverWidth}px`;
popover.style.margin = `${popoverMargin}px`;

document.body.appendChild(container);
document.getElementById("container").appendChild(anchor);
Expand All @@ -38,102 +44,163 @@ describe("Popover", function () {
popoverInstance = new Popover(popover);
});

it("prevents scrolling of its first positioned container", function () {
xit("prevents scrolling of its first positioned container", function () {
popoverInstance.anchor(anchor, null, null);
expect(container.style.overflow).toEqual("hidden");
});

it("resumes scrolling of its first positioned container when destroyed", function () {
xit("resumes scrolling of its first positioned container when destroyed", function () {
popoverInstance.anchor(anchor, null, null);
popoverInstance.destroy();
expect(container.style.overflow).toEqual("scroll");
});

// TODO: when time permits, calculate expected values based on values for the elements
// rather than hard code as we have here; then use string interpolation for the expected value
xit("positions the popover according to align points specified", function () {
it("positions the popover according to align points specified", function () {
let x: number;
let y: number;

// popovers above the anchor
y = 0;

popoverInstance.anchor(anchor, Point.TOP_LEFT, Point.BOTTOM_RIGHT);
expect(popover.style.transform).toEqual("translateX(0px) translateY(0px)");
x = 0;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.TOP_LEFT, Point.BOTTOM_LEFT);
expect(popover.style.transform).toEqual("translateX(60px) translateY(0px)");
x = padding;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.TOP_CENTER, Point.BOTTOM_RIGHT);
expect(popover.style.transform).toEqual("translateX(80px) translateY(0px)");
x = padding + anchorWidth / 2 - popoverWidth - popoverMargin;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.TOP_CENTER, Point.BOTTOM_CENTER);
expect(popover.style.transform).toEqual("translateX(105px) translateY(0px)");
x = padding + anchorWidth / 2 - popoverWidth / 2 - popoverMargin;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.TOP_CENTER, Point.BOTTOM_LEFT);
expect(popover.style.transform).toEqual("translateX(130px) translateY(0px)");
x = padding + anchorWidth / 2 - popoverMargin;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.TOP_RIGHT, Point.BOTTOM_RIGHT);
expect(popover.style.transform).toEqual("translateX(150px) translateY(0px)");
x = padding + anchorWidth - popoverWidth - popoverMargin * 2;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.TOP_RIGHT, Point.BOTTOM_LEFT);
expect(popover.style.transform).toEqual("translateX(210px) translateY(0px)");
x = padding + anchorWidth;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

// popovers on the right side of the anchor
x = padding + anchorWidth;

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.RIGHT_TOP, Point.LEFT_BOTTOM);
expect(popover.style.transform).toEqual("translateX(210px) translateY(0px)");
y = 0;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.RIGHT_TOP, Point.LEFT_TOP);
expect(popover.style.transform).toEqual("translateX(210px) translateY(60px)");
y = padding;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.RIGHT_CENTER, Point.LEFT_BOTTOM);
expect(popover.style.transform).toEqual("translateX(210px) translateY(80px)");
y = padding + anchorHeight / 2 - popoverHeight - popoverMargin;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.RIGHT_CENTER, Point.LEFT_CENTER);
expect(popover.style.transform).toEqual("translateX(210px) translateY(105px)");
y = padding + anchorHeight / 2 - popoverHeight / 2 - popoverMargin;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.RIGHT_CENTER, Point.LEFT_TOP);
expect(popover.style.transform).toEqual("translateX(210px) translateY(130px)");
y = padding + anchorHeight / 2 - popoverMargin;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.RIGHT_BOTTOM, Point.LEFT_BOTTOM);
expect(popover.style.transform).toEqual("translateX(210px) translateY(150px)");
y = padding + anchorHeight - popoverHeight - popoverMargin * 2;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.RIGHT_BOTTOM, Point.LEFT_TOP);
expect(popover.style.transform).toEqual("translateX(210px) translateY(210px)");
y = padding + anchorHeight;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

// popovers below the anchor
y = padding + anchorHeight;

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.BOTTOM_RIGHT, Point.TOP_LEFT);
expect(popover.style.transform).toEqual("translateX(210px) translateY(210px)");
x = padding + anchorWidth;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.BOTTOM_RIGHT, Point.TOP_RIGHT);
expect(popover.style.transform).toEqual("translateX(150px) translateY(210px)");
x = padding + anchorWidth - popoverWidth - popoverMargin * 2;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
x = padding + anchorWidth / 2 - popoverMargin;
popoverInstance.anchor(anchor, Point.BOTTOM_CENTER, Point.TOP_LEFT);
expect(popover.style.transform).toEqual("translateX(130px) translateY(210px)");
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.BOTTOM_CENTER, Point.TOP_CENTER);
expect(popover.style.transform).toEqual("translateX(105px) translateY(210px)");
x = padding + anchorWidth / 2 - popoverWidth / 2 - popoverMargin;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.BOTTOM_CENTER, Point.TOP_RIGHT);
expect(popover.style.transform).toEqual("translateX(80px) translateY(210px)");
x = padding + anchorWidth / 2 - popoverWidth - popoverMargin;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.BOTTOM_LEFT, Point.TOP_LEFT);
expect(popover.style.transform).toEqual("translateX(60px) translateY(210px)");
x = padding;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.BOTTOM_LEFT, Point.TOP_RIGHT);
expect(popover.style.transform).toEqual("translateX(0px) translateY(210px)");
x = 0;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

// popovers on the left side of the anchor (some are covered already by above, so omitted)
x = 0;

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.LEFT_BOTTOM, Point.BOTTOM_RIGHT);
expect(popover.style.transform).toEqual("translateX(0px) translateY(150px)");
y = padding + anchorHeight - popoverHeight - popoverMargin * 2;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.LEFT_CENTER, Point.RIGHT_TOP);
expect(popover.style.transform).toEqual("translateX(0px) translateY(130px)");
y = padding + anchorHeight / 2 - popoverMargin;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.LEFT_CENTER, Point.RIGHT_CENTER);
expect(popover.style.transform).toEqual("translateX(0px) translateY(105px)");
y = padding + anchorHeight / 2 - popoverHeight / 2 - popoverMargin;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.LEFT_CENTER, Point.RIGHT_BOTTOM);
expect(popover.style.transform).toEqual("translateX(0px) translateY(80px)");
y = padding + anchorHeight / 2 - popoverHeight - popoverMargin;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);

popover.style.transform = "none";
popoverInstance.anchor(anchor, Point.LEFT_TOP, Point.TOP_RIGHT);
expect(popover.style.transform).toEqual("translateX(0px) translateY(60px)");

y = padding;
expect(popover.style.transform).toEqual(`translateX(${x}px) translateY(${y}px)`);
});

afterEach(() => {
Expand Down

0 comments on commit 9317ed6

Please sign in to comment.