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

[roslynwythe]

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

• 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 Research and Provide a Demo of Unit Test Implementation for HfLA Repo #2249

[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.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. 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.}

[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.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. 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.}

[FamousHero]

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."