[Testing:System] Cypress component testing for vue by jndlansh · Pull Request #12836 · Submitty/Submitty

jndlansh · 2026-05-04T11:19:29Z

Why is this Change Important & Necessary?

This PR introduces cypress component testing in the Submitty Codebase. This is particularly important to test the multiple vue components that have been introduced in the repo recently and for the ongoing migration process to VueJS.

First Component Test – Popup.vue:
Added 6 tests covering:

Visibility gating (component hidden when visible: false)
Props and slots rendering with correct title and content
Event emission on overlay click, header close button, and footer close button
Keyboard accessibility (Escape key toggles popup)
Variant mode (savable: true renders "Discard" and "Save" buttons)
Save action event emission

What is the New Behavior?

cypress.popup.mp4

What steps should a reviewer take to reproduce or test the bug or new feature?

cd site
npx cypress run --component

cd site
npx cypress open --component

Automated Testing & Documentation

6 test cases for Popup.vue
CSS styling: Global Submitty styles load automatically in component mode
Existing Jest tests and E2E Cypress tests unaffected
Pattern established: cypress/component/Popup.cy.ts serves as reusable template

Other information

Breaking Changes: None. This PR is purely additive with no changes to existing components, tests and build processes.

codecov · 2026-05-11T01:35:11Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 21.67%. Comparing base (d9c3f15) to head (74cb2f6).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##               main   #12836   +/-   ##
=========================================
  Coverage     21.67%   21.67%           
  Complexity     9802     9802           
=========================================
  Files           268      268           
  Lines         36724    36723    -1     
  Branches        489      489           
=========================================
  Hits           7960     7960           
+ Misses        28279    28278    -1     
  Partials        485      485

