En este artículo, vamos a realizar un ejercicio práctico con addItem y getTotalCheckout para clase carrito. Este será un buen punto de partida para reproducir el mismo proceso en otros programas de código en desarrollo web que involucren comprobaciones de software.
addItem y getTotalCheckout para clase carrito
Si quieres seguir ejercitando tus habilidades, las funciones addItem y getTotalCheckout para clase carrito de este ejercicio práctico podrán ser de mucha ayuda, ya que, una vez entiendas el proceso, podrás reproducirlo en otro tipo de clases con el mismo objetivo.
Función addItem para clase carrito
La función addItem para clase carrito es uno de los elementos más importantes, dado que se utiliza para controlar lo que se añade dentro este otro elemento de un sitio web o marketplace. Es por eso que, en esta función, vamos a encontrar controladores para capturar errores, como el throw new Error, y otros para diferenciar qué es lo que añade y qué es lo que falta por añadir.
Para empezar, vamos a describir los test con Jest, que nos ayudarán a plantear nuestra función para añadir los ítems en la clase carrito.
En este caso, vamos a emplear el método de beforeEach para agregar la función del addItem al carrito. Después, vamos a listar cada uno de los test que queramos realizar. A modo de ejemplo, primero enunciamos uno en el que planteamos que se agregue un ítem a la función de carrito.items y, por tanto, esperamos que, cuando se agregue, aparezca como nigiriItem.
Después, también podemos plantear otro post en el que probamos lo que pasa cuando no hay ningún ítem. Es decir, el carrito no debe contener nada (estar vacío) cuando añadimos el ítem, en este caso, nigiriItem. Y realizamos el mismo proceso de expect.
describe ('addItem', () => {
beforeEach(() => {
carrito.addItem (nigiriItem)
})
it ('Should have item added in the Carrito.items', () => {
expect (carrito.items).toContainEqual (nigiriItem)
})
it ('Should not contain and empty when adding a nigiriItem' () => {
expect (carrito.items).not.toContaininEqual ({})
Una vez hayamos descrito los test y veamos que no funcionan, vamos a plantear la función que, en este caso, lanzaría un error cuando no haya ítems dentro del carrito.
addItem (item) {
if (Object.isObject (item) && Obejct.keys.length == 0) {
throw new Error ("Item cannot be an empty object")
}
this.items,push (item);
}Función getTotalCheckout para clase carrito
Ahora, vamos a desarrollar la función getTotalCheckOut para clase carrito, pero primero la vamos a probar para ver qué necesitamos para plantearla. La función getTotalCheckOut, en principio, sirve para obtener el precio total de todo lo que vamos añadiendo en el carrito del marketplace.
En primer lugar, podremos ver que, cuando agreguemos nigiriItem al carrito, nos devuelva que el precio total es 1,6 euros. Después, podemos realizar otro test, donde añadimos dos ítems al mismo carrito, lo que nos devolverá 3,2 euros. A su vez, ¿qué pasaría si agregamos otro elemento o producto como el agua? (La cual costará 1 euro). Por último, podremos plantar un test que sabemos que dará falso, ya que la suma no tiene un resultado verídico.
A continuación, puedes ver una lista de todas las comprobaciones:
describe('getTotalCheckout', () => {
it ('Should return 1.6 after adding a nigiriitem, () => {
carrito.addItem (nigiriItem)
expect (carrito.getTotalCheckout()).toBecloseTo (1.6)
})
it ('Should return 3.2 after adding 2 nigiriitem, () => {
carrito.addItem (nigiriItem)
carrito.addItem (nigiriItem)
expect (carrito.getTotalCheckout()).toBecloseTo (3.2)
})
it ('Should return 2.6 after adding 1 nigiriitem and 1 water, () => {
carrito.addItem (nigiriItem)
carrito.addItem (waterItem)
expect (carrito.getTotalCheckout()).toBecloseTo (2.6)
})
it ('Should return 4.2 after adding 1 nigiriitem and 1 water, () => {
carrito.addItem (nigiriItem)
carrito.addItem (waterItem)
expect (carrito.getTotalCheckout()).toBecloseTo (4.2)
})
De esta manera, ya que sabemos qué es lo que necesitamos una vez realizamos los posts, es el momento de llevar a cabo la función. Para ello, utilizaremos el método this.items.reduce y le pasaremos el valor previo y el precio actual:
getTotalCheckout() {
return this.items.reduce ((prev, curr) => prev + curr.price, 0)De esta manera, habrás aprendido en qué consiste el desarrollo de addItem y getTotalCheckout para clase carrito.
Con este ejercicio práctico has aprendido cómo ejecutar los métodos addItem y getTotalCheckout para clase carrito, por lo que es el momento reproducir este mismo proceso en otros proyectos. Si quieres aprender mucho más para especializarte en el desarrollo web y en las comprobaciones, te invitamos a apuntarte a nuestra formación en Desarrollo Web Full Stack Bootcamp. ¡Anímate a entrar al sector IT y pide información para cambiar tu vida!
