Add Cypress Component Testing Framework

[ksmontville]

Proposed changes

This PR introduces Cypress component testing to the ROAR dashboard.

This initial effort sets up the ability to mount components in isolation and begin testing them within the Cypress testing suite.

WAITING ON:
#771

MAJOR CHANGES:

1. Change minimum Primevue version to 3.43.0
2. component.js Cypress support file which sets up the Vue app context for each component that is mounted in testing
3. Re-organize the Vue app setup by introducing two new files, setup.js and plugins.js; this change in app instance setup was necessary in order for the Cypress tests to accurately mock the context of our production Vue app.
4. New CI/CD workflow specifically for component tests
5. New Cypress commands for mocking the auth store and setting viewports
6. New docstrings for Cypress commands and other functions

HOW TO TEST:

1. Run dev server with npm run dev
2. Run Cypress script with npm run:cypress open
3. Select Component Testing configuration
4. Run NavBar.cy.js

Types of changes

What types of changes does this pull request introduce?

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Refactoring (non-breaking change that does not add functionality but makes code cleaner or more efficient)
• Documentation Update
• Tests (new or updated tests)
• Style (changes to code styling)
• CI (continuous integration changes)
• Repository Maintenance
• Other (please describe below)

Checklist

• I have read the guidelines for contributing.
• The changes in this PR are as small as they can be. They represent one and only one fix or enhancement.
• Linting checks pass with my changes.
• Any existing unit tests pass with my changes.
• Any existing end-to-end tests pass with my changes.
• I have added tests that prove my fix is effective or that my feature works.
• If this PR fixes an existing issue, I have added a unit or end-to-end test that will detect if this issue reoccurs.
• I have added JSDoc comments as appropriate.
• I have added the necessary documentation to the roar-docs repository.
• I have shared this PR on the roar-pr-reviews channel (if I have access)
• I have linked relevant issues (if any)

Justification of missing checklist items

Further comments

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	0.97%	73 / 7499
🔵	Statements	0.89%	74 / 8237
🔵	Functions	0.76%	14 / 1829
🔵	Branches	0.44%	20 / 4465

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
src/main.js	0%	100%	100%	0%	8
src/plugins.js	0%	100%	100%	0%	19-20, 22-42
src/setup.js	0%	0%	0%	0%	83-178, 84, 87-93, 88-92, 89, 91, 96-98, 100-154, 156-158, 160, 163, 165-168, 166-167, 171, 173-175, 174, 177, 185-188, 186-187
src/components/NavBar.vue	0%	0%	0%	0%	82-88, 91-94, 92, 92-93, 96-98, 97, 97, 100-102, 101, 104-107, 105, 105-106, 109-111, 110, 115-121, 117, 123-125, 124, 127-150, 128-148, 131-141, 132, 134-140, 138, 142-147, 143-146, 149, 152-169, 153-168, 154, 156-159, 158, 160-167, 164, 166, 171-175, 172, 172-173, 173-174, 177, 177, 179-181, 180, 183-189, 184-188, 191-206, 196, 203, 208-234, 209-233, 216, 223, 230, 236-238, 237, 3, 5, 9, 24, 1, 47, 56
src/router/index.js	0%	0%	0%	0%	7, 7, 11, 11, 14-416, 18, 31, 37, 43, 50, 57, 64, 71, 78, 85, 92, 99, 106, 113, 120, 127, 134, 141, 148, 155, 162, 169, 178, 185, 192, 200, 206-207, 212, 217, 225, 231, 246-249, 248, 251-253, 268-269, 276-277, 284, 290, 296, 302, 309, 315, 321, 327, 334, 341, 348, 355, 361, 363, 367, 373, 379, 388, 394, 401, 407, 413, 418-427, 422-423, 423-424, 424-425, 429-509, 430, 432-436, 433, 435, 438, 440-448, 450, 452-458, 453-458, 456-457, 460-467, 465-466, 470-471, 474-475, 483-499, 484-499, 490-496, 491-496, 494-495, 497-498, 502-505, 503-504, 507-508

Generated in workflow #201

[cypress]

roar-dashboard-e2e    Run #5766

Run Properties:   Passed #5766  •  e85a5919f5: Component Tests for PR 767 "Add Cypress Component Testing Framework" from commit...

Project	roar-dashboard-e2e
Branch Review	component-testing
Run status	Passed #5766
Run duration	01m 42s
Commit	e85a5919f5: Component Tests for PR 767 "Add Cypress Component Testing Framework" from commit...
Committer	Kyle
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	2
View all changes introduced in this branch ↗︎

[github-actions]

Visit the preview URL for this PR (updated for commit e85a591):

https://roar-staging--pr767-component-testing-40llsf40.web.app

_{(expires Thu, 12 Sep 2024 20:38:29 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2631e9c58fd0104ecbfddd72a62245ddac467460}

[maximilianoertel]

Looks great and exciting to get the first component tests on the project! Just a couple of minor-ish questions below from me:

[maximilianoertel]

🚀