Flag	Coverage Δ
autograder	`21.32% <ø> (ø)`
js	`2.02% <ø> (+<0.01%)`	⬆️
migrator	`100.00% <ø> (ø)`
php	`20.73% <ø> (ø)`
python_submitty_utils	`80.08% <ø> (ø)`
submitty_daemon_jobs	`91.13% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

williamjallen · 2026-05-11T01:36:01Z

@jndlansh Please see failing CI.

jndlansh · 2026-05-11T05:23:22Z

Fixed CI checks that were failing

williamjallen · 2026-05-13T01:00:40Z

@jndlansh Please see failing CI

williamjallen

Please also add this as a new CI job.

jndlansh · 2026-05-13T10:00:18Z

I have added the cypress component testing as a new CI job. Also changes the title's to submission from vue. I think that should work.

williamjallen

Seems reasonable to me. @IDzyre, would you mind taking a brief look at this?

williamjallen · 2026-05-17T02:21:51Z

The rest of the Cypress CI jobs are failing for unrelated reasons.

jndlansh · 2026-05-17T06:48:23Z

Thank you @williamjallen, when this PR gets merged, I will be able to add Cypress CT to other vue components as well. Meanwhile I will be looking as potential testcases for the same.

IDzyre · 2026-05-18T20:19:50Z

Question: Is there a reason this is using cypress in TS not JS like the rest of the codebase? If we could, I think we should be consistent. If there is another reason, I can be convinced otherwise.

jndlansh · 2026-05-19T03:19:02Z

Hey @IDzyre!
I saw that Vue files and the other Vue components were already written in TS and were using lang="ts" in components.
So naturally I used TS for Cypress CT setup, I thought they would sync better.

I can use JS for CT if that is required and makes the codebase consistent

IDzyre · 2026-05-19T05:17:54Z

@williamjallen Do you have a preference here? I'd be partial to making it javascript if that is possible, to keep all cypress testing in the same language. If typescript is easier/more efficient/has a significant reason to lean that way, we can go that way.

williamjallen · 2026-05-21T22:30:35Z

I agree with @IDzyre here, let's switch this to JS. In the future, we may want to switch everything to TS, but for now we should remain consistent.

williamjallen

See comments.

…er needed in JS implemented CT

jndlansh · 2026-05-22T08:32:19Z

Rest I have now shifted CT to JS. The popup.cy.js passes fine as before.

JManion32

I noticed this error when running the test in the CLI:

<<<CYPRESS.STDERR.START>>>Files in the public directory are served at the root path.
Instead of /public/css/colors.css, use /css/colors.css.
Files in the public directory are served at the root path.
Instead of /public/css/bootstrap.css, use /css/bootstrap.css.
Files in the public directory are served at the root path.
Instead of /public/css/server.css, use /css/server.css.
<<<CYPRESS.STDERR.END>>>

Can we adjust these paths?

jndlansh · 2026-05-25T18:57:20Z

It works when I use CSS link href="/css/server.css" in component-index.html.

It passes the test both ways, I did not get this error either way.

Shall I use the later method suggested @JManion32 ?

JManion32 · 2026-05-25T19:49:41Z

It works when I use CSS link href="/css/server.css" in component-index.html.

It passes the test both ways, I did not get this error either way.

Shall I use the later method suggested @JManion32 ?

Yes.

…in component-index.html

jndlansh added 2 commits May 4, 2026 16:29

Add cypress component testing for modular vue components

f0c180c

commit package-lock.json, ran npm i

989a9d3

github-project-automation Bot added this to Submitty Development May 4, 2026

github-project-automation Bot moved this to Seeking Reviewer in Submitty Development May 4, 2026

Merge branch 'main' into cypress/component-testing

2df3e42

fix CI fails and added css to popup component testing

1dec01b

williamjallen requested changes May 13, 2026

View reviewed changes

github-project-automation Bot moved this from Seeking Reviewer to Work in Progress in Submitty Development May 13, 2026

jndlansh changed the title ~~[Testing:Vue] Cypress component testing for vue~~ [Testing:System] Cypress component testing for vue May 13, 2026

jndlansh added 2 commits May 13, 2026 15:12

add cypress component test as CI job

580f973

fix yaml lint

3e180a9

williamjallen approved these changes May 17, 2026

View reviewed changes

github-project-automation Bot moved this from Work in Progress to Awaiting Maintainer Review in Submitty Development May 17, 2026

williamjallen requested changes May 21, 2026

View reviewed changes

github-project-automation Bot moved this from Awaiting Maintainer Review to Work in Progress in Submitty Development May 21, 2026

jndlansh added 2 commits May 22, 2026 12:28

Shift Cypress CT from TS to JS. Remove component.d.ts file as no long…

d15174c

…er needed in JS implemented CT

Fix JS lint error

b8505b3

jndlansh commented May 22, 2026

View reviewed changes

Comment thread site/cypress.config.ts

jndlansh requested a review from williamjallen May 22, 2026 08:32

automateprojectmangement Bot moved this from Work in Progress to In Review in Submitty Development May 22, 2026

Merge branch 'main' into cypress/component-testing

9bb1916

JManion32 requested changes May 25, 2026

View reviewed changes

github-project-automation Bot moved this from In Review to Work in Progress in Submitty Development May 25, 2026

jndlansh added 2 commits May 26, 2026 05:58

Remove CSS imports from component.js and added proper formatted ones …

a306d3e

…in component-index.html

Fix JS lint

74cb2f6

williamjallen requested a review from JManion32 May 28, 2026 01:57

automateprojectmangement Bot moved this from Work in Progress to In Review in Submitty Development May 28, 2026

williamjallen approved these changes May 31, 2026

View reviewed changes

williamjallen merged commit 651617a into Submitty:main May 31, 2026
25 of 27 checks passed

github-project-automation Bot moved this from In Review to Done in Submitty Development May 31, 2026

Uh oh!

Conversation

jndlansh commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why is this Change Important & Necessary?

What is the New Behavior?

What steps should a reviewer take to reproduce or test the bug or new feature?

Automated Testing & Documentation

Other information

Uh oh!

codecov Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

williamjallen commented May 11, 2026

Uh oh!

jndlansh commented May 11, 2026

Uh oh!

williamjallen commented May 13, 2026

Uh oh!

williamjallen left a comment

Choose a reason for hiding this comment

Uh oh!

jndlansh commented May 13, 2026

Uh oh!

williamjallen left a comment

Choose a reason for hiding this comment

Uh oh!

williamjallen commented May 17, 2026

Uh oh!

jndlansh commented May 17, 2026

Uh oh!

IDzyre commented May 18, 2026

Uh oh!

jndlansh commented May 19, 2026

Uh oh!

IDzyre commented May 19, 2026

Uh oh!

williamjallen commented May 21, 2026

Uh oh!

williamjallen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jndlansh commented May 22, 2026

Uh oh!

JManion32 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jndlansh commented May 25, 2026

Uh oh!

JManion32 commented May 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jndlansh commented May 4, 2026 •

edited

Loading

codecov Bot commented May 11, 2026 •

edited

Loading

JManion32 left a comment •

edited

Loading