MetaMask / MetaMask/metamask-design-system
test: add unit tests for packages/design-system-shared/scripts/generate-icons.ts
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
Add unit tests for `packages/design-system-shared/scripts/generate-icons.ts`, the centralised icon generation script introduced in #1042. The script now owns four critical responsibilities — SVG processing, sentinel-based `IconName` injection, React Native asset generation, and React TSX component generation — but currently has no test coverage.
### **Technical Details**
Key behaviours to cover:
- **`toPascalCase`** — kebab-to-PascalCase conversion edge cases (single word, multi-word, hyphenated words like `pop-up` → `PopUp`)
- **`processSvgs`** — `black` fill replacement with `currentColor` in SVG content
- **`updateSharedIconName`**:
- Replaces only the block between `// DO NOT EDIT - generated by generate-icons.ts` and `// END generated IconName` sentinels
- Leaves content before and after the sentinels untouched
- Throws with a descriptive message when either sentinel is missing
- EOF guard: handles the case where the end sentinel is the last line with no trailing newline (without this guard `indexOf('\n', endIndex) + 1` returns `0`, causing `beforeBlock + generatedBlock + entireFile` duplication)
- **`generateReactNativeAssets`**:
- Clears stale SVGs from the output directory before copying
- Generates `Icon.assets.ts` with PascalCase keys (not `[IconName.X]` computed keys) to avoid a cross-package import that breaks the preview-build pipeline
- `import type { AssetByIconName }` is grouped with SVG imports (no blank line separator)
- **`generateReactIcons`** — generates one `.tsx` file per SVG and a correct `icons/index.ts` barrel
The test file should live at `packages/design-system-shared/scripts/generate-icons.test.ts` and use the existing Jest config in the shared package. Use `memfs` or temp directories to avoid touching the real filesystem.
### **Acceptance Criteria**
- [ ] `generate-icons.test.ts` exists at `packages/design-system-shared/scripts/`
- [ ] All four steps (`processSvgs`, `updateSharedIconName`, `generateReactNativeAssets`, `generateReactIcons`) have meaningful test coverage
- [ ] EOF sentinel edge case is explicitly tested
- [ ] Missing-sentinel error paths are tested
- [ ] Stale SVG cleanup in `generateReactNativeAssets` is tested
- [ ] PascalCase key format in generated `Icon.assets.ts` is tested
- [ ] `yarn workspace @metamask/design-system-shared run test` passes with coverage thresholds met
### **References**
- #1042 — PR that introduced `generate-icons.ts`
- `packages/design-system-shared/scripts/generate-icons.ts`
- `packages/design-system-shared/jest.config.js`
Contributor guide
Research direction
Start with packages/design-system-shared/scripts/generate-icons.ts and packages/design-system-shared/jest.config.js, then run the shared package test command to inspect its setup. Add packages/design-system-shared/scripts/generate-icons.test.ts using memfs or temporary directories to cover the four named functions, including missing sentinels, EOF handling, stale SVG cleanup, and generated PascalCase keys. Done means the specified tests pass and coverage thresholds are met.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- testing, tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100