Skip to content

Commit 42425cf

Browse files
aeagleaeagle
committed
Move anchored/resizable tests to Common.tsx
1 parent d4eb8c9 commit 42425cf

File tree

9 files changed

+282
-348
lines changed

9 files changed

+282
-348
lines changed

‎src/components/tests/Common.tsx

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from "react";
22
import { render } from "@testing-library/react";
33
import "@testing-library/jest-dom/extend-expect";
44
import { ViewPort } from "../ViewPort";
5+
import { drag } from "./TestUtils";
56

67
const mutateComponent = (component: React.ReactNode, newProps: Object) => {
78
return React.cloneElement(component as React.DetailedReactHTMLElement<any, HTMLElement>, newProps);
@@ -51,3 +52,127 @@ export const commonPropsTests = (name: string, component: React.ReactNode, expec
5152
expect(sut.nodeName).toBe("MAIN");
5253
});
5354
};
55+
56+
export const commonAnchorTests = (
57+
name: string,
58+
component: React.ReactNode,
59+
size: (style: CSSStyleDeclaration) => string | null,
60+
edge: (style: CSSStyleDeclaration) => string | null,
61+
oppositeEdge: (style: CSSStyleDeclaration) => string | null,
62+
) => {
63+
test(`${name} stacked has correct styles`, async () => {
64+
const { container } = render(
65+
<ViewPort>
66+
{mutateComponent(component, { id: "test", size: 50, order: 0 })}
67+
{mutateComponent(component, { id: "test1", size: 100, order: 1 })}
68+
</ViewPort>,
69+
);
70+
71+
const sut = container.querySelector("#test")!;
72+
const style = window.getComputedStyle(sut);
73+
expect(size(style)).toBe("50px");
74+
expect(edge(style)).toBe("0px");
75+
expect(oppositeEdge(style)).toBe("");
76+
77+
const sut1 = container.querySelector("#test1")!;
78+
const style1 = window.getComputedStyle(sut1);
79+
expect(size(style1)).toBe("100px");
80+
expect(edge(style1)).toBe("calc(0px + 50px)");
81+
expect(oppositeEdge(style1)).toBe("");
82+
});
83+
84+
test(`${name} stacked DOM reversed has correct styles`, async () => {
85+
const { container } = render(
86+
<ViewPort>
87+
{mutateComponent(component, { id: "test1", size: 100, order: 1 })}
88+
{mutateComponent(component, { id: "test", size: 50, order: 0 })}
89+
</ViewPort>,
90+
);
91+
92+
const sut = container.querySelector("#test")!;
93+
const style = window.getComputedStyle(sut);
94+
expect(size(style)).toBe("50px");
95+
expect(edge(style)).toBe("0px");
96+
expect(oppositeEdge(style)).toBe("");
97+
98+
const sut1 = container.querySelector("#test1")!;
99+
const style1 = window.getComputedStyle(sut1);
100+
expect(size(style1)).toBe("100px");
101+
expect(edge(style1)).toBe("calc(0px + 50px)");
102+
expect(oppositeEdge(style1)).toBe("");
103+
});
104+
};
105+
106+
export const commonResizableTests = (
107+
name: string,
108+
component: React.ReactNode,
109+
size: (style: CSSStyleDeclaration) => string | null,
110+
edge: (style: CSSStyleDeclaration) => string | null,
111+
oppositeEdge: (style: CSSStyleDeclaration) => string | null,
112+
horizontal: boolean,
113+
negate: boolean,
114+
) => {
115+
test(`${name} after resize has correct styles`, async () => {
116+
const { container } = render(<ViewPort>{mutateComponent(component, { id: "test" })}</ViewPort>);
117+
const sut = container.querySelector("#test")!;
118+
const resizeHandle = container.querySelector("#test .spaces-resize-handle")!;
119+
120+
drag(
121+
resizeHandle,
122+
sut,
123+
{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
124+
{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
125+
horizontal ? (negate ? -100 : 100) : 0,
126+
horizontal ? 0 : negate ? -100 : 100,
127+
);
128+
129+
const style = window.getComputedStyle(sut);
130+
expect(size(style)).toBe("calc(50px + 100px)");
131+
});
132+
133+
test(`${name} subsequent resize has correct styles`, async () => {
134+
const { container } = render(<ViewPort>{mutateComponent(component, { id: "test" })}</ViewPort>);
135+
const sut = container.querySelector("#test")!;
136+
const resizeHandle = container.querySelector("#test .spaces-resize-handle")!;
137+
138+
drag(
139+
resizeHandle,
140+
sut,
141+
{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
142+
{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
143+
horizontal ? (negate ? -100 : 100) : 0,
144+
horizontal ? 0 : negate ? -100 : 100,
145+
);
146+
drag(
147+
resizeHandle,
148+
sut,
149+
{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
150+
{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
151+
horizontal ? (negate ? 100 : -100) : 0,
152+
horizontal ? 0 : negate ? 100 : -100,
153+
);
154+
155+
const style = window.getComputedStyle(sut);
156+
expect(size(style)).toBe("50px");
157+
});
158+
159+
test(`${name} resize then props size change has correct styles`, async () => {
160+
const { container, rerender } = render(<ViewPort>{mutateComponent(component, { id: "test", size: 50 })}</ViewPort>);
161+
const sut = container.querySelector("#test")!;
162+
const resizeHandle = container.querySelector("#test .spaces-resize-handle")!;
163+
164+
drag(
165+
resizeHandle,
166+
sut,
167+
{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
168+
{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
169+
horizontal ? (negate ? -100 : 100) : 0,
170+
horizontal ? 0 : negate ? -100 : 100,
171+
);
172+
173+
rerender(<ViewPort>{mutateComponent(component, { id: "test", size: 150 })}</ViewPort>);
174+
175+
const style = window.getComputedStyle(sut);
176+
expect(size(style)).toBe("150px");
177+
});
178+
};

‎src/components/tests/__tests__/Bottom.tsx

Lines changed: 9 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import * as React from "react";
2-
import { render, cleanup } from "@testing-library/react";
2+
import { cleanup } from "@testing-library/react";
33
import { Bottom } from "../../Anchored";
4-
import "@testing-library/jest-dom/extend-expect";
5-
import { ViewPort } from "../../ViewPort";
6-
import { commonPropsTests } from "../Common";
4+
import { commonPropsTests, commonAnchorTests } from "../Common";
75

86
afterEach(cleanup);
97

@@ -17,58 +15,10 @@ commonPropsTests("Bottom", <Bottom size={50} />, {
1715
height: "50px",
1816
});
1917

20-
test("Bottom stacked has correct styles", async () => {
21-
const { container } = render(
22-
<ViewPort>
23-
<Bottom id="test" size={10} order={0} />
24-
<Bottom id="test1" size={10} order={1} />
25-
</ViewPort>,
26-
);
27-
const sut = container.querySelector("#test")!;
28-
const style = window.getComputedStyle(sut);
29-
30-
expect(style.left).toBe("0px");
31-
expect(style.top).toBe("");
32-
expect(style.right).toBe("0px");
33-
expect(style.bottom).toBe("0px");
34-
expect(style.width).toBe("");
35-
expect(style.height).toBe("10px");
36-
37-
const sut1 = container.querySelector("#test1")!;
38-
const style1 = window.getComputedStyle(sut1);
39-
40-
expect(style1.left).toBe("0px");
41-
expect(style1.top).toBe("");
42-
expect(style1.right).toBe("0px");
43-
expect(style1.bottom).toBe("calc(0px + 10px)");
44-
expect(style1.width).toBe("");
45-
expect(style1.height).toBe("10px");
46-
});
47-
48-
test("Bottom stacked reversed has correct styles", async () => {
49-
const { container } = render(
50-
<ViewPort>
51-
<Bottom id="test1" size={10} order={1} />
52-
<Bottom id="test" size={10} order={0} />
53-
</ViewPort>,
54-
);
55-
const sut = container.querySelector("#test")!;
56-
const style = window.getComputedStyle(sut);
57-
58-
expect(style.left).toBe("0px");
59-
expect(style.top).toBe("");
60-
expect(style.right).toBe("0px");
61-
expect(style.bottom).toBe("0px");
62-
expect(style.width).toBe("");
63-
expect(style.height).toBe("10px");
64-
65-
const sut1 = container.querySelector("#test1")!;
66-
const style1 = window.getComputedStyle(sut1);
67-
68-
expect(style1.left).toBe("0px");
69-
expect(style1.top).toBe("");
70-
expect(style1.right).toBe("0px");
71-
expect(style1.bottom).toBe("calc(0px + 10px)");
72-
expect(style1.width).toBe("");
73-
expect(style1.height).toBe("10px");
74-
});
18+
commonAnchorTests(
19+
"Bottom",
20+
<Bottom size={50} />,
21+
(style) => style.height,
22+
(style) => style.bottom,
23+
(style) => style.top,
24+
);

‎src/components/tests/__tests__/BottomResizable.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as React from "react";
2+
import { cleanup } from "@testing-library/react";
3+
import { BottomResizable } from "../../Anchored";
4+
import { commonPropsTests, commonAnchorTests, commonResizableTests } from "../Common";
5+
6+
afterEach(cleanup);
7+
8+
commonPropsTests("BottomResizable", <BottomResizable size={50} />, {
9+
position: "absolute",
10+
left: "0px",
11+
top: "",
12+
right: "0px",
13+
bottom: "0px",
14+
width: "",
15+
height: "50px",
16+
});
17+
18+
commonAnchorTests(
19+
"BottomResizable",
20+
<BottomResizable size={50} />,
21+
(style) => style.height,
22+
(style) => style.bottom,
23+
(style) => style.top,
24+
);
25+
26+
commonResizableTests(
27+
"BottomResizable",
28+
<BottomResizable size={50} />,
29+
(style) => style.height,
30+
(style) => style.bottom,
31+
(style) => style.top,
32+
false,
33+
true,
34+
);

‎src/components/tests/__tests__/Left.tsx

Lines changed: 9 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import * as React from "react";
2-
import { render, cleanup } from "@testing-library/react";
2+
import { cleanup } from "@testing-library/react";
33
import { Left } from "../../Anchored";
4-
import "@testing-library/jest-dom/extend-expect";
5-
import { ViewPort } from "../../ViewPort";
6-
import { commonPropsTests } from "../Common";
4+
import { commonPropsTests, commonAnchorTests } from "../Common";
75

86
afterEach(cleanup);
97

@@ -17,58 +15,10 @@ commonPropsTests("Left", <Left size={50} />, {
1715
height: "",
1816
});
1917

20-
test("Left stacked has correct styles", async () => {
21-
const { container } = render(
22-
<ViewPort>
23-
<Left id="test" size={10} order={0} />
24-
<Left id="test1" size={10} order={1} />
25-
</ViewPort>,
26-
);
27-
const sut = container.querySelector("#test")!;
28-
const style = window.getComputedStyle(sut);
29-
30-
expect(style.left).toBe("0px");
31-
expect(style.top).toBe("0px");
32-
expect(style.right).toBe("");
33-
expect(style.bottom).toBe("0px");
34-
expect(style.width).toBe("10px");
35-
expect(style.height).toBe("");
36-
37-
const sut1 = container.querySelector("#test1")!;
38-
const style1 = window.getComputedStyle(sut1);
39-
40-
expect(style1.left).toBe("calc(0px + 10px)");
41-
expect(style1.top).toBe("0px");
42-
expect(style1.right).toBe("");
43-
expect(style1.bottom).toBe("0px");
44-
expect(style1.width).toBe("10px");
45-
expect(style1.height).toBe("");
46-
});
47-
48-
test("Left stacked reversed has correct styles", async () => {
49-
const { container } = render(
50-
<ViewPort>
51-
<Left id="test1" size={10} order={1} />
52-
<Left id="test" size={10} order={0} />
53-
</ViewPort>,
54-
);
55-
const sut = container.querySelector("#test")!;
56-
const style = window.getComputedStyle(sut);
57-
58-
expect(style.left).toBe("0px");
59-
expect(style.top).toBe("0px");
60-
expect(style.right).toBe("");
61-
expect(style.bottom).toBe("0px");
62-
expect(style.width).toBe("10px");
63-
expect(style.height).toBe("");
64-
65-
const sut1 = container.querySelector("#test1")!;
66-
const style1 = window.getComputedStyle(sut1);
67-
68-
expect(style1.left).toBe("calc(0px + 10px)");
69-
expect(style1.top).toBe("0px");
70-
expect(style1.right).toBe("");
71-
expect(style1.bottom).toBe("0px");
72-
expect(style1.width).toBe("10px");
73-
expect(style1.height).toBe("");
74-
});
18+
commonAnchorTests(
19+
"Left",
20+
<Left size={50} />,
21+
(style) => style.width,
22+
(style) => style.left,
23+
(style) => style.right,
24+
);

0 commit comments

Comments
 (0)