Skip to content

Conversation

@talissoncosta
Copy link

Summary

Add comprehensive unit and integration tests for the Flagsmith Backstage plugin, plus GitHub Actions CI for running tests on every PR.

Closes #6424

Changes

CI/CD

  • Add test job to GitHub Actions workflow (runs yarn test --coverage --ci)

Test Infrastructure

  • Add shared test fixtures with mock data (projects, environments, features, usage data)
  • Add test utilities (renderWithBackstage, createMockFetchApi) for consistent test setup

Unit Tests

  • Utilities (flagHelpers.ts): getFeatureEnvStatus, buildEnvStatusTooltip, calculateFeatureStats, paginate
  • Theme (flagsmithTheme.ts): buildFlagUrl, buildProjectUrl URL builders
  • API Client (FlagsmithClient.ts): All methods with mocked fetch and error handling
  • Hooks: useFlagsmithProject, useFlagsmithUsage with loading/success/error states

Component Tests

  • Shared components: LoadingState, MiniPagination, FlagStatusIndicator, FlagsmithLink, SearchInput
  • Integration tests: FlagsTab, FlagsmithOverviewCard, FlagsmithUsageCard

Test Coverage

Category Files Tests
Utilities 2 ~30
API Client 1 ~25
Hooks 2 ~20
Shared Components 5 ~50
Integration 3 ~40
Total 13 ~165

Commits

  1. ci: add test job to GitHub Actions workflow
  2. test: add test fixtures and utilities
  3. test(utils): add unit tests for flagHelpers
  4. test(theme): add unit tests for flagsmithTheme
  5. test(api): add unit tests for FlagsmithClient
  6. test(hooks): add unit tests for custom hooks
  7. test(components): add unit tests for shared components
  8. test(components): add integration tests for main components

Test Plan

  • All tests pass locally
  • CI runs tests successfully on PR
  • Test coverage meets project standards

🤖 Generated with Claude Code

talissoncosta and others added 8 commits December 23, 2025 00:24
Add a test job that runs yarn test --coverage --ci on every PR and push to main.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add shared mock data (projects, environments, features, usage data) and
test utilities (renderWithBackstage, createMockFetchApi) for use across
all tests.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add tests for getFeatureEnvStatus, buildEnvStatusTooltip,
calculateFeatureStats, and paginate functions.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add tests for buildFlagUrl and buildProjectUrl URL builder functions.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add tests for all API client methods with mocked fetch responses
and error handling.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add tests for useFlagsmithProject and useFlagsmithUsage hooks including
loading states, success flows, and error handling.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add tests for shared UI components including ARIA accessibility,
user interactions, and prop variations.

- LoadingState: spinner, message, ARIA attributes
- MiniPagination: navigation, disabled states, ARIA
- FlagStatusIndicator: enabled/disabled states
- FlagsmithLink: link rendering, iconOnly mode
- SearchInput: input, clear button, debounce

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add integration tests for main components with mocked API responses,
testing loading states, data display, error handling, and user interactions.

- FlagsTab: search filtering, feature display, error states
- FlagsmithOverviewCard: stats display, pagination
- FlagsmithUsageCard: chart rendering, usage data

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@talissoncosta talissoncosta marked this pull request as draft December 23, 2025 12:09
@talissoncosta talissoncosta changed the base branch from main to feat/6422-ui-improvements December 23, 2025 12:09
- Change button to link role for MUI IconButton with component="a"
- Use more specific text matchers to avoid multiple element matches
- Remove style assertions (CSS-in-JS unreliable in JSDOM)

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants