NIN-10 | Add Modal tests and GitHub footer link, remove CheatModal test by avicrayyy · Pull Request #10 · avicrayyy/nintroller

avicrayyy · 2026-01-09T11:21:19Z

Overview

This branch focused on creating comprehensive test coverage for the Modal component, replacing the minimal CheatModal.test.tsx with a full test suite that covers all modal scenarios, content types, and user interactions.

Changes Made

Test Files

1. Renamed and Expanded Modal Tests

Deleted: __tests__/components/CheatModal.test.tsx (2 tests)
Created: __tests__/components/Modal.test.tsx (24 tests)

Test Coverage Breakdown:

Rendering (6 tests): Open/closed states, title display, children content, ARIA labels
Content Types (4 tests): All modal content components (WelcomeContent, CheatContent, ResetProgressContent, AuthorContent)
Closing Methods (5 tests): Close icon button, footer button, Escape key, backdrop click, content click prevention
Footer Button (4 tests): Default/custom text, onConfirm callback behavior
Focus Management (1 test): Auto-focus on close button when modal opens
Accessibility (3 tests): role="dialog", aria-modal, aria-label attributes
Animations (1 test): DOM removal after close animation completes

Key Improvements

Comprehensive Coverage: Expanded from 2 basic tests to 24 tests covering all modal functionality
Content Type Testing: Tests all 4 modal content components to ensure they render correctly
User Interaction Testing: Covers all ways users can interact with modals (clicks, keyboard, backdrop)
Accessibility Validation: Ensures ARIA attributes are properly set for screen readers
Animation Handling: Tests modal animations with proper waitFor timeouts
Edge Cases: Tests that clicking modal content doesn't close it (only backdrop does)

Technical Details

Uses waitFor with appropriate timeouts (300-400ms) to handle modal animations
Properly handles multiple buttons with similar names using getAllByRole when needed
Tests both default and custom footerButtonText values
Validates onConfirm callback behavior when provided vs. when omitted
Ensures focus management works correctly for keyboard navigation

Files Changed

D  __tests__/components/CheatModal.test.tsx
A  __tests__/components/Modal.test.tsx
M  __tests__/components/ControllerPlayground.test.tsx (minor updates)
M  app/components/ControllerPlayground/index.tsx (minor updates)

Testing Results

✅ All 24 tests passing

Test execution time: ~0.9-1.0s (on local testing)
No linting errors
Full coverage of modal component functionality

Impact

Benefits

Maintainability: Comprehensive tests catch regressions when modal behavior changes
Documentation: Tests serve as living documentation of modal capabilities
Confidence: Full test coverage ensures modal works correctly across all scenarios
Accessibility: Tests validate ARIA attributes and keyboard navigation

Future Considerations

Consider adding visual regression tests for modal animations
May want to add tests for modal with very long content (scrolling behavior)
Could add tests for modal with multiple modals stacked (z-index behavior)

Related Components

