Skip to content

Commit 17695f8

Browse files
aeagleaeagle
committed
More positioned tests
1 parent b3aa7f0 commit 17695f8

File tree

2 files changed

+90
-85
lines changed

2 files changed

+90
-85
lines changed

‎src/components/tests/Common.tsx‎

Lines changed: 66 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import "@testing-library/jest-dom/extend-expect";
44
import { ViewPort } from "../ViewPort";
55
import { drag } from "./TestUtils";
66
import { ResizeType } from "../../core-types";
7+
import { Positioned } from "../Positioned";
78

89
export const mutateComponent = (component: React.ReactNode, newProps: Object) => {
910
return React.cloneElement(component as React.DetailedReactHTMLElement<any, HTMLElement>, newProps);
@@ -291,70 +292,78 @@ export const commonResizableTests = (
291292

292293
export const commonPositionedTests = (
293294
name: string,
294-
component: React.ReactNode,
295295
size: (style: CSSStyleDeclaration) => string | null,
296296
edge: (style: CSSStyleDeclaration) => string | null,
297297
oppositeEdge: (style: CSSStyleDeclaration) => string | null,
298298
handle: string,
299299
horizontal: boolean,
300300
negate: boolean,
301301
) => {
302-
test(`${name} after resize has correct styles`, async () => {
303-
// arrange
304-
const { container } = render(
305-
<ViewPort>
306-
{mutateComponent(component, { id: "test", resizable: [ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right] })}
307-
</ViewPort>,
308-
);
309-
310-
const resizeHandle = container.querySelector(`#test-${handle}`)!;
311-
const sut = container.querySelector("#test")!;
312-
313-
// act
314-
drag(
315-
resizeHandle,
316-
sut,
317-
{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
318-
{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
319-
horizontal ? (negate ? -100 : 100) : 0,
320-
horizontal ? 0 : negate ? -100 : 100,
321-
);
322-
323-
// assert
324-
const style = window.getComputedStyle(sut);
325-
expect(size(style)).toBe("calc(100px + -100px)");
326-
});
327-
328-
test(`${name} subsequent resize has correct styles`, async () => {
329-
// arrange
330-
const { container } = render(
331-
<ViewPort>
332-
{mutateComponent(component, { id: "test", resizable: [ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right] })}
333-
</ViewPort>,
334-
);
335-
const resizeHandle = container.querySelector(`#test-${handle}`)!;
336-
const sut = container.querySelector("#test")!;
337-
338-
// act
339-
drag(
340-
resizeHandle,
341-
sut,
342-
{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
343-
{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
344-
horizontal ? (negate ? -100 : 100) : 0,
345-
horizontal ? 0 : negate ? -100 : 100,
346-
);
347-
drag(
348-
resizeHandle,
349-
sut,
350-
{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
351-
{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
352-
horizontal ? (negate ? 100 : -100) : 0,
353-
horizontal ? 0 : negate ? 100 : -100,
354-
);
302+
const testProps = { id: "test", resizable: [ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right] };
303+
304+
[
305+
{ name: "left/top/width/height", props: { left: 100, top: 100, width: 100, height: 100 }, widthHeightSpecified: true },
306+
{ name: "left/top/right/bottom", props: { left: 100, top: 100, right: 100, bottom: 100 }, widthHeightSpecified: false },
307+
].forEach((testCase) => {
308+
test(`${name} (${testCase.name}) after resize has correct styles`, async () => {
309+
// arrange
310+
const { container } = render(<ViewPort>{mutateComponent(<Positioned />, { ...testProps, ...testCase.props })}</ViewPort>);
311+
312+
const resizeHandle = container.querySelector(`#test-${handle}`)!;
313+
const sut = container.querySelector("#test")!;
314+
315+
// act
316+
drag(
317+
resizeHandle,
318+
sut,
319+
{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
320+
{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
321+
horizontal ? (negate ? -100 : 100) : 0,
322+
horizontal ? 0 : negate ? -100 : 100,
323+
);
324+
325+
// assert
326+
const style = window.getComputedStyle(sut);
327+
328+
if (testCase.widthHeightSpecified) {
329+
expect(size(style)).toBe("calc(100px + -100px)");
330+
} else {
331+
expect(edge(style)).toBe("calc(100px + 100px)");
332+
}
333+
});
355334

356-
// assert
357-
const style = window.getComputedStyle(sut);
358-
expect(size(style)).toBe("100px");
335+
test(`${name} (${testCase.name}) subsequent resize has correct styles`, async () => {
336+
// arrange
337+
const { container } = render(<ViewPort>{mutateComponent(<Positioned />, { ...testProps, ...testCase.props })}</ViewPort>);
338+
const resizeHandle = container.querySelector(`#test-${handle}`)!;
339+
const sut = container.querySelector("#test")!;
340+
341+
// act
342+
drag(
343+
resizeHandle,
344+
sut,
345+
{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
346+
{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
347+
horizontal ? (negate ? -100 : 100) : 0,
348+
horizontal ? 0 : negate ? -100 : 100,
349+
);
350+
drag(
351+
resizeHandle,
352+
sut,
353+
{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
354+
{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
355+
horizontal ? (negate ? 100 : -100) : 0,
356+
horizontal ? 0 : negate ? 100 : -100,
357+
);
358+
359+
// assert
360+
const style = window.getComputedStyle(sut);
361+
362+
if (testCase.widthHeightSpecified) {
363+
expect(size(style)).toBe("100px");
364+
} else {
365+
expect(edge(style)).toBe("100px");
366+
}
367+
});
359368
});
360369
};

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

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -30,45 +30,41 @@ commonPropsTests("Positioned (left/top/width/height)", positionedLeftTopWidthHei
3030
});
3131

3232
commonPositionedTests(
33-
"Positioned left resize (left/top/width/height)",
34-
positionedLeftTopWidthHeight,
35-
(style) => style.width,
36-
(style) => style.left,
37-
(style) => style.right,
33+
"Positioned left resize",
34+
/* size */ (style) => style.width,
35+
/* edge */ (style) => style.left,
36+
/* opposite edge */ (style) => style.right,
3837
"ml",
39-
true,
40-
false,
38+
/* horizontal */ true,
39+
/* negate */ false,
4140
);
4241

4342
commonPositionedTests(
44-
"Positioned right resize (left/top/width/height)",
45-
positionedLeftTopWidthHeight,
46-
(style) => style.width,
47-
(style) => style.right,
48-
(style) => style.left,
43+
"Positioned right resize",
44+
/* size */ (style) => style.width,
45+
/* edge */ (style) => style.right,
46+
/* opposite edge */ (style) => style.left,
4947
"mr",
50-
true,
51-
true,
48+
/* horizontal */ true,
49+
/* negate */ true,
5250
);
5351

5452
commonPositionedTests(
55-
"Positioned top resize (left/top/width/height)",
56-
positionedLeftTopWidthHeight,
57-
(style) => style.height,
58-
(style) => style.top,
59-
(style) => style.bottom,
53+
"Positioned top resize",
54+
/* size */ (style) => style.height,
55+
/* edge */ (style) => style.top,
56+
/* opposite edge */ (style) => style.bottom,
6057
"mt",
61-
false,
62-
false,
58+
/* horizontal */ false,
59+
/* negate */ false,
6360
);
6461

6562
commonPositionedTests(
66-
"Positioned bottom resize (left/top/width/height)",
67-
positionedLeftTopWidthHeight,
68-
(style) => style.height,
69-
(style) => style.bottom,
70-
(style) => style.top,
63+
"Positioned bottom resize",
64+
/* size */ (style) => style.height,
65+
/* edge */ (style) => style.bottom,
66+
/* opposite edge */ (style) => style.top,
7167
"mb",
72-
false,
73-
true,
68+
/* horizontal */ false,
69+
/* negate */ true,
7470
);

0 commit comments

Comments
 (0)