Skip to content

Commit 7977660

Browse files
aeagleaeagle
committed
Added anchored non-resizable tests
1 parent c0eeff1 commit 7977660

File tree

6 files changed

+538
-6
lines changed

6 files changed

+538
-6
lines changed

‎src/components/__tests__/Bottom.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import * as React from "react";
2+
import { render, cleanup } from "@testing-library/react";
3+
import { Bottom } from "../Anchored";
4+
import "@testing-library/jest-dom/extend-expect";
5+
import { ViewPort } from "../ViewPort";
6+
7+
afterEach(cleanup);
8+
9+
test("Bottom default has correct styles", async () => {
10+
const { container } = render(
11+
<ViewPort>
12+
<Bottom id="test" size={10} />
13+
</ViewPort>,
14+
);
15+
const sut = container.querySelector("#test")!;
16+
const style = window.getComputedStyle(sut);
17+
18+
expect(style.display).toBe("block");
19+
expect(style.position).toBe("absolute");
20+
expect(style.left).toBe("0px");
21+
expect(style.top).toBe("");
22+
expect(style.right).toBe("0px");
23+
expect(style.bottom).toBe("0px");
24+
expect(style.width).toBe("");
25+
expect(style.height).toBe("10px");
26+
expect(sut.nodeName).toBe("DIV");
27+
});
28+
29+
test("Bottom with class applied", async () => {
30+
const { container } = render(
31+
<ViewPort>
32+
<Bottom id="test" size={10} className={"custom-class"} />
33+
</ViewPort>,
34+
);
35+
const sut = container.querySelector("#test");
36+
37+
expect(sut!.className).toBe("spaces-space custom-class");
38+
});
39+
40+
test("Bottom with style applied", async () => {
41+
const { container } = render(
42+
<ViewPort>
43+
<Bottom id="test" size={10} style={{ backgroundColor: "red" }} />
44+
</ViewPort>,
45+
);
46+
const sut = container.querySelector("#test");
47+
const style = window.getComputedStyle(sut!);
48+
49+
expect(style.backgroundColor).toBe("red");
50+
});
51+
52+
test("Bottom scrollable applied", async () => {
53+
const { container } = render(
54+
<ViewPort>
55+
<Bottom id="test" size={10} scrollable={true} />
56+
</ViewPort>,
57+
);
58+
const sut = container.querySelector("#test");
59+
const style = window.getComputedStyle(sut!);
60+
61+
expect(style.overflow).toBe("auto");
62+
});
63+
64+
test("Bottom as applied", async () => {
65+
const { container } = render(
66+
<ViewPort>
67+
<Bottom id="test" size={10} as="main" />
68+
</ViewPort>,
69+
);
70+
const sut = container.querySelector("#test")!;
71+
72+
expect(sut.nodeName).toBe("MAIN");
73+
});
74+
75+
test("Bottom stacked has correct styles", async () => {
76+
const { container } = render(
77+
<ViewPort>
78+
<Bottom id="test" size={10} order={0} />
79+
<Bottom id="test1" size={10} order={1} />
80+
</ViewPort>,
81+
);
82+
const sut = container.querySelector("#test")!;
83+
const style = window.getComputedStyle(sut);
84+
85+
expect(style.left).toBe("0px");
86+
expect(style.top).toBe("");
87+
expect(style.right).toBe("0px");
88+
expect(style.bottom).toBe("0px");
89+
expect(style.width).toBe("");
90+
expect(style.height).toBe("10px");
91+
92+
const sut1 = container.querySelector("#test1")!;
93+
const style1 = window.getComputedStyle(sut1);
94+
95+
expect(style1.left).toBe("0px");
96+
expect(style1.top).toBe("");
97+
expect(style1.right).toBe("0px");
98+
expect(style1.bottom).toBe("calc(10px + 0px)");
99+
expect(style1.width).toBe("");
100+
expect(style1.height).toBe("10px");
101+
});
102+
103+
test("Bottom stacked reversed has correct styles", async () => {
104+
const { container } = render(
105+
<ViewPort>
106+
<Bottom id="test1" size={10} order={1} />
107+
<Bottom id="test" size={10} order={0} />
108+
</ViewPort>,
109+
);
110+
const sut = container.querySelector("#test")!;
111+
const style = window.getComputedStyle(sut);
112+
113+
expect(style.left).toBe("0px");
114+
expect(style.top).toBe("");
115+
expect(style.right).toBe("0px");
116+
expect(style.bottom).toBe("0px");
117+
expect(style.width).toBe("");
118+
expect(style.height).toBe("10px");
119+
120+
const sut1 = container.querySelector("#test1")!;
121+
const style1 = window.getComputedStyle(sut1);
122+
123+
expect(style1.left).toBe("0px");
124+
expect(style1.top).toBe("");
125+
expect(style1.right).toBe("0px");
126+
expect(style1.bottom).toBe("calc(10px + 0px)");
127+
expect(style1.width).toBe("");
128+
expect(style1.height).toBe("10px");
129+
});

‎src/components/__tests__/Fixed.test.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ afterEach(cleanup);
77

