+ 
+
+ `;
+
+ return li;
+ });
+
+ // Creamos un elemento Nombre: ${item.name || 'Sin nombre'}
+Descripción corta: ${item.shortDescription || 'Sin descripción corta'}
+Descripción: ${item.description || 'Sin descripción'}
+Nivel de picante: ${item.facts.nivelSpicy || 'Sin nivel de picante'}
+Lugar de origen: ${item.facts.placeOrigen || 'Sin lugar de origen'}
+Tipo de carne: ${item.facts.typeOfMeat || 'Sin tipo de carne'}
+Categoría: ${item.facts.mainField || 'Sin categoría'}
+- para contener todos los
- generados + const ul = document.createElement('ul'); + // Agregamos todos los
- al
- utilizando appendChild
+ itemsHTML.forEach(item => ul.appendChild(item));
+
+ // Retornamos el elemento
- dentro
+ return ul;
};
+// src/view.js
+export function updateResult(result) {
+ document.querySelector('#result').textContent = result;
+}
+
+//li.innerHTML += `Nombre: ${item.name || 'Sin nombre'}
`; // || para proporcionar un valor predeterminado en caso de que alguna propiedad +//li.innerHTML += `Descripción corta: ${item.shortDescription || 'Sin descripción corta'}
`; //
: Es una etiqueta HTML que indica un salto de línea dentro de un elemento - . Esto hace que el siguiente contenido se muestre en una nueva línea dentro de la lista.
+//li.innerHTML += `Descripción: ${item.description || 'Sin descripción'}
`; //La expresión ${} en JavaScript se conoce como "template literal" o "plantilla de cadena de texto". +//li.innerHTML += `
`; +//li.innerHTML += `Nivel de picante: ${item.facts.nivelSpicy || 'Sin nivel de picante'}
`; +//li.innerHTML += `Lugar de origen: ${item.facts.placeOrigen || 'Sin lugar de origen'}
`; +//li.innerHTML += `Tipo de carne: ${item.facts.typeOfMeat || 'Sin tipo de carne'}
`; +//li.innerHTML += `Categoría: ${item.facts.mainField || 'Sin categoría'}
`; +// Agrega el elemento - al elemento
-
+//ul.appendChild(li); //ul.appendChild(li); en JavaScript se utiliza para agregar un elemento hijo (li en este caso) al final de un elemento padre (ul en este caso)
+//});
+// Retorna el elemento
- creados +//return ul; +//}; \ No newline at end of file diff --git a/test/data.js b/test/data.js index 9b3c238b..05271785 100644 --- a/test/data.js +++ b/test/data.js @@ -1,5 +1,87 @@ -// Aqui puedes agregar los datos que necesites para tus pruebas +/ Aqui puedes agregar los datos que necesites para tus pruebas // al menos debe tener uno que se llame "data" +export const data = [ + { + id: "Salsa-verde", + name: "Salsa verde", + shortDescription: "Salsa verde mexicana, fresca y picante, hecha con tomatillos, chile serrano, cilantro y cebolla, perfecta para tacos y enchiladas.", + description: "La salsa verde es una salsa clásica de la gastronomía mexicana, apreciada por su frescura y su vibrante color verde. Se prepara con tomatillos, que aportan una acidez característica, chiles serranos o jalapeños para el toque picante, cilantro, cebolla y ajo. Todos los ingredientes se asan ligeramente y se muelen juntos para crear una salsa de textura suave y sabor fresco. Es muy versátil y se usa comúnmente para acompañar tacos, enchiladas, chilaquiles y otros antojitos, ofreciendo un equilibrio perfecto entre acidez y picante", + imageUrl: "https://laopinion.com/wp-content/uploads/sites/3/2020/04/canva-mexican-salsa-verde.jpg", + facts: { + placeOrigen: "Mexico", + nivelSpicy: "Moderado", + typeOfMeat: "N/a", + mainField: "Salsa y guarniciones" + }, + }, + { + id: "Guacamole-guarnicion", + name: "Guacamole", + shortDescription: "Guacamole mexicano, cremoso y fresco, hecho con aguacate, tomate, cebolla, cilantro, chile y limón, ideal para acompañar antojitos.", + description: "El guacamole es un platillo icónico de la cocina mexicana, conocido por su textura cremosa y su sabor fresco. Se prepara con aguacates maduros triturados, mezclados con tomate picado, cebolla, cilantro, chile (jalapeño o serrano), y jugo de limón, que añade un toque de acidez. Esta combinación de ingredientes crea un dip versátil y delicioso, perfecto para acompañar tortillas de maíz, tacos, nachos y otros antojitos. El guacamole no solo es sabroso, sino también nutritivo, destacando por sus grasas saludables y su contenido de vitaminas y minerales esenciales.", + imageUrl: "https://www.maricruzavalos.com/wp-content/uploads/2010/09/mexican-authentic-guacamole-recipe.jpg", + facts: { + placeOrigen: "Mexico", + nivelSpicy: "Moderado", + typeOfMeat: "N/a", + mainField: "Salsa y guarniciones" + }, + }, + { + id: "Pico-de-gallo", + name: "Pico de gallo", + shortDescription: "Pico de gallo, salsa fresca mexicana, hecha con tomate, cebolla, cilantro, chile y limón, ideal para tacos y nachos.", + description: "El pico de gallo es una salsa fresca y crujiente típica de la cocina mexicana, conocida por su simplicidad y vibrante sabor. Se elabora con tomate picado, cebolla, cilantro, chile jalapeño o serrano, y jugo de limón. Todos los ingredientes se mezclan para crear una combinación de sabores frescos y picantes que complementan una variedad de platillos. Ideal para acompañar tacos, nachos, quesadillas y carnes asadas, el pico de gallo no solo añade sabor, sino también una textura refrescante y colorida que realza cualquier comida. ", + imageUrl: "https://uploads.vibra.co/1/2020/11/pico-de-gallo.jpg", + facts: { + placeOrigen: "Mexico", + nivelSpicy: "Moderado", + typeOfMeat: "N/a", + mainField: "Salsa y guarniciones" + }, + }, + { + id: "Chocolate-chile", + name: "Chocolate con chile", + shortDescription: "Chocolate con chile, postre mexicano con chocolate oscuro y chiles picantes, combinación única de dulce y picante.", + description: "El chocolate con chile es un postre mexicano que mezcla el sabor del chocolate oscuro con el picante de los chiles. Esta combinación de dulce y picante tiene raíces en la tradición culinaria de México, donde el cacao era valorado y consumido con especias, incluidos los chiles. Para preparar este postre, se usa chocolate amargo de alta calidad y se añade chile en polvo o chiles secos molidos. El resultado es una mezcla de sabores complejos que resalta la riqueza del chocolate y el picante del chile. Se sirve caliente como bebida reconfortante o frío como postre indulgente.", + imageUrl: "https://postresaztecas.weebly.com/uploads/4/1/4/5/41453335/7050529_orig.jpg", + facts: { + placeOrigen: "Mexico", + nivelSpicy: "Moderado", + typeOfMeat: "N/a", + mainField: "Postres" + }, + }, + { + id: "Frutas-picantes", + name: "Frutas con chile", + shortDescription: "Frutas con chile, postre refrescante, combina frutas frescas con chile en polvo, limón y sal, un equilibrio perfecto de sabores.", + description: "Las frutas con chile son un popular y tradicional postre mexicano que destaca por su combinación única de sabores. Se prepara utilizando frutas frescas como mango, piña, sandía, pepino, jícama o melón, cortadas en trozos o rodajas. Estas frutas se aderezan típicamente con jugo de limón fresco, sal y chile en polvo, como el conocido Tajín, que añade un toque de picante y sabor salado. La mezcla de sabores dulces, ácidos y picantes crea un contraste delicioso y refrescante, perfecto para consumir como snack en días calurosos o como postre después de una comida. Las frutas con chile son apreciadas no solo por su sabor, sino también por ser una opción saludable y llena de vitaminas.", + imageUrl: "https://www.gastronomiaycia.com/wp-content/uploads/2021/07/tajin_especias2-680x520.jpg", + facts: { + placeOrigen: "Mexico", + nivelSpicy: "Moderado", + typeOfMeat: "N/a", + mainField: "Postres" + }, + }, + { + id: "micheladas", + name: "Micheladas", + shortDescription: "Refrescante bebida de cerveza mezclada con limón, salsas y chile.Refrescante bebida de cerveza mezclada con limón, salsas y chile.", + description: "La michelada es una popular bebida mexicana que combina cerveza con una mezcla de jugo de limón, salsas como la inglesa y la Tabasco, y diversas especias y condimentos, como sal, pimienta y salsa Maggi. Se sirve en un vaso escarchado con sal y a menudo con un toque de chile en polvo en el borde. Esta mezcla crea una bebida refrescante, ligeramente picante y ácida, ideal para los días calurosos y perfecta para acompañar mariscos, carnes asadas y botanas. La michelada es muy versátil y puede adaptarse al gusto individual con diferentes combinaciones de ingredientes.", + imageUrl: "https://i0.wp.com/www.chicanoeats.com/wp-content/uploads/2019/05/IMG_9275-819x1024.jpg", + facts: { + placeOrigen: "Mexico,Mexico ", + nivelSpicy: "Alto", + mainField: "Bebidas Picantes", + typeOfMeat: "N/A" // Añadir esto si no aplica + }, + } +]; +//En esta archivo puedes construir y exportar data "mock" para usar en los tests. Es mas fácil probar un arreglo de +//5 elementos de un arreglo de 24, por eso vas a crear una muestra de la data que quieres probar. Como mínimo debes +//exportar un variable se llama data, pero puedes definir y exportar mas si sea necesario para tus tests. -export const data = []; diff --git a/test/dataFunctions.spec.js b/test/dataFunctions.spec.js index 72c5eb9d..08d38ae2 100644 --- a/test/dataFunctions.spec.js +++ b/test/dataFunctions.spec.js @@ -1,18 +1,22 @@ -import { example, anotherExample } from '../src/dataFunctions.js'; +import { filterData, sortData } from '../src/dataFunctions.js'; import { data as fakeData } from './data.js'; - console.log(fakeData); - -describe('example', () => { - - it('returns `example`', () => { - expect(example()).toBe('example'); +describe('filterData', () => { + it('debera retornar los platos que cumplan el filtro postres', () => { + const tipodePlato = filterData(fakeData,"Postres"); + expect(tipodePlato.length).toBe(2); }); }); - -describe('anotherExample', () => { - - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); +describe('sortData', () => { + it('debera ordenar los platos de forma asc por nombre', () => { + const ordenAscen = sortData(fakeData,'name', 'asc') + expect(ordenAscen[0].name).toBe('Micheladas'); + }); + it("debera ordenar los platos de forma desc por nombre", () => { + const ordenDesc = sortData(fakeData, "name", "desc"); + expect(ordenDesc).toEqual([...fakeData].sort((a, b) => b.name.localeCompare(a.name))); }); }); +console.log(sortData); +//segun el README En este archivo tendrás hacer pruebas unitarias de +//las funciones implementadas en el archivo dataFunctions.js. (filterBy, sortBy, etc.) \ No newline at end of file
- con todos los elementos
- completo con todos los elementos
- dentro
+ return ul;
};
+// src/view.js
+export function updateResult(result) {
+ document.querySelector('#result').textContent = result;
+}
+
+//li.innerHTML += `Nombre: ${item.name || 'Sin nombre'}