Skip to content

Conversation

@talissoncosta
Copy link
Contributor

@talissoncosta talissoncosta commented Dec 19, 2025

Summary

Add Jest unit testing infrastructure to the frontend codebase to enable fast, isolated unit tests alongside the existing TestCafe E2E tests.

Closes #6442

Changes

Jest Configuration

  • Add Jest with ts-jest preset for TypeScript support
  • Configure module path aliases (common/, components/, project/)
  • Set up coverage collection for common/ and web/ directories

CI/CD Integration

  • Add new GitHub Actions workflow (frontend-pull-request.yml)
  • Runs unit tests automatically on PRs that modify frontend code

Initial Test Coverage

  • Add comprehensive unit tests for featureFilterParams utility
  • Tests cover buildUrlParams, buildApiFilterParams, getFiltersFromParams, hasActiveFilters

Dependencies Added

  • jest, ts-jest, @types/jest

How did you test this code?

cd frontend
npm run test:unit

All 27 tests pass.

Checklist

  • I have added information to docs/ if required so people know about the feature!
  • I have filled in the "Changes" section below
  • I have filled in the "How did you test this code" section below
  • I have used a Conventional Commit title for this Pull Request

@vercel
Copy link

vercel bot commented Dec 19, 2025

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

3 Skipped Deployments
Project Deployment Review Updated (UTC)
docs Ignored Ignored Preview Jan 14, 2026 4:18pm
flagsmith-frontend-preview Ignored Ignored Preview Jan 14, 2026 4:18pm
flagsmith-frontend-staging Ignored Ignored Preview Jan 14, 2026 4:18pm

@github-actions github-actions bot added the front-end Issue related to the React Front End Dashboard label Dec 19, 2025
@talissoncosta talissoncosta force-pushed the feat/add-jest-unit-tests branch from ef6d2cb to 0635372 Compare December 19, 2025 00:57
@codecov
Copy link

codecov bot commented Dec 19, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (revert-6468-revert-6429-revert-6428-revert-6361-refactor/migrate-critical-components-featurespagejs-2@f022518). Learn more about missing BASE report.

Additional details and impacted files
@@                                                           Coverage Diff                                                            @@
##             revert-6468-revert-6429-revert-6428-revert-6361-refactor/migrate-critical-components-featurespagejs-2    #6432   +/-   ##
========================================================================================================================================
  Coverage                                                                                                         ?   98.08%           
========================================================================================================================================
  Files                                                                                                            ?     1293           
  Lines                                                                                                            ?    46588           
  Branches                                                                                                         ?        0           
========================================================================================================================================
  Hits                                                                                                             ?    45696           
  Misses                                                                                                           ?      892           
  Partials                                                                                                         ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 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.

@talissoncosta talissoncosta linked an issue Dec 25, 2025 that may be closed by this pull request
@talissoncosta talissoncosta changed the title POC: unit tests feat(frontend): add Jest unit testing infrastructure Dec 25, 2025
@talissoncosta talissoncosta marked this pull request as ready for review December 25, 2025 17:59
@talissoncosta talissoncosta requested review from a team as code owners December 25, 2025 17:59
@talissoncosta talissoncosta requested review from Zaimwa9 and removed request for a team December 25, 2025 17:59
@github-actions github-actions bot added the feature New feature or request label Dec 25, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Dec 25, 2025

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-6432 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-6432 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-e2e:pr-6432 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith:pr-6432 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-private-cloud:pr-6432 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-frontend:pr-6432 Finished ✅ Results

Copy link
Contributor

@Zaimwa9 Zaimwa9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just adding a prop and to the deploy to production pipeline and should be good to go. Thanks for the initiative!

Base automatically changed from revert-6428-revert-6361-refactor/migrate-critical-components-featurespagejs-2 to main January 5, 2026 14:20
@talissoncosta talissoncosta force-pushed the feat/add-jest-unit-tests branch from 0876e33 to 0947abc Compare January 5, 2026 19:32
talissoncosta and others added 20 commits January 12, 2026 09:43
Prevent rapid toggling race condition and provide visual feedback when
toggling a feature flag. The row now shows reduced opacity and blocks
interactions while the toggle operation is in progress.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Apply the same row-level loading state (opacity + disabled) when
removing a feature. Add key={projectFlag.id} to ensure React properly
unmounts deleted rows instead of reusing them for adjacent items.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace useOptimisticToggle with useFeatureRowState that handles both
toggle and remove loading states. This simplifies FeatureRow by moving
all row-level state management into a single, well-documented hook.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add useViewMode hook that updates React state immediately for instant feedback

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The route context doesn't have organisationId since the FeaturesPage
route doesn't include :organisationId param. Use project.organisation
from RTK Query instead.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Forward onError callback in CompareEnvironments and CompareFeatures adapters
- Call onError on early returns in useToggleFeatureWithToast and FeaturesPage
- Add stopRemoving function to useFeatureRowState for removal failure handling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The service.ts had refetchOnFocus: true configured, but without calling
setupListeners() from RTK Query, the window focus event listener was
never set up. This restores the refetch-on-focus behaviour that existed
in the old FeaturesPage.js implementation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…29-revert-6428-revert-6361-refactor/migrate-critical-components-featurespagejs-2
The new RTK-based toggle hook was missing the `use_v2_feature_versioning`
check that exists in the legacy Flux store. This caused errors when
toggling features in versioned environments.

