test

package.json

@@ -13,10 +13,12 @@
     "@types/react-dom": "^16.9.0",
     "axios": "^0.20.0",
     "eslint": "^6.6.0",
+    "jest-styled-components": "^7.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.3",
     "react-swipeable": "^5.5.1",
+    "react-test-renderer": "^16.13.1",
     "styled-components": "^5.1.1",
     "typescript": "^4.0.2"
   },

src/MovieCard.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import 'jest-styled-components'
+import MovieCard from './MovieCard'
+
+describe('MoviesCards component basic render test', () => {
+  const currentItem = {
+    id: 'cool99',
+    imageURL: 'https://google.com/images.jpg',
+    title: 'Matrix',
+    summary: 'lorem ipsum',
+    rating: 6.7
+  }
+  test('Render example movie item', () => {
+    const component = renderer.create(<MovieCard item={currentItem} />)
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

src/MovieCard.tsx

@@ -21,7 +21,7 @@ const InfoBox = styled.div`
   position: absolute;
   bottom: 20px;
   display: ${(props) => {
-    if (!props.isVisible) {
+    if (props.isVisible) {
       return 'none'
     }
   }};
@@ -38,22 +38,22 @@ const ExpandBox = styled.div`
   }
 
   display: ${(props) => {
-    if (props.isVisible) {
+    if (!props.isVisible) {
       return 'none'
     }
   }};
 `
 const MovieTitle = styled.h1`
   text-align: left;
-  color: ${(props) => (props.expanded ? 'white' : 'black')};
+  color: ${(props) => (props.expanded ? 'black' : 'white')};
 `
 const MovieSummary = styled.p`
   text-align: left;
-  color: ${(props) => (props.expanded ? 'white' : 'black')};
+  color: ${(props) => (props.expanded ? 'black' : 'white')};
 `
 const MovieRating = styled.p`
   text-align: left;
-  color: ${(props) => (props.expanded ? 'white' : 'black')};
+  color: ${(props) => (props.expanded ? 'black' : 'white')};
 `
 const TextSpan = styled.span`
   background-color: rgba(0, 0, 0, 0.3);
@@ -94,20 +94,14 @@ interface IProps {
     imageURL: string
     title: string
     summary: string
-    rating: string
+    rating: number
   }
 }
 
-export const MovieCard = ({ item }: IProps) => {
-  const [expanded, setExpanded] = useState(true)
+const MovieCard: React.FC<IProps> = ({ item }: IProps) => {
+  const [expanded, setExpanded] = useState<boolean>(false)
 
-  const Expand = () => {
-    if (expanded) {
-      setExpanded(false)
-    } else {
-      setExpanded(true)
-    }
-  }
+  const onClickHandler = () => setExpanded(!expanded)
 
   return (
     <>
@@ -123,13 +117,7 @@ export const MovieCard = ({ item }: IProps) => {
             <TextSpan>{item.summary}</TextSpan>
           </MovieSummary>
         </InfoBox>
-        <SecondaryButton
-          onClick={() => {
-            Expand()
-          }}
-        >
-          i
-        </SecondaryButton>
+        <SecondaryButton onClick={onClickHandler}>i</SecondaryButton>
         <ExpandBox isVisible={expanded}>
           <MovieTitle expanded={expanded}>{item.title}</MovieTitle>
           <MovieRating expanded={expanded}>{item.rating}/10</MovieRating>

src/MoviesCards.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import 'jest-styled-components'
+import MoviesCards from './MoviesCards'
+
+describe('MoviesCards component basic render test', () => {
+  const movies = [
+    {
+      id: 'cool99',
+      imageURL: 'https://google.com/images.jpg',
+      title: 'Matrix',
+      summary: 'lorem ipsum',
+      rating: 6.7
+    },
+    {
+      id: 'daddy78',
+      imageURL: 'https://google.com/imagesDaddy.jpg',
+      title: 'Avatar',
+      summary: 'cool movie',
+      rating: 9.9
+    }
+  ]
+  test('Render example movie item', () => {
+    const component = renderer.create(<MoviesCards movies={movies} />)
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

src/MoviesCards.tsx

@@ -33,11 +33,11 @@ const MainButton = styled.button`
     height: 60px;
   }
 `
-interface items {
+interface IProps {
   movies: Array<object>
 }
 
-function MoviesCards({ movies }: items) {
+const MoviesCards: React.FC<IProps> = ({ movies }: IProps) => {
   const [count, setCount] = useState(0)
   const [currentItem, setCurrentItem] = useState(null)
 
@@ -55,7 +55,7 @@ function MoviesCards({ movies }: items) {
   }
   const onSwipeHandler = useSwipeable({
     onSwipedLeft: () => {
-      onRejectHandler(currentItem.id)
+      onAcceptHandler(currentItem.id)
     },
     onSwipedRight: () => {
       onRejectHandler(currentItem.id)
@@ -68,7 +68,7 @@ function MoviesCards({ movies }: items) {
   } else {
     return (
       <>
-        <div {...onSwipeHandler}>
+        <div className="" {...onSwipeHandler}>
           <MovieCard item={currentItem}></MovieCard>
         </div>
         <ButtonsBox>

src/__snapshots__/MovieCard.test.tsx.snap

@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MoviesCards component basic render test Render example movie item 1`] = `
+.c0 {
+  position: relative;
+  margin: auto;
+  border-radius: 10px;
+  overflow: hidden;
+  background-image: url(https://google.com/images.jpg);
+  background-size: 100%;
+  background-repeat: no-repeat;
+  min-height: 580px;
+  box-shadow: 10px 7px 65px -13px rgba(0,0,0,0.75);
+}
+
+.c1 {
+  padding: 20px;
+  position: absolute;
+  bottom: 20px;
+}
+
+.c7 {
+  box-sizing: border-box;
+  padding: 40px;
+  max-width: 400px;
+  width: 100%;
+  margin: auto;
+  margin-top: 590px;
+  display: none;
+}
+
+.c2 {
+  text-align: left;
+  color: white;
+}
+
+.c5 {
+  text-align: left;
+  color: white;
+}
+
+.c4 {
+  text-align: left;
+  color: white;
+}
+
+.c3 {
+  background-color: rgba(0,0,0,0.3);
+}
+
+.c6 {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  border-radius: 90px;
+  cursor: pointer;
+  border: none;
+  font-size: 14px;
+  outline: 0;
+  box-shadow: 0 0 0 0 rgba(0,0,0,1);
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-animation: pulse 2s infinite;
+  animation: pulse 2s infinite;
+}
+
+@media (max-width:400px) {
+  .c0 {
+    min-height: calc(100vw * 1.45);
+  }
+}
+
+@media (max-width:400px) {
+  .c7 {
+    margin-top: calc(100vw * 1.45);
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <h1
+      className="c2"
+    >
+      <span
+        className="c3"
+      >
+        Matrix
+      </span>
+    </h1>
+    <p
+      className="c4"
+    >
+      <span
+        className="c3"
+      >
+        6.7
+        /10
+      </span>
+    </p>
+    <p
+      className="c5"
+    >
+      <span
+        className="c3"
+      >
+        lorem ipsum
+      </span>
+    </p>
+  </div>
+  <button
+    className="c6"
+    onClick={[Function]}
+  >
+    i
+  </button>
+  <div
+    className="c7"
+  >
+    <h1
+      className="c2"
+    >
+      Matrix
+    </h1>
+    <p
+      className="c4"
+    >
+      6.7
+      /10
+    </p>
+    <p
+      className="c5"
+    >
+      lorem ipsum
+    </p>
+  </div>
+</div>
+`;

src/__snapshots__/MoviesCards.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MoviesCards component basic render test Render example movie item 1`] = `
+<div>
+  rendering
+</div>
+`;