Skip to content

Commit 5b6012e

Browse files
talissoncostatalissoncosta
authored
feat(frontend): add Claude commands and update README (#6604)
1 parent 4213b50 commit 5b6012e

5 files changed

Lines changed: 207 additions & 1 deletion

File tree

‎frontend/.claude/commands/find-usages.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
description: Find all usages of a component, function, or type
3+
---
4+
5+
Find all usages of `$ARGUMENTS` across the frontend codebase.
6+
7+
## Steps
8+
9+
1. **Identify what we're searching for**
10+
- Component name (e.g., `Switch`, `Button`)
11+
- Function name (e.g., `isFreeEmailDomain`, `formatDate`)
12+
- Type/interface name (e.g., `FeatureState`, `ProjectFlag`)
13+
14+
2. **Find the definition**
15+
- Search for where it's defined/exported
16+
- Note the file path and export type (default vs named)
17+
18+
3. **Search for imports**
19+
```bash
20+
# For named exports
21+
grep -r "import.*{ $SYMBOL" --include="*.ts" --include="*.tsx"
22+
23+
# For default exports
24+
grep -r "import $SYMBOL" --include="*.ts" --include="*.tsx"
25+
```
26+
27+
4. **Search for direct usages**
28+
- JSX usage: `<ComponentName`
29+
- Function calls: `functionName(`
30+
- Type annotations: `: TypeName` or `as TypeName`
31+
32+
5. **Categorise usages**
33+
- Group by file/directory
34+
- Note the context (component, hook, utility, test)
35+
36+
## Output format
37+
38+
```
39+
## Definition
40+
[File path where it's defined]
41+
42+
## Usages (X files)
43+
44+
### components/
45+
- ComponentA.tsx:42 - Used in render
46+
- ComponentB.tsx:15 - Passed as prop
47+
48+
### pages/
49+
- FeaturePage.tsx:88 - Used in modal
50+
51+
### hooks/
52+
- useFeature.ts:12 - Called in effect
53+
54+
## Impact Assessment
55+
[Brief note on how widespread the usage is and what to consider when modifying]
56+
```
57+
58+
## Use cases
59+
60+
- Before refactoring: understand what will be affected
61+
- Before deleting: ensure nothing depends on it
62+
- Before renaming: find all places that need updates

‎frontend/.claude/commands/pr-review.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
description: Review a GitHub pull request
3+
---
4+
5+
Review the pull request at `$ARGUMENTS`.
6+
7+
## Steps
8+
9+
1. **Fetch PR details**
10+
```bash
11+
gh pr view <PR_NUMBER_OR_URL> --json title,body,files,additions,deletions,state,headRefName
12+
```
13+
14+
2. **Get the diff**
15+
```bash
16+
gh pr diff <PR_NUMBER_OR_URL>
17+
```
18+
19+
3. **Analyse the changes**
20+
- Summarise what the PR does
21+
- Check if the approach makes sense
22+
- Identify potential issues:
23+
- Missing edge cases
24+
- Inconsistencies with existing patterns
25+
- Code style issues (indentation, naming)
26+
- Missing tests for new functionality
27+
- Check if related files need updates
28+
29+
4. **Review against project patterns**
30+
- Does it follow patterns in `.claude/context/`?
31+
- Are imports using path aliases (`common/`, `components/`)?
32+
- Is state management using RTK Query where appropriate?
33+
34+
5. **Provide feedback**
35+
- Summary of what the PR does
36+
- What's good about the approach
37+
- Potential concerns or suggestions
38+
- Questions for the author (if any)
39+
40+
## Output format
41+
42+
```
43+
## PR Summary
44+
[Brief description of what the PR does]
45+
46+
## Changes
47+
[List of files changed and what each change does]
48+
49+
## Assessment
50+
✅ What looks good
51+
⚠️ Potential concerns
52+
💡 Suggestions
53+
54+
## Questions
55+
[Any clarifying questions for the author]
56+
```

‎frontend/.claude/commands/unit-test.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
description: Analyse a frontend file and generate unit tests (Jest)
3+
---
4+
5+
Generate unit tests for the frontend file at `$ARGUMENTS`.
6+
7+
**Note:** This command is for frontend code only. For backend (Python) tests, see `../api/README.md`.
8+
9+
## Steps
10+
11+
1. **Check for existing tests**
12+
- Look for `__tests__/{filename}.test.ts` in the same directory
13+
- If tests exist, analyse them for coverage gaps
14+
15+
2. **Read and analyse the source file**
16+
- Identify all exported functions, classes, and constants
17+
- Note dependencies and imports
18+
- Determine testability:
19+
- Pure functions (no side effects) → highly testable
20+
- React components → may need mocking
21+
- Functions with external dependencies → note what needs mocking
22+
23+
3. **Generate test file**
24+
- Follow the pattern in `common/utils/__tests__/format.test.ts`
25+
- Location: `{sourceDir}/__tests__/{filename}.test.ts`
26+
- Use path aliases for imports (`common/...`, `components/...`)
27+
28+
4. **Test structure requirements**
29+
- Use `describe` block for each exported function
30+
- Use `it.each` for table-driven tests when function has multiple input/output cases
31+
- Include edge cases: `null`, `undefined`, empty strings, empty arrays
32+
- Include boundary cases where applicable
33+
34+
5. **After generating, run the tests**
35+
```bash
36+
npm run test:unit -- --testPathPatterns={filename}
37+
```
38+
39+
## Test file pattern
40+
41+
```typescript
42+
import { functionName } from 'common/path/to/file'
43+
44+
describe('functionName', () => {
45+
it.each`
46+
input | expected
47+
${value1} | ${result1}
48+
${value2} | ${result2}
49+
${null} | ${expectedForNull}
50+
${undefined} | ${expectedForUndefined}
51+
`('functionName($input) returns $expected', ({ input, expected }) => {
52+
expect(functionName(input)).toBe(expected)
53+
})
54+
})
55+
```
56+
57+
## Reference
58+
59+
See existing tests at:
60+
- `common/utils/__tests__/format.test.ts`
61+
- `common/utils/__tests__/featureFilterParams.test.ts`

‎frontend/README.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,13 @@ For a full list of frontend environment variables, see the [Flagsmith documentat
4747

4848
#### Testing
4949

50-
This codebase uses TestCafe for end-to-end testing. Tests are located in the `e2e/` directory.
50+
**Unit tests** use Jest and are located in `__tests__/` directories next to source files.
51+
52+
To run unit tests, run `npm run test:unit`.
53+
54+
To run a specific test file: `npm run test:unit -- --testPathPatterns={filename}`
55+
56+
**E2E tests** use TestCafe and are located in the `e2e/` directory.
5157

5258
To run E2E tests (requires the API running on localhost:8000), run `npm run test`.
5359

‎frontend/common/utils/__tests__/isFreeEmailDomain.test.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import isFreeEmailDomain from 'common/utils/isFreeEmailDomain'
2+
3+
describe('isFreeEmailDomain', () => {
4+
it.each`
5+
input | expected
6+
${'user@gmail.com'} | ${true}
7+
${'user@yahoo.com'} | ${true}
8+
${'user@hotmail.com'} | ${true}
9+
${'user@outlook.com'} | ${true}
10+
${'user@company.com'} | ${false}
11+
${'user@flagsmith.com'} | ${false}
12+
${'user@enterprise.co.uk'} | ${false}
13+
${null} | ${false}
14+
${undefined} | ${false}
15+
${''} | ${false}
16+
${'invalid-email'} | ${false}
17+
${'@gmail.com'} | ${true}
18+
`('isFreeEmailDomain($input) returns $expected', ({ expected, input }) => {
19+
expect(isFreeEmailDomain(input)).toBe(expected)
20+
})
21+
})

0 commit comments

Comments
 (0)