Curso de Test Driven Development desde Cero con JavaScript, React y Vitest
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- Introducción al TDD (Test Driven Development), el desarrollo de software guiado a base de pruebas. Empezamos con ejemplos básicos y terminamos usando TDD para construir una calculadora con React.
00:00 - Introducción ¿Qué es TDD?
14:04 - Implementación y primer test
46:32 - TDD con reto de programación
1:15:58 - TDD aplicación de React
1:58:40 - Coverage y comentarios finales
▶ No te pierdas más directos en: / midudev - วิทยาศาสตร์และเทคโนโลยี
Que increible video, ahora tengo ganas de desarrollar componentes con TDD. Gracias Midu, grande como siempre.
Gracias midudev por compartir tu experiencia, tu contenido es muy pro.
No hace mucho tiempo veo tu contenido, es increíble la facilidad con la que explicas y como haces ver las cosas más sencillas, muchas gracias por compartir tu conocimiento , para serte sincero nunca he aplicado TDD, es un poco complejo adaptarse a esta manera de desarrollar software , pero es mejor iniciar ahora mismo y no pagar la deuda después. Saludos desde Colombia.
Muy buen video, sin haber hecho nunca una prueba siento que ya se puede dominar el TDD
No pe pierdo ni un capitulo, excelente canal.
Logre seguir toda la clase esta increible!
Midu me has ayudado indirectamente con mis tests en vitest ya que me pasaba con el render me renderizaba varías veces el elemento muchas gracias 👌🏼
¡Genial! Me alegro mucho, amigo!
Muchas gracias por compartir tus conocimientos, me gusta mucho como explicas las cosas y como abarcas cosas que otros no, como el caso de "que pasaría si pasa esto" , y que lo hagas en vivo en un plus muy bueno, un saludo desde Perú.😁
Muchas gracias por el vid, con lo que comentas empezaré a implementarlo en mi trabajo!
Eres muy grande Midu. Mas contenido en formato "largo" please 👏👏👏👏
Tremenda aportación! este contenido vale oro. Gracias por la formación un saludo.
Gracias a ti!
Tremendo video! Muchas gracias Midu! Ahora tengo más ideas para mostrarle al equipo!
❤
Buenísimoooo!!!
Estaba esperando un video asi crack!! gracias Midu!!
Gracias MiDu, excelente explicación, ejercicios muy claros 👏🏻
Mchas gracias por tu contenido, ha sido de mucho valor!
Buenardo el vídeo Midu, eres un grande explicando las cosas!
Buena idea hacer el AdventJs con TDD para practicar, ¡gracias por el video!
Gracias Midu! Eres un genio!
Lo que dices al final de los test de integración me ha ayudado bastante, pues siempre me fajaba con los unitarios y me daban dolor de cabeza.Luego de escucharlo he hecho clic. jajaj
Gracias por todo Midu :)
Es esencial programar de este modo, sufrí un despertar...sería genial se pudiera implementar en todas las empresas.
Depende de la implementación deseada, en mi caso seria una pérdida de tiempo para la mayoría de mis proyectos, es como jugar a ser ignorante de tu propia idea y hacerla fallar a propósito sabiendo que va a fallar, no se, cada uno tiene su forma de programar. Pero la forma clásica a mi me funciona muy bien (Design > Code > Test)
Lo máximo Miduuuuu ❤
Grande, Midu. Estuve en tu conferencia del Platzi Conf y quedé justo con las ganas de aprender TDD, E2E y mucho de testing.
Pues mira, aquí tienes 2 horas gratis de clase para que lo domines!!!
Queremos más videos sobre tests 🔥 faltan los de integración y los E2E
Uff excelente material!
Más videos como este con teoría y práctica! Gracias!
Gracias!
muchas gracias midu
😊😊😊
Como siempre un placer escucharte aunque yo más diría old school al tdd jejeje
¡Gracias!
Muchas gracias por la donación, amigo. :)
Deberias hacer un curso de Testing en React
Lo haré!!!
Midu, excelente tutorial. Felicitaciones por el stream exitoso, y gracias por el contenido.
Excelente! 😄
excelente tdd , gracias
ERES GRANDE MIDU
Gracias, Daniel!!! 🤗
Genial!
Excelente video wao
Midu, ayer hice un directo de lo mismo, pero en Angular
Buenas Midu, como siempre tu contenido es un 10. Esta vez paso a comentar que en el min 43:40 cuando retas a demostrar que con "if" no es posible escalar el fizzbuzz, en realidad es muy simple, entendemos que no es el objetivo del curso, pero si algo me enseña el programar es a no quedarte con una versión.
function fizzbuzz(number) {
let output = ''
if (number % 3 === 0) output += 'fizz'
if (number % 5 === 0) output += 'buzz'
if (number % 7 === 0) output += 'woff'
return output === '' ? number : output
}
Sathya, no lo has entendido, justo hablaba de escalarlo sin necesidad de cambiar la implementación a base de ifs y sólo tocando el objeto. 😅
Lo bueno de eso es que, como digo, puedes pasarle los casos por parámetro desde fuera de la función.
@@midulive tenés razón, excelente punto. Gracias!
Buen video!!! Hola midu, estoy desarrollando una aplicacion movil con angular/ionic es recomendable en 2022 especializarme en angular/ionic??
Esto esperaba
Interesante trabajar con TDD, me motiva a hacer proyectos personales con TDD
Que tal, Miquel. Una mica de TDD amb typescript i react sería l'òstia en patinet
Muchas gracias genio por todos tus aportes. 🤯 Por favor ayuda, no encuentro como resolver los test que no funcionan con Hooks.
Primero muchas gracias por el aporte a la comunidad.
Lo que no encuentro es un buen video con test de React con Typescript.
Dada tú amplia experiencia tendrías alguna recomendación.
Saludos.
Hola! muy bueno video! Como haces para que los === se vean como uno todos ligados? es un font o un setting del vscode?
Midu podrías probar con los test nativos de Node18 ?
Lo que dices en 31:36 es muy cierto, mientras miraba tu video, estaba esperando que borraras tu segundo test qué hiciste, por que prácticamente es lo mismo, es un test, qué no te porta nada
Lección: los if y switch no son tan extensibles que digamos. Si se van añadiendo más cosas, entonces es mejor usar listas/arrays y loopear en ellos evaluando condiciones :)
The entries method (on an object) returns the elements in the object as an array.
Buen día Midu, buen tutorial. Actualmente estoy realizando ejercicios para ejercitar mi lógica con los ejercicios de HackerRank y resolvi un ejercicio que es de encriptar una cadena. Ahora quisiera resolverlo por medio de TDD. En un momento dado necesito ingresar variables y arreglos de tipo string. ¿ Como lo haría con vitest para que primero "pete" y luego obtenga la solución ?. De antemano gracias.
Buenas Midu, es un vídeo buenísimo, pero tengo una gran duda...
Estoy con un proyecto que usa sequelize con MariaDB y me he atascado con el async/await.
Si lo pongo me devuelve el error en el test, en cambio, si lo borro, me funciona correctamente, pero no consigo los datos que quiero cuando ejecuto la aplicación.
Excelente material! Alguien sabe que extensiones utiliza?
Me parece genial poder implementar testeos antes de codear pero creo que en la realidad laboral, muy pocas empresas están dispuestas a sacrificar un poco mas de tiempo en el delivery para poder integrar tdd, finalmente termina siendo que las empresas quieren que se haga todo en el mismo margen de tiempo y muchas veces terminan quemando a los equipos...
buen video!! lo he seguido dos veces escribiendo codigo contigo 2 veces, pero sigo sin entender el ejercicio 2 xD
Esto es como jugar al profesor Layton pero programando ¡Que pasada!
que extension usas para ver el : void ese?
Hace mucho tiempo que sigo tu canal y me parece increible. Mirando el test de fizzbuzz se me ocurre una pregunta, al pasar el test con el número 15, debería devolver 'fizz' y 'buzz' y 'fizzbuzz'.
Saludos y sigue con el canal
Flipo con el intellisense de tu vscode, que plugin usas?
al usar usestate me peta todos los tests que ya andaban y me dice que:
TypeError: Cannot read property 'useState' of null. si yo lo saco anda
pero si pongo el usestate deja de andar los test. alguien que sepa?
enhorabuenas por los videos a ver si me puedo unir un dia :)
result = '';
result = result + analizeFizz();
result = result + analizeBuzz();
y ahj tienes toda la logica, en cada metodo devuelve '' o fizz o buzz como primero analizar fizz pegara si ademas analiza buzz 0 ifs en el body solo 1 por analize*
Una IA que detecte los test redundantes, otra que te cree los más simples. Creo que con typescript y los linters los unit deberían crearse solos?
💥
Porque cuando llamo a mi fichero test.js me da error pero cuando lo hago con test.ts no??
Tienes curso completo de TDD con React?
Midu saludos y un gran abrazo, en el min 54:59 cuando te preguntan como estas pasando el segundo parámetro, realmente tu no estas pasando el segundo parámetro! Estas pasado el primer parámetro "from" como un string que en este caso es la letra "a", al hacer esto estas saltando la primera condición "if" y luego estas evaluando el segundo parámetro "to" que debe ser diferente de "string" para reportar un error, pero como en este caso "to" es "undefined" pasa la condición y devuelve el error!
Porque solo estas pasando el parámetro "from" como un string!
Lo comento porque yo también tenia la duda y luego entendí que esta pasando realmente y por que ni los test nos iban a decir que estaba ocurriendo realmente, si estoy equivocado seria bueno me corrijas porque entonces no entiendo como estas pasándole el segundo parámetro. 😓
👍
Midu, pregunta. Cómo puedo tener esa consola? Es algún tema?
porque pones Void en las declaraciones de las funciones ? Videaso
Hola midu, cómo se llama la extensión para que te diga que devuelve una función
Dejo comentario para saber
no es una extensión, es algo que trae vscode, búscalo en las configuraciones como "hint" y activas
@@AR7editing Gracias, lo voy a ver
puede ser error lens o quocka
Se puede utilizar en backend? gracias por el contenido de calidad :D
Si bro tambien se puedan hacer test en el backend
Cual es el font que usas? Me gusta cómo se ve el !== 😬 aunque prefiero cursiva (ahora uso VictorMono)
el usa Fira Code
@@leiwisbernalsanchez7468 gracias!
@@luisfrocha1 si no te aparece igual tienes que activar las ligaduras,que son las que hacen que se renderice así...hay varias fuentes que soportan ligaduras
Cual es la extencion que te muestra automaticamente el tipo de retorno en las funciones ? ej: ( :void ) Genial Explicacion
tengo la misma duda
Es una configuración del propio VS Code, eso está en el apartado del lenguaje ya sea (javascript o Typescript)
Bro, we need you in English
You are God of code
39:30 😂😂
MIdu! Me encantan tus videos, pero no sé que me pasó ésta vez, será que me falta conocimiento o no sé... quedé super perdido y no entendí la mitad de las cosas.
el render solo lo puedo usar de esta forma para que me ande render(calculator()) .de la otra forma me da error con render(). alguien sabe porque?
A mi tambien
Ademas en el archivo react.test.jsx agregale: import * as React from 'react';
@@martinfiscina8761 ya hace tiempo lo soluciones encontre un videdo con todas las configuraciones necesarias para que ande todo. si lo presisas te lo paso. saludos
@@maxigarrett3121 si pasalo! Gracias!
25:40 cambio todos los void de los excpect a number. Alguien me podría decir porque por favor?
Porque añado el return de un número. Entonces la función ya no devuelve void, devuelve number.
Midu como se llama esa extencion ?
@@midulive Hola midu, oye pero este cambio se hizo en automático. Es una extensión?
Como hago para que me aparezca "describe" automaticamente en vitest
Vitest Snippets extensión de visual
En el reto de programación con TDD, al pasar from = 'XBOX' y to='XXBO' por el for, no da ningún error cuando fromLetter = 'B' y toLetter = 'X' (cuando i=1), pero según el ejemplo ahí deberían producirse dos fallos distintos. Lo que quiero decir es que con tu código esa combinación no falla hasta que fromLetter = 'X' y toLetter = 'O' (cuando i=3), porque estás reasignando la X. Por lo tanto no está verificando que el orden sea correcto y que a B no pueda asignársele X. Espero estar pasando algo por alto porque lo he debugueado y no consigo entender por qué el orden debería ser incorrecto.
Buena observación, te explico por qué sucede esto: las restricciones son “una letra no puede transformarse en dos letras distintas”, llamémosle restricción A, y “dos letras distintas no pueden transformarse a la misma letra”, llamémosle B. Pero Midu hace el siguiente análisis: si estas dos restricciones se cumplen, entonces el número de letras distintas de from coincide con el número de letras distintas de to. Llamémosle a este análisis de Midu restricción C. O sea, si ocurre A y B simultáneamente, por narices ocurre C. Fijate que el objetivo del test es comprobar que A y B se cumplen. Entonces, para escribir el test, en vez de comprobar A y B, Midu decide comprobar A y C. También podría haber comprobado B y C, porque si dos cualesquiera de estas restricciones evalúa en true, la tercera también evaluará true. Todo esto puede demostrarse formalmente siguiendo el rigor de la lógica proporcional, pero en resumen: de las 3 restricciones, Midu decide comprobar las dos más fáciles
@@ricardomejias7957 muchas gracias por la explicación, ahora sí todo entendido :D
Hola @@ricardomejias7957, por más que he tratado de entenderlo como está planteado en el ejercicio sigo sin lograrlo, en el enunciado menciona 3 restricciones:
1) "al reemplazar el carácter se debe mantener el orden" => ¿Cuál orden?, esto es lo que no entiendo del enunciado
2) "no se puede asignar al mismo carácter a dos letras distintas (pero sí a si mismo)" => ¿el pero no está de más?
3) "la longitud del string debe ser el mismo."
En cambio, como lo planteas en el comentario tiene más sentido aunque no es lo que dice expresamente el enunciado, es decir, el enunciado habla de un "orden" y en tu comentario en cambio hablas simplemente de dos condiciones: una letra no puede transformarse en dos letras distintas (A) y dos letras no pueden transformarse en la misma letra (B)
@ la verdad es que el enunciado por sí solo es muy confuso, en mi opinión no tiene el rigor técnico necesario para plantear un problema computacional: habla de un orden y no especifica a qué orden se refiere, y añade un sobrante "pero sí a sí mismo" que confunde más aún y por sí solo no es una restricción. Estas cosas suelen pasar por varias razones: puede ser que el texto original esté en otro idioma y la semántica se haya roto en la traducción, que la persona que lo redactó no tenga el rigor científico-matemático necesario para formular un enunciado sin ambigüedades, o simplemente que esta manera de redactar oraciones sea perfectamente entendible por españoles y yo por ser cubano no la haya comprendido a la primera.
Yo tampoco entendí las reglas, tuve que ver los ejemplos para deducirlas por mi cuenta, y al menos entender a qué se referían (esto me tomó tiempo de entender, ni siquiera en los ejemplos donde ponen "no se puede transformar" indican exactamente por qué no se puede, o sea qué regla estarían incumpliendo).
Creo que con "orden" se refieren a que dados "from" y "to", la n-ésima letra de "from" debe convertirse en la n-ésima letra de "to". En otras palabras, que si se colocan las palabras una encima de la otra ("from" encima de "to", alineadas) la letra de arriba se convierta en la letra justo que tiene debajo.
La regla "dos letras no pueden transformarse en la misma letra" la deduje de los ejemplos, porque como bien dices no está explícitamente en el enunciado. De hecho, si solo analizamos las restricciones que explícitamente aparecen en el enunciado, la transformación de "CON" a "JUU" en 00:48:43 sería válida: mantienen el orden, cada letra de "from" se convierte en solo una letra de "to", y ambas tienen el mismo tamaño, sin embargo en los ejemplos pone que no es una transformación válida.
La manera en la que analicé este problema fue la siguiente: la máquina debería ser capaz de cambiar su configuración del string "from" al string "to", y debería luego poder regresar a su configuración original, o sea de "to" a "from". Es por esto que "CON" no puede transformarse en "JUU", porque luego "JUU" no podría des-transformarse en "CON" (fíjate como la "U" tendría dos letras asignadas). Esta fue mi hipótesis, me fijé en los ejemplos y vi que aplicaba, así que la asumí como tesis correcta :)
@@ricardomejias7957 con esto al fin me hizo clic:
«Creo que con "orden" se refieren a que dados "from" y "to", la n-ésima letra de "from" debe convertirse en la n-ésima letra de "to". En otras palabras, que si se colocan las palabras una encima de la otra ("from" encima de "to", alineadas) la letra de arriba se convierta en la letra justo que tiene debajo."»
Tiene mucho sentido el análisis que hiciste, concuerdo.
Muchas gracias 👍
¿Aquí estás probando los detalles de implementación?
Es mejor usar vitest o jest? para testear front en react?
Si puedes, vitest.
@@midulive Por lo que vi ayer, no puedo implementar vitest en un proyecto que cree con create react app!!
Y sabes que me pasa... No logro implementar jest, segui tu video de jest pero me dice que no encuentra ningun test... nose que pasa
Escalando con if
let output = ''
if(n % 3 == 0) output+='fizz'
if(n % 5 == 0) output+='bazz'
if(n % 7 == 0) output+='woff'
return output || n
En el 40:13 linea 21 se podia hacer
return output || number;
Polémico. Si output fuese un 0, por ejemplo, devolvería el número.
En estos casos me gusta siempre usar las comparaciones explicitas de lo que espero y no depender de falsy. :)
mucho senior para mis ojos xddd
midu me mandas un saludo? ;v
Un saludo, Juan!!
@@midulive 😎😎
por fabor "que alguien me explique con palitos!!!!" como y donde se instala vtest
Muy bonito todo pero pocas empresas pagan por tomar tiempo para eso 😅
Sss si
Empezando con gran expectativa, pero en el minuto 18:55 que es it(), que es describe(). Solo lo usas pero no se menciona al menos alguna definicion rapida para tener una mejor idea.
Sabes cuantas vulnerabilidades tiene El Proyecto de Vitest al Inicializarlo desde 0; 12 Vulnerabilidades registradas 7 Moderadas 3 altas y 2 criticas es grave por que ya esta registrado a tener cuidado muy buen video amigo, hay que auditarlas con npm audit fix --force.
El que suba a prod sin hacer tests de su código, o es muy valiente o muy ingenuo. Lo sé porque también lo fui en algún momento, y por mucho tiempo 😅.
buahhhh falle totalmente no pude instalar vitest
lo veo luego en el min: th-cam.com/video/_t9l2TwGioc/w-d-xo.html
At first i thought it was a scam but it's not
¿Esto en serio tiene aplicación en el mundo real? Porque a menos que lo manejes muy bien, lo único que veo que causa es perdida de tiempo en el desarrollo.
Si el dev no automatiza los tests lo deberá testear de forma manual. Si el developer no lo testea de ninguna forma alguien va a hacer el test de cualquier forma, siendo lo más perjudicial que le haga test manual el usuario final.
No haz programado nada dificil por tu cuenta verdad?
@@alancito98 ¿ese comentario es para mí?
"no tienes huevos "
U5ikiza angular como toso el mundo
Se agradece la intención del video, sin embargo el 99% de los proyectos no tienen nada que ver con una calculadora. No te culpo, el 99% de los tutoriales que he encontrado, todos usan el mismo ejemplo. Sería bueno tener otros escenarios mas prácticos que en verdad sean de utilidad. Gracias de todas formas, te dejo un like!
@@heartless1238 Tal vez no tenga la suficiente capacidad de abstracción para entender el video.🤷♂
en la vida real vas a usar mas que nada mocks para fakear servicios o modulos como bases de datos en caso de que quieras hacer eso, pero el resto es el mismo concepto
@@vivarantx si, eso pensé. Me parece en mi opinión un poco exagerada entonces la premisa de “no escribir nada de código sin un test”. Y la de “no afecta tiempo de desarrollo” 😒🤦🏼♂️😂
@@TheRcfrias no es nada exagerada, cuando ganes mas años de experiencia te vas a dar cuenta que es imposible mantener un proyecto sin tests en todos lados. Creo que tenes que tomar dimension de la cantidad de componentes y microservicios que tiene un proyecto real