Update tests, improve coverage.

example/src/App.js

@@ -115,7 +115,7 @@ export default class App extends Component {
               </Col>
             </Row>
           </Main>
-          <Grid style={{ backgroundColor: 'pink' }}>
+          <Grid style={{ backgroundColor: 'lightcyan' }} spacing={0.5}>
             <Row>
               <Col flex={5}>
                 <Segment>1</Segment>

src/components/tests/Col.test.js

@@ -26,7 +26,7 @@ describe('<Col />', () => {
     });
   });
 
-  describe('with added props - 1st set', () => {
+  describe('with added props', () => {
     const wrapperWithProps = shallow(
       <Col flex={[2, 3, '75%']} order={2} alignSelf="center" />
     );
@@ -45,4 +45,22 @@ describe('<Col />', () => {
       return testStyle(wrapperWithProps, style, value);
     });
   });
+
+  describe('with the grid prop', () => {
+    const wrapper = shallow(<Col grid />);
+
+    const expectedStyleList = [
+      { style: 'display', value: 'flex' },
+      { style: 'flex-flow', value: 'row wrap' },
+      { style: 'justify-content', value: 'center' },
+    ];
+
+    it('should match snapshot', () => {
+      expect(shallowToJson(wrapper)).toMatchSnapshot();
+    });
+
+    expectedStyleList.forEach(({ style, value }) => {
+      return testStyle(wrapper, style, value);
+    });
+  });
 });

src/components/tests/Grid.test.js

@@ -8,6 +8,7 @@ import 'jest-styled-components';
 
 import testStyle from './helpers/testStyle';
 import Grid from '../Grid';
+import Row from '../Row';
 import Col from '../Col';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -44,7 +45,6 @@ describe('<Grid />', () => {
         alignItems="flex-end"
         badProp1="this is a bad prop"
         badProp2="this is another bad prop"
-        spacing
       />
     );
 
@@ -64,85 +64,93 @@ describe('<Grid />', () => {
     });
   });
 
