Demo of frontend JS unit testing

.github/workflows/pr-ci-tests.yml

@@ -0,0 +1,24 @@
+name: Run Pull Request CI Tests
+on:
+  pull_request:
+    branches:
+      - 'gh-pages'
+jobs:
+  Run-Pull-Request-CI-Tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - name: Install dependencies
+        run: npm install jest jest-environment-jsdom liquidjs gray-matter js-yaml --save-dev
+        working-directory: ./tests
+
+      - name: Run Jest Tests
+        run: npm test
+        working-directory: ./tests

.gitignore

@@ -26,3 +26,6 @@ models.json
 
 # Ignore clasp config file
 .clasp.json
+
+# Ignore test coverage
+coverage

_includes/current-projects.html

@@ -76,5 +76,6 @@ <h3 class="filters-title">
   </div>
 </section>
 
+<script src="/assets/js/current-projects-utils.js"></script>
 <script src="/assets/js/current-projects.js"></script>
 <script src="../assets/js/elements/noResultsMessageFilter.js"></script>

assets/js/current-projects.js

@@ -16,7 +16,7 @@ document.addEventListener("DOMContentLoaded",function(){
         }
 
         // create filter dictionary from sorted project data
-        let filters = createFilter(sortedProjectData);
+        let filters = createFilter(sortedProjectData, window.location.pathname === '/projects-check/');
 
         // Insert Checkbox Filter Into The Dom
         for(let [filterName,filterValue] of Object.entries(filters)){
@@ -255,8 +255,8 @@ function projectDataSorter(projectdata){
  * Given an array of project object as returned by ``retrieveProjectDataFromCollection()``
  * Returns a filter object -> {filter_type1:[filter_value1,filter_value2], filter_type2:[filter_value1,filter_value2], ... }
 */
-function createFilter(sortedProjectData){
-    if (window.location.pathname === '/projects-check/') {
+function createFilter(sortedProjectData, checkPage = false) {
+    if (checkPage) {
         return {
             'technologies': [...new Set(sortedProjectData.map(item => (item.project.technologies?.length > 0) ? [item.project.technologies].flat() : '').flat() ) ].filter(v=>v!='').sort(),
             'languages': [...new Set(sortedProjectData.map(item => (item.project.languages?.length > 0) ? [item.project.languages].flat() : '').flat() ) ].filter(v=>v!='').sort(),
@@ -929,4 +929,10 @@ function attachEventListenerCloseModal() {
             modal.style.display = 'none';
         }
     });
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+        createFilter, projectDataSorter,
+    };
 }

assets/js/project-meetings.js

@@ -1,4 +1,4 @@
-import { vrmsDataFetch, localeTimeIn12Format } from "./utility/vrms-events.js"
+import { vrmsDataFetch, localeTimeIn12Format } from "./utility/vrms-events.mjs"
 /**
  * This type of function is called an IIFE function. The main function is the primarily controller that loads the recurring events on this page.
  * Refer: https://developer.mozilla.org/en-US/docs/Glossary/IIFE

assets/js/project.js → assets/js/project.mjs

@@ -7,7 +7,7 @@ Fetch the correct project
 // Escapes JSON for injections. See: #2134. If this is no longer the case, perform necessary edits, and remove this comment.
 let projects = JSON.parse(decodeURIComponent("{{ projects | jsonify | uri_escape }}"));
 
-import { vrmsDataFetch, localeTimeIn12Format } from './utility/vrms-events.js';
+import { vrmsDataFetch, localeTimeIn12Format } from './utility/vrms-events.mjs';
 
 /*
   Passing script attributes from html script tag to JS file
@@ -139,6 +139,7 @@ let meetingsFound = [];
 
 // Loops through the VRMS data and inserts each meeting time into the HTML of the correct project page
 function appendMeetingTimes(scheduleData) {
+    console.log(scheduleData);
     for (const event of scheduleData) {
         try {
             const startTime = localeTimeIn12Format(event.startTime);
@@ -150,9 +151,12 @@ function appendMeetingTimes(scheduleData) {
             // for adding a meeting description if it exists
             const meetingDescription = event.description;
 
+            console.log(projectTitle.toLowerCase(), projectName.toLowerCase());
+
             // only append the meeting times to the correct project page
             if (projectTitle.toLowerCase() === projectName.toLowerCase()) {
                 // added description with <br>${meetingDescription}
+                console.log(event);
                 meetingsList.insertAdjacentHTML("beforeend", `<li class="meetingTime">${day} ${startTime} - ${endTime} <br>${name} <br>${meetingDescription}</li>`);
                 meetingsFound.push(day);
             }

assets/js/right-col-content.js

@@ -1,4 +1,4 @@
-import { vrmsDataFetch, localeTimeIn12Format } from "./utility/vrms-events.js"
+import { vrmsDataFetch, localeTimeIn12Format } from "./utility/vrms-events.mjs"
 /**
  * This type of function is called an IIFE function. The main function is the primarily controller that loads the recurring events on this page.
  * Refer: https://developer.mozilla.org/en-US/docs/Glossary/IIFE

assets/js/utility/vrms-events.mjs

@@ -0,0 +1,61 @@
+---
+---
+
+{% assign vrmsData = site.data.external.vrms_data %}
+const vrmsData = JSON.parse(decodeURIComponent("{{ vrmsData | jsonify | uri_escape }}"));
+
+/* vrmsDataFetch calls sortByDate function and passes filteredVrmsData variable, current page which can either be "events" for the right-col-content.html page or 
+"project" from the project.html page, and passes the appendMeetingTimes function from projects.js that appends the sorted vrmsData 
+returned by sortByDate to project.html. AppendMeetingTimes is only called if vrmsDataFetch is being called from project.js for the project.html page 
+*/
+export const vrmsDataFetch = (currentPage, appendMeetingTimes) => {
+  const filteredEvents = filterTestEvents(vrmsData);
+  const sortedEvents = sortEventsByDate(filteredEvents);
+
+  if (currentPage == "events") return sortedEvents;
+  else if (currentPage == "project") {
+    appendMeetingTimes(sortedEvents);
+  }
+}
+
+/**
+ * Sorts an array of events by their "startTime" variable, from oldest to newest
+ */
+export function sortEventsByDate(events) {
+     return events.sort((event1, event2) => {
+        // startTime includes date information
+        const date1 = new Date(event1.startTime);
+        const date2 = new Date(event2.startTime);
+        return date1 - date2;
+     });
+}
+
+/**
+ * Filters an array of events to remove instances of events with names containing
+ * "test" or "testing, case insensitive
+ */
+export function filterTestEvents(events) {
+    return events.filter(event => {
+        return !(/\btest(ing)?\b/i.test(event.name))
+    });
+}
+
+/**
+  * @param {Date} time - A valid javscript time string. Example:  "2020-05-13T02:00:00.000Z"
+  * @return {String} - A time string formatted in the 12 hour format and converted to your timezone. Example: "10:00 pm"
+*/
+// Formats time to be readable for projects.html and right-col-content.html page
+export function localeTimeIn12Format(time) {
+    return new Date(time)
+      .toLocaleTimeString(
+        {},
+        {
+          timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+          hour12: true,
+          hour: "numeric",
+          minute: "numeric",
+        }
+      )
+      .toLowerCase();
+  }
+

docker-compose.yml

@@ -1,4 +1,3 @@
-version: "3"
 services:
   hfla_site:
     image: hackforlaops/ghpages:latest
@@ -13,3 +12,16 @@ services:
       - 35729:35729
     volumes:
       - .:/srv/jekyll
+  hfla_test:
+    image: node:20-alpine
+    container_name: hfla_test
+    profiles: 
+      - test
+    volumes:
+      - .:/website
+    working_dir: /website/tests
+    command: >
+      sh -c "npm install jest jest-environment-jsdom liquidjs gray-matter js-yaml --save-dev
+             npm test"
+
+