Fix Grid prop types and cover it with better tests

react-ui-org · Dec 11, 2020 · e743a72 · e743a72
1 parent 84248ce
commit e743a72
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 17 deletions.
diff --git a/src/lib/components/layout/Grid/Grid.jsx b/src/lib/components/layout/Grid/Grid.jsx
@@ -26,7 +26,7 @@ export const Grid = ({
       id={id}
       className={styles.root}
       style={{
-        '--rui-local-auto-flow': autoFlow,
+        ...(typeof autoFlow !== 'undefined' ? { '--rui-local-auto-flow': autoFlow } : {}),
         ...generateResponsiveCustomProperties(columns, 'columns'),
         ...generateResponsiveCustomProperties(columnGap, 'column-gap'),
         ...generateResponsiveCustomProperties(rows, 'rows'),
@@ -65,7 +65,7 @@ Grid.propTypes = {
    * Content alignment. Accepts any valid value of `align-content` CSS property.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more.
    */
-  alignContent: PropTypes.oneOf([
+  alignContent: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.shape({
       xs: PropTypes.string,
@@ -81,7 +81,7 @@ Grid.propTypes = {
    * Items alignment. Accepts any valid value of `align-items` CSS property.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more.
    */
-  alignItems: PropTypes.oneOf([
+  alignItems: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.shape({
       xs: PropTypes.string,
@@ -106,7 +106,7 @@ Grid.propTypes = {
    * Gap between columns. Accepts any valid value of `grid-column-gap` CSS property.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more.
    */
-  columnGap: PropTypes.oneOf([
+  columnGap: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.shape({
       xs: PropTypes.string,
@@ -122,7 +122,7 @@ Grid.propTypes = {
    * Grid columns. Accepts any valid value of `grid-template-columns` CSS property.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) for more.
    */
-  columns: PropTypes.oneOf([
+  columns: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.shape({
       xs: PropTypes.string,
@@ -142,7 +142,7 @@ Grid.propTypes = {
    * Content justification. Accepts any valid value of `justify-content` CSS property.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more.
    */
-  justifyContent: PropTypes.oneOf([
+  justifyContent: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.shape({
       xs: PropTypes.string,
@@ -158,7 +158,7 @@ Grid.propTypes = {
    * Items justification. Accepts any valid value of `justify-items` CSS property.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) for more.
    */
-  justifyItems: PropTypes.oneOf([
+  justifyItems: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.shape({
       xs: PropTypes.string,
@@ -174,7 +174,7 @@ Grid.propTypes = {
    * Gap between rows. Accepts any valid value of `grid-row-gap` CSS property.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more.
    */
-  rowGap: PropTypes.oneOf([
+  rowGap: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.shape({
       xs: PropTypes.string,
@@ -190,7 +190,7 @@ Grid.propTypes = {
    * Grid rows. Accepts any valid value of `grid-template-rows` CSS property.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) for more.
    */
-  rows: PropTypes.oneOf([
+  rows: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.shape({
       xs: PropTypes.string,

diff --git a/src/lib/components/layout/Grid/GridSpan.jsx b/src/lib/components/layout/Grid/GridSpan.jsx
@@ -47,7 +47,7 @@ GridSpan.propTypes = {
   /**
    * Number of columns to span.
    */
-  columns: PropTypes.oneOf([
+  columns: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.shape({
       xs: PropTypes.number,
@@ -66,7 +66,7 @@ GridSpan.propTypes = {
   /**
    * Number of rows to span.
    */
-  rows: PropTypes.oneOf([
+  rows: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.shape({
       xs: PropTypes.number,

diff --git a/src/lib/components/layout/Grid/__tests__/Grid.test.jsx b/src/lib/components/layout/Grid/__tests__/Grid.test.jsx
@@ -32,4 +32,58 @@ describe('rendering', () => {
 
     expect(tree).toMatchSnapshot();
   });
+
+  it('renders correctly with simple props', () => {
+    const tree = shallow((
+      <Grid
+        alignContent="center"
+        alignItems="center"
+        autoFlow="dense"
+        columns="1fr 1fr"
+        columnGap="1rem"
+        id="my-grid"
+        justifyContent="center"
+        justifyItems="center"
+        rows="auto"
+        rowGap="1rem"
+      >
+        <div>content</div>
+      </Grid>
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders correctly with complex props', () => {
+    const tree = shallow((
+      <Grid
+        alignContent="center"
+        alignItems="center"
+        autoFlow="dense"
+        columns={{
+          md: '1fr 2fr',
+          xs: '1fr',
+        }}
+        columnGap={{
+          lg: 'var(--rui-spacing-4)',
+          md: 'var(--rui-spacing-2)',
+        }}
+        id="my-grid"
+        justifyContent="center"
+        justifyItems="center"
+        rows={{
+          md: 'auto 200px auto',
+          xs: 'auto auto 200px 200px',
+        }}
+        rowGap={{
+          md: 'var(--rui-spacing-4)',
+          xs: 'var(--rui-spacing-3)',
+        }}
+      >
+        <div>content</div>
+      </Grid>
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/lib/components/layout/Grid/__tests__/GridSpan.test.jsx b/src/lib/components/layout/Grid/__tests__/GridSpan.test.jsx
@@ -32,4 +32,38 @@ describe('rendering', () => {
 
     expect(tree).toMatchSnapshot();
   });
+
+  it('renders correctly with simple props', () => {
+    const tree = shallow((
+      <GridSpan
+        columns={2}
+        id="my-grid-span"
+        rows={3}
+      >
+        <div>content</div>
+      </GridSpan>
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders correctly with complex props', () => {
+    const tree = shallow((
+      <GridSpan
+        columns={{
+          md: 1,
+          xs: 2,
+        }}
+        id="my-grid-span"
+        rows={{
+          md: 4,
+          xs: 3,
+        }}
+      >
+        <div>content</div>
+      </GridSpan>
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/lib/components/layout/Grid/__tests__/__snapshots__/Grid.test.jsx.snap b/src/lib/components/layout/Grid/__tests__/__snapshots__/Grid.test.jsx.snap
@@ -3,9 +3,33 @@
 exports[`rendering renders correctly with a single child 1`] = `
 <div
   className="root"
+  style={Object {}}
+>
+  <div>
+    content
+  </div>
+</div>
+`;
+
+exports[`rendering renders correctly with complex props 1`] = `
+<div
+  className="root"
+  id="my-grid"
   style={
     Object {
-      "--rui-local-auto-flow": undefined,
+      "--rui-local-align-content-xs": "center",
+      "--rui-local-align-items-xs": "center",
+      "--rui-local-auto-flow": "dense",
+      "--rui-local-column-gap-lg": "var(--rui-spacing-4)",
+      "--rui-local-column-gap-md": "var(--rui-spacing-2)",
+      "--rui-local-columns-md": "1fr 2fr",
+      "--rui-local-columns-xs": "1fr",
+      "--rui-local-justify-content-xs": "center",
+      "--rui-local-justify-items-xs": "center",
+      "--rui-local-row-gap-md": "var(--rui-spacing-4)",
+      "--rui-local-row-gap-xs": "var(--rui-spacing-3)",
+      "--rui-local-rows-md": "auto 200px auto",
+      "--rui-local-rows-xs": "auto auto 200px 200px",
     }
   }
 >
@@ -18,11 +42,7 @@ exports[`rendering renders correctly with a single child 1`] = `
 exports[`rendering renders correctly with multiple children 1`] = `
 <div
   className="root"
-  style={
-    Object {
-      "--rui-local-auto-flow": undefined,
-    }
-  }
+  style={Object {}}
 >
   <div>
     content 1
@@ -37,3 +57,27 @@ exports[`rendering renders correctly with multiple children 1`] = `
 `;
 
 exports[`rendering renders correctly with no children 1`] = `""`;
+
+exports[`rendering renders correctly with simple props 1`] = `
+<div
+  className="root"
+  id="my-grid"
+  style={
+    Object {
+      "--rui-local-align-content-xs": "center",
+      "--rui-local-align-items-xs": "center",
+      "--rui-local-auto-flow": "dense",
+      "--rui-local-column-gap-xs": "1rem",
+      "--rui-local-columns-xs": "1fr 1fr",
+      "--rui-local-justify-content-xs": "center",
+      "--rui-local-justify-items-xs": "center",
+      "--rui-local-row-gap-xs": "1rem",
+      "--rui-local-rows-xs": "auto",
+    }
+  }
+>
+  <div>
+    content
+  </div>
+</div>
+`;
diff --git a/src/lib/components/layout/Grid/__tests__/__snapshots__/GridSpan.test.jsx.snap b/src/lib/components/layout/Grid/__tests__/__snapshots__/GridSpan.test.jsx.snap
@@ -11,6 +11,25 @@ exports[`rendering renders correctly with a single child 1`] = `
 </div>
 `;
 
+exports[`rendering renders correctly with complex props 1`] = `
+<div
+  className="span"
+  id="my-grid-span"
+  style={
+    Object {
+      "--rui-local-column-span-md": 1,
+      "--rui-local-column-span-xs": 2,
+      "--rui-local-row-span-md": 4,
+      "--rui-local-row-span-xs": 3,
+    }
+  }
+>
+  <div>
+    content
+  </div>
+</div>
+`;
+
 exports[`rendering renders correctly with multiple children 1`] = `
 <div
   className="span"
@@ -29,3 +48,20 @@ exports[`rendering renders correctly with multiple children 1`] = `
 `;
 
 exports[`rendering renders correctly with no children 1`] = `""`;
+
+exports[`rendering renders correctly with simple props 1`] = `
+<div
+  className="span"
+  id="my-grid-span"
+  style={
+    Object {
+      "--rui-local-column-span-xs": 2,
+      "--rui-local-row-span-xs": 3,
+    }
+  }
+>
+  <div>
+    content
+  </div>
+</div>
+`;