website Research and Provide a Demo of Unit Testing for front-end JavaScript code

Overview

We need to select a strategy and a test framework for running unit tests against the front-end JavaScript code in the HfLA website, so that tests can be run first locally and then ultimately as a Pull Request check, in order to ensure the quality of JavaScript code updates. In this issue several sample unit tests will be developed and will be run locally from the command line.

Action Items

[x] Select one of the following JS test frameworks: Jest, Mocha and Jasmine. Consider:
- [ ] widely-used JS test framework suitable for invoking tests against JavaScript code on a Jekyll site
- [ ] Ideally tests could be run either locally or in the context of GitHub PR checkes
[ ] Provide comments documenting the selection, installation and configuration of the test framework
- [ ] In a new git branch, create a folder under the website root named unittests-JSfrontend
- [ ] In the new folder create several unit tests. Provide comments describing your reasoning for selection of unit tests.
- [ ] Invoke the tests from the command line
- [ ] provide comments documenting the commands for running the tests
- [ ] Submit a pull request, and provide links to the relevant comments that will be useful for reviewers.

Resources/Instructions

https://jasmine.github.io/ [How to Test a GitHub Action with GitHub Actions]

This issue is a follow-up to #2249

Jul 28 '24 19:07 roslynwythe

Hi @roslynwythe, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

Jul 29 '24 23:07 HackforLABot

Hi @FamousHero, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

Sep 22 '24 17:09 HackforLABot

Hi @FamousHero, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

Nov 01 '24 02:11 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, November 4, 2024 at 11:04 PM PST.}

Nov 08 '24 07:11 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, November 11, 2024 at 11:04 PM PST.}

Nov 15 '24 07:11 HackforLABot

Progress:  Scheduling meetings & talking to people with testing experience. Currently leaning towards Jest.
Blockers: Finding people with experience with the frameworks for opinions & nuances
Availability: Mon-Fri : 5-8pm (11/18-11/22)
ETA: 11/24/24 
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

Nov 15 '24 23:11 FamousHero

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, November 25, 2024 at 11:04 PM PST.}

Nov 29 '24 07:11 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, December 30, 2024 at 11:04 PM PST.}

Jan 03 '25 07:01 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, January 6, 2025 at 11:04 PM PST.}

Jan 10 '25 07:01 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, January 13, 2025 at 11:04 PM PST.}

Jan 17 '25 07:01 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, January 20, 2025 at 11:04 PM PST.}

Jan 24 '25 07:01 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, January 27, 2025 at 11:04 PM PST.}

Jan 31 '25 07:01 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, February 3, 2025 at 11:04 PM PST.}

Feb 07 '25 07:02 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, February 10, 2025 at 11:04 PM PST.}

Feb 14 '25 07:02 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, February 17, 2025 at 11:04 PM PST.}

Feb 21 '25 07:02 HackforLABot

Progress: Created Docker container, currently only works with global flag
Blockers: Localization and testing to ensure no other code is affected
Availability: Everyday 9pm-10pm
ETA:  Will try to finish by 3/2/25
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

Feb 26 '25 02:02 FamousHero

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, March 3, 2025 at 11:04 PM PST.}

Mar 07 '25 07:03 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, March 11, 2025 at 12:05 AM PST.}

Mar 14 '25 07:03 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, March 18, 2025 at 12:05 AM PST.}

Mar 21 '25 07:03 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, March 25, 2025 at 12:05 AM PST.}

Mar 28 '25 07:03 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, April 1, 2025 at 12:05 AM PST.}

Apr 04 '25 07:04 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, April 8, 2025 at 12:05 AM PST.}

Apr 11 '25 07:04 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, April 15, 2025 at 12:05 AM PST.}

Apr 18 '25 07:04 HackforLABot

@FamousHero

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, April 22, 2025 at 12:05 AM PST.}

Apr 25 '25 07:04 HackforLABot

Hi @ryanfkeller, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

Sep 30 '25 18:09 HackforLABot

Availability: Generally 12-1:30p M-F ETA: Expect to have a PR out for review conservatively by 10/31

Sep 30 '25 18:09 ryanfkeller

After doing some initial research, I have a tentative path forward.

Testing Framework Choice: Jest

