Skip to content

Commit 5b96b10

Browse files
mayconblopesmluukkai
authored andcommitted
refactor(part5b): improve ptbr text
1 parent 30e7d76 commit 5b96b10

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

src/content/5/ptbr/part5c.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ Existem algumas formas de testar aplicações React. Vamos dar uma olhada em alg
1212

1313
Testes serão implementados com a mesma [Jest](http://jestjs.io/) biblioteca de teste desenvolvida pelo Facebook que foi usada na parte anterior. Jest é configurado por padrão para aplicações criadas com o create-react-app.
1414

15-
Além do JEST, também precisamos de outra biblioteca de testes que nos ajude a renderizar componentes para fins de teste. A melhor opção atual para isso é [react-test-library] (https://github.com/testing-library/react-testing-library) que sofreu um rápido crescimento de popularidade nos últimos tempos.
15+
Além do JEST, também precisamos de outra biblioteca de testes que nos ajude a renderizar componentes para fins de teste. A melhor opção atual para isso é [react-test-library](https://github.com/testing-library/react-testing-library) que sofreu um rápido crescimento de popularidade nos últimos tempos.
1616

1717
Vamos instalar a biblioteca com o comando:
1818

1919
```bash
2020
npm install --save-dev @testing-library/react @testing-library/jest-dom
2121
```
2222

23-
Também instalamos [jest-dom] (https://testing-library.com/docs/ecosystem-jest-dom/), que fornece alguns métodos auxiliares relacionados a Jest.
23+
Também instalamos [jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/), que fornece alguns métodos auxiliares relacionados a Jest.
2424

2525
Vamos primeiro escrever testes para o componente responsável por renderizar uma nota:
2626

@@ -39,7 +39,7 @@ const Note = ({ note, toggleImportance }) => {
3939
}
4040
```
4141

42-
Observe que o elemento <i>li</i> possui o [CSS](https://reactjs.org/docs/dom-elements.html#classname) classname <i>nota</i> , que poderia ser usado para acessar o componente em nossos testes.
42+
Observe que o elemento <i>li</i> possui o [CSS](https://reactjs.org/docs/dom-elements.html#classname) className <i>note</i> , que poderia ser usado para acessar o componente em nossos testes.
4343

4444
### Renderizando o componente para testes
4545

@@ -66,13 +66,13 @@ test('renders content', () => {
6666
})
6767
```
6868

69-
Após a configuração inicial, o teste renderiza o componente com o [render] (https://testing-library.com/docs/react-testing-library/api#render) que é uma função fornecida pela react-testing-library:
69+
Após a configuração inicial, o teste renderiza o componente com o [render](https://testing-library.com/docs/react-testing-library/api#render) que é uma função fornecida pela react-testing-library:
7070

7171
```js
7272
render(<Note note={note} />)
7373
```
7474

75-
Normalmente, os componentes React são renderizados ao <i>DOM</i> . O método de renderização que usamos renderiza os componentes em um formato adequado para testes sem renderizá-los ao DOM.
75+
Normalmente, os componentes React são renderizados no <i>DOM</i> . O método de renderização que usamos renderiza os componentes em um formato adequado para testes sem renderizá-los ao DOM.
7676

7777
Podemos usar o objeto [screen](https://testing-library.com/docs/queries/about#screen) para acessar o componente renderizado. Usamos o método da Screen [getByText](https://testing-library.com/docs/queries/bytext) para procurar um elemento que tenha o conteúdo da nota e garantir que ele exista:
7878

@@ -135,7 +135,7 @@ test('renders content', () => {
135135

136136
O teste falha se _getByText_ não encontrar o elemento que está procurando.
137137

138-
Também poderíamos usar [CSS-selectors](https://developer.mozilla.org/pt-BR/docs/web/css/css_selectors) para encontrar elementos renderizados usando o método [queryselector] (https: // desenvolvedor. mozilla.org/en-us/docs/web/api/document/queryselector) do objeto [container] (https://testing-library.com/docs/react-testing-library/api/#container-1) que é um dos campos retornados pela renderização:
138+
Também poderíamos usar [CSS-selectors](https://developer.mozilla.org/pt-BR/docs/web/css/css_selectors) para encontrar elementos renderizados usando o método [queryselector](https: // desenvolvedor. mozilla.org/en-us/docs/web/api/document/queryselector) do objeto [container](https://testing-library.com/docs/react-testing-library/api/#container-1) que é um dos campos retornados pela renderização:
139139

140140
```js
141141
import React from 'react'
@@ -160,13 +160,13 @@ test('renders content', () => {
160160
})
161161
```
162162

163-
Existem também outros métodos, por exemplo, [getByTestId] (https://testing-library.com/docs/queries/bytestid/), que procuram elementos com base em id-attributes que são inseridos no código especificamente para fins de teste.
163+
Existem também outros métodos, por exemplo, [getByTestId](https://testing-library.com/docs/queries/bytestid/), que procuram elementos com base em id-attributes que são inseridos no código especificamente para fins de teste.
164164

165165
### Testes de depuração
166166

167167
Normalmente, encontramos muitos tipos diferentes de problemas ao escrever nossos testes.
168168

169-
Objeto _screen_ possui método [debug] (https://testing-library.com/docs/queries/about/#screendebug) que pode ser usado para imprimir o HTML de um componente para o terminal. Se alterarmos o teste da seguinte forma:
169+
Objeto _screen_ possui método [debug](https://testing-library.com/docs/queries/about/#screendebug) que pode ser usado para imprimir o HTML de um componente para o terminal. Se alterarmos o teste da seguinte forma:
170170

171171
```js
172172
import React from 'react'
@@ -248,7 +248,7 @@ Agora o HTML do elemento procurado é impresso:
248248

249249
Além de exibir conteúdo, o componente <i>Nota</i> também garante que, quando o botão associado à nota é pressionado, a função que manipula eventos (event handler) _toggleImportance_ é chamada.
250250

251-
Vamos instalar uma biblioteca [user-event] (https://testing-library.com/docs/user-event/intro) que facilita a simulação de entrada do usuário:
251+
Vamos instalar uma biblioteca [user-event](https://testing-library.com/docs/user-event/intro) que facilita a simulação de entrada do usuário:
252252

253253
```bash
254254
npm install --save-dev @testing-library/user-event
@@ -304,7 +304,7 @@ const button = screen.getByText('make not important')
304304
await user.click(button)
305305
```
306306

307-
Clicar acontece com o método [click] (https://testing-library.com/docs/user-event/convenience/#click) da biblioteca userevent-library.
307+
Clicar acontece com o método [click](https://testing-library.com/docs/user-event/convenience/#click) da biblioteca userevent-library.
308308

309309
A expectativa do teste verifica que a <i>função mock</i> foi chamada exatamente uma vez.
310310

@@ -495,7 +495,7 @@ test('<NoteForm /> updates parent state and calls onSubmit', async () => {
495495
})
496496
```
497497

498-
Os testes têm acesso ao campo de entrada usando a função [getByRole] (https://testing-library.com/docs/queries/byrole).
498+
Os testes têm acesso ao campo de entrada usando a função [getByRole](https://testing-library.com/docs/queries/byrole).
499499

500500
O método [type](https://testing-library.com/docs/user-event/utility#type) do userEvent é usado para escrever texto no campo de entrada.
501501

@@ -761,7 +761,7 @@ Optamos por nos concentrar em fazer testes de ponta a ponta para testar todo a a
761761

762762
### Teste de Snapshot
763763

764-
O JEST oferece uma alternativa completamente diferente aos chamados testes "tradicionais" [snapshot] (https://jestjs.io/pt-BR/docs/snapshot-testing). A característica interessante dos snapshots é que os desenvolvedores não precisam definir nenhum teste, é simples o suficiente para adotar testes snapshot.
764+
O JEST oferece uma alternativa completamente diferente aos chamados testes "tradicionais" [snapshot](https://jestjs.io/pt-BR/docs/snapshot-testing). A característica interessante dos snapshots é que os desenvolvedores não precisam definir nenhum teste, é simples o suficiente para adotar testes snapshot.
765765

766766
O princípio fundamental é comparar o código HTML definido pelo componente depois de alterar para o código HTML que existia antes de ser alterado.
767767

0 commit comments

Comments
 (0)