Forem: Carlos Queiroz

Testing HTML events on React

Carlos Queiroz — Tue, 15 Sep 2020 14:45:30 +0000

What's up, Techs!

I would like to share with you a method on how to create tests for HTML events. I'll do this sharing a progressive image component that I built.

Let's take a look:

const ImageLoader = ({ src, fallbackImage = '' }) => {
  const [isLoading, setIsLoading] = useState(true);
  const imageRef = useRef(null);

  const onLoadFinished = () => {
    setIsLoading(false);
  };

  const onLoadError = () => {
    const imageObject = imageRef.current;
    imageObject.src = fallbackImage;
    setIsLoading(false);
    imageObject.onerror = null;
  };

  useEffect(() => {
    const imageObject = imageRef.current;
    imageObject.src = src;
  }, [src]);

  return (
    <Container isLoading={isLoading}>
      <Image
        ref={imageRef}
        onError={onLoadError}
        onLoad={onLoadFinished}
      />
      {isLoading && <div>Carregando...</div>}
    </Container>
  );
};

export default ImageLoader;

For this component, I received two important properties: src and fallbackImage.
It is a simple component where we are monitoring the onload and onerror events.

Through these events, we can catch if our image was loaded or failed. In case of failure, the src property will receive the fallbackImage path.

const onLoadError = () => {
    const imageObject = imageRef.current;
    imageObject.src = fallbackImage;
    setIsLoading(false);
    imageObject.onerror = null;
  };

Building the test

For the tests, we will use the React Testing Library (RTL) that is the default testing library for React.
I like this library because we test the user behavior and not implementation details. We can think that we are testing what the user is seeing and not what is inside the code.

Our test will guarantee that our component is receiving the correct image path even with success or failure.

I need to confess that when I was trying to build this test I had no idea how to simulate events. I was thinking of taking the image as a reference and trying to dispatch an event with dispatchEvent, but it was not like a semantic way.

So, what I did was going to Google and search for a solution. What I found was, for me, something interesting: React has your own test utils library. I'm talking about ReactTestUtils.

At first sight, it was solving my problem. Actually this library resolves my problem. Let's see:

it('should be able to show skeleton during the loading and when finished loading image needs to have src property equals send by parameter.', async () => {
    render(
      <ImageLoader
        src="image-teste.png"
        fallbackImage="fallback-image.png"
        alt="image-test"
      />,
    );

const imageRef = screen.getByAltText('image-test');

ReactTestUtils.Simulate.load(imageRef);

expect(imageRef).toHaveAttribute('src', 'image-teste.png');
  });

This solution looked like for me semantically well write and works fine. The PR was approved, by the way.

After that, I went back to the code, and I was thinking about how to write about this solution for others who are having the same problem as me and talking to a friend of mine, I was remembered that RTL has a function that also firing HTML events: fireEvent.

I used to use this function to fire click events, for example, but I changed to the userEvent function as the RTL recommends and due to this, I completely forgot of the fireEvent function.

Thus, I rewrite the test with the fireEvent util function. Let's have a look:

...
    render(
      <ImageLoader
        src="image-teste.png"
        fallbackImage="fallback-image.png"
        alt="image-test"
      />,
    );

const imageRef = screen.getByAltText('image-test');

fireEvent.load(imageRef);

expect(imageRef).toHaveAttribute('src', 'image-teste.png');
  });

Here is the test for the error case:

...
    render(
      <ImageLoader
        src="image-teste.png"
        fallbackImage="fallback-image.png"
        alt="image-test"
      />,
    );

    const imageRef = screen.getByAltText('image-test');

    fireEvent.error(imageRef);

expect(imageRef).toHaveAttribute('src', 'fallback-image.png');
  });

I think that the code did not change so much, but now it looks even more clear and simple.

So, if you use the RTL library and need to simulate an HMTL event, you probably should use fireEvent.

I hope that this little article was helpful to you.

Leave a comment with a suggestion, a question, or your opinion about this.
If you want, add me to your LinkedIn network, and let's chat. I love to learn and talk about JavaScript.

Bye!

Criando testes para eventos HTML no React

Carlos Queiroz — Wed, 05 Aug 2020 14:03:17 +0000

