Skip to content

Commit

Permalink
chore(utils): Additional test coverage
Browse files Browse the repository at this point in the history
  • Loading branch information
mlaursen committed Nov 30, 2021
1 parent 7eb6740 commit 73bc4eb
Show file tree
Hide file tree
Showing 5 changed files with 197 additions and 44 deletions.
26 changes: 26 additions & 0 deletions packages/utils/src/__tests__/unitToNumber.node.ts
@@ -0,0 +1,26 @@
/**
* @jest-environment node
*/

import { unitToNumber } from "../unitToNumber";

describe("unitToNumber", () => {
it("should return the correct value for numbers and px strings", () => {
expect(typeof document).toBe("undefined");
expect(unitToNumber(0)).toBe(0);
expect(unitToNumber(1)).toBe(1);
expect(unitToNumber(-16)).toBe(-16);

expect(unitToNumber("0")).toBe(0);
expect(unitToNumber("-4px")).toBe(-4);
expect(unitToNumber("16px")).toBe(16);
});

it("should multiply fontSizeFallback or 16 to the value if the document is undefined for non-px strings", () => {
expect(typeof document).toBe("undefined");
expect(unitToNumber("1em")).toBe(16);
expect(unitToNumber(".5em")).toBe(8);
expect(unitToNumber("1em", { fontSizeFallback: 12 })).toBe(12);
expect(unitToNumber(".5em", { fontSizeFallback: 12 })).toBe(6);
});
});
48 changes: 48 additions & 0 deletions packages/utils/src/__tests__/unitToNumber.ts
@@ -0,0 +1,48 @@
import { unitToNumber } from "../unitToNumber";

describe("unitToNumber", () => {
it("should return the correct value for numbers and px strings", () => {
expect(unitToNumber(0)).toBe(0);
expect(unitToNumber(1)).toBe(1);
expect(unitToNumber(-16)).toBe(-16);

expect(unitToNumber("0")).toBe(0);
expect(unitToNumber("-4px")).toBe(-4);
expect(unitToNumber("16px")).toBe(16);
});

it("should parse the fontSize style for em/rem units", () => {
const defaultStyle = window.getComputedStyle(document.documentElement);
const getComputedStyle = jest
.spyOn(window, "getComputedStyle")
.mockImplementation((element) => {
if (element === document.documentElement) {
return {
...defaultStyle,
fontSize: "13px",
};
}

return {
...defaultStyle,
fontSize: "14px",
};
});

const container = document.createElement("div");
const element = document.createElement("div");
container.appendChild(element);

expect(unitToNumber("1.5em")).toBe(19.5);
expect(unitToNumber(".5em")).toBe(6.5);
expect(unitToNumber("1.5rem")).toBe(19.5);
expect(unitToNumber(".5rem")).toBe(6.5);

expect(unitToNumber("1.5em", { element })).toBe(21);
expect(unitToNumber(".5em", { element })).toBe(7);
expect(unitToNumber("1.5rem", { element })).toBe(19.5);
expect(unitToNumber(".5rem", { element })).toBe(6.5);

getComputedStyle.mockRestore();
});
});
23 changes: 22 additions & 1 deletion packages/utils/src/layout/__tests__/GridList.tsx
@@ -1,9 +1,10 @@
/* eslint-disable no-underscore-dangle */
import { ReactElement } from "react";
import { act, render } from "@testing-library/react";
import { ResizeObserver } from "@juggle/resize-observer";
import { mocked } from "ts-jest/utils";

import { GridList } from "../GridList";
import { GridList, GridListProps } from "../GridList";
import { useGridListSize } from "../useGridList";

