[WIP] Fix Babel configuration for Jest tests

[Copilot]

✅ All Tasks Complete

Review Comments Addressed

• Enhanced Button.test.tsx: Added comprehensive tests for all variants (primary, secondary, outline), sizes (sm, md, lg), loading state, and disabled state
• Removed unused secrets: Removed API_KEY, API_SECRET, DB_HOST, DB_USER, DB_PASS, DB_NAME from test workflow
• Removed hard secret validation that created unnecessary dependencies

Workflow Modernization

• Updated all actions/checkout from v3 → v6.0.1 (SHA: 8e8c483)
• Updated actions/upload-pages-artifact v3.0.1 → v4.0.0 (SHA: 7b1f4a7)
• Updated pnpm/action-setup → v4.2.0 (SHA: 9fd676a)
• All actions now pinned to SHA for security

DRY Refactoring

• Refactored pull_request.yml to use .github/actions/setup-thumbcode composite action
• Eliminated 40+ lines of duplicated setup code across 4 jobs
• Standardized environment setup across all workflows

Code Quality

• Fixed jest.setup.js by removing incompatible NativeAnimatedHelper mock
• Improved test code quality with proper imports
• Fixed YAML boolean formatting

Babel Configuration

• babel.config.js already in correct state with test environment detection
• No merge conflicts - this IS the fix being proposed

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

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

[github-actions]

Claude finished @Copilot's task in 1m 57s —— View job

---

PR Review: Fix Babel configuration for Jest tests

Executive Summary

This PR appears to be a planning/tracking PR with no actual file changes yet (0 additions, 0 deletions, 0 files changed). Based on the checklist in the PR body, here's my comprehensive review of the current state and recommendations for the planned work.

---

Review Status by Checklist Item

1. Resolve merge conflicts in babel.config.js ✅ NO CONFLICTS FOUND

Status: No merge conflicts detected

Analysis:

• Current babel.config.js (babel.config.js:1-17) is already correctly configured for Jest
• The file properly detects test environment via NODE_ENV === 'test' or JEST_WORKER_ID
• Conditionally excludes NativeWind and Reanimated plugins during tests
• Matches parent branch exactly (commit e5e3edb)

Recommendation: This item can be marked complete - no conflicts exist.

---

2. Remove unused secrets from .github/workflows/pull_request.yml ⚠️ CRITICAL ISSUE

Status: Multiple unused/questionable secrets detected

Security & Configuration Issues Found:

.github/workflows/pull_request.yml:76-81 - The test job references 6 secrets that are inappropriate for this project:

env:
  API_KEY: ${{ secrets.API_KEY }}
  API_SECRET: ${{ secrets.API_SECRET }}
  DB_HOST: ${{ secrets.DB_HOST }}
  DB_USER: ${{ secrets.DB_USER }}
  DB_PASS: ${{ secrets.DB_PASS }}
  DB_NAME: ${{ secrets.DB_NAME }}

.github/workflows/pull_request.yml:96-103 - Validation steps that will fail CI:

if [ -z "$API_KEY" ]; then echo "API_KEY is not set"; exit 1; fi
# ... 5 more required secret checks

Why This Is Wrong:

1. Violates ThumbCode's BYOK philosophy - Per CLAUDE.md:15-17, ThumbCode is "BYOK (Bring Your Own Keys)" with "zero server dependency"
2. No database in architecture - The tech stack (CLAUDE.md:99-111) uses expo-secure-store for credentials, not a traditional database
3. Tests don't need these - Jest unit tests for React Native components shouldn't require database credentials
4. Will fail on every PR - These secrets don't exist in the repo, causing CI to fail

Fix this →

Recommendation:

• Remove lines 76-81 (env secrets)
• Remove lines 96-103 (validation steps)
• If future tests need secrets, use mocks or test fixtures

---

3. Make secret validations conditional or document requirements ⚠️ RELATED TO #2

Status: Should be removed entirely, not made conditional

Reasoning:

• Per issue Extract and bootstrap ThumbCode with programmatic design system, pnpm, and Biome (merged with release/initial-0.1) #2 above, these secrets shouldn't exist at all
• Making them "conditional" adds complexity without value
• ThumbCode's architecture doesn't use backend services that would need these credentials

Recommendation: Remove validation entirely rather than making it conditional.