Fala galera Tech, beleza?

Gostaria de compartilhar com vocês um método de como criar testes para eventos HTML. Vou fazer isso compartilhando um componente de carregamento de imagem que construi.

Para contextualizar, neste componente eu recebo duas propriedades importantes: src e fallBackImage:

const ImageLoader = ({ src, fallbackImage = '' }) => {
  const [isLoading, setIsLoading] = useState(true);
  const imageRef = useRef(null);

  const onLoadFinished = () => {
    setIsLoading(false);
  };

  const onLoadError = () => {
    const imageObject = imageRef.current;
    imageObject.src = fallbackImage;
    setIsLoading(false);
    imageObject.onerror = null;
  };

  useEffect(() => {
    const imageObject = imageRef.current;
    imageObject.src = src;
  }, [src]);

  return (
    <Container isLoading={isLoading}>
      <Image
        ref={imageRef}
        onError={onLoadError}
        onLoad={onLoadFinished}
      />
      {isLoading && <div>Carregando...</div>}
    </Container>
  );
};

export default ImageLoader;

É um componente simples onde monitoramos os eventos onload e onerror.
O foco não é o componente, mas é interessante tê-lo em mente para compreendermos os testes.

Através desses eventos conseguimos capturar se houve o sucesso ou falha no carregamento da imagem. No caso de falha, setamos o src com a propriedade fallbackImage através da função onLoadError. Veja:

const onLoadError = () => {
    const imageObject = imageRef.current;
    imageObject.src = fallbackImage;
    setIsLoading(false);
    imageObject.onerror = null;
  };

Construindo o teste.

Para testes, usaremos a biblioteca padrão do React, a RTL - React Testing Library. A proposta desta biblioteca é testar o comportamento do usuário e não a implementação do código. Podemos pensar que testamos o que o usuário está vendo e não o que está no código.

Vamos trabalhar com dois casos de teste.

O primeiro caso vai garantir que o elemento esteja na tela. Ele existe devido ao uso do TDD e é um dos primeiros testes a serem feitos:

it('should be able to render ProgressiveImage component', async () => {
    const { container } = render(<ImageLoader src="test" />);

    expect(container.firstChild).toBeInTheDocument();
  });

Conforme a proposta do RTL, não testamos a implementação, mas se o usuário vai ver o elemento na tela.

O segundo caso de teste vai garantir que nosso componente de imagem está recebendo o caminho da imagem corretamente, tanto no caso de sucesso ou falha. Para este teste não temos como carregar a imagem, pois é um teste de unidade, mas podemos simular se nossa lógica dos eventos está funcionando.

Para este tipo de teste eu não fazia ideia como simular os eventos, pensei colocar dentro do código uma refência da imagem e usar o método dispatchEvent do próprio HTML disparando o evento load ou *error, mas não me parecia muito semântico e queria evitar um pouco de problemas no Code Review.

Durante a pesquisa, encontrei com algo muito interessante que junto como próprio React que é uma biblioteca utils de teste. Estou falando do ReactTestUtils.
Numa primeira vista ele resolvia meu problema e resolveu mesmo. Vamos acompanhar o código do teste para a condição de imagem carregada com sucesso:

it('should be able to show skeleton during the loading and when finished loading image needs to have src property equals send by parameter.', async () => {
    render(
      <ImageLoader
        src="image-teste.png"
        fallbackImage="fallback-image.png"
        alt="image-test"
      />,
    );

const imageRef = screen.getByAltText('image-test');

ReactTestUtils.Simulate.load(imageRef);

expect(imageRef).toHaveAttribute('src', 'image-teste.png');
  });

Me pareceu um código semântico e funcionou muito bem. Inclusie meu PR foi aberto com essa solução e foi aprovado.

Porém dias depois fazendo algumas revisões nos testes, pois queria escrever sobre essa solução para mais pessoas, descobri que a biblioteca RTL também tem uma função que faz exatamente a mesma coisa (possivelmente construida sob o ReactTestUtils) que é a função fireEvent.
Eu já usei essa função antes para disparar eventos de click, mas migrei para o userEvent conforme orientação da biblioteca e por isso tinha me esquecido dele.

