From c7401b0a57cf922b9930e6068dc6b7fe02dbfdc6 Mon Sep 17 00:00:00 2001 From: vinkabuki Date: Tue, 1 Sep 2020 18:44:33 +0200 Subject: [PATCH] test --- .github/workflows/test.yml | 0 package-lock.json | 19 +++ package.json | 2 + src/MovieCard.test.tsx | 19 +++ src/MovieCard.tsx | 32 ++--- src/MoviesCards.test.tsx | 28 ++++ src/MoviesCards.tsx | 8 +- src/__snapshots__/MovieCard.test.tsx.snap | 144 ++++++++++++++++++++ src/__snapshots__/MoviesCards.test.tsx.snap | 7 + 9 files changed, 233 insertions(+), 26 deletions(-) create mode 100644 .github/workflows/test.yml create mode 100644 src/__snapshots__/MovieCard.test.tsx.snap create mode 100644 src/__snapshots__/MoviesCards.test.tsx.snap diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..e69de29 diff --git a/package-lock.json b/package-lock.json index 293066e..ccb4c42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7941,6 +7941,14 @@ "semver": "^6.2.0" } }, + "jest-styled-components": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-7.0.3.tgz", + "integrity": "sha512-jj9sWyshehUnB0P9WFUaq9Bkh6RKYO8aD8lf3gUrXRwg/MRddTFk7U9D9pC4IAI3v9fbz4vmrMxwaecTpG8NKA==", + "requires": { + "css": "^2.2.4" + } + }, "jest-util": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-24.9.0.tgz", @@ -11317,6 +11325,17 @@ "prop-types": "^15.6.2" } }, + "react-test-renderer": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz", + "integrity": "sha512-Sn2VRyOK2YJJldOqoh8Tn/lWQ+ZiKhyZTPtaO0Q6yNj+QDbmRkVFap6pZPy3YQk8DScRDfyqm/KxKYP9gCMRiQ==", + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "react-is": "^16.8.6", + "scheduler": "^0.19.1" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/package.json b/package.json index d191b1a..326ab0f 100644 --- a/package.json +++ b/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" }, diff --git a/src/MovieCard.test.tsx b/src/MovieCard.test.tsx index e69de29..7987d72 100644 --- a/src/MovieCard.test.tsx +++ b/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() + const tree = component.toJSON() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/src/MovieCard.tsx b/src/MovieCard.tsx index 599ba90..5a89397 100644 --- a/src/MovieCard.tsx +++ b/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 = ({ item }: IProps) => { + const [expanded, setExpanded] = useState(false) - const Expand = () => { - if (expanded) { - setExpanded(false) - } else { - setExpanded(true) - } - } + const onClickHandler = () => setExpanded(!expanded) return ( <> @@ -123,13 +117,7 @@ export const MovieCard = ({ item }: IProps) => { {item.summary} - { - Expand() - }} - > - i - + i {item.title} {item.rating}/10 diff --git a/src/MoviesCards.test.tsx b/src/MoviesCards.test.tsx index e69de29..1ed46e2 100644 --- a/src/MoviesCards.test.tsx +++ b/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() + const tree = component.toJSON() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/src/MoviesCards.tsx b/src/MoviesCards.tsx index 74ccd4c..3e77fd6 100644 --- a/src/MoviesCards.tsx +++ b/src/MoviesCards.tsx @@ -33,11 +33,11 @@ const MainButton = styled.button` height: 60px; } ` -interface items { +interface IProps { movies: Array } -function MoviesCards({ movies }: items) { +const MoviesCards: React.FC = ({ 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 ( <> -
+
diff --git a/src/__snapshots__/MovieCard.test.tsx.snap b/src/__snapshots__/MovieCard.test.tsx.snap new file mode 100644 index 0000000..4e2846b --- /dev/null +++ b/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); + } +} + +
+
+

+ + Matrix + +

+

+ + 6.7 + /10 + +

+

+ + lorem ipsum + +

+
+ +
+

+ Matrix +

+

+ 6.7 + /10 +

+

+ lorem ipsum +

+
+
+`; diff --git a/src/__snapshots__/MoviesCards.test.tsx.snap b/src/__snapshots__/MoviesCards.test.tsx.snap new file mode 100644 index 0000000..28e5ece --- /dev/null +++ b/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`] = ` +
+ rendering +
+`;