Creación de Componente de Carta (Cards) #13 - #36
Conversation
|
Adicionalmente, puedes proveer un |
|
|
dioniciodiaz
left a comment
dioniciodiaz
left a comment
There was a problem hiding this comment.
Podrias revisar este PR te ayudaria mucho ya que tiene las librerias instaladas. Podrias añadir algunos snapshot test para este componente. Aqui te dejo un ejemplo
| @@ -0,0 +1,263 @@ | |||
| import React from "react" | |||
| import styled from "styled-components" | |||
| import "@fortawesome/fontawesome-free/js/all.js" | |||
There was a problem hiding this comment.
@ppv95 esta libraria esta instalada en el repositorio?
| import "@fortawesome/fontawesome-free/js/all.js" |
There was a problem hiding this comment.
@dionicio-gp La instale en el momento que estaban creado el componente. Lo elimine porque vi que ese mismo PR #34 lo tenia instalada y asumi que le haria merge antes que el mio. En dado caso, las pruebas si te las debo, las realizare antes de merge a development
| <SocialNetworks> | ||
| {webPage != null && ( | ||
| <Media href={webPage} target="_blank"> | ||
| <i className="fas fa-globe-americas"></i> |
There was a problem hiding this comment.
@ppv95 podrias usar la libreria de fontawasome para react
| ) | ||
|
|
||
| it("renders card with initial data", () => { | ||
| expect(card).toMatchSnapshot() |
There was a problem hiding this comment.
| expect(card).toMatchSnapshot() | |
| expect(card.toJSON()).toMatchSnapshot() |
Uno solo toma el contenido del component, no todo el objeto de testing.
| developerName={initialData.DeveloperName} | ||
| initials={initialData.Initials} | ||
| image={initialData.Image} | ||
| skillsList={initialData.SkillsList} | ||
| summaryDeveloper={initialData.SummaryDeveloper} | ||
| linkedin={initialData.linkedin} | ||
| twitter={initialData.Twitter} |
There was a problem hiding this comment.
Puedes Reducir la cantidad de propiedades? creo que se puede resumir a solo un objeto llamado profile y si queres, hasta podes implementar el spread operator:
<DeveloperCard {...profile} />
Esta es una sintaxis que si no estuviéramos usando TS, fuera indevido.
| {webPage != null && ( | ||
| <Media href={webPage} target="_blank"> | ||
| <FontAwesomeIcon icon={faGlobeAmericas} /> | ||
| </Media> | ||
| )} | ||
|
|
||
| {linkedin != null && ( | ||
| <Media href={linkedin} target="_blank"> | ||
| <FontAwesomeIcon icon={faLinkedin} /> | ||
| </Media> | ||
| )} | ||
|
|
||
| {twitter != null && ( | ||
| <Media href={twitter} target="_blank"> | ||
| <FontAwesomeIcon icon={faTwitter} /> | ||
| </Media> | ||
| )} | ||
|
|
||
| {github != null && ( | ||
| <Media href={github} target="_blank"> | ||
| <FontAwesomeIcon icon={faGithub} /> | ||
| </Media> | ||
| )} |
There was a problem hiding this comment.
Puedes colocarla, estas props puedes ponerle un valor null de Default value, para evitar hacer la comparación. Si vas a comparar algo, es recomendable utilizar el triple igual === o la diferencia del triple !==, porque compara tanto el valor del objeto como el prototipo
4 participants
Subiendo componente carta para el issue #13.
Cualquier duda u oportunidad de mejora favor de hacermela saber.