Veja como ficou o teste com o fireEvent:

...
    render(
      <ImageLoader
        src="image-teste.png"
        fallbackImage="fallback-image.png"
        alt="image-test"
      />,
    );

const imageRef = screen.getByAltText('image-test');

fireEvent.load(imageRef);

expect(imageRef).toHaveAttribute('src', 'image-teste.png');
  });

Não houve mudanças significativas na escrita, mas continuei usando o padrão e me parece muito mais semântico pelo nome da função, correto?

O teste para caso de erro ficou assim:

...
    render(
      <ImageLoader
        src="image-teste.png"
        fallbackImage="fallback-image.png"
        alt="image-test"
      />,
    );

    const imageRef = screen.getByAltText('image-test');

    fireEvent.error(imageRef);

expect(imageRef).toHaveAttribute('src', 'fallback-image.png');
  });

Então se você já usa a biblioteca de testes padrão do React e precisa simular um evento, use a função fireEvent.

Agora se você usa o Enzyme, por exemplo, pode fazer uso do ReactTestUtils para resolver seus problemas de teste de eventos.

Espero que este pequeno artigo possa ter te ajudado!
Deixe um comentário caso você você tenha gostado do artigo ou se tiver alguma sugestão ou dúvida.

Me adicione também no Linkedin e me deixa uma mensagem lá. Gosto muito de trocar ideias sobre desenvolvimento usando o JavaScript.

Quer saber um pouco mais sobre a biblioteca React Testing Library? Veja este artigo do criador dela em comparação com o Enzyme.

Té mais!

Creating responsive and adaptive layouts with React and Styled-Components

Carlos Queiroz — Sun, 01 Dec 2019 19:36:09 +0000

What's up, Techs!

Nowadays, to create websites and web apps we need to care about a lot of devices and screen sizes.

In a normal situation, a UI professional creates a beautiful layout to works in a 1440px width device screen, and we begin building that layout at a fixed-size in pixels. This can become a little weird if we try to render that layout on different screens. And what about fonts, then?

I'm going to describe here an idea that I've used to handle this. There are many ways to achieve responsive and adaptive layouts, and I will show another one.

Let's align some concepts and previous knowledge:

Responsive layouts fit to a user's screen size. They don't change element positions, just fit.
Adaptive layouts fit to user screen size as well but according to screen size, elements change position to fit the screen using media queries.

I'll use ReactJS and Styled-Component. I suppose that you know about them. If you wanna know about these libs you can search here in dev.to and you'll learn a lot about them! But if you want, you can use it with SCSS or SASS.

I will use creact-react-app to set up a new project without needing to set up Webpack and others. You decide if you want to configure your own project or use CRA.

So, let's start!

Let's begin creating our project with create_react_app.
After that, go to the project's folder and install styled-component as a project dependency.

We will clean our src folder and let only App.js and index.js files. Delete other files and remember to remove all references from removed files.

Ok, now let's check out the design that we will create:

Our UI seted font size for mobile with 24px, tablet with 18px and web with 16px.

For our reference, mobile has 320px width, tablet 720px width and desktop starting at 1024px width.

CSS reset and global configurations:

In src folder, let's create another folder called styles and inside this folder, create a file called global.js.

We will use here styled-component lib in order to create a global style. Here is the code:

import { createGlobalStyle } from "styled-components";
import px2vw from "../utils/px2vw";

export const Global = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root {
      font-size: ${px2vw(24)};

      @media (min-width: 768px) {
        font-size: ${px2vw(18)};
      }

      @media (min-width: 1024px) {
        font-size: ${px2vw(16)};
      }
    }
