Added snapshot test on SlideShow. Added styled components.

package.json

@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "enzyme": "^2.8.2",
+    "enzyme-to-json": "^1.5.1",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^15.0.1",
     "eslint-config-google": "^0.8.0",

src/__test__/SlideShow.test.js

@@ -1,28 +1,39 @@
 import React from 'react';
 import SlideShow from '../components/SlideShow/';
 import { mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import { Button, SingleSlide } from '../components/SlideShow/style';
 
 describe('<SlideShow />', () => {
   it('The SlideShow has 5 slides', () => {
     const SlideShowWindow = mount(<SlideShow />);
-    expect(SlideShowWindow.find('.slide').length).toBe(5);
+    expect(SlideShowWindow.find(SingleSlide).length).toBe(5);
   });
-  it('Clicking on buttons does not change the center position', () => {
-    const SlideShowWindow = mount(<SlideShow />);
-    expect(SlideShowWindow.find('.slide').at(2).hasClass('center')).toBe(true);
-    SlideShowWindow.find('button.right').simulate('click');
-    expect(SlideShowWindow.find('.slide').at(2).hasClass('center')).toBe(true);
-    SlideShowWindow.find('button.left').simulate('click');
-    expect(SlideShowWindow.find('.slide').at(2).hasClass('center')).toBe(true);
+
+  it('Snapshot testing clicking button behavior', () => {
+    let SlideShowWindow = mount(<SlideShow />);
+    let tree = toJson(SlideShowWindow);
+    expect(tree).toMatchSnapshot();
+    SlideShowWindow.find(Button).at(0).simulate('click');
+    tree = toJson(SlideShowWindow);
+    expect(tree).toMatchSnapshot();
+    SlideShowWindow.find(Button).at(1).simulate('click');
+    tree = toJson(SlideShowWindow);
+    expect(tree).toMatchSnapshot();
   });
 
   it('Clicking on buttons add z-index style to the corresponding box', () => {
     const SlideShowWindow = mount(<SlideShow />);
-    SlideShowWindow.find('button.left').simulate('click');
-    expect(SlideShowWindow.find('.slide4').props().style.zIndex).toBeTruthy();
-    expect(SlideShowWindow.find('.slide0').props().style.zIndex).toBeFalsy();
-    SlideShowWindow.find('button.right').simulate('click');
-    expect(SlideShowWindow.find('.slide0').props().style.zIndex).toBeTruthy();
-    expect(SlideShowWindow.find('.slide4').props().style.zIndex).toBeFalsy();
+    SlideShowWindow.find(Button).at(0).simulate('click');
+    let Slide0 = SlideShowWindow.find(SingleSlide).at(0);
+    let Slide4 = SlideShowWindow.find(SingleSlide).at(4);
+    expect(Slide4.prop('zIndex')).toBeTruthy();
+    expect(Slide0.prop('zIndex')).toBeFalsy();
+    SlideShowWindow.find(Button).at(1).simulate('click');
+    Slide0 = SlideShowWindow.find(SingleSlide).at(0);
+    Slide4 = SlideShowWindow.find(SingleSlide).at(4);
+    expect(Slide0.prop('zIndex')).toBeTruthy();
+    expect(Slide4.prop('zIndex')).toBeFalsy();
   });
 });

src/__test__/__snapshots__/SlideShow.test.js.snap

@@ -0,0 +1,628 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SlideShow /> Snapshot testing clicking button behavior 1`] = `
+<ModalDemo>
+  <div>
+    <SharedTile>
+      <h2>
+        Comments
+      </h2>
+    </SharedTile>
+    <p>
+      Clicking the button will slide the blocks and the center block is always colored. The animation is borrowed from React-flip-move library with some hack. Overall doing transition animation in React is a bit hard.
+       
+    </p>
+    <hr />
+    <SlideShow>
+      <div
+        className="slideshow"
+      >
+        <styled.button
+          onClick={[Function]}
+        >
+          <button
+            className="sc-bdVaJa hfyYsj"
+            onClick={[Function]}
+          >
+            &lt;
+          </button>
+        </styled.button>
+        <div
+          className="slide-group"
+        >
+          <FlipMovePropConverter
+            delay={0}
+            disableAllAnimations={false}
+            duration={600}
+            easing="ease-in-out"
+            enterAnimation="elevator"
+            getPosition={[Function]}
+            leaveAnimation="elevator"
+            maintainContainerHeight={false}
+            staggerDelayBy={0}
+            staggerDurationBy={0}
+            typeName="div"
+            verticalAlignment="top"
+          >
+            <FlipMove
+              delay={0}
+              delegated={
+                Object {
+                  "style": Object {
+                    "position": "relative",
+                  },
+                }
+              }
+              disableAllAnimations={false}
+              duration={600}
+              easing="ease-in-out"
+              enterAnimation={
+                Object {
+                  "from": Object {
+                    "opacity": "0",
+                    "transform": "scale(0)",
+                  },
+                  "to": Object {
+                    "opacity": "",
+                    "transform": "",
+                  },
+                }
+              }
+              getPosition={[Function]}
+              leaveAnimation={
+                Object {
+                  "from": Object {
+                    "opacity": "1",
+                    "transform": "scale(1)",
+                  },
+                  "to": Object {
+                    "opacity": "0",
+                    "transform": "scale(0)",
+                  },
+                }
+              }
+              maintainContainerHeight={false}
+              staggerDelayBy={0}
+              staggerDurationBy={0}
+              typeName="div"
+              verticalAlignment="top"
+            >
+              <div
+                style={
+                  Object {
+                    "position": "relative",
+                  }
+                }
+              >
+                <Slide
+                  center=""
+                  index={0}
+                  slide={0}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={0}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH doglcs"
+                    >
+                      <h2>
+                        0
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=""
+                  index={1}
+                  slide={1}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={1}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH ibyLJJ"
+                    >
+                      <h2>
+                        1
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=" center"
+                  index={2}
+                  slide={2}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={2}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH fdFopt"
+                    >
+                      <h2>
+                        2
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=""
+                  index={3}
+                  slide={3}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={3}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH ibyLJJ"
+                    >
+                      <h2>
+                        3
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=""
+                  index={4}
+                  slide={4}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={4}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH doglcs"
+                    >
+                      <h2>
+                        4
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+              </div>
+            </FlipMove>
+          </FlipMovePropConverter>
+        </div>
+        <styled.button
+          onClick={[Function]}
+        >
+          <button
+            className="sc-bdVaJa hfyYsj"
+            onClick={[Function]}
+          >
+            &gt;
+          </button>
+        </styled.button>
+      </div>
+    </SlideShow>
+  </div>
+</ModalDemo>
+`;
+
+exports[`<SlideShow /> Snapshot testing clicking button behavior 2`] = `
+<ModalDemo>
+  <div>
+    <SharedTile>
+      <h2>
+        Comments
+      </h2>
+    </SharedTile>
+    <p>
+      Clicking the button will slide the blocks and the center block is always colored. The animation is borrowed from React-flip-move library with some hack. Overall doing transition animation in React is a bit hard.
+       
+    </p>
+    <hr />
+    <SlideShow>
+      <div
+        className="slideshow"
+      >
+        <styled.button
+          onClick={[Function]}
+        >
+          <button
+            className="sc-bdVaJa hfyYsj"
+            onClick={[Function]}
+          >
+            &lt;
+          </button>
+        </styled.button>
+        <div
+          className="slide-group"
+        >
+          <FlipMovePropConverter
+            delay={0}
+            disableAllAnimations={false}
+            duration={600}
+            easing="ease-in-out"
+            enterAnimation="elevator"
+            getPosition={[Function]}
+            leaveAnimation="elevator"
+            maintainContainerHeight={false}
+            staggerDelayBy={0}
+            staggerDurationBy={0}
+            typeName="div"
+            verticalAlignment="top"
+          >
+            <FlipMove
+              delay={0}
+              delegated={
+                Object {
+                  "style": Object {
+                    "position": "relative",
+                  },
+                }
+              }
+              disableAllAnimations={false}
+              duration={600}
+              easing="ease-in-out"
+              enterAnimation={
+                Object {
+                  "from": Object {
+                    "opacity": "0",
+                    "transform": "scale(0)",
+                  },
+                  "to": Object {
+                    "opacity": "",
+                    "transform": "",
+                  },
+                }
+              }
+              getPosition={[Function]}
+              leaveAnimation={
+                Object {
+                  "from": Object {
+                    "opacity": "1",
+                    "transform": "scale(1)",
+                  },
+                  "to": Object {
+                    "opacity": "0",
+                    "transform": "scale(0)",
+                  },
+                }
+              }
+              maintainContainerHeight={false}
+              staggerDelayBy={0}
+              staggerDurationBy={0}
+              typeName="div"
+              verticalAlignment="top"
+            >
+              <div
+                style={
+                  Object {
+                    "position": "relative",
+                  }
+                }
+              >
+                <Slide
+                  center=""
+                  index={0}
+                  slide={1}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={0}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH doglcs"
+                    >
+                      <h2>
+                        1
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=""
+                  index={1}
+                  slide={2}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={1}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH ibyLJJ"
+                    >
+                      <h2>
+                        2
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=" center"
+                  index={2}
+                  slide={3}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={2}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH fdFopt"
+                    >
+                      <h2>
+                        3
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=""
+                  index={3}
+                  slide={4}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={3}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH ibyLJJ"
+                    >
+                      <h2>
+                        4
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=""
+                  index={4}
+                  slide={0}
+                  zIndex={-10}
+                >
+                  <styled.div
+                    index={4}
+                    zIndex={-10}
+                  >
+                    <div
+                      className="sc-bwzfXH cRmtGE"
+                    >
+                      <h2>
+                        0
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+              </div>
+            </FlipMove>
+          </FlipMovePropConverter>
+        </div>
+        <styled.button
+          onClick={[Function]}
+        >
+          <button
+            className="sc-bdVaJa hfyYsj"
+            onClick={[Function]}
+          >
+            &gt;
+          </button>
+        </styled.button>
+      </div>
+    </SlideShow>
+  </div>
+</ModalDemo>
+`;
+
+exports[`<SlideShow /> Snapshot testing clicking button behavior 3`] = `
+<ModalDemo>
+  <div>
+    <SharedTile>
+      <h2>
+        Comments
+      </h2>
+    </SharedTile>
+    <p>
+      Clicking the button will slide the blocks and the center block is always colored. The animation is borrowed from React-flip-move library with some hack. Overall doing transition animation in React is a bit hard.
+       
+    </p>
+    <hr />
+    <SlideShow>
+      <div
+        className="slideshow"
+      >
+        <styled.button
+          onClick={[Function]}
+        >
+          <button
+            className="sc-bdVaJa hfyYsj"
+            onClick={[Function]}
+          >
+            &lt;
+          </button>
+        </styled.button>
+        <div
+          className="slide-group"
+        >
+          <FlipMovePropConverter
+            delay={0}
+            disableAllAnimations={false}
+            duration={600}
+            easing="ease-in-out"
+            enterAnimation="elevator"
+            getPosition={[Function]}
+            leaveAnimation="elevator"
+            maintainContainerHeight={false}
+            staggerDelayBy={0}
+            staggerDurationBy={0}
+            typeName="div"
+            verticalAlignment="top"
+          >
+            <FlipMove
+              delay={0}
+              delegated={
+                Object {
+                  "style": Object {
+                    "position": "relative",
+                  },
+                }
+              }
+              disableAllAnimations={false}
+              duration={600}
+              easing="ease-in-out"
+              enterAnimation={
+                Object {
+                  "from": Object {
+                    "opacity": "0",
+                    "transform": "scale(0)",
+                  },
+                  "to": Object {
+                    "opacity": "",
+                    "transform": "",
+                  },
+                }
+              }
+              getPosition={[Function]}
+              leaveAnimation={
+                Object {
+                  "from": Object {
+                    "opacity": "1",
+                    "transform": "scale(1)",
+                  },
+                  "to": Object {
+                    "opacity": "0",
+                    "transform": "scale(0)",
+                  },
+                }
+              }
+              maintainContainerHeight={false}
+              staggerDelayBy={0}
+              staggerDurationBy={0}
+              typeName="div"
+              verticalAlignment="top"
+            >
+              <div
+                style={
+                  Object {
+                    "position": "relative",
+                  }
+                }
+              >
+                <Slide
+                  center=""
+                  index={0}
+                  slide={0}
+                  zIndex={-10}
+                >
+                  <styled.div
+                    index={0}
+                    zIndex={-10}
+                  >
+                    <div
+                      className="sc-bwzfXH cRmtGE"
+                    >
+                      <h2>
+                        0
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=""
+                  index={1}
+                  slide={1}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={1}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH ibyLJJ"
+                    >
+                      <h2>
+                        1
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=" center"
+                  index={2}
+                  slide={2}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={2}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH fdFopt"
+                    >
+                      <h2>
+                        2
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=""
+                  index={3}
+                  slide={3}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={3}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH ibyLJJ"
+                    >
+                      <h2>
+                        3
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+                <Slide
+                  center=""
+                  index={4}
+                  slide={4}
+                  zIndex={null}
+                >
+                  <styled.div
+                    index={4}
+                    zIndex={null}
+                  >
+                    <div
+                      className="sc-bwzfXH doglcs"
+                    >
+                      <h2>
+                        4
+                      </h2>
+                    </div>
+                  </styled.div>
+                </Slide>
+              </div>
+            </FlipMove>
+          </FlipMovePropConverter>
+        </div>
+        <styled.button
+          onClick={[Function]}
+        >
+          <button
+            className="sc-bdVaJa hfyYsj"
+            onClick={[Function]}
+          >
+            &gt;
+          </button>
+        </styled.button>
+      </div>
+    </SlideShow>
+  </div>
+</ModalDemo>
+`;

src/components/App/style.js

@@ -2,11 +2,10 @@ import styled from 'styled-components';
 
 const Header = styled.div`
   text-align: center;
- background-color: #da3f3d;
+  background-color: #da3f3d;
   height: 100px;
-  padding: 20px;
   color: white;
-flex: 0 1 100%;
+  flex: 0 1 100%;
 `;
 
 const Logo = styled.img`

src/components/Form/index.js

@@ -5,7 +5,7 @@ import Code from '../Utils/Code';
 
 const FormDemo = () => {
   return (
-    <div>
+    <div style={{ display: 'inline-block', wordWrap: 'break-word' }}>
       <SharedTile />
       <p>
         This form is constructed purely in React without any external library.

src/components/Form/style.css

@@ -40,7 +40,3 @@ label {
 input[type=submit] {
     margin: 8px 0;
 }
-
-form {
-    width: 500px;
-}

src/components/Nav/style.js

@@ -1,35 +1,36 @@
 import styled from 'styled-components';
 
 const NavUl = styled.ul`
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background-color: #333;
-    height: auto;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+  height: auto;
 
-@media  (max-width: 800px) {
-        height: auto;
-        width: 100vw;
-}
+  @media (max-width: 800px) {
+     height: auto;
+     width: 100vw;
+  }
 `;
 
 const NavLi = styled.li`
-width: 100px;
-a {
+  width: 100px;
+  a {
     display: block;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
-}
+  }
 
- a:hover {
+  a:hover {
     background-color: #111;
-}
+  }
 
-@media  (max-width: 800px) {
-        float: left;
-}
+  @media (max-width: 800px) {
+    float: left;
+  }
 `;
+
 export { NavUl, NavLi };

src/components/SlideShow/SlideShow.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import FlipMove from 'react-flip-move';
+import { Button, SingleSlide } from './style';
 
 class Slide extends React.Component {
   static propTypes = {
@@ -9,11 +10,10 @@ class Slide extends React.Component {
     zIndex: PropTypes.number
   };
   render() {
-    const className = 'slide slide' + this.props.index + this.props.center;
     return (
-      <div className={className} style={{ zIndex: this.props.zIndex }}>
+      <SingleSlide index={this.props.index} zIndex={this.props.zIndex}>
         <h2>{this.props.slide}</h2>
-      </div>
+      </SingleSlide>
     );
   }
 }
@@ -75,13 +75,13 @@ export default class SlideShow extends React.Component {
   render() {
     return (
       <div className="slideshow">
-        <button className="left" onClick={this.handleLeftClick}>
+        <Button onClick={this.handleLeftClick}>
           &lt;
-        </button>
+        </Button>
         {this.renderSlides()}
-        <button className="right" onClick={this.handleRightClick}>
+        <Button onClick={this.handleRightClick}>
           &gt;
-        </button>
+        </Button>
       </div>
     );
   }

src/components/SlideShow/index.js

@@ -2,8 +2,6 @@ import React from 'react';
 import SlideShow from './SlideShow';
 import SharedTitle from '../Utils/SharedTitle.jsx';
 
-import './style.css';
-
 const ModalDemo = () =>
   <div>
     <SharedTitle />

src/components/SlideShow/style.css

@@ -1,26 +0,0 @@
-.slide0, .slide4, .slide1, .slide2, .slide3 {
-	width: 10vw;
-	height: 100px;
-	border: 2px solid black;
-	text-align: center;
-	float: left;
-	background-color: #fff;
-}
-
-.slide4 {
-	position: relative;
-	z-index: -1;
-}
-
-.slide0 {
-	position: relative;
-	z-index: -1;
-}
-.slide.center {
-	background-color: #666; 
-    transition: background-color 1000ms linear;
-}
-button.left, button.right {
-	height: 104px;
-	float: left;
-}

src/components/SlideShow/style.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+	height: 104px;
+	float: left;
+`;
+
+const SingleSlide = styled.div`
+	width: 10vw;
+	height: 100px;
+	border: 2px solid black;
+	text-align: center;
+	float: left;
+	background-color: #fff;
+  ${props => {
+    if (props.index === 2) {
+      return `background-color: #666`;
+    } else if (props.index === 0 || props.index === 4) {
+      return `position: relative;
+             z-index: -1;`;
+    }
+  }};
+  z-index: ${props => props.zIndex}
+`;
+
+export { Button, SingleSlide };

src/globalStyle.js

@@ -4,6 +4,7 @@ injectGlobal`
 body {
 margin: 0;
 padding: 0;
+width: 100%;
 font-family: sans-serif;
 }
 `;

src/style.js

@@ -7,11 +7,13 @@ const Container = styled.div`
 `;
 
 const ComponentWrapper = styled.div`
-    width: 100%;
-	padding: 20px;
-@media screen and (min-width: 800px) {
+  display: inline-block;
+  margin: 0;
+  padding: 20px;
+  overflow: hidden;
+  @media (min-width: 800px) {
     width: 70vw;
-}
+  }
 `;
 
 export { Container, ComponentWrapper };