Skip to content

Creación de Componente de Carta (Cards) #13 #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: development
Choose a base branch
from
Open

Creación de Componente de Carta (Cards) #13 #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9b959b4
Feature: Card component added
ppv95 Sep 24, 2020
6aed0b4
Fix: change Props from PascalCase to camelCase
ppv95 Sep 25, 2020
54a1786
Fix:Adding Hover effects on the skills section and and fixing some st…
ppv95 Sep 27, 2020
a80c390
Feat: adding test for developerCard component
ppv95 Oct 2, 2020
07dfa94
setup: adding react font awesome library
ppv95 Oct 3, 2020
9c59bc8
refactor: Wrapping props in profile object.
ppv95 Oct 7, 2020
6e6f9d9
refactor: removing the null comparison.
ppv95 Oct 7, 2020
2501f32
Merge branch 'development' of https://github.com/DevsDO/whocode-front…
mecm1993 Dec 25, 2020
032d617
chore: update component snap
mecm1993 Dec 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 24 additions & 20 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
"description": "Discovery site for all Dominican developers with their skills and contacts",
"version": "0.1.0",
"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",
"@typescript-eslint/eslint-plugin": "^4.1.0",
"@typescript-eslint/parser": "^4.1.0",
"babel-plugin-styled-components": "^1.11.1",
Expand All @@ -26,38 +30,38 @@
"styled-system": "^5.1.5"
},
"devDependencies": {
"eslint": "^7.2.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.0.0",
"husky": "^4.3.0",
"stylelint": "^13.7.0",
"stylelint-config-standard": "^20.0.0"
"@babel/core": "^7.11.6",
"@babel/preset-typescript": "^7.10.4",
"@storybook/addon-actions": "^6.0.21",
"@storybook/addon-essentials": "^6.0.21",
"@storybook/addon-links": "^6.0.21",
"@storybook/react": "^6.0.21",
"@types/styled-components": "^5.1.3",
"@types/styled-system": "^5.1.10",
"babel-loader": "^8.1.0",
"babel-preset-react-app": "^9.1.2",
"prettier": "2.1.0",
"react-is": "^16.13.1",
"@babel/preset-typescript": "^7.10.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.2",
"@types/styled-components": "^5.1.3",
"@types/styled-system": "^5.1.10",
"babel-jest": "^26.3.0",
"babel-loader": "^8.1.0",
"babel-preset-gatsby": "^0.5.9",
"babel-preset-react-app": "^9.1.2",
"eslint": "^7.2.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.0.0",
"husky": "^4.3.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.4.2",
"jest-styled-components": "^7.0.3",
"react-test-renderer": "^16.13.1"

"lint-staged": "^10.5.3",
"prettier": "2.1.0",
"react-is": "^16.13.1",
"react-test-renderer": "^16.13.1",
"stylelint": "^13.7.0",
"stylelint-config-standard": "^20.0.0"
},
"keywords": [
"gatsby"
Expand Down
256 changes: 256 additions & 0 deletions src/components/__tests__/__snapshots__/developerCard.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Test on DeveloperCard render without social media props 1`] = `
<div
className="sc-bdfBwQ iwnhNC"
>
<div
className="sc-gsTCUz bwqqht"
>
<img
className="sc-dlfnbm cRGvts"
src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Juan_Perez_July_2013.jpg"
/>
</div>
<div
className="sc-hKgILt gnheQc"
>
<div
className="sc-eCssSg imIqOK"
>
<div
className="sc-gKsewC iESJdf"
>
<h6
className="sc-jSgupP cGopmf"
>
JR
</h6>
</div>
<h6
className="sc-iBPRYJ cgEpgn"
>
Jose Reyes Campusano
</h6>
</div>
<section
className="sc-fubCfw ktFIND"
>
<div
className="sc-pFZIQ fWeTvN"
>
<div
className="sc-jrAGrp kfjuIf"
>
<span
className="sc-kEjbxe"
>
React
</span>
</div>
<div
className="sc-jrAGrp kfjuIf"
>
<span
className="sc-kEjbxe"
>
Flutter
</span>
</div>
<div
className="sc-jrAGrp kfjuIf"
>
<span
className="sc-kEjbxe"
>
C#
</span>
</div>
<div
className="sc-jrAGrp kfjuIf"
>
<span
className="sc-kEjbxe"
>
Swift
</span>
</div>
<div
className="sc-jrAGrp kfjuIf"
>
<span
className="sc-kEjbxe"
>
Kotlin
</span>
</div>
</div>
</section>
<div
className="sc-iqHYGH kGaQZX"
>
<p
className="sc-crrsfI viyyM"
>
<small>
Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software
</small>
</p>
</div>
<div
className="sc-dQppl hdpMsT"
/>
</div>
</div>
`;

exports[`Test on DeveloperCard renders card with initial data 1`] = `
<div
className="sc-bdfBwQ iwnhNC"
>
<div
className="sc-gsTCUz bwqqht"
>
<img
className="sc-dlfnbm cRGvts"
src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Juan_Perez_July_2013.jpg"
/>
</div>
<div
className="sc-hKgILt gnheQc"
>
<div
className="sc-eCssSg imIqOK"
>
<div
className="sc-gKsewC iESJdf"
>
<h6
className="sc-jSgupP cGopmf"
>
JR
</h6>
</div>
<h6
className="sc-iBPRYJ cgEpgn"
>
Jose Reyes Campusano
</h6>
</div>
<section
className="sc-fubCfw ktFIND"
>
<div
className="sc-pFZIQ fWeTvN"
>
<div
className="sc-jrAGrp kfjuIf"
>
<span
className="sc-kEjbxe"
>
React
</span>
</div>
<div
className="sc-jrAGrp kfjuIf"
>
<span
className="sc-kEjbxe"
>
Flutter
</span>
</div>
<div
className="sc-jrAGrp kfjuIf"
>
<span
className="sc-kEjbxe"
>
C#
</span>
</div>
<div
className="sc-jrAGrp kfjuIf"
>
<span
className="sc-kEjbxe"
>
Swift
</span>
</div>
<div
className="sc-jrAGrp kfjuIf"
>
<span
className="sc-kEjbxe"
>
Kotlin
</span>
</div>
</div>
</section>
<div
className="sc-iqHYGH kGaQZX"
>
<p
className="sc-crrsfI viyyM"
>
<small>
Senior Front-end Developer | Web Designer | Hardcore Gamer | I am passionate about building scalable and appealing software
</small>
</p>
</div>
<div
className="sc-dQppl hdpMsT"
>
<a
className="sc-bqyKva eAzuCv"
href="https://www.linkedin.com/in/linkeindTest/"
target="_blank"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-linkedin fa-w-14 "
data-icon="linkedin"
data-prefix="fab"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
fill="currentColor"
style={Object {}}
/>
</svg>
</a>
<a
className="sc-bqyKva eAzuCv"
href="https://twitter.com/TwitterTest"
target="_blank"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-twitter fa-w-16 "
data-icon="twitter"
data-prefix="fab"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
fill="currentColor"
style={Object {}}
/>
</svg>
</a>
</div>
</div>
</div>
`;
45 changes: 45 additions & 0 deletions src/components/__tests__/developerCard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import * as React from "react"
import DeveloperCard from "../DeveloperCard"
import { render } from "@testing-library/react"
import renderer from "react-test-renderer"

describe("Test on DeveloperCard", () => {
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:
"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",
}

it("renders card with initial data", () => {
const tree = renderer.create(<DeveloperCard {...initialProfile} />)
expect(tree.toJSON()).toMatchSnapshot()
})

it("render without social media props", () => {
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(<DeveloperCard {...data} />).toJSON()

expect(tree).toMatchSnapshot()
})

it("It should find the name on the card", () => {
const testName = "Jose Reyes Campusano"
const { getByText } = render(<DeveloperCard {...initialProfile} />)
const name = getByText(testName)
expect(name).toBeInTheDocument()
})
})
Loading