Merge pull request #3584 from pablo-maff/part5-spanish-playwright

Part5 spanish playwright

Author: mluukkai

src/content/5/en/part5b.md

@@ -358,7 +358,7 @@ The application code can be found on [GitHub](https://github.com/fullstack-hy202
 
 Our current implementation is quite good; it has one aspect that could be improved.
 
-After a new note is created, it would make sense to hide the new note form. Currently, the form stays visible. There is a slight problem with hiding the form. The visibility is controlled with the <i>visible</i> state variable inside of the <i>Togglable</i> component. 
+After a new note is created, it would make sense to hide the new note form. Currently, the form stays visible. There is a slight problem with hiding it, the visibility is controlled with the <i>visible</i> state variable inside of the <i>Togglable</i> component.
 
 One solution to this would be to move control of the Togglable component's state outside the component. However, we won't do that now, because we want the component to be responsible for its own state. So we have to find another solution, and find a mechanism to change the state of the component externally.
 

src/content/5/en/part5c.md

@@ -57,7 +57,7 @@ afterEach(() => {
 })
 ```
 
-Now, after each test, the function _cleanup_ is performed that resets the jsdom that is simulating the browser.
+Now, after each test, the function _cleanup_ is executed to reset jsdom, which is simulating the browser.
 
 Expand the _vite.config.js_ file as follows
 
@@ -131,7 +131,7 @@ We can use the object [screen](https://testing-library.com/docs/queries/about#sc
   expect(element).toBeDefined()
 ```
 
-The existence of an element is checked using Vitest's [expect](https://vitest.dev/api/expect.html#expect) command. Expect generates an assertion from its parameter, the validity of which can be tested using various condition functions. Now we used [toBeDefined](https://vitest.dev/api/expect.html#tobedefined) which tests whether the _element_ parameter of expect exists.
+The existence of an element is checked using Vitest's [expect](https://vitest.dev/api/expect.html#expect) command. Expect generates an assertion for its argument, the validity of which can be tested using various condition functions. Now we used [toBeDefined](https://vitest.dev/api/expect.html#tobedefined) which tests whether the _element_ argument of expect exists.
 
 Run the test with command _npm test_:
 
@@ -384,7 +384,7 @@ The expectation of the test uses [toHaveLength](https://vitest.dev/api/expect.ht
 expect(mockHandler.mock.calls).toHaveLength(1)
 ```
 
-The calls of the mock function are saved to the array [mock.calls](https://vitest.dev/api/mock#mock-calls) within the mock function object.
+The calls to the mock function are saved to the array [mock.calls](https://vitest.dev/api/mock#mock-calls) within the mock function object.
 
 [Mock objects and functions](https://en.wikipedia.org/wiki/Mock_object) are commonly used [stub](https://en.wikipedia.org/wiki/Method_stub) components in testing that are used for replacing dependencies of the components being tested. Mocks make it possible to return hardcoded responses, and to verify the number of times the mock functions are called and with what parameters.
 
@@ -417,7 +417,6 @@ const Togglable = forwardRef((props, ref) => {
 The tests are shown below:
 
 ```js
-
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import Togglable from './Togglable'
@@ -592,7 +591,7 @@ test('<NoteForm /> updates parent state and calls onSubmit', async() => {
 })
 ```
 
-In the middle of running the tests, the following is printed
+In the middle of running the tests, the following is printed in the console:
 
 ```
 [ [ { content: 'testing a form...', important: true } ] ]

src/content/5/en/part5d.md

@@ -1090,7 +1090,6 @@ The structure of the test must be as follows:
 ```js
 describe('Blog app', function() {
   beforeEach(function() {
-    cy.request('POST', 'http://localhost:3003/api/testing/reset')
     cy.visit('http://localhost:5173')
   })
 
@@ -1100,8 +1099,6 @@ describe('Blog app', function() {
 })
 ```
 
-The <i>beforeEach</i> formatting blog must empty the database using for example the method we used in the [material](/en/part5/end_to_end_testing#controlling-the-state-of-the-database).
-
 #### 5.18: Blog List End To End Testing, step 2
 
 Make tests for logging in. Test both successful and unsuccessful login attempts.
@@ -1112,8 +1109,8 @@ The test structure extends like so:
 ```js
 describe('Blog app', function() {
   beforeEach(function() {
-    cy.request('POST', 'http://localhost:3001/api/testing/reset')
-    // create here a user to backend
+    // empty the db here
+    // create a user for the backend here
     cy.visit('http://localhost:5173')
   })
 
@@ -1133,6 +1130,8 @@ describe('Blog app', function() {
 })
 ```
 
+The _beforeEach_ block must empty the database using, for example, the reset method we used in the [material](/en/part5/end_to_end_testing_cypress#controlling-the-state-of-the-database).
+
 <i>Optional bonus exercise</i>: Check that the notification shown with unsuccessful login is displayed red.
 
 #### 5.19: Blog List End To End Testing, step 3
@@ -1146,7 +1145,7 @@ describe('Blog app', function() {
 
   describe('When logged in', function() {
     beforeEach(function() {
-      // log in user here
+      // ...
     })
 
     it('A blog can be created', function() {

src/content/5/en/part5e.md

@@ -8,7 +8,7 @@ lang: es
 
 En esta parte volvemos al frontend, primero mirando a diferentes posibilidades para probar el código React. También implementaremos la autenticación basada en tokens que permitirá a los usuarios iniciar sesión en nuestra aplicación.
 
-<i>Parte actualizada el 17 de Agosto de 2023</i>
-- <i>Create React App reemplazado con Vite</i>
+<i>Parte actualizada el 3 de Marzo de 2024</i>
+- <i>Jest reemplazado por Vitest</i>
 
 </div>

src/content/5/es/part5.md

@@ -358,9 +358,11 @@ El código de la aplicación se puede encontrar en [GitHub](https://github.com/f
 
 Nuestra implementación actual es bastante buena, pero tiene un aspecto que podría mejorarse.
 
-Después de crear una nueva nota, tendría sentido ocultar el nuevo formulario de nota. Actualmente, el formulario permanece visible. Hay un pequeño problema al ocultar el formulario. La visibilidad se controla con la variable <i>visible</i> dentro del componente <i>Togglable</i>. ¿Cómo podemos acceder a él fuera del componente?
+Después de crear una nueva nota, tendría sentido ocultar el formulario de nueva nota. Actualmente, el formulario permanece visible. Hay un pequeño problema al ocultarlo, la visibilidad se controla con la variable <i>visible</i> dentro del componente <i>Togglable</i>.
 
-Hay muchas formas de implementar el cierre del formulario desde el componente padre, pero usemos el mecanismo [ref](https://es.react.dev/learn/referencing-values-with-refs) de React, que ofrece una referencia al componente.
+Una solución a esto sería mover el control del estado del componente Togglable fuera del componente. Sin embargo, no lo haremos ahora, porque queremos que el componente sea responsable de su propio estado. Por lo tanto, tenemos que encontrar otra solución y hallar un mecanismo para cambiar el estado del componente externamente.
+
+Hay varias formas diferentes de implementar el acceso a las funciones de un componente desde fuera del componente, pero usemos el mecanismo de [ref](https://es.react.dev/learn/referencing-values-with-refs) de React, que ofrece una referencia al componente.
 
 Hagamos los siguientes cambios en el componente <i>App</i>:
 
@@ -571,14 +573,6 @@ const Blog = ({ blog }) => {
 
 #### 5.8: Frontend de la Lista de Blogs, paso 8
 
-Notamos que algo está mal. Cuando se crea un nuevo blog en la aplicación, no se muestra el nombre del usuario que agregó el blog en los detalles del mismo:
-
-![navegador mostrando nombre faltante debajo del botón Me gusta](../../images/5/59new.png)
-
-Cuando se recarga el navegador, se muestra la información de la persona. Esto no es aceptable, averigua dónde está el problema y realiza la corrección necesaria.
-
-#### 5.9: Frontend de la lista de blogs, paso 9
-
 Implementa la funcionalidad para el botón like. Los likes aumentan al hacer un solicitud HTTP _PUT_ a la dirección única de la publicación del blog en el backend.
 
 Dado que la operación de backend reemplaza toda la publicación del blog, deberás enviar todos sus campos en el cuerpo de la solicitud. Si deseas agregar un like a la siguiente publicación de blog:
@@ -612,7 +606,15 @@ Deberías realizar una solicitud HTTP PUT a la dirección <i>/api/blogs/5a43fde2
 
 El Backend también debe ser actualizado para manejar la referencia al usuario.
 
-**Una última advertencia:** si notas que estás usando async/await y el método _then_ en el mismo código, es casi seguro que estás haciendo algo mal. Usa uno u otro, y nunca uses ambos al mismo tiempo "por si acaso".
+#### 5.9: Frontend de la lista de Blogs, paso 9
+
+Nos damos cuenta de que algo está mal. Cuando se da "me gusta" a un blog en la app, el nombre del usuario que añadió el blog no se muestra en sus detalles:
+
+![navegador mostrando nombre faltante debajo del botón de me gusta](../../images/5/59put.png)
+
+Cuando se recarga el navegador, la información de la persona se muestra. Esto no es aceptable, averigua dónde está el problema y realiza la corrección necesaria.
+
+Por supuesto, es posible que ya hayas hecho todo correctamente y el problema no ocurra en tu código. En ese caso, puedes continuar.
 
 #### 5.10: Frontend de la Lista de Blogs, paso 10
 
@@ -706,12 +708,6 @@ En la parte 3 configuramos la herramienta de estilo de código para el backend [
 
 Vite ha instalado ESlint en el proyecto de forma predeterminada, por lo que todo lo que nos queda por hacer es definir nuestra configuración deseada en el archivo <i>.eslintrc.cjs</i>.
 
-A continuación, comenzaremos a probar el frontend y, para evitar errores de linter no deseados e irrelevantes instalaremos el paquete [eslint-plugin-jest](https://www.npmjs.com/package/eslint-plugin-jest):
-
-```bash
-npm install --save-dev eslint-plugin-jest
-```
-
 Creemos un archivo <i>.eslintrc.js</i>  con el siguiente contenido:
 
 ```js
@@ -720,7 +716,6 @@ module.exports = {
   env: {
     browser: true,
     es2020: true,
-    "jest/globals": true
   },
   extends: [
     'eslint:recommended',
@@ -731,7 +726,7 @@ module.exports = {
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
   settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh', 'jest'],
+  plugins: ['react-refresh'],
   rules: {
     "indent": [
         "error",
@@ -773,6 +768,7 @@ Vamos a crear un archivo [.eslintignore](https://eslint.org/docs/latest/use/conf
 node_modules
 dist
 .eslintrc.cjs
+vite.config.js
 ```
 
 Ahora los directorios <em>dist</em> y <em>node_modules</em> se omitirán al realizar el linting.