[Testing:TAGrading] Cypress panel switcher tests by AtCloudDiwash · Pull Request #12835 · Submitty/Submitty

AtCloudDiwash · 2026-05-04T07:17:21Z

Why is this Change Important & Necessary?

Issue #11968 documented a regression where the TA grading panel switcher opened panels in incorrect positions in two-panel mode. This PR adds Cypress tests to prevent this regression from happening again in the future.

What is the New Behavior?

Cypress tests now verify that each panel layout option displays the correct dropdown options when a panel button is clicked.
For example, in two-panel mode, panels should open as "left" or "right", not "bottom left" or "bottom right".

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

Run the Cypress test suite
Navigate to Cypress-Gradeable folder
Run ta_grading_panel_switcher.spec.js
Verify all layout options show correct panel position options

Automated Testing & Documentation

Cypress end-to-end tests added in:
cypress/e2e/Cypress-Gradeable/ta_grading_panel_switcher.spec.js

Other information

No breaking changes. No migrations required.

codecov · 2026-05-11T01:38:03Z

Codecov Report

❌ Patch coverage is 0% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 21.64%. Comparing base (7d7fb78) to head (51b7add).
⚠️ Report is 6 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff              @@
##               main   #12835      +/-   ##
============================================
- Coverage     21.64%   21.64%   -0.01%     
  Complexity     9861     9861              
============================================
  Files           268      268              
  Lines         36920    36921       +1     
  Branches        495      495              
============================================
  Hits           7990     7990              
- Misses        28439    28440       +1     
  Partials        491      491

Flag	Coverage Δ
autograder	`21.32% <ø> (ø)`
js	`2.01% <0.00%> (-0.01%)`	⬇️
migrator	`100.00% <ø> (ø)`
php	`20.70% <ø> (ø)`
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.

AtCloudDiwash · 2026-05-11T03:17:15Z

Hi, could someone please review why the CI check failed? I’m having trouble figuring out the cause.

AtCloudDiwash · 2026-05-13T17:21:38Z

I checked the CI failures but couldnot fully understand why it happened. Could someone take a look and suggest me a fix or assure me that some CI checks might be flaky. Thank you.

IDzyre · 2026-06-02T00:20:48Z

The selectors be data-testids if they can, instead of ids or classes. Feel free to add them to the relevant HTML/Twig elements.

@IDzyre thank you for the feedback and noticing my PR. I made the requested changes. Kindly, let me know if there's a room for improvement. Thank you.

I don't think we should be ignoring exceptions. Is there an element that appears that you can test for the existence of, or something like that?

Ignoring exceptions should be the LAST thing you do, and even then it's not something we want to do.

I could add a WAIT delay between each panel switch and let the element load first. Most likely this is why we might be getting errors. should('be.visible') is also not working as expected.

More Importantly, this issue is only being experiencing in CI pipeline not in my local testing environment.

IDzyre · 2026-06-03T23:46:13Z

See failing TA grading test.

…itcher-12816

GarvitKhandelwal31 · 2026-06-05T12:32:58Z

Hey @AtCloudDiwash, looks like the TA Grading cypress is still failing

AtCloudDiwash · 2026-06-05T12:36:20Z

@GarvitKhandelwal31, it’s surprising how the code works locally but fails CI tests when I push. Initially I thought it’s twig elements but it could be some other issue.

…r test

…itcher-12816

…ders due to PR #Submitty#12813

AtCloudDiwash · 2026-06-09T04:58:07Z

@GarvitKhandelwal31, could you please guide me through this issue.

I have drawn this image from github artifacts. What could this test error possibly mean. Surprisingly, the test works on my machine but fails at CI. I believe I should write test based on the remote machine ? Moreover I would like to know more about ResizeObserver exception.

…anel

AtCloudDiwash · 2026-06-09T18:15:38Z

@IDzyre . I added an exception in the spec file. The test passes. However, I'm not sure if it is recommended to do. I believe the failing CI was originating from constant change in the UI (due to the nature of test).

IDzyre · 2026-06-09T22:13:57Z

@IDzyre . I added an exception in the spec file. The test passes. However, I'm not sure if it is recommended to do. I believe the failing CI was originating from constant change in the UI (due to the nature of test).

After looking this up, it seems like catching the exception in Cypress is the common. That being said, it looks like there are ways of fixing this without ignoring exceptions. See if wrapping "adjustGradingPanelHeader" with requestAnimationFrame works. If it does, I t const resizeObserver = new ResizeObserver(() => {
requestAnimationFrame(() => adjustGradingPanelHeader());
});hink we should go with that. If it doesn't , then I am okay with leaving the exception in.

AtCloudDiwash · 2026-06-09T22:56:29Z

@IDzyre . I added an exception in the spec file. The test passes. However, I'm not sure if it is recommended to do. I believe the failing CI was originating from constant change in the UI (due to the nature of test).

After looking this up, it seems like catching the exception in Cypress is the common. That being said, it looks like there are ways of fixing this without ignoring exceptions. See if wrapping "adjustGradingPanelHeader" with requestAnimationFrame works. If it does, I t const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => adjustGradingPanelHeader()); });hink we should go with that. If it doesn't , then I am okay with leaving the exception in.