`;

export default Global;

What we did here was reset some CSS properties and define our HTML root with font sizes that we will use.

I have imported a function called px2vw. We will create this function below. This function converts pixels to viewport width.
As our layout will be responsive, we need it to adapt to all screen sizes and we will use viewport size to accomplish this.

We'll also use that function for the same reason: If the elements will resize to fit the screen, fonts will as well.

I have decided to not use viewport height because normally we work with screen width and not with screen height and also because I had another issue while developing for smart tv using viewport height. I'll tell you this at another opportunity.

px2vw function:

Let's create our function. In the src folder, create a new folder called utils and create a file called px2vw.js inside utils folder: Let's check the code:

const px2vw = (size, width = 1440) => `${(size / width) * 100}vw`;

export default px2vw;

For this function, the default value of width is 1440px due to the layout, but if you want to use with another value or do a more generic function, feel free.

Creating a page for our project.

Now, let's create a page to show our layout.
In the src folder, create another folder called pages and inside there, create another folder called Home.
Inside the Home folder, we will create 2 files. We are going to separate style components and logic components.

The first one is HomeStyles.js file. Here is the code:

import styled from "styled-components";
import px2vw from "../../utils/px2vw";

export const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: ${px2vw(32)};
  max-width: 100%;

  @media (min-width: 1024px) {
    flex-wrap: nowrap;
  }
`;

export const Box = styled.div`
  display: flex;
  width: ${px2vw(320, 320)};
  min-height: ${px2vw(200, 320)};
  flex-direction: column;
  padding: ${px2vw(20)};
  margin: ${px2vw(20)};
  background-color: ${props => props.bgColor};
  height: 100%;

  @media (min-width: 768px) {
    width: ${px2vw(320, 768)};
    min-height: ${px2vw(200, 768)};
    height: 100%;
  }

  @media (min-width: 1024px) {
    width: ${px2vw(500)};
    min-height: ${px2vw(300)};
    height: 100%;
  }
`;

export const BoxTitle = styled.h3`
  color: #333;
  font-size: 2rem;
  text-align: center;

  @media (min-width: 1024px) {
    font-size: 1.5rem;
  }
`;

export const BoxText = styled.p`
  margin-top: ${px2vw(20)};
  color: #666;
  font-size: 1.5rem;

  @media (min-width: 1024px) {
    font-size: 1rem;
  }
`;

We have built our presentation layer. If you noticed, I'm also added in code above some text style to manage how font sizes behave.
When we call px2vw function for another screen size, we give the screen size as a parameter: min-height: ${px2vw(200, 320)};

I'm also using media queries to make our layout adaptive as well as responsive. It means, depending on screen size, boxes will resize according to our example layout.

For each box, I've given a bgColor property to control the color of each box.

Now, let's build our logic layer. We will create a Home.js file as follows below:

import React from "react";

import { Container, Box, BoxTitle, BoxText } from "./HomeStyles";

export default function Home({ boxData }) {
  return (
    <Container>
      {boxData.map(box => (
        <Box key={box.id} bgColor={box.bgColor}>
          <BoxTitle>{box.title}</BoxTitle>
          <BoxText>{box.text}</BoxText>
        </Box>
      ))}
    </Container>
  );
}

And now, to finish, we need to import home.js to App.js:

import React from "react";

import Global from "./styles/global";

import Home from "./pages/Home/Home";

const lorem =
  "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, sed iure blanditiis voluptatum nulla quidem minus quam tempora obcaecati necessitatibus inventore! Vitae totam quam pariatur facilis fugit maxime adipisci eaque.";

const data = [
  {
    id: Math.random(),
    title: "Box titulo 1",
    text: lorem,
    bgColor: "#D5CAFA"
  },
  {
    id: Math.random(),
    title: "Box titulo 2",
    text: lorem,
    bgColor: "#EDA9A9"
  },
  {
    id: Math.random(),
    title: "Box titulo 3",
    text: lorem,
    bgColor: "#F2EE8D"
  },
  {
    id: Math.random(),
    title: "Box titulo 4",
    text: lorem,
    bgColor: "#9FEACD"
  }
];

function App() {
  return (
    <>
      <Global />
      <Home boxData={data} />
    </>
  );
}

export default App;

Alright! Now, let's run our project with npm run start or yarn start and see the result of resizing the screen. Check it out:

This is just another approach to fluid, responsive and adaptive layouts.

If you liked or have a suggestion or review, please let me know in the comments area below. It is so important to me to keep moving forward and improve.
The code of the entire project is available on Github, just click here.
Please add me on LinkedIn and let's share ideas!

Criando layouts responsivos e adaptativos com React e Styled-Components

