Tests

.gitignore

@@ -7,4 +7,6 @@
 /dataSources/
 /dataSources.local.xml
 /environment_variables/
-.env
+.env
+/.idea/
+/node_modules/

index.html

@@ -17,11 +17,14 @@ <h1 id="titletxt">Interactive Map</h1>
 
 
     <div id="navbar">
+
+
       <button id="navbutton">&#9776;</button>
       <div id="navpages">
         <a href="accessible.html" id="accessible-txt">Accessible Routes</a>
         <a href="weather.html" id="weather-txt">Weather Routes</a>
       </div>
+
     </div>
 
 

index.js

@@ -1,42 +1,6 @@
 import { Loader } from "@googlemaps/js-api-loader";
 import * as destinations from "./destinations.js";
 
-
-// Navbar slide function
-const sidebar = document.getElementById("sidebar");
-const navbutton = document.getElementById("navbutton");
-const mainMap = document.getElementById("map");
-
-
-navbutton.addEventListener('click', () => {
-  sidebar.classList.toggle('active');
-  mainMap.classList.toggle('active');
-});
-
-const faveButton = document.getElementById("view-fave-button");
-
-faveButton.addEventListener('click', () => {
-    const faveDiv = document.getElementById("favorites-container");
-    if(faveDiv.style.display === "none"){
-      faveDiv.style.display = "block";
-    }
-    else{
-      faveDiv.style.display = "none";
-    }
-});
-
-const recentButton = document.getElementById("recent-button");
-
-recentButton.addEventListener('click', () => {
-    const faveDiv = document.getElementById("recent-container");
-    if(faveDiv.style.display === "none"){
-      faveDiv.style.display = "block";
-    }
-    else{
-      faveDiv.style.display = "none";
-    }
-});
-
 // Route display functionality
 const routeDisplay = new function () {
   this.directionsService;
@@ -196,6 +160,42 @@ function clearMarkers(markersCollection) {
   });
 }
 
+function miscUISetup(){
+  // Navbar slide function
+  const sidebar = document.getElementById("sidebar");
+  const navbutton = document.getElementById("navbutton");
+  const mainMap = document.getElementById("map");
+
+  navbutton.addEventListener('click', () => {
+    sidebar.classList.toggle('active');
+    mainMap.classList.toggle('active');
+  });
+
+  // Hide/display favorites list on button click
+  const faveButton = document.getElementById("view-fave-button");
+
+  faveButton.addEventListener('click', () => {
+      const faveDiv = document.getElementById("favorites-container");
+      if(faveDiv.style.display === "none"){
+        faveDiv.style.display = "block";
+      }
+      else{
+        faveDiv.style.display = "none";
+      }
+  });
+
+  const recentButton = document.getElementById("recent-button");
+
+  recentButton.addEventListener('click', () => {
+      const faveDiv = document.getElementById("recent-container");
+      if(faveDiv.style.display === "none"){
+        faveDiv.style.display = "block";
+      }
+      else{
+        faveDiv.style.display = "none";
+      }
+  });
+}
 
 function getMap(center) {
   return new google.maps.Map(document.getElementById("map"), {
@@ -441,7 +441,7 @@ export async function initMap() {
 
   routeDisplay.init();
   navButtonInitialization(map, allMarks);
-
+  miscUISetup();
 
   displayFavoriteSearches(); // Display saved favorites on load
 

index.test.js

@@ -1,5 +1,12 @@
-import {test, expect, it, describe} from 'vitest'
-import {initMap} from "./index";
+/*
+ * @vitest-environment jsdom
+*/
+import {test, expect, it, describe, beforeEach} from 'vitest'
+import { screen, getByRole } from '@testing-library/dom';
+import html from "./index.html?raw";
+import {initMap} from "./index.js";
+document.documentElement.innerHTML = html;
+
 
 // noinspection JSUnusedLocalSymbols
 const clickable_element_width = 10;
@@ -14,30 +21,27 @@ test('map deployment', () => {
 })
 
 // test that title is in the right place
-test('text locations', async ({page}) => {
-    await expect(page.getByRole('heading', {name: `UMBC Interactive Map`, exact: true})); // not right, work on this
+test('text locations', async () => {
+    await expect(getByRole(document.body, 'heading', { name: `Interactive Map`, exact: true })); // not right, work on this
 });
 describe('Campus Navigation App', () => {
     describe('side matter', () => {
         describe('search bars', () => {
             it('destination bar', () => {
-                let destination_bar = document.getElementById('origin-input');
-                expect(destination_bar.innerText).toBe('Enter your destination');
-                expect(destination_bar.offsetWidth).gte(10); // make sure it's not too narrow
+                let destination_bar = document.getElementById('dest-input');
+                expect(destination_bar.getAttribute('placeholder')).toBe('Enter your destination');
             });
             it('start bar', () => {
-                let start_bar = document.getElementById('pac-input');
-                expect(start_bar.innerText).toBe('Enter your starting location');
-                expect(start_bar.offsetWidth).gte(10); // make sure it's not too narrow
+                let start_bar = document.getElementById('origin-input');
+                expect(start_bar.getAttribute('placeholder')).toBe('Enter your starting location');
             });
         });
 
         describe('buttons', () => {
             it('search button', () => {
                 let search_button = document.getElementById('search-button');
                 expect(search_button).toBeDefined();
-                expect(search_button.innerText).toBe('Go Now');
-                expect(search_button.fillColor).toBe('#ffffff'); // fix color
+                expect(screen.getByRole('button', { name: 'Go Now', hidden: true })).toBeInTheDocument();
                 expect(search_button.offsetWidth).gte(10);
             });
 
@@ -198,4 +202,4 @@ describe('Campus Navigation App', () => {
             expect(true).toBe(true);
         });
     });
-});
+});

package.json

@@ -4,8 +4,12 @@
     "scripts": {
       "test": "vitest"
     },
-    "devDependencies": {
-      "vitest": "^1.0.0"
+    "dependencies": {
+      "@googlemaps/js-api-loader": "^1.16.8",
+      "@testing-library/dom": "^10.4.0",
+      "@testing-library/jest-dom": "^6.6.3",
+      "esm": "^3.2.25",
+      "jsdom": "^26.1.0",
+      "vitest": "^3.1.2"
     }
   }
-