
Como funciona o desenvolvimento guiado por testes na criação de um componente React.

## Introdução

Nesse artigo vamos ver um passo a passo de como criar um componente React seguindo o TDD. Não vou me aprofundar muito, então é importante que você tenha algum conhecimento em React e Jest. Antes de começar a prática vamos relembrar como funciona o TDD.

## Test-driven Development

![TDD Flow](https://miro.medium.com/max/475/1*5IFu-XBsbzobAK3UxIOq4Q.png)

O Test-driven Development (TDD) é uma técnica que guia o desenvolvimento de software por meio de testes.

Basicamente seguimos um fluxo de desenvolvimento que possui 3 passos:

- **Red**: Primeiro escrevemos um teste que falha, para alguma funcionalidade que ainda será desenvolvida.
- **Green**: Com o teste criado, escrevemos uma solução simples para fazê-lo passar.
- **Refactor**: Por último refatoramos, ou seja, melhoramos o código.

Tendo isso em mente, podemos começar a desenvolver nosso componente passando por cada uma dessas etapas.

## Escrevendo um teste que falha

Vamos criar um componente bem simples, ele recebe um nome de usuário e exibe.

Como o desenvolvimento é guiado por testes, começamos criando o arquivo de teste `UserInfo.test.js`.

Dentro desse arquivo ficarão os testes do nosso componente. Vamos adicionar o seguinte código:

```javascript
import React from 'react'
import ReactDOM from 'react-dom'

describe('UserInfo', () => {
  it('renders the user name', () => {})
})
```

A função `describe` define uma suíte de testes. Para componentes React é uma boa prática atribuir a suíte de testes o mesmo nome do componente que será testado.

A função `it` define um único teste. O primeiro argumento é a descrição do teste e é uma boa prática sempre começar com um verbo no presente.

Você pode ler as descrições das funções `describe` e `it` como uma única frase: **UserInfo renders the user name (UserInfo renderiza o nome de usuário)**. Essa é uma boa prática que deve ser seguida sempre que possível.

Dentro do bloco `it` vamos criar uma `const` chamada `user` com um atributo `name` que armazena o nome do usuário. Depois criamos outra `const` chamada `component` que armazena o componente `UserInfo` com a prop `name`.

```jsx
const user = { name: 'Walter White' }
const component = <UserInfo name={user.name} />
```

Vamos criar uma `const` chamada `container` e dentro dela vamos criar uma `div`. Essa `div` é onde o componente será renderizado.

```javascript
const container = document.createElement('div')
```

Depois chamamos o método `ReactDOM.render` passando o componente que queremos renderizar e o elemento HTML onde ele será renderizado.

```javascript
ReactDOM.render(component, container)
```

Por fim chamamos a função `expect` que recebe um valor e compara com um valor esperado. Nesse caso o valor esperado é **`Walter White`** e o valor recebido é `container.textContent`.

```javascript
expect(container.textContent).toMatch('Walter White')
```

Quando executarmos o teste ele vai dar o seguinte erro:

```shell
ReferenceError: UserInfo is not defined
   5 |   it('renders the user name', () => {
   6 |     const user = { name: 'Walter White' };
>  7 |     const component = <UserInfo name={user.name} />;
```

Não definimos o componente `UserInfo` de propósito, primeiro escrevemos um teste que falha lembra?

## Fazendo o teste passar

Dentro do arquivo UserInfo.js vamos criar o nosso componente da maneira mais simples possível para o teste passar.

```javascript
import React from 'react'

export const UserInfo = () => <div>Walter White</div>
```

Não se assuste! Como eu disse, a solução deve ser a **mais simples possível**.

E importá-lo dentro do arquivo `UserInfo.test.js`.

```javascript
import { UserInfo } from './UserInfo'
```

Ao executar novamente nosso teste vemos que ele passou:

```
PASS  test/UserInfo.test.js

UserInfo
✓ renders the user name (21ms)
```

Show! Nosso teste está passando, mas e se quisermos usar esse componente com outro valor?

Para chegar em uma implementação real, precisamos adicionar mais testes, esse processo é chamado de **triangulação**. Então vamos escrever mais um teste:

```javascript
it('renders another user name', () => {
  const user = { name: 'Jesse Pinkman' }
  const component = <UserInfo name={user.name} />
  const container = document.createElement('div')
  ReactDOM.render(component, container)
  expect(container.textContent).toMatch('Jesse Pinkman')
})
```

Ao executar novamente nosso teste, vemos que ele volta a falhar, mas com um erro diferente dessa vez:

```
● UserInfo › renders another user name

  expect(received).toMatch(expected)

  Expected substring: "Jesse Pinkman"
  Received string:    "Walter White"
```

Precisamos alterar nosso componente de uma forma que os dois testes passem:

```javascript
export const UserInfo = ({ name }) => <div>{name}</div>
```

Show! Agora quando rodamos nossos testes eles passam.

```
PASS  test/UserInfo.test.js

UserInfo
✓ renders the user name (26ms)
✓ renders another user name (2ms)
```

Mas será que nosso código não poderia ficar melhor?

## Refatoração

Essa é a hora em que devemos resistir a tentação de passar para o próximo componente e trabalhar duro para deixar nosso código, tanto de produção quanto o de teste, o mais limpo possível.

Se reparamos bem no nosso arquivo `UserInfo.test.js`, podemos ver claramente que alguns itens se repetem e isso não é uma boa prática.

```jsx{3,4,5,6,12,13,14,15}
describe('UserInfo', () => {
  it('renders the user name', () => {
    const user = { name: 'Walter White' }
    const component = <UserInfo name={user.name} />
    const container = document.createElement('div')
    ReactDOM.render(component, container)

    expect(container.textContent).toMatch('Walter White')
  })

  it('renders another user name', () => {
    const user = { name: 'Jesse Pinkman' }
    const component = <UserInfo name={user.name} />
    const container = document.createElement('div')
    ReactDOM.render(component, container)

    expect(container.textContent).toMatch('Jesse Pinkman')
  })
})
```

Para melhorar esse cenário podemos fazer algumas melhorias no código do nosso teste:

Ambos os testes usam as mesmas duas variáveis: `container` e `user`. Podemos mover essas declarações para o topo da função `describe`, deixando para fazer as atribuições dentro dos testes, isso significa que precisaremos usar `let` ao invés de `const`:

```javascript
let container, user
```

Usamos a função `createElement` da mesma forma em ambos os testes, nesse tipo de caso podemos usar a função `beforeEach` que será executada antes de cada teste:

```javascript
beforeEach(() => {
  container = document.createElement('div')
})
```

Também usamos o método `ReactDOM.render` em ambos os testes, a diferença é que precisamos passar o componente `UserInfo` como parâmetro dentro de cada teste. Nesse caso podemos criar uma função `render`:

```javascript
const render = (component) => ReactDOM.render(component, container)
```

Com isso nosso teste deve ficar assim:

```javascript
it('renders the user name', () => {
  user = { name: 'Walter White' }
  render(<UserInfo name={user.name} />)
  expect(container.textContent).toMatch('Walter White')
})
```

Dividimos nosso teste em três seções distintas:

- **Arrange**: Configura dependências de teste
- **Act**: Executa o código de produção em teste
- **Assert**: Verifica as expectativas são atendidas

Com isso, conseguimos deixar nosso teste bem mais limpo e conciso. Abaixo podemos ver como ficou o arquivo final:

```javascript
describe('UserInfo', () => {
  let container, user

  beforeEach(() => {
    container = document.createElement('div')
  })

  const render = (component) => ReactDOM.render(component, container)

  it('renders the user name', () => {
    user = { name: 'Walter White' }
    render(<UserInfo name={user.name} />)
    expect(container.textContent).toMatch('Walter White')
  })

  it('renders another user name', () => {
    user = { name: 'Jesse Pinkman' }
    render(<UserInfo name={user.name} />)
    expect(container.textContent).toMatch('Jesse Pinkman')
  })
})
```

## Conclusão

É isso, tentei resumir bastante para que o artigo não ficasse muito longo, espero que tenham gostado, se tiverem dúvidas ou sugestões não deixem de comentar. Abraço!


Escrevendo um componente React com TDD

Aprenda como criar um componente de lista em React com desenvolvimento guiado por testes.

## Introdução

Dando continuidade ao [artigo anterior](https://felipecesar.dev/escrevendo-um-componente-react-com-tdd), onde criamos o componente `UserInfo`, neste artigo vamos criar o componente `UserList` que vai receber um `array` com nomes de usuários e renderizar uma lista com cada um deles.

Além disso, também vamos começar a usar uma ferramenta que não usamos no artigo anterior, o [Testing Library](https://testing-library.com/).

## Testing Library

O Testing Library, de uma forma bem resumida, é uma familia de pacotes que nos permite interagir diretamente com DOM por meio de queries que ajudam a testar nossas aplicações de um ponto de vista semelhante ao do usuário, reduzindo detalhes de implementação.

Ele pode ser usado em aplicações com JavaScript puro ou com frameworks, incluindo [React](https://testing-library.com/docs/react-testing-library/intro), [Vue](https://testing-library.com/docs/vue-testing-library/intro) e [Angular](https://testing-library.com/docs/angular-testing-library/intro).

Como estamos usando React, vamos instalar o pacote próprio para ele no nosso projeto.

```shell
npm install --save-dev @testing-library/react
```

Após a instalação, vamos criar um arquivo chamado `UserList.test.js`. Dessa vez não vamos criar um método render, vamos importá-lo diretamente do Testing Library.

```javascript
import { render } from '@testing-library/react';
```

## Renderizando a lista

Com o arquivo `UserList.test.js` criado, vamos escrever nosso primeiro teste.

```javascript
describe("UserList", () => {
  it("renders multiple users in ul element", () => {
    const users = [
      { id: 1, name: "Matthew Murdock" },
      { id: 2, name: "Frank Castle" }
    ];

    const { container } = render(<UserList users={users} />);

    expect(container.querySelector("ul")).not.toBeNull();
    expect(container.querySelector("ul").children).toHaveLength(2);
  });
});
```

Repare que o `render` do Testing Library nos permite usar o `container` de forma semelhante a que criamos antes.

Lembrando que quando estamos desenvolvendo com TDD precisamos seguir todo o fluxo dele, então vamos executar nosso teste e vê-lo falhar.

```shell
● UserList › renders multiple users in ul element

ReferenceError: UserList is not defined
```

Para corrigir isso, vamos criar o arquivo `UserList.js`, retornando apenas `null` por enquanto.

```javascript
export const UserList = () => null;
```

E importá-lo dentro do teste.

```javascript
import { UserList } from '../src/UserList';
```

Ao retornar `null` dessa forma, deixamos de receber um erro do React e passamos a receber uma mensagem de erro mais amigável.

```shell
expect(received).not.toBeNull()

Received: null

   9 | const { container } = render(<UserList users={users} />);
  10 | 
> 11 | expect(container.querySelector("ul")).not.toBeNull();
     |                                           ^
```

Vamos fazer o mínimo necessário para o teste passar.

```javascript
const List = () => <ul />;
```

Ao executar o teste novamente, recebemos outro erro.

```shell
Expected length: 2
Received length: 0
Received object: []

  10 | 
  11 | expect(container.querySelector("ul")).not.toBeNull();
> 12 | expect(container.querySelector("ul").children).toHaveLength(2);
     |   
```

Como temos mais de um `expect` podemos ver em qual deles o teste está falhando.

Vamos usar a função `map` para renderizar todos os itens da lista.

```javascript
const List = ({ users }) => (
  <ul>
    {users.map(() => <div />)}
  </ul>
);
```

Você pode estar se perguntando por quê usei `div` ao invés de `li`, por enquanto isso não vai fazer diferença no resultado do teste, podemos usar os próximos testes para verificar se os itens são `li`.

Após essa alteração o teste deve passar, mas com um aviso que não devemos ignorar.

```shell
console.error node_modules/react/cjs/react.development.js:175
Warning: Each child in a list should have a unique "key" prop.
```

Para remover esse aviso, podemos fazer o que ele diz e adicionar a `prop` nos itens da lista.

```javascript
<ul>
  {users.map(user => <div key={user.id} />)}
</ul>
```

## Especificando os itens da lista

Agora vamos preencher os itens da lista que acabamos de criar. Primeiro, vamos criar outro teste.

```javascript
it("renders each user in a li", () => {
  const users = [
    { id: 1, name: "Matthew Murdock" },
    { id: 2, name: "Frank Castle" }
  ];

  const { container } = render(<UserList users={users} />);
  const listItems = container.querySelectorAll("li");


  expect(listItems).toHaveLength(2);
  expect(listItems[0].textContent).toEqual("Matthew Murdock");
  expect(listItems[1].textContent).toEqual("Frank Castle");
});
```

Ao executá-lo devemos receber o seguinte erro.

```shell
Expected length: 2
Received length: 0
Received object: []

  25 | const listItems = container.querySelectorAll("li");
  26 | 
> 27 | expect(listItems).toHaveLength(2);
     |                   ^
```

Como não existe nenhum elemento `li` o teste não vai passar, vamos corrigir isso.

```javascript
<ul>
  {users.map(user => <li key={user.id} />)}
</ul>
```

Recebemos outro erro após executar novamente o teste.

```shell
Expected: "Matthew Murdock"
Received: ""

  26 |
  27 | expect(listItems).toHaveLength(2);
> 28 | expect(listItems[0].textContent).toEqual("Matthew Murdock");
     |                                  ^
```

Para corrigi-lo, precisamos exibir o nome do usuário no item da lista.

```javascript
<ul>
  {users.map(user => (
    <li key={user.id}>{user.name}</li>
  ))}
</ul>
```

Pronto! Temos o nosso componente de lista funcionando e coberto por testes, só falta refatorar nosso código.

## Refatorando

Não sei se você reparou, mas instalamos o Testing Library para melhorar a forma como escrevemos os testes. Até agora não vimos nenhuma diferença, simplesmente deixamos de criar um método `render` para usar um que já está pronto.

Para deixar nossos testes mais próximos da forma como o usuário interage com a aplicação, podemos usar as queries que o Testing Library nos dá.

O Testing Library conta com queries que podemos usar para interagir diretamente com o DOM, `ByLabelText`, `ByPlaceholderText` e `ByText`, são algumas delas, além disso, cada query tem variantes como `getBy` e `getAllBy`. Na [documentação](https://testing-library.com/docs/dom-testing-library/api-queries) você pode ver exatamente o que cada uma delas faz.

No primeiro teste, vamos usar a query `getByRole`, com ela podemos buscar um elemento do DOM a partir de uma **ARIA role**.

```javascript
it("renders multiple users in list", () => {
  const users = [
    { id: 1, name: "Matthew Murdock" },
    { id: 2, name: "Frank Castle" }
  ];

  const { getByRole } = render(<UserList users={users} />);

  expect(getByRole("list")).not.toBeNull();
  expect(getByRole("list").children).toHaveLength(2);
});
```

Quando usamos o `getByRole` não passamos o seletor do elemento, ao invés disso passamos a `role` dele. Cada elemento possui uma `role` padrão, que deve ser usada caso não tenha nenhuma outra definida com por meio de um atributo.

Como isso torna nosso código mais próximo da forma que o usuário interage com a aplicação?

Podemos pensar que estamos dizendo para o usuário checar se uma existe uma lista e se ela tem dois itens, independente de ser um `ul` ou `ol`, não precisamos desses detalhes de implementação no teste.

Você pode conferir a `role` de cada elemento nessa [lista](https://github.com/A11yance/aria-query#elements-to-roles).

No segundo teste, podemos usar a query `getByAllRole` para obter todos os itens da lista.

```javascript
it("renders each user in a list item", () => {
  const users = [
    { id: 1, name: "Matthew Murdock" },
    { id: 2, name: "Frank Castle" }
  ];

  const { getAllByRole } = render(<UserList users={users} />);
  const listItems = getAllByRole("listitem");

  expect(listItems).toHaveLength(2);
  expect(listItems[0].textContent).toEqual("Matthew Murdock");
  expect(listItems[1].textContent).toEqual("Frank Castle");
});
```

Por fim, movemos o `array` de usuários para o topo da função `describe`, deixando o código mais limpo e sem repetições.

```javascript
describe("UserList", () => {
  const users = [
    { id: 1, name: "Matthew Murdock" },
    { id: 2, name: "Frank Castle" }
  ];

  it("renders multiple users in list", () => {
    const { getByRole } = render(<UserList users={users} />);
    expect(getByRole("list")).not.toBeNull();
    expect(getByRole("list").children).toHaveLength(2);
  });

  it("renders each user in a list item", () => {
    const { getAllByRole } = render(<UserList users={users} />);
    const listItems = getAllByRole("listitem");
    expect(listItems).toHaveLength(2);
    expect(listItems[0].textContent).toEqual("Matthew Murdock");
    expect(listItems[1].textContent).toEqual("Frank Castle");
  });
});
```

## Conclusão

Neste artigo, criamos um componente de lista com TDD e ainda podemos aprender um pouco sobre Testing Library, nos próximos vamos explorar um pouco mais essa lib. Se tiverem dúvidas ou sugestões não deixem de comentar. Abraço!

Felipe César

Escrevendo um componente React com TDD

React com TDD: Renderizando uma lista