Test removeItem para clase carrito [Ejercicio práctico]

En este post vas a aprender en qué consiste el test removeItem para clase carrito. Saber ejecutarlo te ayudará a borrar los elementos de un carrito en un marketplace sin que surja ningún error.

Test removeItem para clase carrito

Vamos a crear un test removeItem para clase carrito con varias implementaciones que nos ayudarán a refactorizar nuestra función y hacerla más útil para nuestro programa. Antes de empezar a realizar el test removeItem, que comprueba que la función para eliminar objetos del carrito del marketplace funciona, tienes que tener en cuenta que tu función addItem también debe contar con esa posibilidad.

Para esto último, primero puedes revisar un artículo anterior acerca de la función addItem y agregarle lo que te vamos a mostrar a continuación:

Como puedes ver, hemos tenido que añadir unas cuantas líneas de código, que nos ayudan a incrementar el contador mientras añadimos cada uno de los ítems al carrito.

Ahora es el momento de empezar a definir cómo se describirán nuestros test para la función de removeItem, por lo que vamos a realizar el test antes de describir la función.

Los test, en este caso, comprobarán varios puntos entre todo lo que nos posibilita la función de eliminar un ítem del carrito de compras del marketplace.

El primer aspecto que se va a comprobar es que, al eliminar un elemento del array del carrito que acaba de agregarse, el carrito y el string estarán vacíos. Para ello, vamos a entablar el elemento nigiriAdded, que es el ítem que se ha añadido. Para la realización de estos test, vamos a utilizar el elemento let para definir el momento en el que se añade el nigiri, para después removerlo. En resumidas cuentas, estaremos esperando que la longitud sea 0, es decir, vacío.

Ahora, trataremos de integrar otro elemento diferente al nigiri en nuestro carrito. En este post, entonces, vamos a comprobar que el carro tenga una array con un agua, después de agregar un nigiri, un agua y remover un nigiri. De este modo, vamos a terminar con un carrito que solo tiene un ítem, es decir, solo debe contener un agua. Para representar esto, tenemos que emplear variables como nigiriItem, waterItem, waterAdded y nigiriAdded.

Por último, vamos a enfocarnos solo en los nigiris y vamos a trabajar con varias cantidades del mismo elemento. Así pues, vamos a comprobar que, después de agregar 2 nigiris y eliminar uno de ellos, obtendremos un array con un solo nigiri. De esta manera, la longitud del array será de 1 y deberá contener el nigiri número 2.

A continuación, puedes visualizar todo esto en forma de código, para que puedas reproducirlo en próximos proyectos:

describe ('removeItem', () => {
       it ('Carrito should have an empty array after adding 1 nigiriItem and removing 1 nigiri', () => {
             let nigiriAdded = carrito.addItem (nigiriItem)
             carrito.removeItem (nigiriAdded)
             expect (carrito.items()).toHaveLength (0)
   })
       it ('Should return an array with 1 water array after adding 1 nigiri, 1 water and removing 1 nigiri', () => {
             let nigiriAdded = carrito.addItem (nigiriItem)
             let waterAdded = carrito.addItem (waterItem)
             carrito.removeItem (nigiriAdded)
             expect (carrito.items()).toHaveLength (1)
             expect (carrito.items()).toContainEqual (waterAdded)

   })
       it ('Should return an array with 1 nigiri array after adding 2 nigiri, and removing 1 nigiri', () => {
             let nigiri1 = carrito.addItem (nigiriItem)
             let nigiri2 = carrito.addItem (nigiriItem)
             carrito.removeItem (nigiri)
             expect (carrito.items()).toHaveLength (1)
             expect (carrito.items()).toContainEqual (nigiri2)

   })
     
  

De acuerdo con los pasos del TDD, después de realizar los test y ver qué es lo que necesitamos para ejecutar nuestro programa, podremos definir la función de removeItem. En este caso, vamos a traer la lista de ítems y a filtrarla. Después, ejecutamos una función que diferencie el nombre del ítem y el nombre del elemento y, de este modo, quedará un resultado de sustracción, que pintará en el carrito del marketplace. A continuación, puedes visualizar cómo creamos esta función de removeItem para clase carrito con Jest:

removeItem (item) {
      this.items = this.items.filter (elem => item.name !== elem.name)
  }

¿Cuál es el siguiente paso?

Ahora que has podido explorar cómo realizar el test removeItem para clase carrito, seguramente tendrás mucho más clara la utilidad de TDD o Test Driven Development. Si quieres seguir programando y aprendiendo, te invitamos a apuntarte a nuestra formación intensiva en Desarrollo Web Full Stack Bootcamp y a convertirte en un programador en menos de un año. ¿A qué esperas para seguir formándote y cambiar tu vida? ¡Pide ya más información e impulsa tu carrera en pocos meses!