Fixed bug #38 (#39)

src/break/Break.test.tsx

@@ -1,7 +1,6 @@
 import {shallow} from "enzyme";
 import "jest-styled-components";
 import React from "react";
-import styled from "styled-components";
 import Break from "./Break";
 
 describe("<Break />", () => {

src/column/Column.test.tsx

@@ -1,7 +1,6 @@
 import {shallow} from "enzyme";
 import "jest-styled-components";
 import React from "react";
-import styled from "styled-components";
 import Column from "./Column";
 
 describe("<Column />", () => {

src/container/Container.story.tsx

@@ -19,6 +19,8 @@ const containerWidth = {
   desktop: 760,
 };
 
+const gutterWidth = 100;
+
 storiesOf("Container", module)
   .add("fluid", () => (
     <Story>
@@ -53,4 +55,19 @@ storiesOf("Container", module)
         </Container>
       </ThemeProvider>
     </Story>
+  ))
+  .add("gutterWidth100", () => (
+    <Story>
+      <Title>themeProvider</Title>
+      <ThemeProvider theme={{gutterWidth}}>
+        <Container>
+          <Row>
+            <Column size={3}>1</Column>
+            <Column size={3}>2</Column>
+            <Column size={3}>3</Column>
+            <Column size={3}>4</Column>
+          </Row>
+        </Container>
+      </ThemeProvider>
+    </Story>
   ));

src/container/Container.test.tsx

@@ -1,7 +1,6 @@
 import {shallow} from "enzyme";
 import "jest-styled-components";
 import React from "react";
-import styled from "styled-components";
 import Container from "./Container";
 
 describe("<Container />", () => {

src/row/Row.test.tsx

@@ -1,7 +1,6 @@
 import {shallow} from "enzyme";
 import "jest-styled-components";
 import React from "react";
-import styled from "styled-components";
 import Row from "./Row";
 
 describe("<Row />", () => {

src/row/Row.tsx

@@ -30,7 +30,8 @@ const Row = styled.div`
         renderJustifyContent(value as RowJustifyContent),
       direction: (value?: PropertyValue) =>
         renderDirection(value as RowDirection),
-      gutter: (value?: PropertyValue) => renderGutter(value as boolean),
+      gutter: (value?: PropertyValue) =>
+        renderGutter(value as boolean, props.theme),
       wrap: (value?: PropertyValue) => renderWrap(value as RowWrap),
     };
     const valueMap = {

src/theme/ThemeProvider.test.tsx

@@ -0,0 +1,23 @@
+import {mount} from "enzyme";
+import "jest-styled-components";
+import React from "react";
+import {Column, Container, Row} from "..";
+import {ThemeProvider} from "./StyledComponents";
+
+describe("<ThemeProvider />", () => {
+  it("should match the snapshot (gutterWidth set to 100)", () => {
+    // act
+    const result = mount(
+      <ThemeProvider theme={{gutterWidth: 100}}>
+        <Container>
+          <Row>
+            <Column>Test</Column>
+          </Row>
+        </Container>
+      </ThemeProvider>,
+    );
+
+    // assert
+    expect(result).toMatchSnapshot();
+  });
+});

src/theme/__snapshots__/ThemeProvider.test.tsx.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ThemeProvider /> should match the snapshot (gutterWidth set to 100) 1`] = `
+.c3 {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: -50px;
+  margin-left: -50px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.c1 > .c2 {
+  padding-right: 50px;
+  padding-left: 50px;
+}
+
+.c0 {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 50px;
+  padding-left: 50px;
+}
+
+@media (min-width:576px) {
+  .c0 {
+    max-width: 540px;
+  }
+}
+
+@media (min-width:768px) {
+  .c0 {
+    max-width: 720px;
+  }
+}
+
+@media (min-width:992px) {
+  .c0 {
+    max-width: 960px;
+  }
+}
+
+@media (min-width:1200px) {
+  .c0 {
+    max-width: 1140px;
+  }
+}
+
+<ThemeProvider
+  theme={
+    Object {
+      "gutterWidth": 100,
+    }
+  }
+>
+  <styled.div>
+    <div
+      className="c0"
+    >
+      <styled.div>
+        <div
+          className="c1"
+        >
+          <styled.div>
+            <div
+              className="c2 c3"
+            >
+              Test
+            </div>
+          </styled.div>
+        </div>
+      </styled.div>
+    </div>
+  </styled.div>
+</ThemeProvider>
+`;