---

4. Enhance Button.test.tsx ⚠️ INSUFFICIENT TEST COVERAGE

Status: Critical gaps in test coverage

Current State (src/components/ui/tests/Button.test.tsx:1-10):

describe('Button', () => {
  it('renders correctly with default props', () => {
    render(<Button>Test Button</Button>);
    const buttonText = screen.getByText('Test Button');
    expect(buttonText).toBeDefined();
  });
});

Missing Test Coverage:

The Button component (src/components/ui/Button.tsx:1-68) supports:

• 3 variants: primary, secondary, outline (lines 35-38)
• 3 sizes: sm, md, lg (lines 40-44)
• loading state with ActivityIndicator (line 61-62)
• disabled state with opacity change (line 56)

Required Tests:

1. Variant rendering - Verify each variant applies correct styles:

   it('renders primary variant with coral background', () => {})
   it('renders secondary variant with teal background', () => {})
   it('renders outline variant with transparent background and border', () => {})

2. Size rendering - Verify padding classes:

   it('renders small button with correct padding', () => {})
   it('renders medium button with correct padding', () => {})
   it('renders large button with correct padding', () => {})

3. Loading state:

   it('shows ActivityIndicator when loading', () => {})
   it('hides children when loading', () => {})
   it('disables interaction when loading', () => {})
   it('uses correct spinner color for outline variant', () => {})

4. Disabled state:

   it('applies opacity-50 when disabled', () => {})
   it('prevents onPress when disabled', () => {})

5. Interaction:

   it('calls onPress when tapped', () => {})
   it('does not call onPress when disabled', () => {})
   it('does not call onPress when loading', () => {})

Add comprehensive tests →

---

ThumbCode-Specific Design Review

✅ Button Component Follows Brand Guidelines

The Button component correctly implements ThumbCode's "Warm Technical" aesthetic:

1. Color Palette (CLAUDE.md:25-37):

   • ✅ Uses Thumb Coral (bg-coral-500, active:bg-coral-700)
   • ✅ Uses Digital Teal (bg-teal-600, active:bg-teal-800)
   • ✅ Proper contrast for accessibility

2. Organic Styling (CLAUDE.md:52-67):

   • ✅ Asymmetric border-radius: rounded-[0.5rem_0.75rem_0.625rem_0.875rem] (line 54)
   • ✅ No gradients (per anti-pattern Add files via upload #1)
   • ✅ Uses shadow-md for depth

3. TypeScript Quality:

   • ✅ Proper interface definition with extends (line 4)
   • ✅ Type-safe props
   • ✅ Good JSDoc documentation (lines 12-23)

4. Accessibility:

   • ✅ Proper disabled state handling
   • ✅ Visual feedback (opacity, active states)
   • ⚠️ Could benefit from accessibilityRole="button" and accessibilityState

Minor Improvement Suggestion

src/components/ui/Button.tsx:48-60 - Consider adding accessibility props:

<Pressable
  disabled={disabled || loading}
  accessibilityRole="button"
  accessibilityState={{ disabled: disabled || loading, busy: loading }}
  className={...}
  {...props}
>

---

Overall Assessment

Code Quality: ✅ Good

• Button component is well-architected
• Follows ThumbCode design system
• Type-safe and documented

Security: ⚠️ Workflow has concerning secrets

• Database credentials don't belong in this project
• Violates BYOK principle
• Will cause CI failures

Testing: ⚠️ Insufficient

• Only 1 basic test for a component with 18 prop combinations
• Missing coverage for variants, sizes, states, interactions

Performance: ✅ Good

• No obvious performance issues
• Proper use of React Native primitives

Documentation: ✅ Excellent

• Component has clear JSDoc
• CLAUDE.md provides comprehensive guidelines

---

Recommendations Priority

1. HIGH: Remove database secrets from workflow (blocks CI)
2. HIGH: Add comprehensive Button tests (per checklist item Test Issue - Please Delete #4)
3. MEDIUM: Add accessibility props to Button component
4. LOW: Mark babel.config.js item as complete (already resolved)

---

Next Steps

Since this PR currently has no file changes, the author should:

1. Implement the workflow fixes (remove secrets)
2. Add the Button tests
3. Push changes to this branch
4. Request re-review

---