Media img test

Clase 9 de 15 • Curso de Creación de Librerías UI para React

Juan Camilo Lentino Villalba

student•

de la manera como yo lo hice, validando que sea requerido alt y src directamente con los PropTypes

MediaImg.propTypes = {
    ...
    src: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired,
}

pensé que no era necesario añadirlo al testing pero me di cuenta que esta forma es mucho mejor

expect(MediaImgTest).toBeInTheDocument();
expect(MediaImgTest).toHaveAttribute('src', 'https://www.algo.com/img')
expect(MediaImgTest).toHaveAttribute('alt')

en el mismo testing podemos ver todo sin estar navegando entre archivos y no solamente podemos controlar la prop que recibe y el tipo de valor, incluso podemos controlar el valor exacto que recibimos si así lo queremos.

Diego Vergara

student•

Mi solución al reto:

it('testeando border radius, width and height',()=>{
const {getByRole} = render(<MediaImg src='https://davc93.github.io' alt='PlatziCool'/>)
const MediaImgTest = getByRole('img');
expect(MediaImgTest).toHaveStyle("width:100px;height:100px;border-radius:16px;");
})

Julio Santacruz

student•

para utilizar 'toBeInTheDocument()' tuve que importar

import '@testing-library/jest-dom/

Maria Guadalupe González Hernández

student•

Mi solución al reto

it('Probar que el width y height sean 200px y border-radius 8px', () => {
    //arrange
    const { getByRole } = render(
      <MediaImg
        alt="PlatziCoolImg"
        src="https://www.platziversosupercool.com/img"
        width="200px"
        height="200px"
        borderRadius="8px"
      />
    );
    //act
    const MediaImgTest = getByRole('img');
    //assert
    expect(MediaImgTest).toHaveStyle(
      'width:200px;height:200px;border-radius:8px;'
    );
  });

Ivan González

student•

Mi solucion

describe('@Components/MediaImg', () => {
  it('should have correct styles', () => {
    //arrange
    const { baseElement } = render(<MediaImg data-testid="media-img" src="img.com/dsads" alt="Platzinauta" />);
    //act
    const mediaImg = getByTestId(baseElement, 'media-img');
    const mediaImgStyles = getComputedStyle(mediaImg);
    //assert
    expect(mediaImgStyles.width).toBe('100px');
    expect(mediaImgStyles.height).toBe('100px');
    expect(mediaImgStyles.borderRadius).toBe('10%');
  });
});

it('testeando border radius, width and height',()=>{
const {getByRole} = render(<MediaImg src='https://davc93.github.io' alt='PlatziCool'/>)
const MediaImgTest = getByRole('img');
expect(MediaImgTest).toHaveStyle("width:100px;height:100px;border-radius:16px;");
})

it('Probar que el width y height sean 200px y border-radius 8px', () => {
    //arrange
    const { getByRole } = render(
      <MediaImg
        alt="PlatziCoolImg"
        src="https://www.platziversosupercool.com/img"
        width="200px"
        height="200px"
        borderRadius="8px"
      />
    );
    //act
    const MediaImgTest = getByRole('img');
    //assert
    expect(MediaImgTest).toHaveStyle(
      'width:200px;height:200px;border-radius:8px;'
    );
  });

describe('@Components/MediaImg', () => {
  it('should have correct styles', () => {
    //arrange
    const { baseElement } = render(<MediaImg data-testid="media-img" src="img.com/dsads" alt="Platzinauta" />);
    //act
    const mediaImg = getByTestId(baseElement, 'media-img');
    const mediaImgStyles = getComputedStyle(mediaImg);
    //assert
    expect(mediaImgStyles.width).toBe('100px');
    expect(mediaImgStyles.height).toBe('100px');
    expect(mediaImgStyles.borderRadius).toBe('10%');
  });
});

Media img test

Introducción al curso

Bienvenida al curso

¿Cuando construir nuestra propia Librería UI?

Pre-coding

Definir requerimientos

Desarollo components

Button component

Button test

Container component

Container test

Media img component

Media img test

Text component

Text test

Publicación

Publicación de librería en npm

Prueba de fuego

¡Prueba de fuego!

Despedida

Resumen del curso

Despedida