Skip to content

Commit 17688f5

Browse files
aeagleaeagle
committed
Added AAA comments to tests
1 parent 42425cf commit 17688f5

File tree

1 file changed

+93
-8
lines changed

1 file changed

+93
-8
lines changed

‎src/components/tests/Common.tsx

+93-8
Original file line numberDiff line numberDiff line change
@@ -10,45 +10,104 @@ const mutateComponent = (component: React.ReactNode, newProps: Object) => {
1010

1111
export const commonPropsTests = (name: string, component: React.ReactNode, expectedStyle: Partial<CSSStyleDeclaration>) => {
1212
test(`${name} default has correct styles`, async () => {
13+
// arrange, act
1314
const { container } = render(<ViewPort>{mutateComponent(component, { id: "test" })}</ViewPort>);
15+
16+
// assert
1417
const sut = container.querySelector("#test")!;
1518
const style = window.getComputedStyle(sut);
16-
1719
expect(style.display).toBe("block");
1820
expect(sut.nodeName).toBe("DIV");
19-
2021
Object.keys(expectedStyle).forEach((k) => {
2122
expect(style[k], `Property ${k}`).toBe(expectedStyle[k]);
2223
});
2324
});
2425

2526
test(`${name} with class applied`, async () => {
27+
// arrange, act
2628
const { container } = render(<ViewPort>{mutateComponent(component, { id: "test", className: "custom-class" })}</ViewPort>);
27-
const sut = container.querySelector("#test");
2829

30+
// assert
31+
const sut = container.querySelector("#test");
2932
expect(sut!.className).toBe("spaces-space custom-class");
3033
});
3134

35+
test(`${name} with class change applied`, async () => {
36+
// arrange
37+
const { container, rerender } = render(<ViewPort>{mutateComponent(component, { id: "test", className: "custom-class" })}</ViewPort>);
38+
const sut = container.querySelector("#test");
39+
40+
// act
41+
rerender(<ViewPort>{mutateComponent(component, { id: "test", className: "different-custom-class" })}</ViewPort>);
42+
43+
//assert
44+
expect(sut!.className).toBe("spaces-space different-custom-class");
45+
});
46+
3247
test(`${name} with style applied`, async () => {
48+
// arrange, act
3349
const { container } = render(<ViewPort>{mutateComponent(component, { id: "test", style: { backgroundColor: "red" } })}</ViewPort>);
3450
const sut = container.querySelector("#test");
35-
const style = window.getComputedStyle(sut!);
3651

52+
// assert
53+
const style = window.getComputedStyle(sut!);
3754
expect(style.backgroundColor).toBe("red");
3855
});
3956

57+
test(`${name} with style change applied`, async () => {
58+
// arrange
59+
const { container, rerender } = render(<ViewPort>{mutateComponent(component, { id: "test", style: { backgroundColor: "red" } })}</ViewPort>);
60+
const sut = container.querySelector("#test");
61+
62+
// act
63+
rerender(<ViewPort>{mutateComponent(component, { id: "test", style: { backgroundColor: "green" } })}</ViewPort>);
64+
65+
// assert
66+
const style = window.getComputedStyle(sut!);
67+
expect(style.backgroundColor).toBe("green");
68+
});
69+
4070
test(`${name} scrollable applied`, async () => {
71+
// arrange, act
4172
const { container } = render(<ViewPort>{mutateComponent(component, { id: "test", scrollable: true })}</ViewPort>);
4273
const sut = container.querySelector("#test");
74+
75+
// assert
4376
const style = window.getComputedStyle(sut!);
77+
expect(style.overflow).toBe("auto");
78+
});
79+
80+
test(`${name} scrollable change applied`, async () => {
81+
// arrange
82+
const { container, rerender } = render(<ViewPort>{mutateComponent(component, { id: "test", scrollable: false })}</ViewPort>);
83+
const sut = container.querySelector("#test");
4484

85+
// act
86+
rerender(<ViewPort>{mutateComponent(component, { id: "test", scrollable: true })}</ViewPort>);
87+
88+
// assert
89+
const style = window.getComputedStyle(sut!);
4590
expect(style.overflow).toBe("auto");
4691
});
4792

4893
test(`${name} as applied`, async () => {
94+
// arrange, act
4995
const { container } = render(<ViewPort>{mutateComponent(component, { id: "test", as: "main" })}</ViewPort>);
5096
const sut = container.querySelector("#test")!;
5197

98+
// assert
99+
expect(sut.nodeName).toBe("MAIN");
100+
});
101+
102+
test(`${name} as change applied`, async () => {
103+
// arrange
104+
const { container, rerender } = render(<ViewPort>{mutateComponent(component, { id: "test" })}</ViewPort>);
105+
106+
// act
107+
rerender(<ViewPort>{mutateComponent(component, { id: "test", as: "main" })}</ViewPort>);
108+
109+
// assert
110+
const sut = container.querySelector("#test")!;
52111
expect(sut.nodeName).toBe("MAIN");
53112
});
54113
};
@@ -61,41 +120,58 @@ export const commonAnchorTests = (
61120
oppositeEdge: (style: CSSStyleDeclaration) => string | null,
62121
) => {
63122
test(`${name} stacked has correct styles`, async () => {
123+
// arrange, act
64124
const { container } = render(
65125
<ViewPort>
66126
{mutateComponent(component, { id: "test", size: 50, order: 0 })}
67127
{mutateComponent(component, { id: "test1", size: 100, order: 1 })}
68128
</ViewPort>,
69129
);
70-
71130
const sut = container.querySelector("#test")!;
131+
const sut1 = container.querySelector("#test1")!;
132+
133+
// assert
72134
const style = window.getComputedStyle(sut);
73135
expect(size(style)).toBe("50px");
74136
expect(edge(style)).toBe("0px");
75137
expect(oppositeEdge(style)).toBe("");
76138

77-
const sut1 = container.querySelector("#test1")!;
78139
const style1 = window.getComputedStyle(sut1);
79140
expect(size(style1)).toBe("100px");
80141
expect(edge(style1)).toBe("calc(0px + 50px)");
81142
expect(oppositeEdge(style1)).toBe("");
82143
});
83144

145+
test(`${name} size changed has correct styles`, async () => {
146+
// arrange
147+
const { container, rerender } = render(<ViewPort>{mutateComponent(component, { id: "test", size: 50 })}</ViewPort>);
148+
const sut = container.querySelector("#test")!;
149+
150+
// act
151+
rerender(<ViewPort>{mutateComponent(component, { id: "test", size: 100 })}</ViewPort>);
152+
153+
// assert
154+
const style = window.getComputedStyle(sut);
155+
expect(size(style)).toBe("100px");
156+
});
157+
84158
test(`${name} stacked DOM reversed has correct styles`, async () => {
159+
// arrange, act
85160
const { container } = render(
86161
<ViewPort>
87162
{mutateComponent(component, { id: "test1", size: 100, order: 1 })}
88163
{mutateComponent(component, { id: "test", size: 50, order: 0 })}
89164
</ViewPort>,
90165
);
91-
92166
const sut = container.querySelector("#test")!;
167+
const sut1 = container.querySelector("#test1")!;
168+
169+
// assert
93170
const style = window.getComputedStyle(sut);
94171
expect(size(style)).toBe("50px");
95172
expect(edge(style)).toBe("0px");
96173
expect(oppositeEdge(style)).toBe("");
97174

98-
const sut1 = container.querySelector("#test1")!;
99175
const style1 = window.getComputedStyle(sut1);
100176
expect(size(style1)).toBe("100px");
101177
expect(edge(style1)).toBe("calc(0px + 50px)");
@@ -113,10 +189,12 @@ export const commonResizableTests = (
113189
negate: boolean,
114190
) => {
115191
test(`${name} after resize has correct styles`, async () => {
192+
// arrange
116193
const { container } = render(<ViewPort>{mutateComponent(component, { id: "test" })}</ViewPort>);
117194
const sut = container.querySelector("#test")!;
118195
const resizeHandle = container.querySelector("#test .spaces-resize-handle")!;
119196

197+
// act
120198
drag(
121199
resizeHandle,
122200
sut,
@@ -126,15 +204,18 @@ export const commonResizableTests = (
126204
horizontal ? 0 : negate ? -100 : 100,
127205
);
128206

207+
// assert
129208
const style = window.getComputedStyle(sut);
130209
expect(size(style)).toBe("calc(50px + 100px)");
131210
});
132211

133212
test(`${name} subsequent resize has correct styles`, async () => {
213+
// arrange
134214
const { container } = render(<ViewPort>{mutateComponent(component, { id: "test" })}</ViewPort>);
135215
const sut = container.querySelector("#test")!;
136216
const resizeHandle = container.querySelector("#test .spaces-resize-handle")!;
137217

218+
// act
138219
drag(
139220
resizeHandle,
140221
sut,
@@ -152,15 +233,18 @@ export const commonResizableTests = (
152233
horizontal ? 0 : negate ? 100 : -100,
153234
);
154235

236+
// assert
155237
const style = window.getComputedStyle(sut);
156238
expect(size(style)).toBe("50px");
157239
});
158240

159241
test(`${name} resize then props size change has correct styles`, async () => {
242+
// arrange
160243
const { container, rerender } = render(<ViewPort>{mutateComponent(component, { id: "test", size: 50 })}</ViewPort>);
161244
const sut = container.querySelector("#test")!;
162245
const resizeHandle = container.querySelector("#test .spaces-resize-handle")!;
163246

247+
// act
164248
drag(
165249
resizeHandle,
166250
sut,
@@ -172,6 +256,7 @@ export const commonResizableTests = (
172256

173257
rerender(<ViewPort>{mutateComponent(component, { id: "test", size: 150 })}</ViewPort>);
174258

259+
// assert
175260
const style = window.getComputedStyle(sut);
176261
expect(size(style)).toBe("150px");
177262
});

0 commit comments

Comments
 (0)