app/components/ui/Modal/index.tsx - Main modal component
app/components/ui/Modal/content/* - Modal content components
app/components/ControllerPlayground/index.tsx - Uses modal for various dialogs

Notes for Maintainers

Modal tests use waitFor with timeouts to handle animations - don't reduce timeouts without verifying animations still work
When adding new modal content components, add corresponding tests in the "Content Types" section
If modal closing behavior changes, update the "Closing Methods" tests accordingly
All modal tests should use waitFor for assertions on animated elements to avoid flaky tests

Added comprehensive tests for the Modal component in Modal.test.tsx. Removed the obsolete CheatModal.test.tsx. Updated ControllerPlayground to include a fixed GitHub link at the footer, and added corresponding tests in ControllerPlayground.test.tsx for the new link and its accessibility.

vercel · 2026-01-09T11:21:24Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
nintroller	Ready	Preview, Comment	Jan 9, 2026 11:21am

Copilot

Pull request overview

This PR replaces minimal CheatModal tests with comprehensive Modal component tests, expanding coverage from 2 to 24 tests across rendering, content types, user interactions, accessibility, and animations. Additionally, it adds a GitHub footer link to the ControllerPlayground component with accompanying test coverage.

Comprehensive test suite for Modal component covering all interaction methods, content types, and accessibility features
GitHub footer link added with icon, proper security attributes, and focus management
Test mock for Next.js Link component to support the new footer link tests

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
`__tests__/components/Modal.test.tsx`	New comprehensive test suite with 24 tests covering Modal component functionality, accessibility, and animations
`__tests__/components/CheatModal.test.tsx`	Deleted minimal test file (2 tests) replaced by comprehensive Modal tests
`__tests__/components/ControllerPlayground.test.tsx`	Added Next.js Link mock and 3 tests for the new GitHub footer link
`app/components/ControllerPlayground/index.tsx`	Added GitHub footer link with icon, proper accessibility attributes, and security headers

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-09T11:24:10Z

__tests__/components/ControllerPlayground.test.tsx

+jest.mock("next/link", () => {
+  return function MockLink({
+    children,
+    href,
+    target,
+    rel,
+    className,
+  }: {
+    children: React.ReactNode;
+    href: string;
+    target?: string;
+    rel?: string;
+    className?: string;
+  }) {
+    return (
+      <a href={href} target={target} rel={rel} className={className}>
+        {children}
+      </a>
+    );
+  };
+});


The mock for next/link does not include the aria-label prop, which is used in the actual Link component in ControllerPlayground. This could cause the test to fail or not properly validate the accessibility attribute. Add aria-label to the MockLink props and attributes.

Copilot · 2026-01-09T11:24:11Z

__tests__/components/ControllerPlayground.test.tsx

+      </InputLogProvider>
+    );
+
+    // Find link by href since aria-label might not work with mocked Link


The comment states "Find link by href since aria-label might not work with mocked Link" but the code actually uses getByRole with name pattern matching. This is misleading because the mock doesn't forward the aria-label prop, so the test is actually finding the link by its text content "VIEW ON GITHUB" rather than the aria-label. Consider updating the comment to accurately reflect what the test is doing.

Suggested change

// Find link by href since aria-label might not work with mocked Link

// Find link by accessible name/text since aria-label is not forwarded by the mocked Link

avicrayyy requested a review from Copilot January 9, 2026 11:21

avicrayyy self-assigned this Jan 9, 2026

avicrayyy marked this pull request as ready for review January 9, 2026 11:21

Copilot started reviewing on behalf of avicrayyy January 9, 2026 11:21 View session

avicrayyy merged commit 94059ec into main Jan 9, 2026
8 checks passed

Copilot AI reviewed Jan 9, 2026

View reviewed changes

avicrayyy changed the title ~~NIN-11 | Add Modal tests and GitHub footer link, remove CheatModal test~~ NIN-10 | Add Modal tests and GitHub footer link, remove CheatModal test Jan 9, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NIN-10 | Add Modal tests and GitHub footer link, remove CheatModal test#10

NIN-10 | Add Modal tests and GitHub footer link, remove CheatModal test#10
avicrayyy merged 1 commit intomainfrom
NIN-11-Comprehensive-Modal-Test

avicrayyy commented Jan 9, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 9, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 9, 2026

Uh oh!

Copilot AI Jan 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	// Find link by href since aria-label might not work with mocked Link
	// Find link by accessible name/text since aria-label is not forwarded by the mocked Link

Conversation

avicrayyy commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Changes Made

Test Files

1. Renamed and Expanded Modal Tests

Key Improvements

Technical Details

Files Changed

Testing Results

Impact

Benefits

Future Considerations

Related Components

Notes for Maintainers

Uh oh!

vercel bot commented Jan 9, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

avicrayyy commented Jan 9, 2026 •

edited

Loading