Epic: Testing and Code Coverage

[ryanfchase]

Overview

We need to implement a frontend testing framework for our project so we can prevent bugs and regressions, as well as provide a means of teaching other volunteers how to utilize testing to improve their code

Action Items

Testing

• migrate build tooling from webpack to Vite #1778
• Modify CheckEnv.js to notify dev if Vite keys are missing from .env file #1824
• write documentation requiring React components to have .jsx extension instead of .js #1823
• PM: Update Repository Secrets to use VITE prefix #1839
• Migrate devs to Vite - checklist #1834
• Implement an automated front-end testing framework for React components #1334
• create a ticket template for unit and integration tests
  • and create a unit test as an example
  • create an integration test as an example
• create wiki page for testing
  • include some basic definitions for testing terminology
  • list our testing tools
  • how to utilize unit/integration test template
• set up CI for tests to run on every PR made to main branch
  • branches are blocked from merge until all tests pass
  • add to PR checklist to add test to cover any newly added feature
• create tickets for each documented user flow in Figma (live-forever ticket)

Unused Code

• ER: consider code coverage tool that (e.g. VS Code plugin) that determines which components are actually being used
  • credit: @DrAcula27

Resources

• Testing Folder File Structure
• Discussion around how to approach implementation of frontend framework
  • Andrew's initial analysis for testing in 311 Data: link to comment
  • Andrew's note on how to approach testing despite heavy use of canvas element: link to comment

[ryanfchase]

Updated to include:

• Modify CheckEnv.js to notify dev if Vite keys are missing from .env file #1824
• write documentation requiring React components to have .jsx extension instead of .js #1823