Today, Jest meets the "widely used" criteria better than Mocha or Jasmine -- see here: https://npmtrends.com/jasmine-vs-jest-vs-mocha
Jest has assertions, mock data, and code coverage built in, whereas Mocha (next most popular) requires additional dependencies for those features. Not a huge issue, but to my eye having all the test tools needed already built in makes it easier to setup/understand, which is important in a high-developer-turnover environment.

Dealing with Jekyll Liquid Syntax: Pre-Test Jekyll Build

The Liquid/YAML content in the JS scripts makes it so that we can't just directly run them with any test runner. I see two options:

(Leaning towards this one) Pre-test execution, execute a jekyll build to process all of the JS files, then run the unit tests on the processed files. This will result in a pretty significant (but static) startup time, but means that we will be unit testing a close parallel to the actual site build system.
Create a Liquid JS pre-processing step of the JS files prior to testing, rather than a full Jekyll build. This might result in much faster execution, but I'm not confident that Liquid JS will actually cover all the Jekyll-specific Liquid/YAML syntax.

Current Path Forward

I'm going to put together a simple prototype unit test of a JS script that uses Liquid, using Jest and a pre-test Jekyll build to get a sense of viability. Depending on the results, I may try creating that same unit test in Mocha, also using the pre-test build, to see if there is a significant performance difference. Based on the low user stats on Jasmine, I'm not planning to pursue that framework unless I get differing opinions.

Oct 01 '25 02:10 ryanfkeller

After thinking a little more, for the dev testing use-case, we already have a convenient solution to have Jekyll pre-process the JS files -- our hfla_site docker container! This container builds the site with live reloading when it is launched, so I think we can rely on that for the JS processing.

I had some initial success at modifying the docker-compose.yml startup command to install npm, jest, and jest-environment-jsdom prior to the Jekyll build. Then, once the container is running, I can launch Jest tests on JS files with Jekyll liquid by:

Writing the Jest tests to target "_site/assets/js" scripts that were generated by Jekyll, not the unprocessed "assets/js" scripts
Execute the Jest tests from within the container with docker exec hfla_site -t npm test (where "test" is the script name that calls the jest command and -t allows the docker output to display the color formatting)

Executing the tests the container isn't really necessary if the dev has npm/jest installed but we probably want to standardize the test infra AND it ensures that the container is running and actively updating the _site contents. Also, ideally we would just update the hackforlaops/ghpages image to have npm, jest, and jest-environment-jsdom pre-installed so we don't need to include that step during container setup, but that is a future conversation.

Oct 01 '25 19:10 ryanfkeller

Hi team,

After doing a bit more digging into setting up unit tests for the frontend JS scripts in assets/js, I ran into a snag. The scripts look to be a mix of ESM modules (utility/*, project-meetings.js, right-col-content*.js), and plain global-scope JavaScript (current-projects.js,hamburger-nav.js, etc).

With the plain JS files, I think we have two main issues w.r.t. unit testing

Since these scripts are not modules, I can't easily import individual functions for unit tests without loading the whole script and handling its DOM dependencies
The scripts are not structured for unit testing. Most functions are defined in global scope and launched by DOMContentLoaded listeners, and directly read/write the DOM. That makes them tightly coupled to the page state, and would require DOM setup, check, and teardown for each test.

The options I see are... a) Skip unit tests and instead write integration tests using jsdom, where we set up small test DOMs and check before/after states.

or...

b) Begin refactoring scripts into ES modules and do our best to separate logic from DOM manipulation. Then, write unit tests for the pure logic functions (hitting more/edge cases) and possibly add a couple smoke-check integration tests.

I am planning to investigate (b) by taking some small-but-representative scripts (possibly hamburger-nav.js and project.js), attempt an ESM refactor, and then put together a couple unit-style tests for the logic functions.

One more note: many of the assets/js scripts appear unused, or are tied to pages that are not linked from the homepage. I haven’t done a full audit, but a majority seem to me like low-priority candidates for refactor or testing.

I would appreciate some feedback on...

Whether my analysis of the scripts content, usage, and test limitations matches the team's understanding
Whether there is a strong preference for either of the testing options I mentioned (or something else)

Thanks for the help!

EDIT: Actually, I'm going to do a little more investigation into testing the scripts largely as-is, so I'm going to hold off on the help request for now.

Oct 02 '25 20:10 ryanfkeller

@ryanfkeller

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, October 14, 2025 at 12:05 AM PST.}

Oct 17 '25 07:10 HackforLABot