- Add versioning check to useToggleFeatureWithToast hook
- Use createAndSetFeatureVersion mutation for versioned environments
- Use updateFeatureState mutation for non-versioned environments
- Pass environment object from FeaturesPage to get versioning setting

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The getFeatureStateCrud function used `!v.feature_segment` to find
the environment default state, but the caller filtered with
`!v.feature_segment?.segment`. When the API returns feature_segment
as an object with segment: null, these filters produced different
results, causing "Feature contains no changes" error.

Also improved error message extraction in useToggleFeatureWithToast.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The Django API's EnvironmentViewSet uses lookup_field="api_key", so the
/environments/{lookup}/featurestates/ endpoint expects the environment's
API key string, not the numeric ID.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The versioned toggle was failing with 404 because getFeatureStates
expects ?environment={numeric_id} but was receiving the api_key string.

- Add environmentApiKey (optional) and environmentId (number) to request type
- Pass both IDs from useToggleFeatureWithToast (which has the full Environment object)
- Skip optimistic update for legacy store flow (doesn't pass environmentApiKey)
- Fix getVersionFeatureState type to expect number instead of string

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Jest with ts-jest for TypeScript support
- Add jest.config.js with path aliases matching tsconfig
- Add npm scripts: test:unit, test:unit:watch, test:unit:coverage
- Migrate format.js to format.ts for better Jest compatibility
- Add unit tests for featureFilterParams utility

Tests cover:
- buildUrlParams: is_archived always explicitly set (never undefined)
- buildApiFilterParams: is_archived always included in API params
- getFiltersFromParams: URL param parsing
- hasActiveFilters: filter state detection

This prevents regression of the archived features bug where is_archived
was undefined instead of explicitly 'false'.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Runs Jest unit tests on PRs that modify frontend/ files.
Runs on all PRs including drafts (tests are fast and cheap).

Lint and typecheck can be added later once those are cleaned up.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add 45 unit tests for Format utility pure functions
- Remove unnecessary .toString() in countdown: parseInt(x.toString()) → Math.floor(x)
- Remove unnecessary .toString() in shortenNumber: +parseFloat(x.toString()).toFixed(1) → +x.toFixed(1)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add explicit moment import to fix TypeScript UMD global error
- Simplify money() to consistently return defaultValue for null/undefined/0
- Update tests to reflect new behavior

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add clearMocks: true to Jest config for automatic mock cleanup
- Add unit tests job to frontend-deploy-production.yml workflow
- Update package-lock.json after rebase

Addresses review comments from @Zaimwa9

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Reset FeaturesPage.tsx and useToggleFeatureWithToast.ts to main
since those changes belong to the FeaturesPage migration PR.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Address security warning from github-advanced-security bot by adding
explicit permissions block with minimal `contents: read` scope.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@talissoncosta talissoncosta force-pushed the feat/add-jest-unit-tests branch from c6e25db to f7f3e69 Compare January 14, 2026 16:18
@cursor
Copy link

cursor bot commented Jan 14, 2026

You have run out of free Bugbot PR reviews for this billing cycle. This will reset on February 10.

To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

@talissoncosta talissoncosta changed the base branch from main to revert-4626-feat/amplitude-session-replay January 14, 2026 16:18
@talissoncosta talissoncosta requested review from a team as code owners January 14, 2026 16:18
@talissoncosta talissoncosta changed the base branch from revert-4626-feat/amplitude-session-replay to revert-6468-revert-6429-revert-6428-revert-6361-refactor/migrate-critical-components-featurespagejs-2 January 14, 2026 16:18
@github-actions github-actions bot added api Issue related to the REST API feature New feature or request and removed feature New feature or request labels Jan 14, 2026
Base automatically changed from revert-6468-revert-6429-revert-6428-revert-6361-refactor/migrate-critical-components-featurespagejs-2 to main January 15, 2026 13:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

api Issue related to the REST API feature New feature or request front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(frontend): Add Jest unit testing infrastructure

3 participants