88
test("Fixed default has correct styles", async () => {
99
const { container } = render(<Fixed id="test" height={10} />);
10-
const sut = container.querySelector("#test");
11-
const style = window.getComputedStyle(sut!);
10+
const sut = container.querySelector("#test")!;
11+
const style = window.getComputedStyle(sut);
1212

1313
expect(style.display).toBe("block");
1414
expect(style.position).toBe("relative");
@@ -18,12 +18,13 @@ test("Fixed default has correct styles", async () => {
1818
expect(style.bottom).toBe("");
1919
expect(style.width).toBe("");
2020
expect(style.height).toBe("10px");
21+
expect(sut.nodeName).toBe("DIV");
2122
});
2223

2324
test("Fixed with width and height has correct styles", async () => {
2425
const { container } = render(<Fixed id="test" width={10} height={20} />);
25-
const sut = container.querySelector("#test");
26-
const style = window.getComputedStyle(sut!);
26+
const sut = container.querySelector("#test")!;
27+
const style = window.getComputedStyle(sut);
2728

2829
expect(style.left).toBe("");
2930
expect(style.top).toBe("");
@@ -55,3 +56,10 @@ test("Fixed scrollable applied", async () => {
5556

5657
expect(style.overflow).toBe("auto");
5758
});
59+
60+
test("Fixed as applied", async () => {
61+
const { container } = render(<Fixed id="test" height={20} as="main" />);
62+
const sut = container.querySelector("#test")!;
63+
64+
expect(sut.nodeName).toBe("MAIN");
65+
});

‎src/components/__tests__/Left.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import * as React from "react";
2+
import { render, cleanup } from "@testing-library/react";
3+
import { Left } from "../Anchored";
4+
import "@testing-library/jest-dom/extend-expect";
5+
import { ViewPort } from "../ViewPort";
6+
7+
afterEach(cleanup);
8+
9+
test("Left default has correct styles", async () => {
10+
const { container } = render(
11+
<ViewPort>
12+
<Left id="test" size={10} />
13+
</ViewPort>,
14+
);
15+
const sut = container.querySelector("#test")!;
16+
const style = window.getComputedStyle(sut);
17+
18+
expect(style.display).toBe("block");
19+
expect(style.position).toBe("absolute");
20+
expect(style.left).toBe("0px");
21+
expect(style.top).toBe("0px");
22+
expect(style.right).toBe("");
23+
expect(style.bottom).toBe("0px");
24+
expect(style.width).toBe("10px");
25+
expect(style.height).toBe("");
26+
expect(sut.nodeName).toBe("DIV");
27+
});
28+
29+
test("Left with class applied", async () => {
30+
const { container } = render(
31+
<ViewPort>
32+
<Left id="test" size={10} className={"custom-class"} />
33+
</ViewPort>,
34+
);
35+
const sut = container.querySelector("#test");
36+
37+
expect(sut!.className).toBe("spaces-space custom-class");
38+
});
39+
40+
test("Left with style applied", async () => {
41+
const { container } = render(
42+
<ViewPort>
43+
<Left id="test" size={10} style={{ backgroundColor: "red" }} />
44+
</ViewPort>,
45+
);
46+
const sut = container.querySelector("#test");
47+
const style = window.getComputedStyle(sut!);
48+
49+
expect(style.backgroundColor).toBe("red");
50+
});
51+
52+
test("Left scrollable applied", async () => {
53+
const { container } = render(
54+
<ViewPort>
55+
<Left id="test" size={10} scrollable={true} />
56+
</ViewPort>,
57+
);
58+
const sut = container.querySelector("#test");
59+
const style = window.getComputedStyle(sut!);
60+
61+
expect(style.overflow).toBe("auto");
62+
});
63+
64+
test("Left as applied", async () => {
65+
const { container } = render(
66+
<ViewPort>
67+
<Left id="test" size={10} as="main" />
68+
</ViewPort>,
69+
);
70+
const sut = container.querySelector("#test")!;
71+
72+
expect(sut.nodeName).toBe("MAIN");
73+
});
74+
75+
test("Left stacked has correct styles", async () => {
76+
const { container } = render(
77+
<ViewPort>
78+
<Left id="test" size={10} order={0} />
79+
<Left id="test1" size={10} order={1} />
80+
</ViewPort>,
81+
);
82+
const sut = container.querySelector("#test")!;
83+
const style = window.getComputedStyle(sut);
84+
85+
expect(style.left).toBe("0px");
86+
expect(style.top).toBe("0px");
87+
expect(style.right).toBe("");
88+
expect(style.bottom).toBe("0px");
89+
expect(style.width).toBe("10px");
90+
expect(style.height).toBe("");
91+
92+
const sut1 = container.querySelector("#test1")!;
93+
const style1 = window.getComputedStyle(sut1);
94+
95+
expect(style1.left).toBe("calc(10px + 0px)");
96+
expect(style1.top).toBe("0px");
97+
expect(style1.right).toBe("");
98+
expect(style1.bottom).toBe("0px");
99+
expect(style1.width).toBe("10px");
100+
expect(style1.height).toBe("");
101+
});
102+
103+
test("Left stacked reversed has correct styles", async () => {
104+
const { container } = render(
105+
<ViewPort>
106+
<Left id="test1" size={10} order={1} />
107+
<Left id="test" size={10} order={0} />
108+
</ViewPort>,
109+
);
110+
const sut = container.querySelector("#test")!;
111+
const style = window.getComputedStyle(sut);
112+
113+
expect(style.left).toBe("0px");
114+
expect(style.top).toBe("0px");
115+
expect(style.right).toBe("");
116+
expect(style.bottom).toBe("0px");
117+
expect(style.width).toBe("10px");
118+
expect(style.height).toBe("");
119+
120+
const sut1 = container.querySelector("#test1")!;
121+
const style1 = window.getComputedStyle(sut1);
122+
123+
expect(style1.left).toBe("calc(10px + 0px)");
124+
expect(style1.top).toBe("0px");
125+
expect(style1.right).toBe("");
126+
expect(style1.bottom).toBe("0px");
127+
expect(style1.width).toBe("10px");
128+
expect(style1.height).toBe("");
129+
});

0 commit comments

Comments
 (0)