Carlos Queiroz — Tue, 26 Nov 2019 03:30:31 +0000

Fala Techs!

Sabemos que nos dias atuais, para criar sites e web apps precisamos sempre estar preocupados com os diversos dispositivos e tamanhos de telas.

Muitas vezes temos um profissional de UI que faz aquele layout maravilhoso para uma tela de 1440px de largura e aí quando vamos construindo o layout usando as medidas fixas em pixels, fica um pouco estranho (Pra não dizer muito) em telas com resoluções diferentes. E as fontes então? Nem se fala.

Vou descrever aqui uma ideia que tenho usado para resolver esse problema. Existem muitas formas de fazer isso e aqui vou mostrar apenas mais uma delas.

Só precisamos alinhar alguns conhecimentos prévios e conceitos:

Estou utilizando o create-react-app para criar uma estrutura básica do React sem se preocupar com configuração do Webpack e afins.
Suponho que você saiba o que é o ReactJS e Styled-Components. Se não souber, em uma pesquisa rápida você encontra todos os conceitos. Embora eles possam ser aplicados em CSS puro também.

Layouts responsivos são aqueles que se ajustam ao tamanho da tela do usuário. Eles não mudam a posição das coisas, simplesmente ajustam.
Layouts adaptativos também se ajustam a tela do usuário, porém muitas vezes trocando a posição dos elementos e geralmente possuem media queries para adaptar ao tamanho da tela.

Bora começar!

Vamos começar criando nosso projeto com o create-react-app.
Após criar o projeto, acesse o diretório do projeto e instale o styled-component como dependência. Se você quiser configurar manual, sem usar o CRA fique a vontade.

Na pasta src vamos deixar somente os arquivos App.js e index.js. Apague os outros arquivos e lembre-se de remover as referências desses arquivos deletados do projeto.

Só pra gente ter uma referência, vamos usar essa imagem como layout:

Vamos também supor que o UI definiu que teremos fontes de tamanhos diferentes para Mobile com 24px, Tablet com 18px e Web com 16px.

Com essas informações em mãos, vamos seguir nosso projeto.

Reset CSS e configurações globais.

Na pasta src vamos criar outra pasta chamada styles e dentro da dessa pasta um arquivo chamado global.js (Essa organização que costumo usar em projetos pessoais. Se quiser usar de outra forma, sem problemas!).

Vamos usar aqui o styled-components para criar um estilo global. Segue o código:

import { createGlobalStyle } from "styled-components";
import px2vw from "../utils/px2vw";

export const Global = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root {
      font-size: ${px2vw(24)};

      @media (min-width: 768px) {
        font-size: ${px2vw(18)};
      }

      @media (min-width: 1024px) {
        font-size: ${px2vw(16)};
      }
    }
`;

export default Global;

O que fizemos aqui foi zerar algumas propriedades e definir o root do HTML com o tamanho das fontes que vamos usar.

Observe que importei uma função que chamei de px2vw. Essa função converte pixels para viewport width.

Como nosso layout será responsivo, preciso que ele se adapte em todos os tamanhos de tela e por isso vou usar o tamanho da viewport.
Poderia ter pensado em usar percentual, mas o problema é que se você definir um percentual dentro de um outro elemento menor que a viewport, ele vai usar o tamanho daquele elemento e neste caso não resolveria o problema.

Também vou usar essa função para os tamanhos de fonte pelo mesmo motivo: Se os elementos vão se ajustando a tela, as fontes também vão.

Optei por não trabalhar usando também o viewport height porque normalmente trabalhos com a largura e não com a altura da tela e também porque tive um outro problema desenvolvendo para Smart Tvs. Depois conto o que foi.

Função px2vw.

Bora então criar nossa função. Na pasta src do nosso projeto, vamos criar uma pasta utils e lá dentro vamos criar o arquivo px2vw.js.
Segue o código dele:

const px2vw = (size, width = 1440) => `${(size / width) * 100}vw`;

export default px2vw;

Para essa função, já deixei o valor do width padrão de 1440px, mas você pode usar qualquer outro ou ainda sempre receber como parâmetro da função ou ainda deixando ela mais genérica.

Criando a página do projeto.

Vamos agora criar uma página para exibir nosso layout.
Dentro da pasta src vamos criar uma pasta chamada pages e dentro dela vamos criar outra pasta chamada Home.
Dentro dessa pasta Home vamos criar dois arquivos. Vou separar componentes de estilo e componentes de lógica.

Vamos criar então os arquivos Home.js e HomeStyles.js.

HomeStyles.js:

import styled from "styled-components";
import px2vw from "../../utils/px2vw";

export const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: ${px2vw(32)};
  max-width: 100%;

  @media (min-width: 1024px) {
    flex-wrap: nowrap;
  }
`;

