From d4721f060a12cc6121086c41c8091d5fe0c5e262 Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Tue, 27 Jan 2026 16:53:40 -0300 Subject: [PATCH 1/2] feat(frontend): add /unit-test command for generating tests - Add Claude command to analyse files and generate unit tests - Include example test for isFreeEmailDomain utility - Follow existing test patterns (Jest, it.each, edge cases) Co-Authored-By: Claude Opus 4.5 --- frontend/.claude/commands/unit-test.md | 61 +++++++++++++++++++ .../utils/__tests__/isFreeEmailDomain.test.ts | 21 +++++++ 2 files changed, 82 insertions(+) create mode 100644 frontend/.claude/commands/unit-test.md create mode 100644 frontend/common/utils/__tests__/isFreeEmailDomain.test.ts diff --git a/frontend/.claude/commands/unit-test.md b/frontend/.claude/commands/unit-test.md new file mode 100644 index 000000000000..2dee1ce41274 --- /dev/null +++ b/frontend/.claude/commands/unit-test.md @@ -0,0 +1,61 @@ +--- +description: Analyse a frontend file and generate unit tests (Jest) +--- + +Generate unit tests for the frontend file at `$ARGUMENTS`. + +**Note:** This command is for frontend code only. For backend (Python) tests, see `../api/README.md`. + +## Steps + +1. **Check for existing tests** + - Look for `__tests__/{filename}.test.ts` in the same directory + - If tests exist, analyse them for coverage gaps + +2. **Read and analyse the source file** + - Identify all exported functions, classes, and constants + - Note dependencies and imports + - Determine testability: + - Pure functions (no side effects) → highly testable + - React components → may need mocking + - Functions with external dependencies → note what needs mocking + +3. **Generate test file** + - Follow the pattern in `common/utils/__tests__/format.test.ts` + - Location: `{sourceDir}/__tests__/{filename}.test.ts` + - Use path aliases for imports (`common/...`, `components/...`) + +4. **Test structure requirements** + - Use `describe` block for each exported function + - Use `it.each` for table-driven tests when function has multiple input/output cases + - Include edge cases: `null`, `undefined`, empty strings, empty arrays + - Include boundary cases where applicable + +5. **After generating, run the tests** + ```bash + npm run test:unit -- --testPathPatterns={filename} + ``` + +## Test file pattern + +```typescript +import { functionName } from 'common/path/to/file' + +describe('functionName', () => { + it.each` + input | expected + ${value1} | ${result1} + ${value2} | ${result2} + ${null} | ${expectedForNull} + ${undefined} | ${expectedForUndefined} + `('functionName($input) returns $expected', ({ input, expected }) => { + expect(functionName(input)).toBe(expected) + }) +}) +``` + +## Reference + +See existing tests at: +- `common/utils/__tests__/format.test.ts` +- `common/utils/__tests__/featureFilterParams.test.ts` diff --git a/frontend/common/utils/__tests__/isFreeEmailDomain.test.ts b/frontend/common/utils/__tests__/isFreeEmailDomain.test.ts new file mode 100644 index 000000000000..2bc6c60830d7 --- /dev/null +++ b/frontend/common/utils/__tests__/isFreeEmailDomain.test.ts @@ -0,0 +1,21 @@ +import isFreeEmailDomain from 'common/utils/isFreeEmailDomain' + +describe('isFreeEmailDomain', () => { + it.each` + input | expected + ${'user@gmail.com'} | ${true} + ${'user@yahoo.com'} | ${true} + ${'user@hotmail.com'} | ${true} + ${'user@outlook.com'} | ${true} + ${'user@company.com'} | ${false} + ${'user@flagsmith.com'} | ${false} + ${'user@enterprise.co.uk'} | ${false} + ${null} | ${false} + ${undefined} | ${false} + ${''} | ${false} + ${'invalid-email'} | ${false} + ${'@gmail.com'} | ${true} + `('isFreeEmailDomain($input) returns $expected', ({ expected, input }) => { + expect(isFreeEmailDomain(input)).toBe(expected) + }) +}) From 72ed78728a3e07eb599794fae55a2789c572dd0d Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Tue, 27 Jan 2026 17:00:36 -0300 Subject: [PATCH 2/2] feat(frontend): add /pr-review and /find-usages commands, update README - Add /pr-review command for reviewing GitHub PRs - Add /find-usages command for impact analysis before refactoring - Add unit testing section to README.md Co-Authored-By: Claude Opus 4.5 --- frontend/.claude/commands/find-usages.md | 62 ++++++++++++++++++++++++ frontend/.claude/commands/pr-review.md | 56 +++++++++++++++++++++ frontend/README.md | 8 ++- 3 files changed, 125 insertions(+), 1 deletion(-) create mode 100644 frontend/.claude/commands/find-usages.md create mode 100644 frontend/.claude/commands/pr-review.md diff --git a/frontend/.claude/commands/find-usages.md b/frontend/.claude/commands/find-usages.md new file mode 100644 index 000000000000..557913b390f1 --- /dev/null +++ b/frontend/.claude/commands/find-usages.md @@ -0,0 +1,62 @@ +--- +description: Find all usages of a component, function, or type +--- + +Find all usages of `$ARGUMENTS` across the frontend codebase. + +## Steps + +1. **Identify what we're searching for** + - Component name (e.g., `Switch`, `Button`) + - Function name (e.g., `isFreeEmailDomain`, `formatDate`) + - Type/interface name (e.g., `FeatureState`, `ProjectFlag`) + +2. **Find the definition** + - Search for where it's defined/exported + - Note the file path and export type (default vs named) + +3. **Search for imports** + ```bash + # For named exports + grep -r "import.*{ $SYMBOL" --include="*.ts" --include="*.tsx" + + # For default exports + grep -r "import $SYMBOL" --include="*.ts" --include="*.tsx" + ``` + +4. **Search for direct usages** + - JSX usage: ` --json title,body,files,additions,deletions,state,headRefName + ``` + +2. **Get the diff** + ```bash + gh pr diff + ``` + +3. **Analyse the changes** + - Summarise what the PR does + - Check if the approach makes sense + - Identify potential issues: + - Missing edge cases + - Inconsistencies with existing patterns + - Code style issues (indentation, naming) + - Missing tests for new functionality + - Check if related files need updates + +4. **Review against project patterns** + - Does it follow patterns in `.claude/context/`? + - Are imports using path aliases (`common/`, `components/`)? + - Is state management using RTK Query where appropriate? + +5. **Provide feedback** + - Summary of what the PR does + - What's good about the approach + - Potential concerns or suggestions + - Questions for the author (if any) + +## Output format + +``` +## PR Summary +[Brief description of what the PR does] + +## Changes +[List of files changed and what each change does] + +## Assessment +✅ What looks good +⚠️ Potential concerns +💡 Suggestions + +## Questions +[Any clarifying questions for the author] +``` diff --git a/frontend/README.md b/frontend/README.md index 69e9c308d3a6..01c794b60296 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -47,7 +47,13 @@ For a full list of frontend environment variables, see the [Flagsmith documentat #### Testing -This codebase uses TestCafe for end-to-end testing. Tests are located in the `e2e/` directory. +**Unit tests** use Jest and are located in `__tests__/` directories next to source files. + +To run unit tests, run `npm run test:unit`. + +To run a specific test file: `npm run test:unit -- --testPathPatterns={filename}` + +**E2E tests** use TestCafe and are located in the `e2e/` directory. To run E2E tests (requires the API running on localhost:8000), run `npm run test`.