@IDzyre, the requested change is done. The test passed.

IDzyre · 2026-06-11T04:02:29Z

+            cy.log(`Testing layout: ${layout.name}`);
+
+            cy.get('[data-testid="panel-selector-toggle"]')
+                .should('be.visible')


It is not needed to have a "be visible" assertion before doing actions with an element, as the .click() already waits for it to be visible before clicking on it.

After these are changed, I will approve (assuming tests continue to pass). Good work on this.

IDzyre · 2026-06-11T04:02:41Z

+            panels.forEach((panel) => {
+                cy.log(`Testing panel: ${panel.name}`);
+
+                cy.get(panel.button).should('be.visible').click();


Same comment about be.visible

IDzyre

New Cypress tests look good, using testids, and minimal code duplication. I will wait to merge this for a little bit, until I can be sure all Cypress tests run on main.

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

Add Cypress tests for TA grading panel switcher

9d03446

AtCloudDiwash force-pushed the feature/cypress-ta-grading-panel-switcher-12816 branch from 4591371 to 9d03446 Compare May 4, 2026 07:24

Merge branch 'main' into feature/cypress-ta-grading-panel-switcher-12816

ad7e705

Merge branch 'main' into feature/cypress-ta-grading-panel-switcher-12816

682e7a0

IDzyre requested changes Jun 2, 2026

View reviewed changes

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

AtCloudDiwash added 2 commits June 1, 2026 20:27

Merge branch 'main' into feature/cypress-ta-grading-panel-switcher-12816

168996d

refactor: add data-testid selectors

bec11dd

AtCloudDiwash added 5 commits June 4, 2026 01:28

Merge branch 'Submitty:main' into feature/cypress-ta-grading-panel-sw…

5698a36

…itcher-12816

Improve reliability of TA grading panel switcher Cypress test

04cf792

Merge branch 'Submitty:main' into feature/cypress-ta-grading-panel-sw…

a5acdaf

…itcher-12816

Merge branch 'main' into feature/cypress-ta-grading-panel-switcher-12816

1ee2e1d

change the selector from data-testids to id

c28f1ce

AtCloudDiwash added 3 commits June 8, 2026 23:48

use data-testid for panel selector toggle in TA grading panel switche…

7cf3c1d

…r test

Merge branch 'Submitty:main' into feature/cypress-ta-grading-panel-sw…

56846a9

…itcher-12816

edit the log as a ta to avoid the restrictions for limited access gra…

9e8fcdb

…ders due to PR #Submitty#12813

AtCloudDiwash added 4 commits June 9, 2026 01:44

refactor: create individual test cases per layout in the ta grading p…

7000c13

…anel

fix javascript linting issue

7749c52

fix javascript lint issue

1de3cc9

ignore the ResizeObserver loop

553f2ee

AtCloudDiwash requested a review from IDzyre June 9, 2026 18:15

automateprojectmangement Bot moved this from Work in Progress to In Review in Submitty Development Jun 9, 2026

AtCloudDiwash added 2 commits June 9, 2026 18:21

fix: wrap adjustGradingPanelHeader in requestAnimationFrame

87c1c7a

remove exception from the spec

f795fcb

Merge branch 'main' into feature/cypress-ta-grading-panel-switcher-12816

b0f1e2f

IDzyre requested changes Jun 11, 2026

View reviewed changes

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

AtCloudDiwash added 2 commits June 14, 2026 00:14

remove redundant visibility assertions before clicks

bc8531c

Merge branch 'main' into feature/cypress-ta-grading-panel-switcher-12816

51b7add

AtCloudDiwash requested a review from IDzyre June 14, 2026 05:03

automateprojectmangement Bot moved this from Work in Progress to In Review in Submitty Development Jun 14, 2026

IDzyre approved these changes Jun 18, 2026

View reviewed changes

github-project-automation Bot moved this from In Review to Awaiting Maintainer Review in Submitty Development Jun 18, 2026

bmcutler merged commit 145aa2e into Submitty:main Jun 19, 2026
25 of 27 checks passed

Uh oh!

Conversation

AtCloudDiwash commented May 4, 2026

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!

AtCloudDiwash commented May 11, 2026

Uh oh!

AtCloudDiwash commented May 13, 2026

Uh oh!

IDzyre Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

AtCloudDiwash Jun 2, 2026 • 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!

IDzyre Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

AtCloudDiwash Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

IDzyre commented Jun 3, 2026

Uh oh!

GarvitKhandelwal31 commented Jun 5, 2026

Uh oh!

AtCloudDiwash commented Jun 5, 2026

Uh oh!

AtCloudDiwash commented Jun 9, 2026

Uh oh!

AtCloudDiwash commented Jun 9, 2026

Uh oh!

IDzyre commented Jun 9, 2026

Uh oh!

AtCloudDiwash commented Jun 9, 2026

Uh oh!

IDzyre Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

IDzyre Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

IDzyre Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

IDzyre left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov Bot commented May 11, 2026 •

edited

Loading

AtCloudDiwash Jun 2, 2026 •

edited

Loading