Tests documentation

README.md

@@ -1,20 +1,25 @@
 ![](https://img.shields.io/badge/Microverse-blueviolet)
 
-# Capstone Two - API manipulation & JavaScript project
-Simple recipe menu display using real API calls!
+![view](https://user-images.githubusercontent.com/77069011/169627999-45be81b3-d4bb-47bc-aa04-78bc63584e8c.jpeg)
 
+# Capstone Two - Yummy Recipes - API manipulation & JavaScript project
+
+Recipe webpage that has many meal categories and a lot of options for each one of them. Importing data from a real API and implementing an involvement system that allows the user to like each recipe and to add comments to them.
 
 ## Built With
+
 - HTML, JavaScript, CSS
 - Webpack
 - Gitflow
 - TheMealDB API
+- Involvement API (Microverse's)
 
 ## Live Demo
-- [Demo](https://anagudelogu.github.io/capstone-two/dist/)
 
+- [Demo](https://anagudelogu.github.io/capstone-two/dist/)
 
 ## Getting Started
+
 > To get a local copy up and running follow these simple example steps.
 
 - Clone the repo with this link https://github.com/anagudelogu/capstone-two.git
@@ -23,31 +28,32 @@ Simple recipe menu display using real API calls!
 
 - Make a pull request with your changes once you're done
 
-
 ## Author 1: Andrés Agudelo
-👤 [Github](https://github.com/anagudelo)
 
-👤 [Linkedin](https://www.linkedin.com/in/)
+👤 [Github](https://github.com/anagudelogu)
+
+👤 [Linkedin](https://www.linkedin.com/in/aagst)
 
-👤 [Twitter](https://twitter.com/)
+👤 [Twitter](https://twitter.com/AgudeloAndres__)
 
 ## Author 2: Daniel Malo
+
 👤 [Github](https://github.com/Danie12345)
 
 👤 [Linkedin](https://www.linkedin.com/in/daniel-malo-75218a192/)
 
 👤 [Twitter](https://twitter.com/DanielMalo_v4)
 
-
 ## 🤝 Contributing
+
 Contributions, issues, and feature requests are welcome!
 
 Feel free to check the [issues](https://github.com/anagudelogu/capstone-two/issues) page.
 
-
 ## Show your support
-Give a ⭐️ if you like this project!
 
+Give a ⭐️ if you like this project!
 
 ## 📝 License
+
 This project is [MIT](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt) licensed.

dist/index.html

@@ -11,13 +11,13 @@
         <header>
             <nav class="navbar">
                 <a href="#" class="navbar__logo"><span class="image"></span></a>
-                <a href="#" class="menu-toggle desktop_visible">Menu</a>
+                <span class="menu-toggle desktop_visible">Menu</span>
                 <div class="navbar__hamburger mobile_visible">
                     <span><i class="fa-solid fa-bars menu-toggle"></i></span>
                     <span><i class="fa-solid fa-xmark menu-toggle hidden"></i></span>
                 </div>
                 <div class="menu">
-                    <a href="#counter" class="menu__categories counter">Categories (0)</a>
+                    <span class="menu__categories counter">Categories (0)</span>
                     <ul class="menu__list">
                     </ul>
                 </div>

src/__tests__/commentCounter.test.js

@@ -2,7 +2,12 @@ import PopUp from '../modules/popUp.js';
 
 const createEnv = (comments = []) => {
   PopUp.pop({
-    strMeal: 'meal', strMealThumb: 'thumb', idMeal: 0, comments, type: 'Recipe',
+    strMeal: 'meal',
+    strMealThumb: 'thumb',
+    idMeal: 0,
+    comments,
+    type: 'Recipe',
+    strInstructions: '',
   });
   const container = document.createElement('div');
   const el = document.createElement('span');
@@ -26,7 +31,7 @@ describe('Counting number of comments', () => {
     expect(num).toEqual(1);
   });
 
-  it('Add \'n\' comments', (n = 8) => {
+  it("Add 'n' comments", (n = 8) => {
     const [container2] = createEnv([]);
     let num = 0;
     for (let i = 0; i < n; i += 1) {
@@ -35,4 +40,4 @@ describe('Counting number of comments', () => {
 
     expect(num).toEqual(n);
   });
-});
+});

src/__tests__/itemsCounter.test.js

@@ -4,28 +4,32 @@ describe('Counting number of items', () => {
   beforeEach(() => {
     document.body.innerHTML = `
               <div>
+                  <span class="counter"></span>
                   <ul class="recipes__list">
                   </ul>
               </div>`;
   });
   it('Returns 0 if there are no items present in the List', () => {
-    expect(UserInterface.itemCount()).toBe(0);
+    const ul = document.querySelector('ul');
+    expect(UserInterface.itemCount(ul)).toBe(0);
   });
 
   it('Returns 1 when an item get added to the list.', () => {
     const LIST = document.querySelector('.recipes__list');
     const LI = document.createElement('li');
+    const ul = document.querySelector('ul');
     LIST.appendChild(LI);
-    expect(UserInterface.itemCount()).toBe(1);
+    expect(UserInterface.itemCount(ul)).toBe(1);
   });
 
   it('Returns n when n items get added to the list', () => {
     const LIST = document.querySelector('.recipes__list');
+    const ul = document.querySelector('ul');
     const n = 8;
     for (let i = 0; i < n; i += 1) {
       const LI = document.createElement('li');
       LIST.appendChild(LI);
     }
-    expect(UserInterface.itemCount()).toBe(n);
+    expect(UserInterface.itemCount(ul)).toBe(n);
   });
 });

src/index.css

@@ -132,6 +132,7 @@ span.image {
   padding: 12px;
   border-bottom: 1px solid black;
   color: white;
+  cursor: pointer;
 }
 
 .menu__item img {
@@ -187,6 +188,7 @@ span > i.menu-toggle.hidden {
 
 span > i.menu-toggle {
   display: block;
+  cursor: pointer;
 }
 
 .hero__title {
@@ -325,6 +327,7 @@ span > i.menu-toggle {
   position: fixed;
   top: 0;
   right: 0;
+  cursor: pointer;
 }
 
 .recipes__popup_title {
@@ -390,6 +393,7 @@ ul.recipes__popup_comments {
   background-color: var(--light-green);
   border: 1px solid var(--dark-green);
   border-radius: 5px;
+  min-height: 72px;
   max-height: 216px;
   overflow-y: auto;
   margin: 20px 0;
@@ -513,6 +517,7 @@ footer {
   .menu-toggle {
     color: white !important;
     font-size: 1.3rem !important;
+    cursor: pointer;
   }
 
   .menu__categories {

src/index.html

@@ -11,13 +11,13 @@
         <header>
             <nav class="navbar">
                 <a href="#" class="navbar__logo"><span class="image"></span></a>
-                <a href="#" class="menu-toggle desktop_visible">Menu</a>
+                <span class="menu-toggle desktop_visible">Menu</span>
                 <div class="navbar__hamburger mobile_visible">
                     <span><i class="fa-solid fa-bars menu-toggle"></i></span>
                     <span><i class="fa-solid fa-xmark menu-toggle hidden"></i></span>
                 </div>
                 <div class="menu">
-                    <a href="#counter" class="menu__categories counter">Categories (0)</a>
+                    <span class="menu__categories counter">Categories (0)</span>
                     <ul class="menu__list">
                     </ul>
                 </div>

src/modules/app.js

@@ -35,8 +35,9 @@ class App {
   }
 
   goBackToCommonParent = (node, a) => {
-    if (node.getAttribute(a.type).includes(a.item)
-        !== node.parentNode.getAttribute(a.type).includes(a.item)
+    if (
+      node.getAttribute(a.type).includes(a.item)
+      !== node.parentNode.getAttribute(a.type).includes(a.item)
     ) return node;
     return this.goBackToCommonParent(node.parentNode, a);
   };
@@ -53,7 +54,9 @@ class App {
     document.body.classList.remove('noScroll');
     document.querySelector('.menu').classList.remove('active');
     document.querySelector('.hero').classList.remove('hidden');
-    const [burger, close] = document.querySelectorAll('span > i.menu-toggle');
+    const [burger, close] = document.querySelectorAll(
+      'span > i.menu-toggle',
+    );
     burger.classList.remove('hidden');
     close.classList.add('hidden');
   }
@@ -63,10 +66,10 @@ class App {
   }
 
   selectCategory = async (clickedElement) => {
-    const parent = this.goBackToCommonParent(
-      clickedElement,
-      { type: 'class', item: 'category' },
-    );
+    const parent = this.goBackToCommonParent(clickedElement, {
+      type: 'class',
+      item: 'category',
+    });
     const categoryName = parent.children[1].innerText;
     this.LIST.innerHTML = '';
     const category = await MealAPI.getByCategory(categoryName);
@@ -76,13 +79,13 @@ class App {
     UserInterface.counterText(`${categoryName} Recipes`);
     window.scrollTo(0, 0);
     App.hideLanding();
-  }
+  };
 
   menuLoadCategories = async (clickedElement) => {
-    const parent = this.goBackToCommonParent(
-      clickedElement,
-      { type: 'class', item: 'menu__item' },
-    );
+    const parent = this.goBackToCommonParent(clickedElement, {
+      type: 'class',
+      item: 'menu__item',
+    });
     const categoryName = parent.children[1].innerText;
     this.LIST.innerHTML = '';
     const categories = await MealAPI.getByCategory(categoryName);
@@ -93,22 +96,22 @@ class App {
     window.scrollTo(0, 0);
     App.hideLanding();
     App.toggleMenu();
-  }
+  };
 
   logoLoadCategories = async () => {
     this.LIST.innerHTML = '';
     const categories = await MealAPI.getCategories();
     UserInterface.displayCategories(categories);
     UserInterface.counterText('Categories');
     App.closeMenu();
-  }
+  };
 
   addLike = async (clickedElement) => {
     const card = clickedElement.parentNode.parentNode.parentNode;
     const mealId = card.getAttribute('id');
     await InvolvementAPI.addLike(mealId);
     UserInterface.addToLikesCounterDOM(card);
-  }
+  };
 
   loadPopup = async (clickedElement) => {
     const card = clickedElement.parentNode.parentNode;
@@ -130,7 +133,7 @@ class App {
       comments,
       type: 'Recipe',
     });
-  }
+  };
 
   static forEachListener(items, func) {
     items.forEach((item) => {
@@ -174,4 +177,4 @@ class App {
 
 const app = new App();
 
-export default app;
+export default app;

src/modules/involvementAPI.js

@@ -1,10 +1,6 @@
-// n4Krnxa1GxXHbZ349UMm clean
-// jtXFPXNizRtU5pfZ26sT
-// test: MBxSJyVQ8zQzuxBkwa5m
-
 import FetchRequest from './fetchRequest.js';
 
-const appId = 'jtXFPXNizRtU5pfZ26sT';
+const appId = 'n4Krnxa1GxXHbZ349UMm';
 const urlMAP = {
   main: 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/',
   likes: `${appId}/likes/`,

src/modules/popUp.js

@@ -14,7 +14,9 @@ export default class PopUp {
 
     const tags = PopUp.tagsTemplate(this.data.strTags);
     const commentSection = PopUp.commentsTemplate();
-    const instructs = PopUp.instructionsTemplate(this.data.strInstructions);
+    const instructs = PopUp.instructionsTemplate(
+      this.data.strInstructions,
+    );
 
     container.innerHTML = `
       <img class="recipes__popup_image" src="${this.data.strMealThumb}" alt="Delicious ${this.data.strMeal}">
@@ -123,6 +125,7 @@ export default class PopUp {
   static instructionsTemplate(instructs) {
     let newInstructs = '';
     instructs.split(/\r?\n/).forEach((line) => {
+      if (line === '') return;
       newInstructs += `<li class="popup__instructs_line">${line}</li>`;
     });
     return newInstructs;