jest.mock("@juggle/resize-observer");
Expand Down Expand Up @@ -244,4 +245,24 @@ describe("GridList", () => {
</div>
`);
});

it("should allow for all the children to be wrapped in the GridListCell component", () => {
function Test({
clone,
wrapOnly,
}: Omit<GridListProps, "children">): ReactElement {
return (
<GridList clone={clone} wrapOnly={wrapOnly}>
<div>Child 1</div>
<div>Child 2</div>
</GridList>
);
}

const { container, rerender } = render(<Test clone />);
expect(container).toMatchSnapshot();

rerender(<Test wrapOnly />);
expect(container).toMatchSnapshot();
});
});
@@ -1,5 +1,49 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`GridList should allow for all the children to be wrapped in the GridListCell component 1`] = `
<div>
<div
class="rmd-grid-list"
style="--rmd-cell-size: 150px;"
>
<div
class="rmd-grid-list__cell"
>
Child 1
</div>
<div
class="rmd-grid-list__cell"
>
Child 2
</div>
</div>
</div>
`;

exports[`GridList should allow for all the children to be wrapped in the GridListCell component 2`] = `
<div>
<div
class="rmd-grid-list"
style="--rmd-cell-size: 150px;"
>
<div
class="rmd-grid-list__cell"
>
<div>
Child 1
</div>
</div>
<div
class="rmd-grid-list__cell"
>
<div>
Child 2
</div>
</div>
</div>
</div>
`;

exports[`GridList should render correctly... (lazy test) 1`] = `
<div>
<div
Expand Down
100 changes: 57 additions & 43 deletions packages/utils/src/positioning/__tests__/getTransformOrigin.ts
@@ -1,3 +1,30 @@
import {
ABOVE_CENTER_ANCHOR,
ABOVE_INNER_LEFT_ANCHOR,
ABOVE_INNER_RIGHT_ANCHOR,
ABOVE_LEFT_ANCHOR,
ABOVE_RIGHT_ANCHOR,
BELOW_CENTER_ANCHOR,
BELOW_INNER_LEFT_ANCHOR,
BELOW_INNER_RIGHT_ANCHOR,
BELOW_LEFT_ANCHOR,
BELOW_RIGHT_ANCHOR,
BOTTOM_CENTER_ANCHOR,
BOTTOM_INNER_LEFT_ANCHOR,
BOTTOM_INNER_RIGHT_ANCHOR,
BOTTOM_LEFT_ANCHOR,
BOTTOM_RIGHT_ANCHOR,
CENTER_CENTER_ANCHOR,
CENTER_INNER_LEFT_ANCHOR,
CENTER_INNER_RIGHT_ANCHOR,
CENTER_LEFT_ANCHOR,
CENTER_RIGHT_ANCHOR,
TOP_CENTER_ANCHOR,
TOP_INNER_LEFT_ANCHOR,
TOP_INNER_RIGHT_ANCHOR,
TOP_LEFT_ANCHOR,
TOP_RIGHT_ANCHOR,
} from "../constants";
import { getTransformOrigin } from "../getTransformOrigin";

const TOP_LEFT = "0 0";
Expand All @@ -14,72 +41,59 @@ const BOTTOM_RIGHT = "100% 100%";

describe("getTransformOrigin", () => {
it('should position the "right below", "right top", "inner-left below", and "inner-left top" anchors to the top left origin', () => {
expect(getTransformOrigin({ x: "right", y: "below" })).toBe(TOP_LEFT);
expect(getTransformOrigin({ x: "right", y: "top" })).toBe(TOP_LEFT);
expect(getTransformOrigin({ x: "inner-left", y: "below" })).toBe(TOP_LEFT);
expect(getTransformOrigin({ x: "inner-left", y: "top" })).toBe(TOP_LEFT);
expect(getTransformOrigin(BELOW_RIGHT_ANCHOR)).toBe(TOP_LEFT);
expect(getTransformOrigin(TOP_RIGHT_ANCHOR)).toBe(TOP_LEFT);
expect(getTransformOrigin(BELOW_INNER_LEFT_ANCHOR)).toBe(TOP_LEFT);
expect(getTransformOrigin(TOP_INNER_LEFT_ANCHOR)).toBe(TOP_LEFT);
});

it('should position the "center below" and "center top" anchors to the top center origin ("50% 0")', () => {
expect(getTransformOrigin({ x: "center", y: "below" })).toBe(TOP_CENTER);
expect(getTransformOrigin({ x: "center", y: "top" })).toBe(TOP_CENTER);
expect(getTransformOrigin(BELOW_CENTER_ANCHOR)).toBe(TOP_CENTER);
expect(getTransformOrigin(TOP_CENTER_ANCHOR)).toBe(TOP_CENTER);
});

it('should position the "inner-right below", "inner-right top", "left below", and "left top" anchors to the top right origin ("100% 0")', () => {
expect(getTransformOrigin({ x: "inner-right", y: "below" })).toBe(
TOP_RIGHT
);
expect(getTransformOrigin({ x: "inner-right", y: "top" })).toBe(TOP_RIGHT);
expect(getTransformOrigin({ x: "left", y: "below" })).toBe(TOP_RIGHT);
expect(getTransformOrigin({ x: "left", y: "top" })).toBe(TOP_RIGHT);
expect(getTransformOrigin(BELOW_INNER_RIGHT_ANCHOR)).toBe(TOP_RIGHT);
expect(getTransformOrigin(TOP_INNER_RIGHT_ANCHOR)).toBe(TOP_RIGHT);
expect(getTransformOrigin(BELOW_LEFT_ANCHOR)).toBe(TOP_RIGHT);
expect(getTransformOrigin(TOP_LEFT_ANCHOR)).toBe(TOP_RIGHT);
});

it('should position the "right center" and "inner-right center" anchors to the center left origin ("0 50%")', () => {
expect(getTransformOrigin({ x: "right", y: "center" })).toBe(CENTER_LEFT);
expect(getTransformOrigin({ x: "inner-left", y: "center" })).toBe(
CENTER_LEFT
);
expect(getTransformOrigin(CENTER_RIGHT_ANCHOR)).toBe(CENTER_LEFT);
expect(getTransformOrigin(CENTER_INNER_LEFT_ANCHOR)).toBe(CENTER_LEFT);
});

it('should position the "center center" anchor to the absolute center origin ("50% 50%")', () => {
expect(getTransformOrigin({ x: "center", y: "center" })).toBe(
CENTER_CENTER
);
expect(getTransformOrigin(CENTER_CENTER_ANCHOR)).toBe(CENTER_CENTER);
});

it('should position the "inner-right center" and "left center" anchors to the center right origin ("100% 50%")', () => {
expect(getTransformOrigin({ x: "inner-right", y: "center" })).toBe(
CENTER_RIGHT
);
expect(getTransformOrigin({ x: "left", y: "center" })).toBe(CENTER_RIGHT);
expect(getTransformOrigin(CENTER_INNER_RIGHT_ANCHOR)).toBe(CENTER_RIGHT);
expect(getTransformOrigin(CENTER_LEFT_ANCHOR)).toBe(CENTER_RIGHT);
});

it('should position the "right above", "right bottom", "inner-left above", and "inner-left bottom" anchors to the bottom left origin ("0 100%")', () => {
expect(getTransformOrigin({ x: "right", y: "above" })).toBe(BOTTOM_LEFT);
expect(getTransformOrigin({ x: "right", y: "bottom" })).toBe(BOTTOM_LEFT);
expect(getTransformOrigin({ x: "inner-left", y: "above" })).toBe(
BOTTOM_LEFT
);
expect(getTransformOrigin({ x: "inner-left", y: "bottom" })).toBe(
BOTTOM_LEFT
);
expect(getTransformOrigin(ABOVE_RIGHT_ANCHOR)).toBe(BOTTOM_LEFT);
expect(getTransformOrigin(BOTTOM_RIGHT_ANCHOR)).toBe(BOTTOM_LEFT);
expect(getTransformOrigin(ABOVE_INNER_LEFT_ANCHOR)).toBe(BOTTOM_LEFT);
expect(getTransformOrigin(BOTTOM_INNER_LEFT_ANCHOR)).toBe(BOTTOM_LEFT);
});

it('should position the "center above" and "center bottom" anchors to the bottom center origin ("50% 100%")', () => {
expect(getTransformOrigin({ x: "center", y: "above" })).toBe(BOTTOM_CENTER);
expect(getTransformOrigin({ x: "center", y: "bottom" })).toBe(
BOTTOM_CENTER
);
expect(getTransformOrigin(ABOVE_CENTER_ANCHOR)).toBe(BOTTOM_CENTER);
expect(getTransformOrigin(BOTTOM_CENTER_ANCHOR)).toBe(BOTTOM_CENTER);
});

it('should position the "inner-right above", "inner-right bottom", "left above", and "left bottom" anchors to the bottom right origin ("100% 100%")', () => {
expect(getTransformOrigin({ x: "inner-right", y: "above" })).toBe(
BOTTOM_RIGHT
);
expect(getTransformOrigin({ x: "inner-right", y: "bottom" })).toBe(
BOTTOM_RIGHT
);
expect(getTransformOrigin({ x: "left", y: "above" })).toBe(BOTTOM_RIGHT);
expect(getTransformOrigin({ x: "left", y: "bottom" })).toBe(BOTTOM_RIGHT);
expect(getTransformOrigin(ABOVE_INNER_RIGHT_ANCHOR)).toBe(BOTTOM_RIGHT);
expect(getTransformOrigin(BOTTOM_INNER_RIGHT_ANCHOR)).toBe(BOTTOM_RIGHT);
expect(getTransformOrigin(ABOVE_LEFT_ANCHOR)).toBe(BOTTOM_RIGHT);
expect(getTransformOrigin(BOTTOM_LEFT_ANCHOR)).toBe(BOTTOM_RIGHT);
});

it("should default to 0 0 if an invalid anchor is provided", () => {
// @ts-expect-error
expect(getTransformOrigin({ x: "invalid", y: "invalid" })).toBe("0 0");
});
});

0 comments on commit 73bc4eb

Please sign in to comment.