Container test

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

Diego Vergara

student•

Mi solución al reto.

    it('Comprobar si tiene background azul',() => {
        // arrange

        const { getByRole } = render(
            <ContainerFlex role='banner' bgColor='blue' />
        )
        // act

        const ContainerFlexTest = getByRole('banner')
        // assert
        expect(ContainerFlexTest).toHaveStyle('background-color:blue;');
    })

Gilbert Ardila

student•

traté de usar toHavsStyle pero me arroja un error :

< TypeError: expect(...).toHaveStyle is not a function

      20 |         const ContainerFlexTest = getByRole('banner')
      21 |         // assert
    > 22 |         expect(ContainerFlexTest).toHaveStyle('background-color:blue;');
         |                                   ^
      23 |     })
      24 | });>

¿lo importas de algun lado?

Iván Ceballos Vega

student•

toHaveStyle no existe dentro de React Testing Library, por lo que tienes que usar el getComputedStyle de JS para acceder a los estilos del elemento. Esta función te devuelve un CSSStyleDeclaration pudiendo acceder directamente a las propiedades CSS del elemento:

it("accepts and applies bgColor", () => {
    render(<ContainerFlex data-testid='container' bgColor='blue' />);
    const container = screen.getByTestId("container");
    const containerStyles = getComputedStyle(container);
    expect(containerStyles.backgroundColor).toBe("blue");
});

Juan Camilo Lentino Villalba

student•

bgcolor incorrecto

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor={3} justifyContent="center" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})

justifyContent incorrecto

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor="red" justifyContent="red" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})

bgcolor y justifyContent incorrecto

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor={3} justifyContent="red" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})

bgcolor y justifyContent correctos

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor="red" justifyContent="center" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})

Maria Guadalupe González Hernández

student•

Asi resolví el reto :)

import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import ContainerFlex from './ContainerFlex';

describe('@componets/ContainerFlex', () => {
 
  it('Comprobar si tiene fondo azul', () => {
    // arrange

    const { getByRole } = render(
      <ContainerFlex role="banner" bgColor="blue" />
    );
    // act

    const ContainerFlexTest = getByRole('banner');
    // assert
    expect(ContainerFlexTest).toHaveStyle('background-color:blue;');
  });
});

    it('Comprobar si tiene background azul',() => {
        // arrange

        const { getByRole } = render(
            <ContainerFlex role='banner' bgColor='blue' />
        )
        // act

        const ContainerFlexTest = getByRole('banner')
        // assert
        expect(ContainerFlexTest).toHaveStyle('background-color:blue;');
    })

< TypeError: expect(...).toHaveStyle is not a function

      20 |         const ContainerFlexTest = getByRole('banner')
      21 |         // assert
    > 22 |         expect(ContainerFlexTest).toHaveStyle('background-color:blue;');
         |                                   ^
      23 |     })
      24 | });> 

it("accepts and applies bgColor", () => {
    render(<ContainerFlex data-testid='container' bgColor='blue' />);
    const container = screen.getByTestId("container");
    const containerStyles = getComputedStyle(container);
    expect(containerStyles.backgroundColor).toBe("blue");
});

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor={3} justifyContent="center" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor="red" justifyContent="red" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor={3} justifyContent="red" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor="red" justifyContent="center" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})

import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import ContainerFlex from './ContainerFlex';

describe('@componets/ContainerFlex', () => {
 
  it('Comprobar si tiene fondo azul', () => {
    // arrange

    const { getByRole } = render(
      <ContainerFlex role="banner" bgColor="blue" />
    );
    // act

    const ContainerFlexTest = getByRole('banner');
    // assert
    expect(ContainerFlexTest).toHaveStyle('background-color:blue;');
  });
});

Container 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