export const Box = styled.div`
  display: flex;
  width: ${px2vw(320, 320)};
  min-height: ${px2vw(200, 320)};
  flex-direction: column;
  padding: ${px2vw(20)};
  margin: ${px2vw(20)};
  background-color: ${props => props.bgColor};
  height: 100%;

  @media (min-width: 768px) {
    width: ${px2vw(320, 768)};
    min-height: ${px2vw(200, 768)};
    height: 100%;
  }

  @media (min-width: 1024px) {
    width: ${px2vw(500)};
    min-height: ${px2vw(300)};
    height: 100%;
  }
`;

export const BoxTitle = styled.h3`
  color: #333;
  font-size: 2rem;
  text-align: center;

  @media (min-width: 1024px) {
    font-size: 1.5rem;
  }
`;

export const BoxText = styled.p`
  margin-top: ${px2vw(20)};
  color: #666;
  font-size: 1.5rem;

  @media (min-width: 1024px) {
    font-size: 1rem;
  }
`;

Construímos a estilização do nosso componente. Adicionei estilos de texto pra gente ver como se comporta quando o tamanho da fonte é alterado.

Quando chamo a função px2vw para um outro tamanho de tela, passo esse tamanho como parâmetro. min-height: ${px2vw(200, 320)};

Usei também media queries para fazer nosso layout ser, além de responsivo ser também adaptativo, ou seja, dependendo do tamanho da tela as "caixas" vão se ajustando conforme o layout de exemplo.

Para cada Box passei também uma propriedade bgColor para controlar a cor de cada Box.

Agora vamos ao nosso Home.js:

import React from "react";

import { Container, Box, BoxTitle, BoxText } from "./HomeStyles";

export default function Home({ boxData }) {
  return (
    <Container>
      {boxData.map(box => (
        <Box key={box.id} bgColor={box.bgColor}>
          <BoxTitle>{box.title}</BoxTitle>
          <BoxText>{box.text}</BoxText>
        </Box>
      ))}
    </Container>
  );
}

E agora é só ajustar nosso componente App.js para importar nosso layout:

import React from "react";

import Global from "./styles/global";

import Home from "./pages/Home/Home";

const lorem =
  "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, sed iure blanditiis voluptatum nulla quidem minus quam tempora obcaecati necessitatibus inventore! Vitae totam quam pariatur facilis fugit maxime adipisci eaque.";

const data = [
  {
    id: Math.random(),
    title: "Box titulo 1",
    text: lorem,
    bgColor: "#D5CAFA"
  },
  {
    id: Math.random(),
    title: "Box titulo 2",
    text: lorem,
    bgColor: "#EDA9A9"
  },
  {
    id: Math.random(),
    title: "Box titulo 3",
    text: lorem,
    bgColor: "#F2EE8D"
  },
  {
    id: Math.random(),
    title: "Box titulo 4",
    text: lorem,
    bgColor: "#9FEACD"
  }
];

function App() {
  return (
    <>
      <Global />
      <Home boxData={data} />
    </>
  );
}

export default App;

Prontinho! Agora é só dar um npm run start ou yarn start e ver o resultado redimensionando a tela. Veja:

Esta é apenas mais uma das formas que você pode criar seus layouts fluidos com responsividade e adaptabilidade.

Se gostou deste texto ou até mesmo tenha um crítica ou sugestão, deixe nos comentários. É muito importante pra mim continuar me desenvolvendo e aprendendo.
O código está disponível no Github, basta clicar aqui.
Me adicionem também no linkedin e bora trocar ideia!

**English version is here