Button test

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

Juan Camilo Lentino Villalba

student•

en mi caso, para que todo pueda correr bien y pase el test, a la hora de desestructurar las props añadir ...otherProps

const { className, bgColor, color, width, height, colorHover, bgColorHover, borderRadius, ...otherProps } = props

el archivo completo quedaría de esta forma src/Button/Button.js:

import { forwardRef } from 'react'
import { cx, css } from "@emotion/css";
import { PropTypes } from 'prop-types'

const buttonStyles = (bgColor, color, width, height, colorHover, bgColorHover, borderRadius)=> css`
    background-color: ${bgColor};
    color: ${color};
    border-radius: ${borderRadius || '8px'};
    width: ${width || '40px'};
    height: ${height || '150px'};
    text-align: center;
    &:hover {
        background-color: ${bgColorHover};
        color: ${colorHover};
    }
`

const Button = forwardRef((props, ref)=> {
    const { className, bgColor, color, width, height, colorHover, bgColorHover, borderRadius, ...otherProps } = props 
    
    return (
        <button
            ref={ref}
            type="button"
            {...otherProps}
            className={cx(buttonStyles(bgColor, color, width, height, colorHover, bgColorHover, borderRadius), className)}
        />
    )
})

Button.propTypes = {
    className: PropTypes.string,
    bgColor: PropTypes.string,
    color: PropTypes.string,
    width: PropTypes.string,
    height: PropTypes.string,
    bgColorHover: PropTypes.string,
    colorHover: PropTypes.string,
    borderRadius: PropTypes.string
}

export default Button

Diego Vergara

student•

Me paso igual, faltaba agregar ese.

Gilbert Ardila

student•

soy nuevo en esto del test y traté de testear el color de la siguiente manera :

< test('Should have bgColor', () => {
        const {getByRole} = render(<Button color='blue'  type='button'/>);
        const buttonTest = getByRole('button');
        expect(buttonTest.style.color).toBe('blue');
    })>

pero me arroja este error:

< expect(received).toBe(expected) // Object.is equality

    Expected: "blue"
    Received: ""

      13 |         const {getByRole} = render(<Button color='blue'  type='button'/>);
      14 |         const buttonTest = getByRole('button');
    > 15 |         expect(buttonTest.style.color).toBe('blue');
         |                                        ^
      16 |     })
      17 | });>

una ayuda me vendría bien

Daniel Rodrigo Valdivieso Merino

teacher•

Prueba revisar el componente para ver si lo que sucede es que hay algun error como tal en el componente, hay momentos en los que el error en un test es el mismo componente.

Si el test está bien creado el error esta en el componente, para eso creamos los test, para de una u otra forma para romper nuestros componentes para preveer los errores y corregir el componentes antes de que vaya a producción.

Eduardo Lemus Zavala

student•

Agregue la siguiente línea de código, pues no me reconocía los métodos de toHaveClass y toHaveStyle:

import { toHaveClass,toHaveStyle } from '@testing-library/jest-dom';

Button 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