From 9b959b46ec591d5a7078773f418790516d76908c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Pe=C3=B1a=20Vasquez?= Date: Wed, 23 Sep 2020 20:49:17 -0400 Subject: [PATCH 1/8] Feature: Card component added --- src/components/developerCard.tsx | 217 +++++++++++++++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 src/components/developerCard.tsx diff --git a/src/components/developerCard.tsx b/src/components/developerCard.tsx new file mode 100644 index 0000000..545c2c2 --- /dev/null +++ b/src/components/developerCard.tsx @@ -0,0 +1,217 @@ +import React from "react" +import styled from "styled-components" +import "@fortawesome/fontawesome-free/js/all.js" + +type Props = { + DeveloperName: string + Initials: string + Image: string + SummaryDeveloper: string + SkillsList: string[] + WebPage?: string + Twitter?: string + Github?: string + linkedin?: string +} + +const CardDiv = styled.div` + border-radius: 1.5rem; + box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.03); + -webkit-transition: transform 375ms ease-in-out, box-shadow 375ms ease-out; + transition: transform 375ms ease-in-out, box-shadow 375ms ease-out; + width: 25%; + + &:hover { + transform: scale(1.05); + z-index: 1000; + background-color: #fff; + box-shadow: 0 0 20px -2px rgba(0, 0, 0, 0.3); + } +` + +const Photo = styled.img` + border-top-left-radius: calc(0.5rem - 1px); + border-top-right-radius: calc(0.5rem - 1px); + -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ + filter: grayscale(100%); + transition: all 375ms ease-in-out; + width: 100%; + height: 15vw; + object-fit: cover; + object-position: 0 -10px; + &:hover { + -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ + filter: grayscale(0%); + } +` +const CardContent = styled.div` + padding: 4%; +` + +const NameRow = styled.div` + display: flex; + align-items: center; + margin-bottom: 3px; + margin-top: -1.5rem; +` + +const InitialName = styled.h6` + position: relative; + color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + font-size: 1rem; + font-weight: bold; + height: 3.125rem; + width: 3.125rem; + border-radius: 0.375rem; +` +const CicleContainer = styled.div` + border-radius: 50%; + height: 3.125rem; + width: 3.145rem; + background-color: #343a40; + margin-right: 1em; +` + +const Name = styled.h6` + font-size: 1rem; +` + +const InfoSkill = styled.section` + justify-content: center; + margin: 0.3rem 0; + height: 25px; + margin-bottom: 3px; +` + +const InfoSpace = styled(InfoSkill)` + display: flex; + overflow: hidden; + justify-content: center; + scrollbar-width: thin; + padding: 0.2rem; +` +const BadgeSkill = styled.div` + height: 20px; + background-color: #343a40; + display: inline-block; + font-size: 75%; + font-weight: 700; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 10rem; + color: #fff; + padding: 6px; + margin-right: 2px; +` +const Skill = styled.span`` + +const Summary = styled.div` + height: 100px; + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + scrollbar-width: thin; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace !important; + &:hover { + overflow: auto; + } + &::-webkit-scrollbar { + height: 4px; + width: 4px; + } + + &::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 10px; + } + %::-webkit-scrollbar-thumb { + border-radius: 10px; + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); + } +` + +const SocialNetworks = styled.div` + font-size: large; +` + +const Media = styled.a` + color: #343a40; + margin-right: 3px; +` + +const DeveloperCard: React.FC = ({ + DeveloperName, + Initials, + Image, + SkillsList, + SummaryDeveloper, + WebPage, + Github, + Twitter, + linkedin, +}) => { + return ( + + + + + + {Initials} + + {DeveloperName} + + + + + {SkillsList.map(skill => ( + + {skill} + + ))} + + + + +

+ {SummaryDeveloper} +

+ + + {WebPage != null && ( + + + + )} + + {linkedin != null && ( + + + + )} + + {Twitter != null && ( + + + + )} + + {Github != null && ( + + + + )} + + + + ) +} + +export default DeveloperCard From 6aed0b443cb5d6f2facdb46150c4aef165233306 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Pe=C3=B1a=20Vasquez?= Date: Fri, 25 Sep 2020 16:56:26 -0400 Subject: [PATCH 2/8] Fix: change Props from PascalCase to camelCase --- src/components/developerCard.tsx | 54 ++++++++++++++++---------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/components/developerCard.tsx b/src/components/developerCard.tsx index 545c2c2..d4a5543 100644 --- a/src/components/developerCard.tsx +++ b/src/components/developerCard.tsx @@ -3,14 +3,14 @@ import styled from "styled-components" import "@fortawesome/fontawesome-free/js/all.js" type Props = { - DeveloperName: string - Initials: string - Image: string - SummaryDeveloper: string - SkillsList: string[] - WebPage?: string - Twitter?: string - Github?: string + developerName: string + initials: string + image: string + summaryDeveloper: string + skillsList: string[] + webPage?: string + twitter?: string + github?: string linkedin?: string } @@ -148,30 +148,30 @@ const Media = styled.a` ` const DeveloperCard: React.FC = ({ - DeveloperName, - Initials, - Image, - SkillsList, - SummaryDeveloper, - WebPage, - Github, - Twitter, + developerName, + initials, + image, + skillsList, + summaryDeveloper, + webPage, + github, + twitter, linkedin, }) => { return ( - + - {Initials} + {initials} - {DeveloperName} + {developerName} - {SkillsList.map(skill => ( + {skillsList.map(skill => ( {skill} @@ -181,12 +181,12 @@ const DeveloperCard: React.FC = ({

- {SummaryDeveloper} + {summaryDeveloper}

- {WebPage != null && ( - + {webPage != null && ( + )} @@ -197,14 +197,14 @@ const DeveloperCard: React.FC = ({ )} - {Twitter != null && ( - + {twitter != null && ( + )} - {Github != null && ( - + {github != null && ( + )} From 54a178690a781bb6d0c656972d1ed488b6c1e017 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Pe=C3=B1a=20Vasquez?= Date: Sun, 27 Sep 2020 18:52:32 -0400 Subject: [PATCH 3/8] Fix:Adding Hover effects on the skills section and and fixing some style on components --- src/components/developerCard.tsx | 72 ++++++++++++++++++++++++++------ 1 file changed, 59 insertions(+), 13 deletions(-) diff --git a/src/components/developerCard.tsx b/src/components/developerCard.tsx index d4a5543..6603d08 100644 --- a/src/components/developerCard.tsx +++ b/src/components/developerCard.tsx @@ -15,11 +15,13 @@ type Props = { } const CardDiv = styled.div` - border-radius: 1.5rem; + margin-bottom: 1rem !important; + border: 0 !important; + border-radius: 0.5rem; box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.03); -webkit-transition: transform 375ms ease-in-out, box-shadow 375ms ease-out; transition: transform 375ms ease-in-out, box-shadow 375ms ease-out; - width: 25%; + width: 26%; &:hover { transform: scale(1.05); @@ -29,6 +31,10 @@ const CardDiv = styled.div` } ` +const PhotoDiv = styled.div` + height: 100% !important; +` + const Photo = styled.img` border-top-left-radius: calc(0.5rem - 1px); border-top-right-radius: calc(0.5rem - 1px); @@ -81,18 +87,50 @@ const Name = styled.h6` ` const InfoSkill = styled.section` - justify-content: center; margin: 0.3rem 0; - height: 25px; - margin-bottom: 3px; + height: 35px; + overflow: hidden; + + &:hover { + overflow: auto; + } + &::-webkit-scrollbar { + height: 4px; + width: 4px; + } + + &::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 10px; + } + %::-webkit-scrollbar-thumb { + border-radius: 10px; + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); + } ` -const InfoSpace = styled(InfoSkill)` +const InfoSpace = styled.div` display: flex; overflow: hidden; - justify-content: center; scrollbar-width: thin; padding: 0.2rem; + + &:hover { + overflow: auto; + } + &::-webkit-scrollbar { + height: 4px; + width: 4px; + } + + &::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 10px; + } + %::-webkit-scrollbar-thumb { + border-radius: 10px; + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); + } ` const BadgeSkill = styled.div` height: 20px; @@ -111,9 +149,10 @@ const BadgeSkill = styled.div` ` const Skill = styled.span`` -const Summary = styled.div` +const SummaryDiv = styled.div` height: 100px; display: flex; + font-size: 75% flex-direction: column; justify-content: center; overflow: hidden; @@ -137,6 +176,11 @@ const Summary = styled.div` box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } ` +const Summary = styled.p` +font-size: 80% + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace !important; +` const SocialNetworks = styled.div` font-size: large; @@ -160,7 +204,9 @@ const DeveloperCard: React.FC = ({ }) => { return ( - + + + @@ -179,11 +225,11 @@ const DeveloperCard: React.FC = ({ - -

+ +

{summaryDeveloper} -

- + + {webPage != null && ( From a80c390a24a3bce4e0edabe9a0ee1100bc5ee4e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Pe=C3=B1a=20Vasquez?= Date: Thu, 1 Oct 2020 22:53:31 -0400 Subject: [PATCH 4/8] Feat: adding test for developerCard component --- .../__snapshots__/developerCard.test.tsx.snap | 569 ++++++++++++++++++ .../__tests__/developerCard.test.tsx | 61 ++ 2 files changed, 630 insertions(+) create mode 100644 src/components/__tests__/__snapshots__/developerCard.test.tsx.snap create mode 100644 src/components/__tests__/developerCard.test.tsx diff --git a/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap b/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap new file mode 100644 index 0000000..8f4a566 --- /dev/null +++ b/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap @@ -0,0 +1,569 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Test on DeveloperCard render without social media props 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
+
+
+ +
+
+
+
+
+ JR +
+
+
+ Jose Reyes Campusano +
+
+
+
+
+ + React + +
+
+ + Flutter + +
+
+ + C# + +
+
+ + Swift + +
+
+ + Kotlin + +
+
+
+
+

+ + Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software + +

+
+
+
+
+
+ , + "container":
+
+
+ +
+
+
+
+
+ JR +
+
+
+ Jose Reyes Campusano +
+
+
+
+
+ + React + +
+
+ + Flutter + +
+
+ + C# + +
+
+ + Swift + +
+
+ + Kotlin + +
+
+
+
+

+ + Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software + +

+
+
+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Test on DeveloperCard renders card with initial data 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
+
+
+ +
+
+
+
+
+ JR +
+
+
+ Jose Reyes Campusano +
+
+
+
+
+ + React + +
+
+ + Flutter + +
+
+ + C# + +
+
+ + Swift + +
+
+ + Kotlin + +
+
+
+
+

+ + Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software + +

+
+
+ + + + + + +
+
+
+
+ , + "container":
+
+
+ +
+
+
+
+
+ JR +
+
+
+ Jose Reyes Campusano +
+
+
+
+
+ + React + +
+
+ + Flutter + +
+
+ + C# + +
+
+ + Swift + +
+
+ + Kotlin + +
+
+
+
+

+ + Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software + +

+
+
+ + + + + + +
+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/src/components/__tests__/developerCard.test.tsx b/src/components/__tests__/developerCard.test.tsx new file mode 100644 index 0000000..8c92ab9 --- /dev/null +++ b/src/components/__tests__/developerCard.test.tsx @@ -0,0 +1,61 @@ +import * as React from "react" +import { render } from "@testing-library/react" +import DeveloperCard from "../DeveloperCard" + +describe("Test on DeveloperCard", () => { + const initialData = { + DeveloperName: "Jose Reyes Campusano", + SummaryDeveloper: + "Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software", + Initials: "JR", + Image: + "https://upload.wikimedia.org/wikipedia/commons/3/3f/Juan_Perez_July_2013.jpg", + SkillsList: ["React", "Flutter", "C#", "Swift", "Kotlin"], + linkedin: "https://www.linkedin.com/in/linkeindTest/", + Twitter: "https://twitter.com/TwitterTest", + } + + const card = render( + + ) + + it("renders card with initial data", () => { + expect(card).toMatchSnapshot() + }) + + it("render without social media props", () => { + const card = render( + + ) + expect(card).toMatchSnapshot() + }) + + it("It should find the name on the card", () => { + const testName = "Jose Reyes Campusano" + const { getByText } = render( + + ) + const name = getByText(testName) + expect(name).toBeInTheDocument() + }) +}) From 07dfa94c71a516894352783d4724b5aca6cfe0f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Pe=C3=B1a=20Vasquez?= Date: Sat, 3 Oct 2020 17:19:02 -0400 Subject: [PATCH 5/8] setup: adding react font awesome library --- package.json | 4 ++++ src/components/developerCard.tsx | 18 +++++++++++------ yarn.lock | 33 ++++++++++++++++++++++++++++++++ 3 files changed, 49 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 3fd6b83..c3d7587 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,10 @@ "version": "0.1.0", "author": "Kyle Mathews ", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.31", + "@fortawesome/free-brands-svg-icons": "^5.15.0", + "@fortawesome/free-solid-svg-icons": "^5.15.0", + "@fortawesome/react-fontawesome": "^0.1.11", "babel-plugin-styled-components": "^1.11.1", "gatsby": "^2.24.50", "gatsby-image": "^2.4.16", diff --git a/src/components/developerCard.tsx b/src/components/developerCard.tsx index 6603d08..192e397 100644 --- a/src/components/developerCard.tsx +++ b/src/components/developerCard.tsx @@ -1,6 +1,12 @@ import React from "react" import styled from "styled-components" -import "@fortawesome/fontawesome-free/js/all.js" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { + faGithub, + faLinkedin, + faTwitter, +} from "@fortawesome/free-brands-svg-icons" +import { faGlobeAmericas } from "@fortawesome/free-solid-svg-icons" type Props = { developerName: string @@ -183,7 +189,7 @@ font-size: 80% ` const SocialNetworks = styled.div` - font-size: large; + font-size: x-large; ` const Media = styled.a` @@ -233,25 +239,25 @@ const DeveloperCard: React.FC = ({ {webPage != null && ( - + )} {linkedin != null && ( - + )} {twitter != null && ( - + )} {github != null && ( - + )} diff --git a/yarn.lock b/yarn.lock index c871b9f..7b69729 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1127,6 +1127,39 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== +"@fortawesome/fontawesome-common-types@^0.2.31": + version "0.2.31" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.31.tgz#f15a39e5ab4e5dfda0717733bcacb9580e666ad9" + integrity sha512-xfnPyH6NN5r/h1/qDYoGB0BlHSID902UkQzxR8QsoKDh55KAPr8ruAoie12WQEEQT8lRE2wtV7LoUllJ1HqCag== + +"@fortawesome/fontawesome-svg-core@^1.2.31": + version "1.2.31" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.31.tgz#23fff9c521f1b57e79e4c2fd6cce8aa794e9d99e" + integrity sha512-lqUWRK+ylHQJG5Kiez4XrAZAfc7snxCc+X59quL3xPfMnxzfyf1lt+/hD7X1ZL4KlzAH2KFzMuEVrolo/rAkog== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.31" + +"@fortawesome/free-brands-svg-icons@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.0.tgz#ec8d5f61154580ed28d378b76d1186932392c2a4" + integrity sha512-Qy6sOeSIYfjCQ2CFa/VKQZUo1ycOzoRP7AtITHRp0lmWP1DTgEa1Ow22CgaSh7lNcDbRs5u/v/h2wtjSb2ox4A== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.31" + +"@fortawesome/free-solid-svg-icons@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.0.tgz#6f553f25cdebd7d5ae778598c2ddd3321dd63450" + integrity sha512-4dGRsOnGBPM7c0fd3LuiU6LgRSLn01rw1LJ370yC2iFMLUcLCLLynZhQbMhsiJmMwQM/YmPQblAdyHKVCgsIAA== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.31" + +"@fortawesome/react-fontawesome@^0.1.11": + version "0.1.11" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.11.tgz#c1a95a2bdb6a18fa97b355a563832e248bf6ef4a" + integrity sha512-sClfojasRifQKI0OPqTy8Ln8iIhnxR/Pv/hukBhWnBz9kQRmqi6JSH3nghlhAY7SUeIIM7B5/D2G8WjX0iepVg== + dependencies: + prop-types "^15.7.2" + "@graphql-tools/schema@^6.0.14": version "6.2.0" resolved "https://registry.yarnpkg.com/@graphql-tools/schema/-/schema-6.2.0.tgz#41171cdaeb7d7835a458628f0c546fef2bae3a64" From 9c59bc877ebfece866f5bd10335420904ab12109 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Pe=C3=B1a=20Vasquez?= Date: Tue, 6 Oct 2020 22:01:28 -0400 Subject: [PATCH 6/8] refactor: Wrapping props in profile object. --- .../__snapshots__/developerCard.test.tsx.snap | 848 +++++++----------- .../__tests__/developerCard.test.tsx | 64 +- src/components/developerCard.tsx | 8 +- 3 files changed, 362 insertions(+), 558 deletions(-) diff --git a/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap b/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap index 8f4a566..ac22f9a 100644 --- a/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap @@ -1,569 +1,389 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Test on DeveloperCard render without social media props 1`] = ` -Object { - "asFragment": [Function], - "baseElement": -
+
+
+ +
+
+
-
- -
-
-
-
-
- JR -
-
-
- Jose Reyes Campusano -
-
-
-
-
- - React - -
-
- - Flutter - -
-
- - C# - -
-
- - Swift - -
-
- - Kotlin - -
-
-
-
-

- - Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software - -

-
-
-
+ JR +
+
+ Jose Reyes Campusano +
- , - "container":
-
- -
-
-
-
- JR -
-
-
- Jose Reyes Campusano -
+ React +
-
-
-
- - React - -
-
- - Flutter - -
-
- - C# - -
-
- - Swift - -
-
- - Kotlin - -
-
-
+ Flutter + +
-

- - Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software - -

+ C# +
-
-
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - -exports[`Test on DeveloperCard renders card with initial data 1`] = ` -Object { - "asFragment": [Function], - "baseElement": -
-
-
- + + Swift +
-
-
-
- JR -
-
-
- Jose Reyes Campusano -
-
-
-
-
- - React - -
-
- - Flutter - -
-
- - C# - -
-
- - Swift - -
-
- - Kotlin - -
-
-
-
-

- - Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software - -

-
-
- - - - - - -
+ Kotlin +
+ +
+

+ + Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software + +

+
+ - , - "container":
+
+
+`; + +exports[`Test on DeveloperCard renders card with initial data 1`] = ` +
+
+ +
+
- +
+ JR +
+
+ Jose Reyes Campusano +
+
+
-
-
- JR -
-
-
- Jose Reyes Campusano -
+ React +
-
-
-
- - React - -
-
- - Flutter - -
-
- - C# - -
-
- - Swift - -
-
- - Kotlin - -
-
-
+ Flutter + +
-

- - Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software - -

+ C# +
- - - - +
+
+ - - + Kotlin +
+ +
+

+ + Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software + +

+
+ -
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} +
+
`; diff --git a/src/components/__tests__/developerCard.test.tsx b/src/components/__tests__/developerCard.test.tsx index 8c92ab9..e72d8e5 100644 --- a/src/components/__tests__/developerCard.test.tsx +++ b/src/components/__tests__/developerCard.test.tsx @@ -1,60 +1,44 @@ import * as React from "react" -import { render } from "@testing-library/react" import DeveloperCard from "../DeveloperCard" +import { render } from "@testing-library/react" +import renderer from "react-test-renderer" describe("Test on DeveloperCard", () => { - const initialData = { - DeveloperName: "Jose Reyes Campusano", - SummaryDeveloper: + const initialProfile = { + developerName: "Jose Reyes Campusano", + summaryDeveloper: "Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software", - Initials: "JR", - Image: + initials: "JR", + image: "https://upload.wikimedia.org/wikipedia/commons/3/3f/Juan_Perez_July_2013.jpg", - SkillsList: ["React", "Flutter", "C#", "Swift", "Kotlin"], + skillsList: ["React", "Flutter", "C#", "Swift", "Kotlin"], linkedin: "https://www.linkedin.com/in/linkeindTest/", - Twitter: "https://twitter.com/TwitterTest", + twitter: "https://twitter.com/TwitterTest", } - const card = render( - - ) - it("renders card with initial data", () => { - expect(card).toMatchSnapshot() + const tree = renderer.create() + expect(tree.toJSON()).toMatchSnapshot() }) it("render without social media props", () => { - const card = render( - - ) - expect(card).toMatchSnapshot() + const data = { + developerName: "Jose Reyes Campusano", + summaryDeveloper: + "Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software", + initials: "JR", + image: + "https://upload.wikimedia.org/wikipedia/commons/3/3f/Juan_Perez_July_2013.jpg", + skillsList: ["React", "Flutter", "C#", "Swift", "Kotlin"], + } + const tree = renderer.create().toJSON() + + expect(tree).toMatchSnapshot() }) it("It should find the name on the card", () => { const testName = "Jose Reyes Campusano" - const { getByText } = render( - - ) + const { getByText } = render() const name = getByText(testName) expect(name).toBeInTheDocument() }) diff --git a/src/components/developerCard.tsx b/src/components/developerCard.tsx index 192e397..c12aecf 100644 --- a/src/components/developerCard.tsx +++ b/src/components/developerCard.tsx @@ -237,25 +237,25 @@ const DeveloperCard: React.FC = ({ - {webPage != null && ( + {webPage !== null && ( )} - {linkedin != null && ( + {linkedin !== null && ( )} - {twitter != null && ( + {twitter !== null && ( )} - {github != null && ( + {github !== null && ( From 6e6f9d93847e8d93e8aeaf2fe1f988c99078cc03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Pe=C3=B1a=20Vasquez?= Date: Tue, 6 Oct 2020 23:26:51 -0400 Subject: [PATCH 7/8] refactor: removing the null comparison. --- .../__snapshots__/developerCard.test.tsx.snap | 135 +----------------- src/components/developerCard.tsx | 9 +- 2 files changed, 5 insertions(+), 139 deletions(-) diff --git a/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap b/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap index ac22f9a..f7f3aad 100644 --- a/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap @@ -99,96 +99,7 @@ exports[`Test on DeveloperCard render without social media props 1`] = `
+ />
`; @@ -293,28 +204,6 @@ exports[`Test on DeveloperCard renders card with initial data 1`] = `
diff --git a/src/components/developerCard.tsx b/src/components/developerCard.tsx index c12aecf..fd64be9 100644 --- a/src/components/developerCard.tsx +++ b/src/components/developerCard.tsx @@ -237,25 +237,24 @@ const DeveloperCard: React.FC = ({ - {webPage !== null && ( + {webPage && ( )} - {linkedin !== null && ( + {linkedin && ( )} - {twitter !== null && ( + {twitter && ( )} - - {github !== null && ( + {github && ( From 032d617ae0b46f647eb3386a1447d0088eee6e9c Mon Sep 17 00:00:00 2001 From: Manuel Cepeda Date: Fri, 25 Dec 2020 12:43:02 -0400 Subject: [PATCH 8/8] chore: update component snap --- .../__snapshots__/developerCard.test.tsx.snap | 96 +++++++++---------- 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap b/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap index f7f3aad..65b000d 100644 --- a/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/developerCard.test.tsx.snap @@ -2,84 +2,84 @@ exports[`Test on DeveloperCard render without social media props 1`] = `
JR
Jose Reyes Campusano
React
Flutter
C#
Swift
Kotlin @@ -87,10 +87,10 @@ exports[`Test on DeveloperCard render without social media props 1`] = `

Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software @@ -98,7 +98,7 @@ exports[`Test on DeveloperCard render without social media props 1`] = `

@@ -106,84 +106,84 @@ exports[`Test on DeveloperCard render without social media props 1`] = ` exports[`Test on DeveloperCard renders card with initial data 1`] = `
JR
Jose Reyes Campusano
React
Flutter
C#
Swift
Kotlin @@ -191,10 +191,10 @@ exports[`Test on DeveloperCard renders card with initial data 1`] = `

Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software @@ -202,10 +202,10 @@ exports[`Test on DeveloperCard renders card with initial data 1`] = `