Added a Test for the Count-Reaservations Function

.babelrc

@@ -1,5 +1,7 @@
 {
-  "presets": ["@babel/preset-env"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-modules-commonjs", "@babel/plugin-transform-runtime"]
-
+  "env": {
+    "test": {
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
+    }
+  }
 }

_test_/reservationsCounter.test.js

@@ -0,0 +1,10 @@
+import ReservationsCounter from '../src/module/reservationsCounter.js';
+
+describe('Check reservations count', () => {
+  test('return number of items in array', () => {
+    const reservations = ['reservation1', 'reservation2', 'reservation3', 'reservation4'];
+
+    const countReservations = new ReservationsCounter(reservations);
+    expect(countReservations.getLength()).toEqual(4);
+  });
+});

package.json

@@ -21,6 +21,7 @@
   "homepage": "https://github.com/topeogunleye/basic-setup#readme",
   "devDependencies": {
     "@babel/core": "^7.16.5",
+    "@babel/plugin-transform-modules-commonjs": "^7.19.6",
     "@babel/preset-env": "^7.16.5",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.4.5",
@@ -32,7 +33,7 @@
     "favicons-webpack-plugin": "^5.0.2",
     "hint": "^6.1.9",
     "html-webpack-plugin": "^5.5.0",
-    "jest": "^27.4.5",
+    "jest": "^27.5.1",
     "style-loader": "^3.3.1",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^21.0.0",
@@ -48,4 +49,4 @@
     "lodash": "^4.17.21",
     "uuidv4": "^6.2.12"
   }
-}
+}

src/index.html

@@ -189,10 +189,10 @@ <h1 class="heading text-center">Bounty Food :)</h1>
                 </div>
               </div>
 
-              <div class="reservations">
-                <h1 class="sub-heading text-center">Reservation (2)</h1>
-                <p>03-10-2022 - 11-05-2022 by Jimmy</p>
-                <p>03-10-2022 - 11-05-2022 by Jidula</p>
+              <div class="reservations-box">
+                <h1 class="sub-heading text-center">Reservation (<span class="counts"></span>)</h1>
+
+                <div class="reservations"></div>
               </div>
 
               <form class="reservation-form">

src/module/reservation.js

@@ -1,3 +1,5 @@
+import ReservationsCounter from './reservationsCounter.js';
+
 const reservationBtn = document.querySelector('.reservation-btn');
 const modal = document.querySelector('.modal');
 
@@ -16,6 +18,12 @@ const updateReservationsList = async () => {
   const items = await data.json();
 
   reservations.innerHTML = '';
+  const counts = document.querySelector('.counts');
+
+  const countReservations = new ReservationsCounter(items);
+
+  counts.innerText = countReservations.getLength();
+
   items.forEach((item) => {
     const content = `
     <p>${item.date_start} - ${item.date_end} by ${item.username}</p>

src/module/reservationsCounter.js

@@ -0,0 +1,9 @@
+export default class ReservationsCounter {
+  constructor(reservations) {
+    this.reservations = reservations;
+  }
+
+  getLength() {
+    return this.reservations.length;
+  }
+}

src/style.css

@@ -365,3 +365,11 @@ li.page-item.active {
   background-color: #374151;
   width: 30%;
 }
+
+.reservations p {
+  padding: 3px 3px;
+}
+
+.reservations p:nth-child(odd) {
+  background-color: rgb(241, 241, 241);
+}