Skip to content
This repository was archived by the owner on Dec 29, 2022. It is now read-only.

Commit 551b3b8

Browse files
DaniAkashDaniAkash
committed
Added test cases
1 parent fe7acc7 commit 551b3b8

File tree

6 files changed

+284
-1
lines changed

6 files changed

+284
-1
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@types/jest": "^25.1.1",
2323
"@types/react": "^16.9.19",
2424
"@types/react-native": "^0.61.7",
25+
"@types/react-test-renderer": "^16.9.2",
2526
"husky": "^4.2.1",
2627
"jest": "^25.1.0",
2728
"metro-react-native-babel-preset": "^0.58.0",

‎src/__tests__/__snapshots__/index.snapshot.test.tsx.snap‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Renders Horizontal Masonry with 2 columns 1`] = `
4+
<ScrollView
5+
contentContainerStyle={
6+
Object {
7+
"flexDirection": "row",
8+
}
9+
}
10+
>
11+
<View
12+
style={
13+
Array [
14+
Object {
15+
"flexDirection": "column",
16+
},
17+
null,
18+
null,
19+
]
20+
}
21+
>
22+
<Text>
23+
Text 1
24+
</Text>
25+
</View>
26+
<View
27+
style={
28+
Array [
29+
Object {
30+
"flexDirection": "column",
31+
},
32+
null,
33+
null,
34+
]
35+
}
36+
>
37+
<Text>
38+
Text 2
39+
</Text>
40+
</View>
41+
</ScrollView>
42+
`;
43+
44+
exports[`Renders Horizontal Masonry with 2 columns 2`] = `
45+
<ScrollView
46+
contentContainerStyle={
47+
Object {
48+
"flexDirection": "row",
49+
}
50+
}
51+
>
52+
<View
53+
style={
54+
Array [
55+
Object {
56+
"flexDirection": "column",
57+
},
58+
null,
59+
null,
60+
]
61+
}
62+
>
63+
<Text>
64+
Text 1
65+
</Text>
66+
<Text>
67+
Text 2
68+
</Text>
69+
</View>
70+
<View
71+
style={
72+
Array [
73+
Object {
74+
"flexDirection": "column",
75+
},
76+
null,
77+
null,
78+
]
79+
}
80+
>
81+
<Text>
82+
Text 2
83+
</Text>
84+
</View>
85+
</ScrollView>
86+
`;
87+
88+
exports[`Renders Vertical Masonry with 2 columns 1`] = `
89+
<ScrollView
90+
contentContainerStyle={
91+
Object {
92+
"flexDirection": "row",
93+
}
94+
}
95+
>
96+
<View
97+
style={
98+
Array [
99+
Object {
100+
"flexDirection": "column",
101+
},
102+
null,
103+
null,
104+
]
105+
}
106+
>
107+
<Text>
108+
Text 1
109+
</Text>
110+
</View>
111+
<View
112+
style={
113+
Array [
114+
Object {
115+
"flexDirection": "column",
116+
},
117+
null,
118+
null,
119+
]
120+
}
121+
>
122+
<Text>
123+
Text 2
124+
</Text>
125+
</View>
126+
</ScrollView>
127+
`;
128+
129+
exports[`Renders Vertical Masonry with 3 columns 1`] = `
130+
<ScrollView
131+
contentContainerStyle={
132+
Object {
133+
"flexDirection": "row",
134+
}
135+
}
136+
>
137+
<View
138+
style={
139+
Array [
140+
Object {
141+
"flexDirection": "column",
142+
},
143+
null,
144+
null,
145+
]
146+
}
147+
>
148+
<Text>
149+
Text 1
150+
</Text>
151+
<Text>
152+
Text 2
153+
</Text>
154+
</View>
155+
<View
156+
style={
157+
Array [
158+
Object {
159+
"flexDirection": "column",
160+
},
161+
null,
162+
null,
163+
]
164+
}
165+
>
166+
<Text>
167+
Text 2
168+
</Text>
169+
</View>
170+
</ScrollView>
171+
`;

‎src/__tests__/index.snapshot.test.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from "react";
2+
import renderer from "react-test-renderer";
3+
import RNMasonryScrollView, { generateMasonryGrid } from "../index";
4+
import { Text } from "react-native";
5+
6+
const column1Text = "Text 1";
7+
const column2Text = "Text 2";
8+
const column3Text = "Text 3";
9+
10+
const VMasonryComponentTwoColumns = () => {
11+
return (
12+
<RNMasonryScrollView>
13+
{[<Text key={1}>{column1Text}</Text>, <Text key={2}>{column2Text}</Text>]}
14+
</RNMasonryScrollView>
15+
);
16+
};
17+
18+
it("Renders Vertical Masonry with 2 columns", () => {
19+
const tree = renderer.create(<VMasonryComponentTwoColumns />).toJSON();
20+
expect(tree).toMatchSnapshot();
21+
});
22+
23+
const VMasonryComponentThreeColumns = () => {
24+
return (
25+
<RNMasonryScrollView>
26+
{[
27+
<Text key={1}>{column1Text}</Text>,
28+
<Text key={2}>{column2Text}</Text>,
29+
<Text key={3}>{column2Text}</Text>
30+
]}
31+
</RNMasonryScrollView>
32+
);
33+
};
34+
35+
it("Renders Vertical Masonry with 3 columns", () => {
36+
const tree = renderer.create(<VMasonryComponentThreeColumns />).toJSON();
37+
expect(tree).toMatchSnapshot();
38+
});
39+
40+
const HMasonryComponentTwoColumns = () => {
41+
return (
42+
<RNMasonryScrollView>
43+
{[<Text key={1}>{column1Text}</Text>, <Text key={2}>{column2Text}</Text>]}
44+
</RNMasonryScrollView>
45+
);
46+
};
47+
48+
it("Renders Horizontal Masonry with 2 columns", () => {
49+
const tree = renderer.create(<HMasonryComponentTwoColumns />).toJSON();
50+
expect(tree).toMatchSnapshot();
51+
});
52+
53+
const HMasonryComponentThreeColumns = () => {
54+
return (
55+
<RNMasonryScrollView>
56+
{[
57+
<Text key={1}>{column1Text}</Text>,
58+
<Text key={2}>{column2Text}</Text>,
59+
<Text key={3}>{column2Text}</Text>
60+
]}
61+
</RNMasonryScrollView>
62+
);
63+
};
64+
65+
it("Renders Horizontal Masonry with 2 columns", () => {
66+
const tree = renderer.create(<HMasonryComponentThreeColumns />).toJSON();
67+
expect(tree).toMatchSnapshot();
68+
});

‎src/__tests__/index.unit.test.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
import { Text } from "react-native";
3+
import { fireEvent, render, wait } from "@testing-library/react-native";
4+
import RNMasonryScrollView, { generateMasonryGrid } from "../index";
5+
6+
const column1Text = "Text 1";
7+
const column2Text = "Text 2";
8+
9+
const MasonryTestComponent = () => {
10+
return (
11+
<RNMasonryScrollView>
12+
{[<Text key={1}>{column1Text}</Text>, <Text key={2}>{column2Text}</Text>]}
13+
</RNMasonryScrollView>
14+
);
15+
};
16+
17+
it("Renders Vertical Masonry", () => {
18+
const {
19+
getByTestId,
20+
getByText,
21+
queryByTestId,
22+
baseElement,
23+
queryByText
24+
} = render(<MasonryTestComponent />);
25+
26+
const text1 = queryByText(column1Text);
27+
expect(text1).toBeTruthy();
28+
const text2 = queryByText(column2Text);
29+
expect(text2).toBeTruthy();
30+
});
31+
32+
it("Masonry gets generated properly", () => {
33+
const masonryArray = generateMasonryGrid([1, 2, 3, 4], 2);
34+
expect(masonryArray[0]).toStrictEqual([1, 3]);
35+
expect(masonryArray[1]).toStrictEqual([2, 4]);
36+
});

‎src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface RNMasonryScrollViewProps extends ScrollViewProps {
1616
evenColumnStyle?: StyleProp<ViewStyle>;
1717
}
1818

19-
function generateMasonryGrid<T>(data: T[], columns: number): T[][] {
19+
export function generateMasonryGrid<T>(data: T[], columns: number): T[][] {
2020
return data.reduce((collection: T[][], child: T, childIndex: number) => {
2121
const itemIndex = childIndex % columns;
2222
if (collection[itemIndex]) {

‎yarn.lock‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1178,6 +1178,13 @@
11781178
dependencies:
11791179
"@types/react" "*"
11801180

1181+
"@types/react-test-renderer@^16.9.2":
1182+
version "16.9.2"
1183+
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.2.tgz#e1c408831e8183e5ad748fdece02214a7c2ab6c5"
1184+
integrity sha512-4eJr1JFLIAlWhzDkBCkhrOIWOvOxcCAfQh+jiKg7l/nNZcCIL2MHl2dZhogIFKyHzedVWHaVP1Yydq/Ruu4agw==
1185+
dependencies:
1186+
"@types/react" "*"
1187+
11811188
"@types/react@*", "@types/react@^16.9.19":
11821189
version "16.9.19"
11831190
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.19.tgz#c842aa83ea490007d29938146ff2e4d9e4360c40"

0 commit comments

Comments
 (0)