Skip to content

Commit e743a72

Browse files
adamkudrnaadamkudrna
committed
Fix Grid prop types and cover it with better tests
1 parent 84248ce commit e743a72

File tree

6 files changed

+185
-17
lines changed

6 files changed

+185
-17
lines changed

‎src/lib/components/layout/Grid/Grid.jsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const Grid = ({
2626
id={id}
2727
className={styles.root}
2828
style={{
29-
'--rui-local-auto-flow': autoFlow,
29+
...(typeof autoFlow !== 'undefined' ? { '--rui-local-auto-flow': autoFlow } : {}),
3030
...generateResponsiveCustomProperties(columns, 'columns'),
3131
...generateResponsiveCustomProperties(columnGap, 'column-gap'),
3232
...generateResponsiveCustomProperties(rows, 'rows'),
@@ -65,7 +65,7 @@ Grid.propTypes = {
6565
* Content alignment. Accepts any valid value of `align-content` CSS property.
6666
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more.
6767
*/
68-
alignContent: PropTypes.oneOf([
68+
alignContent: PropTypes.oneOfType([
6969
PropTypes.string,
7070
PropTypes.shape({
7171
xs: PropTypes.string,
@@ -81,7 +81,7 @@ Grid.propTypes = {
8181
* Items alignment. Accepts any valid value of `align-items` CSS property.
8282
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more.
8383
*/
84-
alignItems: PropTypes.oneOf([
84+
alignItems: PropTypes.oneOfType([
8585
PropTypes.string,
8686
PropTypes.shape({
8787
xs: PropTypes.string,
@@ -106,7 +106,7 @@ Grid.propTypes = {
106106
* Gap between columns. Accepts any valid value of `grid-column-gap` CSS property.
107107
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more.
108108
*/
109-
columnGap: PropTypes.oneOf([
109+
columnGap: PropTypes.oneOfType([
110110
PropTypes.string,
111111
PropTypes.shape({
112112
xs: PropTypes.string,
@@ -122,7 +122,7 @@ Grid.propTypes = {
122122
* Grid columns. Accepts any valid value of `grid-template-columns` CSS property.
123123
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) for more.
124124
*/
125-
columns: PropTypes.oneOf([
125+
columns: PropTypes.oneOfType([
126126
PropTypes.string,
127127
PropTypes.shape({
128128
xs: PropTypes.string,
@@ -142,7 +142,7 @@ Grid.propTypes = {
142142
* Content justification. Accepts any valid value of `justify-content` CSS property.
143143
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more.
144144
*/
145-
justifyContent: PropTypes.oneOf([
145+
justifyContent: PropTypes.oneOfType([
146146
PropTypes.string,
147147
PropTypes.shape({
148148
xs: PropTypes.string,
@@ -158,7 +158,7 @@ Grid.propTypes = {
158158
* Items justification. Accepts any valid value of `justify-items` CSS property.
159159
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) for more.
160160
*/
161-
justifyItems: PropTypes.oneOf([
161+
justifyItems: PropTypes.oneOfType([
162162
PropTypes.string,
163163
PropTypes.shape({
164164
xs: PropTypes.string,
@@ -174,7 +174,7 @@ Grid.propTypes = {
174174
* Gap between rows. Accepts any valid value of `grid-row-gap` CSS property.
175175
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more.
176176
*/
177-
rowGap: PropTypes.oneOf([
177+
rowGap: PropTypes.oneOfType([
178178
PropTypes.string,
179179
PropTypes.shape({
180180
xs: PropTypes.string,
@@ -190,7 +190,7 @@ Grid.propTypes = {
190190
* Grid rows. Accepts any valid value of `grid-template-rows` CSS property.
191191
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) for more.
192192
*/
193-
rows: PropTypes.oneOf([
193+
rows: PropTypes.oneOfType([
194194
PropTypes.string,
195195
PropTypes.shape({
196196
xs: PropTypes.string,

‎src/lib/components/layout/Grid/GridSpan.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ GridSpan.propTypes = {
4747
/**
4848
* Number of columns to span.
4949
*/
50-
columns: PropTypes.oneOf([
50+
columns: PropTypes.oneOfType([
5151
PropTypes.number,
5252
PropTypes.shape({
5353
xs: PropTypes.number,
@@ -66,7 +66,7 @@ GridSpan.propTypes = {
6666
/**
6767
* Number of rows to span.
6868
*/
69-
rows: PropTypes.oneOf([
69+
rows: PropTypes.oneOfType([
7070
PropTypes.number,
7171
PropTypes.shape({
7272
xs: PropTypes.number,

‎src/lib/components/layout/Grid/__tests__/Grid.test.jsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,58 @@ describe('rendering', () => {
3232

3333
expect(tree).toMatchSnapshot();
3434
});
35+
36+
it('renders correctly with simple props', () => {
37+
const tree = shallow((
38+
<Grid
39+
alignContent="center"
40+
alignItems="center"
41+
autoFlow="dense"
42+
columns="1fr 1fr"
43+
columnGap="1rem"
44+
id="my-grid"
45+
justifyContent="center"
46+
justifyItems="center"
47+
rows="auto"
48+
rowGap="1rem"
49+
>
50+
<div>content</div>
51+
</Grid>
52+
));
53+
54+
expect(tree).toMatchSnapshot();
55+
});
56+
57+
it('renders correctly with complex props', () => {
58+
const tree = shallow((
59+
<Grid
60+
alignContent="center"
61+
alignItems="center"
62+
autoFlow="dense"
63+
columns={{
64+
md: '1fr 2fr',
65+
xs: '1fr',
66+
}}
67+
columnGap={{
68+
lg: 'var(--rui-spacing-4)',
69+
md: 'var(--rui-spacing-2)',
70+
}}
71+
id="my-grid"
72+
justifyContent="center"
73+
justifyItems="center"
74+
rows={{
75+
md: 'auto 200px auto',
76+
xs: 'auto auto 200px 200px',
77+
}}
78+
rowGap={{
79+
md: 'var(--rui-spacing-4)',
80+
xs: 'var(--rui-spacing-3)',
81+
}}
82+
>
83+
<div>content</div>
84+
</Grid>
85+
));
86+
87+
expect(tree).toMatchSnapshot();
88+
});
3589
});

‎src/lib/components/layout/Grid/__tests__/GridSpan.test.jsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,38 @@ describe('rendering', () => {
3232

3333
expect(tree).toMatchSnapshot();
3434
});
35+
36+
it('renders correctly with simple props', () => {
37+
const tree = shallow((
38+
<GridSpan
39+
columns={2}
40+
id="my-grid-span"
41+
rows={3}
42+
>
43+
<div>content</div>
44+
</GridSpan>
45+
));
46+
47+
expect(tree).toMatchSnapshot();
48+
});
49+
50+
it('renders correctly with complex props', () => {
51+
const tree = shallow((
52+
<GridSpan
53+
columns={{
54+
md: 1,
55+
xs: 2,
56+
}}
57+
id="my-grid-span"
58+
rows={{
59+
md: 4,
60+
xs: 3,
61+
}}
62+
>
63+
<div>content</div>
64+
</GridSpan>
65+
));
66+
67+
expect(tree).toMatchSnapshot();
68+
});
3569
});

‎src/lib/components/layout/Grid/__tests__/__snapshots__/Grid.test.jsx.snap‎

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,33 @@
33
exports[`rendering renders correctly with a single child 1`] = `
44
<div
55
className="root"
6+
style={Object {}}
7+
>
8+
<div>
9+
content
10+
</div>
11+
</div>
12+
`;
13+
14+
exports[`rendering renders correctly with complex props 1`] = `
15+
<div
16+
className="root"
17+
id="my-grid"
618
style={
719
Object {
8-
"--rui-local-auto-flow": undefined,
20+
"--rui-local-align-content-xs": "center",
21+
"--rui-local-align-items-xs": "center",
22+
"--rui-local-auto-flow": "dense",
23+
"--rui-local-column-gap-lg": "var(--rui-spacing-4)",
24+
"--rui-local-column-gap-md": "var(--rui-spacing-2)",
25+
"--rui-local-columns-md": "1fr 2fr",
26+
"--rui-local-columns-xs": "1fr",
27+
"--rui-local-justify-content-xs": "center",
28+
"--rui-local-justify-items-xs": "center",
29+
"--rui-local-row-gap-md": "var(--rui-spacing-4)",
30+
"--rui-local-row-gap-xs": "var(--rui-spacing-3)",
31+
"--rui-local-rows-md": "auto 200px auto",
32+
"--rui-local-rows-xs": "auto auto 200px 200px",
933
}
1034
}
1135
>
@@ -18,11 +42,7 @@ exports[`rendering renders correctly with a single child 1`] = `
1842
exports[`rendering renders correctly with multiple children 1`] = `
1943
<div
2044
className="root"
21-
style={
22-
Object {
23-
"--rui-local-auto-flow": undefined,
24-
}
25-
}
45+
style={Object {}}
2646
>
2747
<div>
2848
content 1
@@ -37,3 +57,27 @@ exports[`rendering renders correctly with multiple children 1`] = `
3757
`;
3858

3959
exports[`rendering renders correctly with no children 1`] = `""`;
60+
61+
exports[`rendering renders correctly with simple props 1`] = `
62+
<div
63+
className="root"
64+
id="my-grid"
65+
style={
66+
Object {
67+
"--rui-local-align-content-xs": "center",
68+
"--rui-local-align-items-xs": "center",
69+
"--rui-local-auto-flow": "dense",
70+
"--rui-local-column-gap-xs": "1rem",
71+
"--rui-local-columns-xs": "1fr 1fr",
72+
"--rui-local-justify-content-xs": "center",
73+
"--rui-local-justify-items-xs": "center",
74+
"--rui-local-row-gap-xs": "1rem",
75+
"--rui-local-rows-xs": "auto",
76+
}
77+
}
78+
>
79+
<div>
80+
content
81+
</div>
82+
</div>
83+
`;

‎src/lib/components/layout/Grid/__tests__/__snapshots__/GridSpan.test.jsx.snap‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,25 @@ exports[`rendering renders correctly with a single child 1`] = `
1111
</div>
1212
`;
1313

14+
exports[`rendering renders correctly with complex props 1`] = `
15+
<div
16+
className="span"
17+
id="my-grid-span"
18+
style={
19+
Object {
20+
"--rui-local-column-span-md": 1,
21+
"--rui-local-column-span-xs": 2,
22+
"--rui-local-row-span-md": 4,
23+
"--rui-local-row-span-xs": 3,
24+
}
25+
}
26+
>
27+
<div>
28+
content
29+
</div>
30+
</div>
31+
`;
32+
1433
exports[`rendering renders correctly with multiple children 1`] = `
1534
<div
1635
className="span"
@@ -29,3 +48,20 @@ exports[`rendering renders correctly with multiple children 1`] = `
2948
`;
3049

3150
exports[`rendering renders correctly with no children 1`] = `""`;
51+
52+
exports[`rendering renders correctly with simple props 1`] = `
53+
<div
54+
className="span"
55+
id="my-grid-span"
56+
style={
57+
Object {
58+
"--rui-local-column-span-xs": 2,
59+
"--rui-local-row-span-xs": 3,
60+
}
61+
}
62+
>
63+
<div>
64+
content
65+
</div>
66+
</div>
67+
`;

0 commit comments

Comments
 (0)