-  describe('passes styles down to children columns', () => {
-    const wrapper = mount(
-      <Grid spacing={2}>
-        <Col>Hello</Col>
-      </Grid>
-    );
-
-    Col.displayName = 'Col';
-
-    it('should match snapshot with props', () => {
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
-
-    it(`should pass padding when spacing prop is present`, () => {
+  describe('with spacing', () => {
+    it('should have padding-top, padding-bottom by default', () => {
       const tree = renderer
         .create(
-          <Grid spacing={2}>
+          <Grid spacing>
             <Col />
           </Grid>
         )
         .toJSON();
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('padding', 'calc(2em / 2)', {
-        modifier: css`:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-col`,
+      expect(tree).toHaveStyleRule('padding-top', 'calc(1em / 2)', {
+        modifier: css`
+          :not(.brckwrx-row) :not(.brckwrx-col)
+        `,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('padding-bottom', 'calc(1em / 2)', {
+        modifier: css`
+          :not(.brckwrx-row) :not(.brckwrx-col)
+        `,
       });
     });
 
-    it(`should pass flex when the columns prop is present`, () => {
+    it('should have correct padding-top, padding-bottom when passed with spacing prop', () => {
       const tree = renderer
         .create(
-          <Grid columns={2}>
+          <Grid spacing={2}>
             <Col />
           </Grid>
         )
         .toJSON();
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '50%', {
-        modifier: css`> .brckwrx-col`,
+      expect(tree).toHaveStyleRule('padding-top', 'calc(2em / 2)', {
+        modifier: css`
+          :not(.brckwrx-row) :not(.brckwrx-col)
+        `,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('padding-bottom', 'calc(2em / 2)', {
+        modifier: css`
+          :not(.brckwrx-row) :not(.brckwrx-col)
+        `,
       });
     });
+  });
 
-    it(`should pass flex and adjust flex-basis based on media queries when passed xs, sm, md, lg, and xl props`, () => {
+  describe('passes styles down to children columns', () => {
+    const wrapper = mount(
+      <Grid spacing={2}>
+        <Col>Hello</Col>
+      </Grid>
+    );
+
+    Col.displayName = 'Col';
+
+    it('should match snapshot with props', () => {
+      expect(shallowToJson(wrapper)).toMatchSnapshot();
+    });
+
+    it(`should pass padding when spacing prop is present`, () => {
       const tree = renderer
         .create(
-          <Grid xs={4} sm={1} md={2} lg={4} xl={10}>
-            <Col />
+          <Grid spacing={2}>
+            <Row>
+              <Col />
+            </Row>
           </Grid>
         )
         .toJSON();
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '25%', {
-        modifier: css`> .brckwrx-col`,
-      });
-
-      // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '100%', {
-        media: 'screen and (min-width: 576px)',
-        modifier: css`> .brckwrx-col`,
-      });
-
-      // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '50%', {
-        media: 'screen and (min-width: 768px)',
-        modifier: css`> .brckwrx-col`,
+      expect(tree).toHaveStyleRule('padding', 'calc(2em / 2)', {
+        modifier: css`:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-col`,
       });
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '25%', {
-        media: 'screen and (min-width: 992px)',
-        modifier: css`> .brckwrx-col`,
+      expect(tree).toHaveStyleRule('padding-left', 'calc(2em / 2)', {
+        modifier: css`:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-row`,
       });
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '10%', {
-        media: 'screen and (min-width: 1200px)',
-        modifier: css`> .brckwrx-col`,
+      expect(tree).toHaveStyleRule('padding-right', 'calc(2em / 2)', {
+        modifier: css`:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-row`,
       });
     });
   });

src/components/tests/Row.test.js

@@ -1,10 +1,14 @@
 import React from 'react';
+import { css } from 'styled-components';
 import Enzyme, { shallow } from 'enzyme';
 import { shallowToJson } from 'enzyme-to-json';
 import Adapter from 'enzyme-adapter-react-16';
+import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
+import testStyle from './helpers/testStyle';
 import Row from '../Row';
+import Col from '../Col';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -15,23 +19,84 @@ describe('<Row />', () => {
     expect(wrapper.find('div').exists()).toBe(true);
   });
 
-  it('should match snapshot', () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
+  describe('with default props/settings', () => {
+    const expectedStyleList = [
+      { style: 'display', value: 'flex' },
+      { style: 'flex', value: '0 1 100%' },
+      { style: 'flex-flow', value: 'row wrap' },
+      { style: 'justify-content', value: 'center' },
+      { style: 'order', value: '0' },
+    ];
 
-  it('should have default style - flex: 0 1 100%', () => {
-    expect(wrapper.find('div')).toHaveStyleRule('flex', '0 1 100%');
-  });
+    it('should match snapshot', () => {
+      expect(shallowToJson(wrapper)).toMatchSnapshot();
+    });
 
-  it('should have default style - flex-flow: row wrap', () => {
-    expect(wrapper.find('div')).toHaveStyleRule('flex-flow', 'row wrap');
+    expectedStyleList.forEach(({ style, value }) => {
+      return testStyle(wrapper, style, value);
+    });
   });
 
-  it('should have default style - justify-content: center', () => {
-    expect(wrapper.find('div')).toHaveStyleRule('justify-content', 'center');
+  describe('with added props', () => {
+    const wrapperWithProps = shallow(
+      <Row flow="column nowrap" justify="space-between" order={2} />
+    );
+
+    const expectedStyleList = [
+      { style: 'display', value: 'flex' },
+      { style: 'flex', value: '0 1 100%' },
+      { style: 'flex-flow', value: 'column nowrap' },
+      { style: 'justify-content', value: 'space-between' },
+      { style: 'order', value: '2' },
+    ];
+
+    it('should match snapshot', () => {
+      expect(shallowToJson(wrapperWithProps)).toMatchSnapshot();
+    });
+
+    expectedStyleList.forEach(({ style, value }) => {
+      return testStyle(wrapperWithProps, style, value);
+    });
   });
 
-  it('should have default style - order: 0', () => {
-    expect(wrapper.find('div')).toHaveStyleRule('order', '0');
+  describe('with columns/breakpoints', () => {
+    it(`should pass flex and adjust flex-basis based on media queries when passed xs, sm, md, lg, and xl props`, () => {
+      const tree = renderer
+        .create(
+          <Row xs={4} sm={1} md={2} lg={4} xl={10}>
+            <Col />
+          </Row>
+        )
+        .toJSON();
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('flex-basis', '25%', {
+        modifier: css`> .brckwrx-col`,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('flex-basis', '100%', {
+        media: 'screen and (min-width: 576px)',
+        modifier: css`> .brckwrx-col`,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('flex-basis', '50%', {
+        media: 'screen and (min-width: 768px)',
+        modifier: css`> .brckwrx-col`,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('flex-basis', '25%', {
+        media: 'screen and (min-width: 992px)',
+        modifier: css`> .brckwrx-col`,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('flex-basis', '10%', {
+        media: 'screen and (min-width: 1200px)',
+        modifier: css`> .brckwrx-col`,
+      });
+    });
   });
 });

src/components/tests/__snapshots__/Col.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Col /> with added props - 1st set should match snapshot with props 1`] = `
+exports[`<Col /> with added props should match snapshot with props 1`] = `
 .c0 {
   margin: 0;
   box-sizing: border-box;
@@ -44,3 +44,48 @@ exports[`<Col /> with default props/settings should match snapshot 1`] = `
   className="brckwrx-col c0"
 />
 `;
+
+exports[`<Col /> with the grid prop should match snapshot 1`] = `
+.c0 {
+  margin: 0;
+  box-sizing: border-box;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0 !important;
+}
+
+.c0:not(.brckwrx-row) :not(.brckwrx-col) {
+  padding-top: calc(1em / 2);
+  padding-bottom: calc(1em / 2);
+}
+
+.c0:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-row {
+  padding-left: calc(1em / 2);
+  padding-right: calc(1em / 2);
+}
+
+.c0:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-col {
+  padding: calc(1em / 2);
+}
+
+.c0 .brckwrx-row {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+<div
+  className="brckwrx-col c0"
+/>
+`;

src/components/tests/__snapshots__/Grid.test.js.snap

@@ -107,7 +107,6 @@ exports[`<Grid /> with added props should match snapshot with props 1`] = `
 
 <div
   className="brckwrx-grid c0"
-  spacing={true}
 />
 `;