A concienca este men es un crack de la programacion, asi como messy es el mejor jugador de futbol este mejor es un verdadero crack vos sos el mejor saludos desde Colombia
Hola Midu, muchas gracias por tu esfuerzo de presentarnos el curso de reactjs. Tengo una pregunta, al momento en que usas el customHooks, comprendo la idea de esto, pero dentro del useCatImage (solo para probar) borré el use effect, return un null cuando es un !fact, y cuando apreto el botón, la lógica sigue funcionando igual, cambia el fact (que está bien) pero que cambia la imagen igual...Añadí un console.log previo al fetch, cuando lo dejo sin effect veo que el log se muestra 3 veces, y con effect 1 vez. Entoces: ¿Por qué sigue funcionando sin el effect? Y ¿Por qué imprimiría 3 veces? Esta pregunta se relaciona hasta el minuto 18:50
@@midulive Nunca creí verte respondiendo comentarios un año despues, por cierto apenas comence tu curso de React hace una semana y es una chulada, la mejor de todas.
Midu, como estas? Tengo una duda. Yo para hacer el botón cree un estado llamado alter como booleano, y se lo pasé como dependencia al primer useEffect. Con el botón solo cambiaba el estado de alter entre true y false, y eso funcionó. Lo que hice esta mas en algún aspecto? Ya sea a nivel rendimiento o a nivel sintactico.
Gracias Midu! Muy bueno. Una duda, moverias absolutamente toda la logica a un custom hook, incluso la tipica funcion "handleCkick" solamente por separar la vista de la logica? O harias custom hooks aunque sepas que NO se va a reutilizar?
Pensaria que no es necesario, ya que igual la logica como quedo está super entendible, ademas esa es la idea de los custom hooks, que se reutilicen, entonces no tendria mucho sentido. (en mi opinion)
buenas, si les da pereza escribir test como a mi Playwright tiene una herramienta que visualmente los pueden construir con *playwright codegen* funciona con javascript, python muy muy facil
con respecto al test que dejo midu de verificar si el texto cambiar al dar click en el button dijo que seria mas dificil :c y solo agregue 2 lineas que serian : await page.click('text=get Random fact') await page.waitForTimeout(2000) es mala practica hacer lo que hice? (basicamente lo que hago es obtener el texto, img dar click en el boton esperar 2 segundos, recuperar el texto nuevamente y los comparo, en el expect compruebo que sean diferentes si son iguales significa que no cambio el texto ni la imagen)
Es buena opción pero no se en que punto haya la pequeña probabilidad de que se genere el mismo texto por suerte, de igual forma cambia, osea es el mismo pero hay un nuevo dato en fact, entonces no se, se me ocurre si depronto comprobando en el fact que haya entrado un nuevo valor despues de darle click al botón.
Como cambió la respuesta de la API, para reconstruir el src de la imagen se debe hacer esto: .then(data => { const { _id } = data const url = `/cat/${_id}/says/${threeFirstWords}` setImageUrl(url) })
Disculpa la molestia por preguntar pero, donde haces este cambio? en el primer useEffect o en el segundo? mantienes el fetch del segundo useEffect intacto??
@@roxaskeyblade8444 Se hace el cambio en el hook que se encarga de devolver la imagen (imageUrl). En el caso del proyecto estaría en src/hooks/useCatImage.js. Se pone dentro del useEffect en el segundo .then, ya que es ese donde podemos acceder a la data.
@@DiegooAlt Muchas gracias tenia mis dudas ya que la url se construye con el extracto de las primeras 3 palabras de la cadena despues me di cuenta que eso se extrae del estado tambien pense que el endpoint del fetch era otro, muchas gracias por aclarar mis dudas!!
Para hacer el test que compruebe que el contenido cambia al pulsar el botón no me aclaro. Alguna idea o ejemplo de algo similar ?¿ Suelo usar jest pero ya que se menciona playwright me gustaría probarlo y me he atascado con eso.
no, no he tenido ningún tipo de feedback al respecto ... casi hasta lo he ya olvidado@@victorm3962, si tienes alguna idea te agradezco me comentes y repesco el tema
Este es la solución que yo he encontrado no es la mejor pero los waitForSelector no me funcionaban : test('Checking that have different text and image when click the button', async ({ page }) => { await page.goto(URL_CAT); const p = await page.getByRole('paragraph') const image = await page.getByRole('img') const textContext = await p.textContent() const imgScr = await image.getAttribute('src') const button = await page.getByRole('button').click(); await page.waitForTimeout(3000); const p2 = await page.getByRole('paragraph') const image2 = await page.getByRole('img') const newtextContext = await p2.textContent() const newimgScr = await image2.getAttribute('src') console.log(textContext) console.log(imgScr) console.log(newtextContext) console.log(newimgScr) await expect(textContext).not.toEqual(newtextContext) await expect(imgScr).toEqual(newimgScr) });
alguien sabe por que pasa esto? Most common reasons include: - You are calling test.beforeEach() in a configuration file. - You are calling test.beforeEach() in a file that is imported by the configuration file. - You have two different versions of @playwright/test. This usually happens when one of the dependenices in your package.json depends on @playwright/test.
Ah alguno le pasa que cuando crean el componente Otro.jsx con el customHook del image y luego lo añaden este al App.jsx unas 3 veces entonces cuando recargan la pagina les devuelve la misma imagen en los 3 componentes?
Segun yo tiene q ver con que por alguna razon el useEffect no es ejecutado, por ende el estado interno del hook no se actualiza y el componente puede dar error al leer undefined. No se como solucionarlo pero estoy en eso, quiza tenga q ver con las dependecias del effect o la asincronia q maneja dentro el effect.
@@sebastianbarcia2796 creo que más allá de la velocidad, es entender primero conceptos de JavaScript antes de meterse de lleno a React, react en si es Js + un poco de Html y sus detalles
![Aprende a pasar una Prueba Técnica de React. Entiende useMemo, useCallback y useRef [Curso de React]](http://i.ytimg.com/vi/GOEiMwDJ3lc/mqdefault.jpg)
![Aprende a pasar una Prueba Técnica de React. Entiende useMemo, useCallback y useRef [Curso de React]](/img/tr.png)
Grande Midu nunca te pillo en directo por el horario aquí en Colombia que es a mitad de día, pero que los subas es lo mejor gracias
A concienca este men es un crack de la programacion, asi como messy es el mejor jugador de futbol este mejor es un verdadero crack vos sos el mejor saludos desde Colombia
Estos videos de este men, son verdaderamente una mina de oro que hay que explotar
Ya no aguantabas la risa con los gatos, Midu. 32:16 jajjjajaj
Grácias Midu!! 😄
Porfa, recuerda ponerlo en la playlist del curso 🙏
importante
Hola Midu, muchas gracias por tu esfuerzo de presentarnos el curso de reactjs.
Tengo una pregunta, al momento en que usas el customHooks, comprendo la idea de esto, pero dentro del useCatImage (solo para probar) borré el use effect, return un null cuando es un !fact, y cuando apreto el botón, la lógica sigue funcionando igual, cambia el fact (que está bien) pero que cambia la imagen igual...Añadí un console.log previo al fetch, cuando lo dejo sin effect veo que el log se muestra 3 veces, y con effect 1 vez. Entoces: ¿Por qué sigue funcionando sin el effect? Y ¿Por qué imprimiría 3 veces? Esta pregunta se relaciona hasta el minuto 18:50
Excelente Midu, super entendible los custom hooks y el test, seria genial que hagas mas ejemplos de test :D
Grande Midu!!! Siempre fenomenal. Gracias!
Justo estoy aprendiendo todo el universo react para hacer mi tesis :D
gracias por el video Midu! me sumo a los comentarios que piden mas ejemplos de tests
Increíble como refactorizó todo
Gracias!!! 🤗
Muchas gracias por todo Midu! Excelente explicación! Gracias por todo
gracias Midu por todas estas clases, las repasaré pk das mucha información útil :)
Gracias por todo el apoyo profe Midu.
Hola @midulive En este minuto 30:00 , puedes combinar los 2 hooks useCatFact y useCatImage en un solo hook?
Buen curso para hacer certificaciones de React!
Gracias por el video midu , un saludo !
¡Gracias Midu!
Gracias a ti!
@@midulive Nunca creí verte respondiendo comentarios un año despues, por cierto apenas comence tu curso de React hace una semana y es una chulada, la mejor de todas.
42:24 este test es como si fuera selenium para interactuar con la web de forma automatizada??
Buena , este practico esta super completo !
Simplemente Gracias
midu sos un genio. gracias
Midu, como estas? Tengo una duda. Yo para hacer el botón cree un estado llamado alter como booleano, y se lo pasé como dependencia al primer useEffect. Con el botón solo cambiaba el estado de alter entre true y false, y eso funcionó. Lo que hice esta mas en algún aspecto? Ya sea a nivel rendimiento o a nivel sintactico.
Eres un genio Midu!, me encanta la forma en que explicas, lástima que no puedo verlo en directo para preguntar, pero ya voy a poder!
sigue así!
En el 35:30 empieza el testing.
Gracias Midu! Muy bueno. Una duda, moverias absolutamente toda la logica a un custom hook, incluso la tipica funcion "handleCkick" solamente por separar la vista de la logica? O harias custom hooks aunque sepas que NO se va a reutilizar?
Pensaria que no es necesario, ya que igual la logica como quedo está super entendible, ademas esa es la idea de los custom hooks, que se reutilicen, entonces no tendria mucho sentido. (en mi opinion)
buenas, si les da pereza escribir test como a mi Playwright tiene una herramienta que visualmente los pueden construir con *playwright codegen* funciona con javascript, python muy muy facil
explicacion de tests 34:55
Que programa se requiere para practicar React
No se saltó de la parte 2 a la parte 4? Cuál me he perdido
creo que la parte 3 es la prueba tecnica que resolvio hace 3 semanas
al menos asi aparece en la playlist de la descripcion
@@gerardovanced3983 creo que tienes razón!
con respecto al test que dejo midu de verificar si el texto cambiar al dar click en el button dijo que seria mas dificil :c y solo agregue 2 lineas que serian :
await page.click('text=get Random fact')
await page.waitForTimeout(2000)
es mala practica hacer lo que hice? (basicamente lo que hago es obtener el texto, img dar click en el boton esperar 2 segundos, recuperar el texto nuevamente y los comparo, en el expect compruebo que sean diferentes si son iguales significa que no cambio el texto ni la imagen)
Es buena opción pero no se en que punto haya la pequeña probabilidad de que se genere el mismo texto por suerte, de igual forma cambia, osea es el mismo pero hay un nuevo dato en fact, entonces no se, se me ocurre si depronto comprobando en el fact que haya entrado un nuevo valor despues de darle click al botón.
7:11 haz flipao eeeeh
Como cambió la respuesta de la API, para reconstruir el src de la imagen se debe hacer esto:
.then(data => {
const { _id } = data
const url = `/cat/${_id}/says/${threeFirstWords}`
setImageUrl(url)
})
Disculpa la molestia por preguntar pero, donde haces este cambio? en el primer useEffect o en el segundo? mantienes el fetch del segundo useEffect intacto??
@@roxaskeyblade8444 Se hace el cambio en el hook que se encarga de devolver la imagen (imageUrl). En el caso del proyecto estaría en src/hooks/useCatImage.js.
Se pone dentro del useEffect en el segundo .then, ya que es ese donde podemos acceder a la data.
@@DiegooAlt Muchas gracias tenia mis dudas ya que la url se construye con el extracto de las primeras 3 palabras de la cadena despues me di cuenta que eso se extrae del estado tambien pense que el endpoint del fetch era otro, muchas gracias por aclarar mis dudas!!
Para hacer el test que compruebe que el contenido cambia al pulsar el botón no me aclaro. Alguna idea o ejemplo de algo similar ?¿ Suelo usar jest pero ya que se menciona playwright me gustaría probarlo y me he atascado con eso.
Lo acabaste consiguiendo ?
no, no he tenido ningún tipo de feedback al respecto ... casi hasta lo he ya olvidado@@victorm3962, si tienes alguna idea te agradezco me comentes y repesco el tema
Este es la solución que yo he encontrado no es la mejor pero los waitForSelector no me funcionaban : test('Checking that have different text and image when click the button', async ({ page }) => {
await page.goto(URL_CAT);
const p = await page.getByRole('paragraph')
const image = await page.getByRole('img')
const textContext = await p.textContent()
const imgScr = await image.getAttribute('src')
const button = await page.getByRole('button').click();
await page.waitForTimeout(3000);
const p2 = await page.getByRole('paragraph')
const image2 = await page.getByRole('img')
const newtextContext = await p2.textContent()
const newimgScr = await image2.getAttribute('src')
console.log(textContext)
console.log(imgScr)
console.log(newtextContext)
console.log(newimgScr)
await expect(textContext).not.toEqual(newtextContext)
await expect(imgScr).toEqual(newimgScr)
});
min 7:08 mejor del video jajajaja
En el min 35 empieza con Playwright
Crack 🎉
20:26
cual es la parte 1,2 y 3, porque creo que falta una parte
no me salen los 3 puntitos para la opción de convertir a aysnc await, me ayudan a solucionar esto?
escribiste correctamente la funcion?
alguien sabe por que pasa esto?
Most common reasons include:
- You are calling test.beforeEach() in a configuration file.
- You are calling test.beforeEach() in a file that is imported by the configuration file.
- You have two different versions of @playwright/test. This usually happens
when one of the dependenices in your package.json depends on @playwright/test.
Ah alguno le pasa que cuando crean el componente Otro.jsx con el customHook del image y luego lo añaden este al App.jsx unas 3 veces entonces cuando recargan la pagina les devuelve la misma imagen en los 3 componentes?
creo que necesito buscar un curso entero de testing en js, no entendi nada de este tema y nunca lo he usado :c
Lo bueno es que esta bastante estandarizado, si aprendes Jest despues Vitest se te va a hacer familiar y lo mismo con Cypress y Playwright
Jaja q onda con ese sonido en la mitad del video? jajaja!
No se si a otra persona le ha sucedido pero la imagen me esta devolviendo "undefined" y no se muestra...
Porque en el segundo fetch la respuesta ya no devuelve la url, no sé por qué. Tendrás que modificar el "setImageUrl"
A mi me pasa. Lo pudiste solucionar?
como lo solucionaron?
Segun yo tiene q ver con que por alguna razon el useEffect no es ejecutado, por ende el estado interno del hook no se actualiza y el componente puede dar error al leer undefined.
No se como solucionarlo pero estoy en eso, quiza tenga q ver con las dependecias del effect o la asincronia q maneja dentro el effect.
Yo sigo sin solucionarlo...
Alguno pudo resolver que la API ya no te da la URL?
me esta pasando lo mismo...
mas de uno se rio del donald cat xddd
Demasiado rapido…
Al ser un vídeo, lo puedes ver tantas veces como quieras y a la velocidad que quieras. :)
@@midulive ok gracias por el consejo, era una sugerencia para los que estamos aprendiendo la velocidad es importante. Saludos!
@@sebastianbarcia2796 creo que más allá de la velocidad, es entender primero conceptos de JavaScript antes de meterse de lleno a React, react en si es Js + un poco de Html y sus detalles
Yo viendo el video en x2 🤣
@@sebastianbarcia2796 Buen dia, creo que mas que una sugerencia lo que hiciste fue dar una queja, bueno es lo que parecio. Un saludo